scove/BABA_YAGA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
scove
2026-04-29 01:04:28 +07:00
parent 29888fadfa
commit 21c999a904
32 changed files with 1423 additions and 894 deletions
Download Patch File Download Diff File Expand all files Collapse all files

395
Assets/UI/Global.uss
View File

@@ -1,51 +1,18 @@
/* Global Styles for Hallucinate UI */
/* osu!lazer-inspired — refined for Bitcount fonts */
/* ============================================================
DESIGN TOKENS
============================================================ */
:root {
/* Fonts - Using SDF assets for crisp rendering */
--font-heading: resource("Fonts/BitcountGridDouble-VariableFont_CRSV,ELSH,ELXP,slnt,wght SDF");
--font-body: resource("Fonts/BitcountSingleInk-VariableFont_CRSV,ELSH,ELXP,SZP1,SZP2,XPN1,XPN2,YPN1,YPN2,slnt,wght SDF");
/* Colors */
--primary-color: #ffffff;
--accent-color: #00ffcc;
--background-blur: rgba(0, 0, 0, 0.7);
/* Spacing system */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
/* Surface & Borders */
--color-surface: rgba(10, 10, 10, 0.85);
--color-surface-light: rgba(255, 255, 255, 0.08);
--color-border: rgba(255, 255, 255, 0.15);
--color-border-hover: rgba(0, 255, 204, 0.5);
/* Palette — osu! inspired colors */
--color-btn-settings: #7B6EE8; /* purple */
--color-btn-join: #4DC8A0; /* teal */
--color-btn-create: #E8834D; /* orange */
--color-btn-profile: #E84D8A; /* pink */
--color-btn-exit: #666666; /* gray */
--color-btn-cancel: #FF4444; /* red */
/* Text */
--color-text-primary: rgba(255, 255, 255, 0.95);
--color-text-secondary: rgba(255, 255, 255, 0.6);
--color-text-accent: #00ffcc;
/* Border radius */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--color-surface: rgba(10, 10, 10, 0.85);
--color-text-primary: #ffffff;
--color-text-secondary: #aaaaaa;
--color-text-accent: #00ffcc;
--radius-md: 12px;
--radius-pill: 999px;
--space-4: 16px;
}
/* ============================================================
@@ -55,8 +22,11 @@
width: 100%;
height: 100%;
position: absolute;
background-color: transparent;
-unity-font-definition: var(--font-body);
background-color: rgba(0, 0, 0, 0);
color: #ffffff;
/* Fallback to TTF if SDF fails */
-unity-font: url("../Fonts/BitcountSingleInk-VariableFont_CRSV,ELSH,ELXP,SZP1,SZP2,XPN1,XPN2,YPN1,YPN2,slnt,wght.ttf");
-unity-font-definition: url("../Fonts/BitcountSingleInk-VariableFont_CRSV,ELSH,ELXP,SZP1,SZP2,XPN1,XPN2,YPN1,YPN2,slnt,wght SDF.asset");
}
/* ============================================================
@@ -65,262 +35,237 @@
.text-heading {
font-size: 32px;
-unity-font-style: bold;
color: var(--color-text-primary);
-unity-font-definition: var(--font-heading);
margin-bottom: var(--space-4);
letter-spacing: 2px;
color: #ffffff;
-unity-font: url("../Fonts/BitcountGridDouble-VariableFont_CRSV,ELSH,ELXP,slnt,wght.ttf");
-unity-font-definition: url("../Fonts/BitcountGridDouble-VariableFont_CRSV,ELSH,ELXP,slnt,wght SDF.asset");
margin-bottom: 16px;
}
.text-subheading {
font-size: 24px;
-unity-font-style: bold;
color: var(--color-text-accent);
-unity-font-definition: var(--font-heading);
margin-bottom: var(--space-3);
color: #00ffcc;
-unity-font: url("../Fonts/BitcountGridDouble-VariableFont_CRSV,ELSH,ELXP,slnt,wght.ttf");
-unity-font-definition: url("../Fonts/BitcountGridDouble-VariableFont_CRSV,ELSH,ELXP,slnt,wght SDF.asset");
margin-bottom: 12px;
}
.text-label {
font-size: 14px;
color: var(--color-text-secondary);
-unity-font-definition: var(--font-body);
font-size: 15px;
color: #aaaaaa;
-unity-font-style: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.text-body {
font-size: 16px;
color: var(--color-text-primary);
-unity-font-definition: var(--font-body);
font-size: 18px;
color: #eeeeee;
-unity-font-style: normal;
/* Giúp chữ mượt hơn */
-unity-text-outline-width: 0.1px;
-unity-text-outline-color: rgba(255, 255, 255, 0.1);
}
.text-accent {
color: var(--color-text-accent);
color: #00ffcc;
}
/* ============================================================
BUTTON — SPRING
SCROLL VIEW CUSTOMIZATION
============================================================ */
.scroll-list {
padding-right: 12px;
}
/* Ẩn background của thanh cuộn */
.unity-scroller {
background-color: transparent;
width: 6px;
}
.unity-base-slider__tracker {
background-color: transparent;
border-width: 0;
}
/* Thanh dragger mặc định: Rất mỏng và mờ */
.unity-base-slider__dragger {
background-color: rgba(0, 255, 204, 0.3);
border-radius: 3px;
width: 3px;
left: 1.5px;
border-width: 0;
transition-property: width, background-color, left;
transition-duration: 0.2s;
}
/* Khi di chuột vào vùng scroller: Phình to ra */
.unity-scroller:hover .unity-base-slider__dragger {
background-color: rgba(0, 255, 204, 0.8);
width: 6px;
left: 0;
}
/* Ẩn các nút mũi tên lên xuống của scrollbar cho đẹp */
.unity-scroller__low-button, .unity-scroller__high-button {
display: none;
}
/* ============================================================
BUTTONS
============================================================ */
.button-spring {
height: 48px;
padding-left: var(--space-6);
padding-right: var(--space-6);
border-radius: var(--radius-md);
padding: 0 24px;
border-radius: 12px;
border-width: 0;
-unity-font-definition: var(--font-body);
-unity-font-style: bold;
font-size: 16px;
color: white;
background-color: var(--color-surface-light);
transition-property: scale, background-color, border-color;
color: #ffffff;
background-color: rgba(255, 255, 255, 0.1);
transition-duration: 0.1s;
transition-timing-function: ease-out-back;
cursor: link;
align-items: center;
justify-content: center;
}
.button-spring:hover {
scale: 1.05;
background-color: rgba(255, 255, 255, 0.15);
border-width: 1px;
border-color: var(--color-border-hover);
background-color: rgba(255, 255, 255, 0.2);
}
.button-spring:active {
scale: 0.95;
}
/* Per-button accent colors */
.btn-settings { background-color: var(--color-btn-settings); }
.btn-join { background-color: var(--color-btn-join); }
.btn-create { background-color: var(--color-btn-create); }
.btn-profile { background-color: var(--color-btn-profile); }
.btn-exit { background-color: var(--color-btn-exit); }
.btn-cancel { background-color: var(--color-btn-cancel); }
.btn-settings { background-color: #7B6EE8; }
.btn-join { background-color: #4DC8A0; }
.btn-create { background-color: #E8834D; }
.btn-profile { background-color: #E84D8A; }
.btn-exit { background-color: #666666; }
/* ============================================================
RIBBON — dải băng main menu
============================================================ */
.ribbon {
flex-direction: row;
align-items: center;
justify-content: center;
background-color: var(--color-surface);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-pill);
border-width: 2px;
border-color: var(--color-border);
}
.ribbon .button-spring {
margin-left: var(--space-2);
margin-right: var(--space-2);
min-width: 110px;
height: 54px;
}
/* ============================================================
LOGO
============================================================ */
.logo-pulse {
width: 200px;
height: 200px;
align-self: center;
justify-content: center;
border-radius: var(--radius-pill);
border-width: 4px;
border-color: var(--color-border-hover);
background-color: white;
overflow: hidden;
}
.logo-text {
-unity-font-definition: var(--font-heading);
font-size: 40px;
color: black;
-unity-font-style: bold;
}
/* ============================================================
SURFACE / PANEL
UTILITY
============================================================ */
.panel-glass {
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border-radius: 20px;
border-width: 2px;
border-color: var(--color-border);
padding: var(--space-8);
border-color: rgba(255, 255, 255, 0.15);
}
.panel-glass--right {
width: 40%;
height: 100%;
border-radius: 0;
border-top-left-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-left-width: 3px;
border-left-color: var(--color-text-accent);
border-left-color: #00ffcc;
}
/* ============================================================
INPUT FIELD
============================================================ */
.input-field {
height: 48px;
border-radius: var(--radius-md);
border-radius: 12px;
border-width: 1px;
border-color: var(--color-border);
background-color: var(--color-surface-light);
color: var(--color-text-primary);
-unity-font-definition: var(--font-body);
font-size: 16px;
padding-left: var(--space-4);
margin-bottom: var(--space-4);
}
.input-field:focus {
border-color: var(--color-text-accent);
background-color: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.15);
background-color: rgba(255, 255, 255, 0.08);
color: #ffffff;
padding-left: 16px;
margin-bottom: 16px;
}
.unity-base-text-field__input {
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
border-width: 0;
}
.radius-pill { border-radius: 999px; }
.ribbon {
flex-direction: row;
height: 120px;
width: 100%;
background-color: rgba(10, 10, 10, 0.95);
border-top-width: 2px;
border-bottom-width: 2px;
border-top-color: #00ffcc;
border-bottom-color: #00ffcc;
align-items: center;
justify-content: center;
padding: 0 50px;
position: absolute;
top: 50%;
translate: 0 -50%;
}
.bg-dark-50 { background-color: rgba(0, 0, 0, 0.5); }
.border-default { border-color: rgba(255, 255, 255, 0.15); }
.border-accent { border-color: #00ffcc; }
.text-color-accent { color: #00ffcc; }
/* ============================================================
SIDEBAR (Settings)
SETTINGS & REBINDING
============================================================ */
.sidebar-tab {
height: 52px;
padding-left: var(--space-6);
border-radius: var(--radius-sm);
height: 50px;
background-color: transparent;
border-width: 0;
color: var(--color-text-secondary);
color: #aaaaaa;
-unity-font-style: bold;
font-size: 16px;
border-left-width: 4px;
border-left-color: transparent;
padding-left: 20px;
border-radius: 0;
margin: 5px 0;
-unity-text-align: middle-left;
margin-bottom: var(--space-2);
-unity-font-definition: var(--font-body);
}
.sidebar-tab:hover {
background-color: var(--color-surface-light);
color: var(--color-text-primary);
color: #ffffff;
background-color: rgba(255, 255, 255, 0.05);
}
.sidebar-tab.active-tab {
background-color: rgba(123, 110, 232, 0.2);
color: var(--color-text-accent);
border-left-color: var(--color-text-accent);
border-left-width: 4px;
border-radius: 0;
border-top-right-radius: var(--radius-sm);
border-bottom-right-radius: var(--radius-sm);
.active-tab {
color: #00ffcc;
border-left-color: #00ffcc;
background-color: rgba(0, 255, 204, 0.1);
}
/* ============================================================
HUD
============================================================ */
.hud-bar {
height: 24px;
border-radius: var(--radius-pill);
border-width: 2px;
border-color: var(--color-border);
background-color: rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.unity-progress-bar__container {
height: 100%;
min-height: 100%;
}
.unity-progress-bar__background {
background-color: transparent;
border-width: 0;
}
.unity-progress-bar__progress {
border-radius: var(--radius-pill);
}
#HealthBar .unity-progress-bar__progress { background-color: #ff4444; }
#StaminaBar .unity-progress-bar__progress { background-color: #44ff44; }
.hud-slot {
width: 64px;
height: 64px;
border-radius: var(--radius-md);
border-width: 2px;
border-color: var(--color-border);
background-color: var(--color-surface);
margin-right: var(--space-2);
}
.hud-slot--active {
width: 80px;
height: 80px;
border-color: var(--color-text-accent);
border-width: 3px;
}
/* ============================================================
ROOM ITEM
============================================================ */
.room-item {
height: 80px;
margin-bottom: var(--space-3);
border-radius: var(--radius-md);
background-color: var(--color-surface-light);
border-width: 1px;
border-color: var(--color-border);
padding: 0 var(--space-4);
.rebind-row {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background-color: rgba(255, 255, 255, 0.03);
border-radius: 8px;
margin-bottom: 4px;
}
.room-item:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: var(--color-text-accent);
.rebind-label {
font-size: 14px;
color: #dddddd;
}
.rebind-button {
width: 120px;
height: 32px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 6px;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.2);
color: #00ffcc;
font-size: 12px;
-unity-font-style: bold;
}
.rebind-button:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.setting-section-header {
margin-top: 24px;
margin-bottom: 8px;
font-size: 12px;
color: #888888;
-unity-font-style: bold;
border-bottom-width: 1px;
border-bottom-color: rgba(255, 255, 255, 0.1);
padding-bottom: 4px;
}

68
Assets/UI/Lobby.uxml
View File

@@ -2,82 +2,82 @@
<Style src="project:/Assets/UI/Global.uss" />
<ui:VisualElement name="LobbyRoot" class="screen-root" style="flex-direction: row;">
<!-- Left Pane: 3D Character View -->
<ui:VisualElement name="LeftPane" style="width: 60%; background-color: transparent;" />
<ui:VisualElement name="LeftPane" style="width: 60%; background-color: rgba(0, 0, 0, 0);" />
<!-- 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;">
<ui:VisualElement name="RightPane" class="panel-glass--right">
<!-- 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:Label text="FIND SESSIONS" class="text-heading" />
<ui:TextField name="SearchInput" class="input-field" placeholder-text="Search room by name..." />
<ui:ScrollView name="RoomList" style="flex-grow: 1; margin-top: 15px; margin-bottom: 15px;" />
<ui:ScrollView name="RoomList" class="scroll-list" 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:Button name="BackToMenuBtn" text="BACK" class="button-spring btn-exit" style="width: 48%;" />
<ui:Button name="GoToCreateBtn" text="CREATE NEW" class="button-spring btn-create" style="width: 48%;" />
</ui:VisualElement>
</ui:VisualElement>
<!-- 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="CREATE SESSION" class="text-heading" />
<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 ID (Required)" class="text-label" />
<ui:TextField name="RoomIDInput" class="input-field" 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:Label text="ROOM NAME (Optional)" class="text-label" />
<ui:TextField name="RoomNameInput" class="input-field" 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:Toggle name="PassToggle" label="REQUIRE PASSWORD" class="text-body" style="margin-top: 10px; margin-bottom: 10px;" />
<ui:TextField name="RoomPassInput" password="true" class="input-field" 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:Button name="CancelCreateBtn" text="CANCEL" class="button-spring btn-exit" style="width: 48%;" />
<ui:Button name="ConfirmCreateBtn" text="CREATE" class="button-spring btn-join" style="width: 48%;" />
</ui:VisualElement>
</ui:VisualElement>
<!-- 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:Label name="LoungeTitle" text="SESSION NAME" class="text-heading" />
<ui:Label name="LoungeID" text="ID: 12345" class="text-label" style="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 name="HostSlot" class="panel-glass border-create" style="flex-grow: 1; margin: 5px; padding: 15px; align-items: center;">
<ui:VisualElement name="HostAvatar" class="border-create" style="width: 80px; height: 80px; border-radius: 40px; background-color: #333; border-width: 2px;" />
<ui:Label name="HostName" text="HOST" class="text-body" style="-unity-font-style: bold; margin-top: 10px;" />
<ui:Label name="HostReadyStatus" text="NOT READY" class="text-label" style="color: #ff4444;" />
</ui:VisualElement>
<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="GuestSlot" class="panel-glass" style="flex-grow: 1; margin: 5px; padding: 15px; 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:Label name="GuestName" text="WAITING..." class="text-body" style="margin-top: 10px; color: #555;" />
<ui:Label name="GuestReadyStatus" text="-" class="text-label" />
</ui:VisualElement>
</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:Button name="ReadyToggleBtn" text="READY" class="button-spring" style="height: 56px; margin-top: 20px;" />
<ui:Button name="StartGameBtn" text="START GAME" class="button-spring btn-join" style="height: 64px; 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:VisualElement class="panel-glass" style="width: 400px;">
<ui:Label text="PROTECTED SESSION" class="text-subheading" style="align-self: center;" />
<ui:Label text="This room requires a password" class="text-label" style="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:TextField name="JoinPassInput" password="true" class="input-field" placeholder-text="Enter password..." />
<ui:Label name="JoinPassError" text="Incorrect password!" class="text-label" style="color: #ff4444; 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:Button name="ClosePassBtn" text="CANCEL" class="button-spring btn-exit" style="width: 48%;" />
<ui:Button name="ConfirmJoinBtn" text="JOIN" class="button-spring btn-join" style="width: 48%;" />
</ui:VisualElement>
</ui:VisualElement>
</ui:VisualElement>

14
Assets/UI/LoginPopup.uxml
View File

@@ -1,14 +1,14 @@
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
<Style src="project:/Assets/UI/Global.uss" />
<ui:VisualElement name="LoginRoot" class="screen-root" style="background-color: rgba(0, 0, 0, 0.85); justify-content: center; align-items: center;">
<ui:VisualElement name="Window" style="width: 400px; padding: 30px; background-color: #1a1a1a; border-radius: 15px; border-width: 2px; border-color: #333;">
<ui:Label text="WELCOME TRAVELLER" style="font-size: 24px; -unity-font-style: bold; color: white; align-self: center; margin-bottom: 10px;" />
<ui:Label text="Enter your username to begin" style="font-size: 14px; color: #888; align-self: center; margin-bottom: 25px;" />
<ui:VisualElement name="LoginRoot" class="screen-root" style="background-color: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center;">
<ui:VisualElement name="Window" class="panel-glass" style="width: 450px;">
<ui:Label text="WELCOME TRAVELLER" class="text-heading" style="align-self: center;" />
<ui:Label text="Enter your username to begin" class="text-label" style="align-self: center; margin-bottom: 30px;" />
<ui:TextField name="UsernameInput" placeholder-text="Your name..." style="margin-bottom: 10px;" />
<ui:Label name="ErrorMsg" text="Name is already taken!" style="color: #ff4444; font-size: 12px; display: none; margin-bottom: 10px;" />
<ui:TextField name="UsernameInput" class="input-field" placeholder-text="Your name..." />
<ui:Label name="ErrorMsg" text="Name is already taken!" class="text-label" style="color: #ff4444; display: none; margin-bottom: 10px;" />
<ui:Button name="ConfirmBtn" text="CONFIRM" class="button-spring" style="height: 45px; background-color: #00ffcc; color: black; -unity-font-style: bold; margin-top: 10px;" />
<ui:Button name="ConfirmBtn" text="CONFIRM" class="button-spring btn-join" style="height: 54px; margin-top: 10px;" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>

31
Assets/UI/MainGameHUD.uxml
View File

@@ -1,26 +1,29 @@
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
<Style src="project:/Assets/UI/Global.uss" />
<ui:VisualElement name="HUD_Root" class="screen-root" picking-mode="Ignore">
<ui:VisualElement name="TopLeft" picking-mode="Ignore" style="position: absolute; top: 20px; left: 20px; width: 300px;">
<ui:ProgressBar name="HealthBar" title="HEALTH" value="100" style="margin-bottom: 5px;" />
<ui:ProgressBar name="StaminaBar" title="STAMINA" value="100" />
<ui:VisualElement name="TopLeft" picking-mode="Ignore" style="position: absolute; top: 30px; left: 30px; width: 350px;">
<ui:Label text="HEALTH" class="text-label" style="color: #ff4444; margin-bottom: 2px;" />
<ui:ProgressBar name="HealthBar" value="100" class="hud-bar" />
<ui:Label text="STAMINA" class="text-label" style="color: #44ff44; margin-top: 10px; margin-bottom: 2px;" />
<ui:ProgressBar name="StaminaBar" value="100" class="hud-bar" />
</ui:VisualElement>
<ui:VisualElement name="TopRight" picking-mode="Ignore" style="position: absolute; top: 20px; right: 20px; width: 200px; height: 200px; background-color: rgba(0, 0, 0, 0.5); border-radius: 10px; border-width: 2px; border-color: white;">
<ui:Label text="MINIMAP" style="align-self: center; margin-top: 80px;" />
<ui:VisualElement name="TopRight" picking-mode="Ignore" class="panel-glass" style="position: absolute; top: 30px; right: 30px; width: 220px; height: 220px; padding: 0; justify-content: center; align-items: center; border-color: rgba(255, 255, 255, 0.3);">
<ui:Label text="MINIMAP" class="text-label" />
</ui:VisualElement>
<ui:VisualElement name="BottomLeft" picking-mode="Ignore" style="position: absolute; bottom: 20px; left: 20px; flex-direction: row; align-items: flex-end;">
<ui:VisualElement name="MainSlot" style="width: 80px; height: 80px; background-color: rgba(255, 255, 255, 0.1); border-width: 2px; border-color: white; margin-right: 10px;" />
<ui:VisualElement name="QuickSlot1" style="width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.1); border-width: 1px; border-color: gray; margin-right: 5px;" />
<ui:VisualElement name="QuickSlot2" style="width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.1); border-width: 1px; border-color: gray; margin-right: 5px;" />
<ui:VisualElement name="QuickSlot3" style="width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.1); border-width: 1px; border-color: gray;" />
<ui:VisualElement name="BottomLeft" picking-mode="Ignore" style="position: absolute; bottom: 30px; left: 30px; flex-direction: row; align-items: flex-end;">
<ui:VisualElement name="MainSlot" class="hud-slot hud-slot--active" />
<ui:VisualElement name="QuickSlot1" class="hud-slot" />
<ui:VisualElement name="QuickSlot2" class="hud-slot" />
<ui:VisualElement name="QuickSlot3" class="hud-slot" />
</ui:VisualElement>
<ui:VisualElement name="BottomCenter" picking-mode="Ignore" style="position: absolute; bottom: 10px; width: 100%; align-items: center;">
<ui:VisualElement style="flex-direction: row; background-color: rgba(0, 0, 0, 0.3); padding: 2px 10px; border-radius: 5px;">
<ui:Label name="PingLabel" text="PING: 25ms" style="font-size: 12px; margin-right: 15px;" />
<ui:Label name="FPSLabel" text="FPS: 144" style="font-size: 12px;" />
<ui:VisualElement name="BottomCenter" picking-mode="Ignore" style="position: absolute; bottom: 15px; width: 100%; align-items: center;">
<ui:VisualElement class="radius-pill border-default bg-dark-50" style="flex-direction: row; padding: 4px 16px; border-width: 1px;">
<ui:Label name="PingLabel" text="PING: 25ms" class="text-body text-color-accent" style="font-size: 12px; margin-right: 20px;" />
<ui:Label name="FPSLabel" text="FPS: 144" class="text-body" style="font-size: 12px;" />
</ui:VisualElement>
</ui:VisualElement>
</ui:VisualElement>

21
Assets/UI/MainMenu.uxml
View File

@@ -1,20 +1,17 @@
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
<Style src="project:/Assets/UI/Global.uss" />
<ui:VisualElement name="MainMenuRoot" class="screen-root" picking-mode="Position">
<ui:VisualElement name="MenuContainer" picking-mode="Position" style="flex-grow: 1; justify-content: center; align-items: center;">
<ui:VisualElement name="Ribbon" picking-mode="Position" style="flex-direction: row; display: none; background-color: rgba(0, 0, 0, 0.8); padding: 5px 20px; border-radius: 10px; align-items: center; justify-content: center;">
<ui:Button name="SettingsBtn" text="Settings" class="button-spring" style="width: 100px; height: 50px;" />
<ui:VisualElement name="LogoSpace" style="width: 120px; height: 50px; background-color: transparent; margin: 0 10px;" />
<ui:Button name="JoinBtn" text="Join" class="button-spring" style="width: 100px; height: 50px;" />
<ui:Button name="CreateBtn" text="Create" class="button-spring" style="width: 100px; height: 50px;" />
<ui:Button name="ProfileBtn" text="Profile" class="button-spring" style="width: 100px; height: 50px;" />
<ui:Button name="ExitBtn" text="Exit" class="button-spring" style="width: 100px; height: 50px;" />
</ui:VisualElement>
<ui:VisualElement name="Ribbon" class="ribbon" picking-mode="Position" style="display: none; opacity: 0;">
<ui:Button name="SettingsBtn" text="SETTINGS" class="button-spring btn-settings" />
<ui:VisualElement name="LogoSpace" style="width: 100px; height: 100px; background-color: transparent; margin: 0 40px;" />
<ui:Button name="JoinBtn" text="JOIN" class="button-spring btn-join" />
<ui:Button name="CreateBtn" text="CREATE" class="button-spring btn-create" />
<ui:Button name="ProfileBtn" text="PROFILE" class="button-spring btn-profile" />
<ui:Button name="ExitBtn" text="EXIT" class="button-spring btn-exit" />
</ui:VisualElement>
<!-- Đặt Logo ở giữa màn hình mặc định bằng Percent và Translate -->
<ui:VisualElement name="Logo" class="logo-pulse" picking-mode="Position" style="background-color: white; border-radius: 100px; position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; translate: -100px -100px;">
<ui:Label text="LOGO" picking-mode="Ignore" style="color: black; align-self: center;" />
<ui:VisualElement name="Logo" class="logo-pulse" picking-mode="Position" style="position: absolute; left: 50%; top: 50%; translate: -100px -100px;">
<ui:Label text="HALLUCINATE" class="logo-text" picking-mode="Ignore" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>

25
Assets/UI/Profile.uxml
View File

@@ -1,27 +1,28 @@
<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="ProfileRoot" class="screen-root" style="flex-direction: row;">
<ui:VisualElement name="LeftPane" style="width: 50%; background-color: transparent;" />
<ui:VisualElement name="RightPane" style="width: 50%; background-color: rgba(0, 0, 0, 0.7); padding: 40px;">
<ui:VisualElement name="LeftPane" style="width: 60%; background-color: rgba(0, 0, 0, 0);" />
<ui:VisualElement name="RightPane" class="panel-glass--right">
<ui:VisualElement name="Header" style="flex-direction: row; align-items: center; margin-bottom: 30px;">
<ui:VisualElement name="Avatar" style="width: 100px; height: 100px; border-radius: 50px; background-color: gray; margin-right: 20px;" />
<ui:VisualElement name="Avatar" class="border-accent" style="width: 100px; height: 100px; border-radius: 50px; background-color: gray; margin-right: 20px; border-width: 3px;" />
<ui:VisualElement>
<ui:Label name="Username" text="Player One" style="font-size: 32px; -unity-font-style: bold;" />
<ui:Label name="Rank" text="MASTER III" style="color: gold;" />
<ui:Label name="Username" text="Player One" class="text-heading" style="margin-bottom: 0;" />
<ui:Label name="Rank" text="MASTER III" class="text-subheading" style="font-size: 18px;" />
</ui:VisualElement>
</ui:VisualElement>
<ui:VisualElement name="Stats" style="margin-bottom: 30px;">
<ui:Label text="WIN RATE" />
<ui:ProgressBar name="WinRateBar" value="65" />
<ui:Label name="WinRateText" text="65%" style="align-self: flex-end;" />
<ui:Label text="WIN RATE" class="text-label" />
<ui:ProgressBar name="WinRateBar" value="65" class="hud-bar" />
<ui:Label name="WinRateText" text="65%" class="text-body" style="align-self: flex-end; -unity-font-style: bold;" />
</ui:VisualElement>
<ui:ScrollView name="Inventory" style="flex-grow: 1; background-color: rgba(255, 255, 255, 0.05); padding: 10px;">
<ui:Label text="INVENTORY" style="margin-bottom: 10px;" />
<ui:ScrollView name="Inventory" class="scroll-list bg-surface-light radius-md" style="flex-grow: 1; padding: 10px;">
<ui:Label text="INVENTORY" class="text-label" style="margin-bottom: 10px;" />
<!-- Skin items will go here -->
</ui:ScrollView>
<ui:Button name="BackBtn" text="BACK" class="button-spring" style="margin-top: 20px;" />
<ui:Button name="BackBtn" text="BACK" class="button-spring btn-exit" style="margin-top: 20px;" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>

17
Assets/UI/RoomItem.uxml
View File

@@ -1,21 +1,22 @@
<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);">
<Style src="project:/Assets/UI/Global.uss" />
<ui:VisualElement name="RoomItemRoot" class="room-item">
<!-- 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;" />
<ui:VisualElement name="HostAvatar" class="border-accent" style="width: 54px; height: 54px; border-radius: 27px; background-color: #333; margin-right: 15px; border-width: 2px;" />
<!-- 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:Label name="RoomName" text="ROOM NAME" class="text-body" style="-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:Label name="PlayerCount" text="1/2" class="text-label text-color-secondary" style="margin-right: 10px;" />
<ui:Label name="StatusBadge" text="WAITING" class="text-label" style="background-color: #0088ff; color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px;" />
</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 name="ActionArea" style="width: 100px; align-items: flex-end;">
<ui:Label name="LockIcon" text="🔒" class="text-body" style="display: none; font-size: 18px; margin-bottom: 5px;" />
<ui:Button name="JoinBtn" text="JOIN" class="button-spring btn-join" style="width: 80px; height: 40px; font-size: 14px;" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>

26
Assets/UI/Settings.uxml
View File

@@ -1,21 +1,23 @@
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
<Style src="project:/Assets/UI/Global.uss" />
<ui:VisualElement name="SettingsRoot" class="screen-root" picking-mode="Position" style="background-color: rgba(0, 0, 0, 0.5); justify-content: flex-start;">
<ui:VisualElement name="Sidebar" picking-mode="Position" style="width: 400px; height: 100%; background-color: #1a1a1a; flex-direction: row;">
<ui:VisualElement name="SettingsRoot" class="screen-root" picking-mode="Position" style="background-color: rgba(0, 0, 0, 0.7); justify-content: flex-start;">
<ui:VisualElement name="Sidebar" picking-mode="Position" class="panel-glass border-accent" style="width: 500px; height: 100%; flex-direction: row; padding: 0; border-radius: 0; border-right-width: 2px;">
<!-- Tabs -->
<ui:VisualElement name="TabsColumn" style="width: 30%; background-color: #111; padding-top: 50px;">
<ui:Button name="GeneralTab" text="General" class="button-spring" style="margin: 5px;" />
<ui:Button name="VideoTab" text="Video" class="button-spring" style="margin: 5px;" />
<ui:Button name="SoundTab" text="Sound" class="button-spring" style="margin: 5px;" />
<ui:Button name="ControlTab" text="Control" class="button-spring" style="margin: 5px;" />
<ui:Button name="CloseSettingsBtn" text="BACK" class="button-spring" style="margin-top: auto; margin-bottom: 20px;" />
<ui:VisualElement name="TabsColumn" style="width: 35%; background-color: rgba(0, 0, 0, 0.3); padding-top: 60px;">
<ui:Button name="GeneralTab" text="GENERAL" class="sidebar-tab active-tab" />
<ui:Button name="VideoTab" text="VIDEO" class="sidebar-tab" />
<ui:Button name="SoundTab" text="SOUND" class="sidebar-tab" />
<ui:Button name="ControlTab" text="CONTROL" class="sidebar-tab" />
<ui:VisualElement style="flex-grow: 1;" />
<ui:Button name="CloseSettingsBtn" text="BACK" class="button-spring btn-exit" style="margin: 20px;" />
</ui:VisualElement>
<!-- Details -->
<ui:VisualElement name="DetailsColumn" style="width: 70%; padding: 20px;">
<ui:Label name="TabTitle" text="GENERAL" style="font-size: 24px; -unity-font-style: bold; margin-bottom: 20px;" />
<ui:ScrollView name="SettingsContent" style="flex-grow: 1;">
<!-- Content -->
<ui:VisualElement name="DetailsColumn" style="width: 65%; padding: 40px;">
<ui:Label name="TabTitle" text="GENERAL" class="text-heading" />
<ui:ScrollView name="SettingsContent" class="scroll-list" style="flex-grow: 1;">
<!-- Content will be injected here -->
</ui:ScrollView>
</ui:VisualElement>
</ui:VisualElement>