Update

2026-04-28 18:49:05 +07:00
parent f4f345b412
commit 9484f1f1d4
15 changed files with 496 additions and 155 deletions
--- a/Assets/UI/Global.uss
+++ b/Assets/UI/Global.uss
@@ -1,12 +1,51 @@
 /* Global Styles for Hallucinate UI */
+/* osu!lazer-inspired — extends existing rules, nothing removed */

+/* ============================================================
+   DESIGN TOKENS
+   ============================================================ */
 :root {
+    /* --- Giữ nguyên biến cũ --- */
    --primary-color: #ffffff;
    --accent-color: #00ffcc;
    --background-blur: rgba(0, 0, 0, 0.5);
-    --font-main: resource("Fonts/Ancient Medium SDF"); /* Place holder font */
+    --font-main: resource("Fonts/Ancient Medium SDF");
+
+    /* --- Spacing system (base 4px) --- */
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-6: 24px;
+    --space-8: 32px;
+
+    /* --- Color system --- */
+    --color-surface:        rgba(0, 0, 0, 0.65);
+    --color-surface-light:  rgba(255, 255, 255, 0.06);
+    --color-border:         rgba(255, 255, 255, 0.12);
+    --color-border-hover:   rgba(255, 255, 255, 0.28);
+
+    /* Palette — mỗi nút 1 màu (giống osu) */
+    --color-btn-settings:   #7B6EE8;   /* tím */
+    --color-btn-join:       #4DC8A0;   /* teal */
+    --color-btn-create:     #E8834D;   /* cam */
+    --color-btn-profile:    #E84D8A;   /* hồng */
+    --color-btn-exit:       #888888;   /* xám trung tính */
+
+    /* Text */
+    --color-text-primary:   rgba(255, 255, 255, 0.95);
+    --color-text-secondary: rgba(255, 255, 255, 0.55);
+
+    /* --- Border radius --- */
+    --radius-sm:  6px;
+    --radius-md:  10px;
+    --radius-lg:  16px;
+    --radius-pill: 999px;
 }

+/* ============================================================
+   BASE RESET
+   ============================================================ */
 .screen-root {
    width: 100%;
    height: 100%;
@@ -14,24 +53,277 @@
    background-color: transparent;
 }

+/* ============================================================
+   BUTTON — SPRING (giữ nguyên, chỉ thêm visual)
+   ============================================================ */
 .button-spring {
+    /* --- Giữ nguyên animation cũ --- */
    transition-duration: 0.1s;
    transition-timing-function: ease-out-back;
+
+    /* --- Thêm visual --- */
+    height: 48px;
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+    border-radius: var(--radius-md);
+    border-width: 0;
+    -unity-font-definition: resource("Fonts/Ancient Medium SDF");
+    font-size: 15px;
+    color: var(--color-text-primary);
+    -unity-font-style: bold;
+    cursor: link;
+
+    /* Màu mặc định — bị override bởi modifier class bên dưới */
+    background-color: rgba(255, 255, 255, 0.1);
 }

 .button-spring:hover {
    scale: 1.05;
+    background-color: rgba(255, 255, 255, 0.18);
 }

 .button-spring:active {
    scale: 0.9;
 }

+/* Per-button accent colors (gán thêm class vào UXML) */
+.btn-settings { background-color: var(--color-btn-settings); }
+.btn-settings:hover { background-color: #9080F0; }
+
+.btn-join     { background-color: var(--color-btn-join); }
+.btn-join:hover { background-color: #60DEB8; }
+
+.btn-create   { background-color: var(--color-btn-create); }
+.btn-create:hover { background-color: #F09A68; }
+
+.btn-profile  { background-color: var(--color-btn-profile); }
+.btn-profile:hover { background-color: #F060A0; }
+
+.btn-exit     { background-color: var(--color-btn-exit); }
+.btn-exit:hover { background-color: #AAAAAA; }
+
+/* ============================================================
+   RIBBON — dải băng main menu
+   ============================================================ */
+.ribbon {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-surface);
+    padding-top: var(--space-2);
+    padding-bottom: var(--space-2);
+    padding-left: var(--space-6);
+    padding-right: var(--space-6);
+    border-radius: var(--radius-lg);
+    border-width: 1px;
+    border-color: var(--color-border);
+
+    /* gap giữa các button */
+    /* Unity UIToolkit không có gap trực tiếp, dùng margin trên button */
+}
+
+/* Spacing giữa các nút trong ribbon */
+.ribbon .button-spring {
+    margin-left: var(--space-2);
+    margin-right: var(--space-2);
+    min-width: 96px;
+}
+
+/* ============================================================
+   LOGO
+   ============================================================ */
 .logo-pulse {
-    /* Pulse effect will be handled via PrimeTween in Controller, 
-       but we can define base styles here */
    width: 200px;
    height: 200px;
    align-self: center;
    justify-content: center;
+
+    /* Thêm visual */
+    border-radius: var(--radius-pill);
+    border-width: 2px;
+    border-color: var(--color-border-hover);
+    background-color: rgba(255, 255, 255, 0.08);
+    overflow: hidden;
+}
+
+/* ============================================================
+   SURFACE / PANEL — dùng cho Lobby, Profile, Settings
+   ============================================================ */
+.panel-glass {
+    background-color: var(--color-surface);
+    border-radius: var(--radius-lg);
+    border-width: 1px;
+    border-color: var(--color-border);
+    padding: var(--space-6);
+}
+
+.panel-glass--right {
+    /* Right pane trong Lobby / Profile */
+    width: 40%;
+    height: 100%;
+    border-radius: 0;
+    border-top-left-radius: var(--radius-lg);
+    border-bottom-left-radius: var(--radius-lg);
+}
+
+/* ============================================================
+   TYPOGRAPHY
+   ============================================================ */
+.text-heading {
+    font-size: 28px;
+    -unity-font-style: bold;
+    color: var(--color-text-primary);
+    -unity-font-definition: resource("Fonts/Ancient Medium SDF");
+}
+
+.text-label {
+    font-size: 13px;
+    color: var(--color-text-secondary);
+    -unity-font-definition: resource("Fonts/Ancient Medium SDF");
+}
+
+.text-body {
+    font-size: 15px;
+    color: var(--color-text-primary);
+    -unity-font-definition: resource("Fonts/Ancient Medium SDF");
+}
+
+/* ============================================================
+   INPUT FIELD
+   ============================================================ */
+.input-field {
+    height: 44px;
+    border-radius: var(--radius-md);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-surface-light);
+    color: var(--color-text-primary);
+    font-size: 14px;
+    padding-left: var(--space-3);
+    padding-right: var(--space-3);
+}
+
+.input-field:focus {
+    border-color: var(--color-border-hover);
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* ============================================================
+   SIDEBAR (Settings)
+   ============================================================ */
+.sidebar-tab {
+    height: 48px;
+    padding-left: var(--space-4);
+    border-radius: var(--radius-sm);
+    background-color: transparent;
+    border-width: 0;
+    color: var(--color-text-secondary);
+    font-size: 14px;
+    -unity-text-align: middle-left;
+    margin-bottom: var(--space-1);
+    transition-duration: 0.1s;
+}
+
+.sidebar-tab:hover {
+    background-color: var(--color-surface-light);
+    color: var(--color-text-primary);
+}
+
+.sidebar-tab.active-tab {
+    background-color: rgba(123, 110, 232, 0.2);
+    color: var(--color-text-primary);
+    border-left-color: var(--color-btn-settings);
+    border-left-width: 3px;
+    border-radius: 0;
+    border-top-right-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
+}
+
+/* ============================================================
+   HUD
+   ============================================================ */
+.hud-root {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    picking-mode: ignore;
+}
+
+.hud-bar {
+    border-radius: var(--radius-pill);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+}
+
+.hud-slot {
+    width: 56px;
+    height: 56px;
+    border-radius: var(--radius-md);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-surface);
+    overflow: hidden;
+}
+
+.hud-slot--active {
+    width: 72px;
+    height: 72px;
+    border-color: var(--color-border-hover);
+    border-width: 2px;
+}
+
+.hud-text-debug {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+    -unity-font-definition: resource("Fonts/Ancient Medium SDF");
+}
+
+/* ============================================================
+   READY BUTTON (Lounge)
+   ============================================================ */
+.btn-ready {
+    height: 56px;
+    min-width: 160px;
+    border-radius: var(--radius-md);
+    border-width: 2px;
+    border-color: var(--color-btn-join);
+    background-color: transparent;
+    color: var(--color-btn-join);
+    font-size: 16px;
+    -unity-font-style: bold;
+    transition-duration: 0.15s;
+}
+
+.btn-ready.is-ready {
+    background-color: var(--color-btn-join);
+    color: rgba(0, 0, 0, 0.85);
+}
+
+/* ============================================================
+   SCROLL VIEW
+   ============================================================ */
+.scroll-list {
+    background-color: transparent;
+    border-width: 0;
+}
+
+.room-item {
+    height: 56px;
+    margin-bottom: var(--space-2);
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface-light);
+    border-width: 1px;
+    border-color: var(--color-border);
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+    flex-direction: row;
+    align-items: center;
+    transition-duration: 0.1s;
+}
+
+.room-item:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: var(--color-border-hover);
 }
--- a/Assets/UI/LoginPopup.uxml
+++ b/Assets/UI/LoginPopup.uxml
@@ -0,0 +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: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:Button name="ConfirmBtn" text="CONFIRM" class="button-spring" style="height: 45px; background-color: #00ffcc; color: black; -unity-font-style: bold; margin-top: 10px;" />
+        </ui:VisualElement>
+    </ui:VisualElement>
+</ui:UXML>
--- a/Assets/UI/LoginPopup.uxml.meta
+++ b/Assets/UI/LoginPopup.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: 4f11f2cb91fbd4748bcbc70cd0f5afe7
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}