This commit is contained in:
2026-04-28 19:04:09 +07:00
parent 9484f1f1d4
commit 6a5baedced
7 changed files with 321 additions and 330 deletions

View File

@@ -1,38 +1,86 @@
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False"> <Style src="project:/Assets/UI/Global.uss" />
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
<Style src="project:/Assets/UI/Global.uss" />
<ui:VisualElement name="LobbyRoot" class="screen-root" style="flex-direction: row;">
<!-- Left Pane: Placeholder for 3D Character -->
<ui:VisualElement name="LeftPane" style="width: 60%; height: 100%; background-color: transparent;" />
<!-- Left Pane: 3D Character View -->
<ui:VisualElement name="LeftPane" style="width: 60%; background-color: transparent;" />
<!-- Right Pane: Glass UI -->
<ui:VisualElement name="RightPane" style="width: 40%; height: 100%; background-color: rgba(255, 255, 255, 0.1); border-left-width: 2px; border-left-color: rgba(255, 255, 255, 0.2);">
<ui:VisualElement name="JoinContainer" style="flex-grow: 1; padding: 20px;">
<ui:Label text="JOIN ROOM" style="font-size: 30px; -unity-font-style: bold;" />
<ui:TextField label="Search" name="SearchRoom" />
<ui:ScrollView name="RoomList" style="flex-grow: 1; margin-top: 10px;" />
<ui:Button name="BackToMenuBtn" text="Back" class="button-spring" />
<!-- Right Pane: UI Content -->
<ui:VisualElement name="RightPane" style="width: 40%; background-color: rgba(0, 0, 0, 0.85); padding: 30px; border-left-width: 1px; border-left-color: #333;">
<!-- JOIN VIEW -->
<ui:VisualElement name="JoinContainer" style="flex-grow: 1;">
<ui:Label text="FIND SESSIONS" style="font-size: 28px; -unity-font-style: bold; color: #00ffcc; margin-bottom: 20px;" />
<ui:TextField name="SearchInput" placeholder-text="Search room by name..." />
<ui:ScrollView name="RoomList" style="flex-grow: 1; margin-top: 15px; margin-bottom: 15px;" />
<ui:VisualElement style="flex-direction: row; justify-content: space-between;">
<ui:Button name="BackToMenuBtn" text="BACK" class="button-spring" style="width: 48%;" />
<ui:Button name="GoToCreateBtn" text="CREATE NEW" class="button-spring" style="width: 48%; background-color: #333; color: white;" />
</ui:VisualElement>
</ui:VisualElement>
<ui:VisualElement name="CreateContainer" style="flex-grow: 1; padding: 20px; display: none;">
<ui:Label text="CREATE ROOM" style="font-size: 30px; -unity-font-style: bold;" />
<ui:TextField label="Room Name" name="RoomNameInput" />
<ui:Toggle label="Password Protected" name="PasswordToggle" />
<ui:Button name="CreateRoomFinalBtn" text="CREATE" class="button-spring" style="height: 60px; margin-top: auto;" />
<!-- CREATE VIEW -->
<ui:VisualElement name="CreateContainer" style="flex-grow: 1; display: none;">
<ui:Label text="CREATE SESSION" style="font-size: 28px; -unity-font-style: bold; color: #00ffcc; margin-bottom: 20px;" />
<ui:Label text="ROOM ID (Required)" style="font-size: 12px; color: #888; margin-top: 10px;" />
<ui:TextField name="RoomIDInput" placeholder-text="e.g. ROOM_123" />
<ui:Label text="ROOM NAME (Optional)" style="font-size: 12px; color: #888; margin-top: 10px;" />
<ui:TextField name="RoomNameInput" placeholder-text="e.g. Pro Match Only" />
<ui:Toggle name="PassToggle" label="REQUIRE PASSWORD" style="margin-top: 20px;" />
<ui:TextField name="RoomPassInput" password="true" placeholder-text="Password..." style="display: none;" />
<ui:VisualElement style="flex-grow: 1;" />
<ui:VisualElement style="flex-direction: row; justify-content: space-between; margin-top: 20px;">
<ui:Button name="CancelCreateBtn" text="CANCEL" class="button-spring" style="width: 48%;" />
<ui:Button name="ConfirmCreateBtn" text="CREATE" class="button-spring" style="width: 48%; background-color: #00ffcc; color: black; -unity-font-style: bold;" />
</ui:VisualElement>
</ui:VisualElement>
<ui:VisualElement name="LoungeContainer" style="flex-grow: 1; padding: 20px; display: none;">
<ui:Label text="LOUNGE" style="font-size: 30px; -unity-font-style: bold;" />
<ui:VisualElement style="flex-direction: row; flex-grow: 1;">
<ui:VisualElement name="HostSlot" style="flex-grow: 1; background-color: rgba(0, 0, 255, 0.2); margin: 5px; padding: 10px;">
<ui:Label text="HOST" />
<ui:Toggle label="Ready" name="HostReady" />
<!-- LOUNGE VIEW -->
<ui:VisualElement name="LoungeContainer" style="flex-grow: 1; display: none;">
<ui:Label name="LoungeTitle" text="SESSION NAME" style="font-size: 24px; -unity-font-style: bold; color: #00ffcc;" />
<ui:Label name="LoungeID" text="ID: 12345" style="font-size: 12px; color: #888; margin-bottom: 30px;" />
<ui:VisualElement style="flex-direction: row; flex-grow: 1;">
<ui:VisualElement name="HostSlot" style="flex-grow: 1; background-color: rgba(255, 255, 255, 0.05); margin: 5px; padding: 15px; border-radius: 10px; align-items: center;">
<ui:VisualElement name="HostAvatar" style="width: 80px; height: 80px; border-radius: 40px; background-color: #333;" />
<ui:Label name="HostName" text="HOST" style="margin-top: 10px; -unity-font-style: bold;" />
<ui:Label name="HostReadyStatus" text="NOT READY" style="color: #ff4444; font-size: 10px;" />
</ui:VisualElement>
<ui:VisualElement name="GuestSlot" style="flex-grow: 1; background-color: rgba(255, 165, 0, 0.2); margin: 5px; padding: 10px;">
<ui:Label text="GUEST" />
<ui:Toggle label="Ready" name="GuestReady" />
<ui:VisualElement name="GuestSlot" style="flex-grow: 1; background-color: rgba(255, 255, 255, 0.05); margin: 5px; padding: 15px; border-radius: 10px; align-items: center;">
<ui:VisualElement name="GuestAvatar" style="width: 80px; height: 80px; border-radius: 40px; background-color: #333;" />
<ui:Label name="GuestName" text="WAITING..." style="margin-top: 10px; color: #555;" />
<ui:Label name="GuestReadyStatus" text="-" style="color: #555; font-size: 10px;" />
</ui:VisualElement>
</ui:VisualElement>
<ui:Button name="StartGameBtn" text="START GAME" class="button-spring" style="height: 60px;" />
</ui:VisualElement>
<ui:Button name="ReadyToggleBtn" text="READY" class="button-spring" style="height: 50px; margin-top: 20px;" />
<ui:Button name="StartGameBtn" text="START GAME" class="button-spring" style="height: 60px; background-color: #00ffcc; color: black; -unity-font-style: bold; margin-top: 10px;" />
</ui:VisualElement>
</ui:VisualElement>
<!-- PASSWORD OVERLAY -->
<ui:VisualElement name="PasswordOverlay" style="position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; display: none;">
<ui:VisualElement style="width: 350px; padding: 25px; background-color: #1a1a1a; border-radius: 15px; border-width: 2px; border-color: #333;">
<ui:Label text="PROTECTED SESSION" style="font-size: 20px; -unity-font-style: bold; color: white; align-self: center;" />
<ui:Label text="This room requires a password" style="font-size: 12px; color: #888; align-self: center; margin-bottom: 20px;" />
<ui:TextField name="JoinPassInput" password="true" placeholder-text="Enter password..." />
<ui:Label name="JoinPassError" text="Incorrect password!" style="color: #ff4444; font-size: 10px; margin-bottom: 10px; display: none;" />
<ui:VisualElement style="flex-direction: row; justify-content: space-between; margin-top: 10px;">
<ui:Button name="ClosePassBtn" text="CANCEL" class="button-spring" style="width: 48%;" />
<ui:Button name="ConfirmJoinBtn" text="JOIN" class="button-spring" style="width: 48%; background-color: #00ffcc; color: black;" />
</ui:VisualElement>
</ui:VisualElement>
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>

21
Assets/UI/RoomItem.uxml Normal file
View File

@@ -0,0 +1,21 @@
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
<ui:VisualElement name="RoomItemRoot" style="flex-direction: row; height: 80px; background-color: rgba(255, 255, 255, 0.05); margin-bottom: 8px; border-radius: 8px; padding: 10px; align-items: center; border-width: 1px; border-color: rgba(255, 255, 255, 0.1);">
<!-- Avatar chủ phòng -->
<ui:VisualElement name="HostAvatar" style="width: 60px; height: 60px; border-radius: 30px; background-color: #333; margin-right: 15px; border-width: 2px; border-color: #00ffcc;" />
<!-- Thông tin phòng -->
<ui:VisualElement style="flex-grow: 1;">
<ui:Label name="RoomName" text="ROOM NAME" style="font-size: 18px; -unity-font-style: bold; color: white;" />
<ui:VisualElement style="flex-direction: row; align-items: center;">
<ui:Label name="PlayerCount" text="1/2" style="color: #888; font-size: 12px; margin-right: 10px;" />
<ui:Label name="StatusBadge" text="WAITING" style="background-color: #0088ff; color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px;" />
</ui:VisualElement>
</ui:VisualElement>
<!-- Nút Join / Trạng thái -->
<ui:VisualElement name="ActionArea" style="width: 80px; align-items: flex-end;">
<ui:Label name="LockIcon" text="🔒" style="display: none; font-size: 16px; margin-bottom: 5px;" />
<ui:Button name="JoinBtn" text="JOIN" class="button-spring" style="width: 70px; height: 35px; background-color: #00ffcc; color: black; -unity-font-style: bold;" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>