NowChess-Frontend/src/app/pages/welcome/welcome.component.html

<div class="cityscape-shell" [class.sunset]="isSunsetMode">

  <div class="scene">
    <div class="sky">
      <div class="stars-layer">
        <div class="star" *ngFor="let star of stars" [ngStyle]="star.style"></div>
      </div>
      <div class="sun"></div>
      <div class="cloud-wrap">
        <div class="cloud cloud-a"></div>
        <div class="cloud cloud-b"></div>
        <div class="cloud cloud-c"></div>
        <div class="cloud cloud-d"></div>
        <div class="cloud cloud-e"></div>
      </div>
    </div>

    <div class="bg-layer">
      <div class="bg-bldg" *ngFor="let building of bgBuildings" [ngStyle]="building.style"></div>
    </div>

    <div class="main-layer">
      <div class="bwrap" style="left:2.5%;width:16%;">
        <div class="ant" style="height:38px;"></div>
        <div class="bpart" style="width:55%;margin:0 auto;height:7vh;">
          <div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
            <div class="w" *ngFor="let win of windows['wA1']" [ngStyle]="win.style"></div>
          </div>
        </div>
        <div class="bpart" style="width:80%;margin:0 auto;height:9vh;">
          <div class="wins" style="grid-template-columns:repeat(4,1fr);align-content:start;height:100%;">
            <div class="w" *ngFor="let win of windows['wA2']" [ngStyle]="win.style"></div>
          </div>
        </div>
        <div class="bpart" style="height:36vh;">
          <div>
            <div class="bb">
              <div class="bb-tag">JOIN</div>
              <div class="bb-title">JOIN<br />GAME</div>
              <button type="button" class="app-btn" (click)="openJoinDialog()" [disabled]="joiningGame">
                {{ joiningGame ? 'JOINING...' : 'JOIN GAME →' }}
              </button>
            </div>
          </div>
          <div class="wins" style="grid-template-columns:repeat(5,1fr);">
            <div class="w" *ngFor="let win of windows['wA3']" [ngStyle]="win.style"></div>
          </div>
        </div>
      </div>

      <div class="bwrap" style="left:21%;width:15%;">
        <div class="bpart" style="height:5vh;width:90%;margin:0 auto;">
          <div class="wins" style="grid-template-columns:repeat(4,1fr);height:100%;align-content:start;">
            <div class="w" *ngFor="let win of windows['wB1']" [ngStyle]="win.style"></div>
          </div>
        </div>
        <div class="bpart" style="height:44vh;">
          <div style="padding:5px 5px 0;">
            <div style="text-align:center;padding:4px 0 6px;">
              <span class="neon">OPEN 24/7</span>
            </div>
            <div class="bb">
              <div class="bb-tag">BOT</div>
              <div class="bb-title">PLAY WITH<br />A BOT</div>
              <button type="button" class="app-btn" (click)="openDifficultyDialog()" [disabled]="creating">
                {{ creating ? 'CREATING...' : 'GET STARTED →' }}
              </button>
            </div>
          </div>
          <div class="wins" style="grid-template-columns:repeat(5,1fr);">
            <div class="w" *ngFor="let win of windows['wB2']" [ngStyle]="win.style"></div>
          </div>
        </div>
      </div>

      <div class="bwrap" style="left:39%;width:20%;">
        <img class="playerone-gif" src="/assets/arabian-chess/player-one.gif" alt="Player One" />
        <div style="display:flex;justify-content:center;gap:16px;margin-bottom:0;">
          <div class="ant" style="height:65px;margin-top:-15px;"></div>
        </div>
        <div class="bpart" style="height:6vh;width:70%;margin:0 auto;border-radius:2px 2px 0 0;">
          <div class="wins" style="grid-template-columns:repeat(5,1fr);height:100%;align-content:start;">
            <div class="w" *ngFor="let win of windows['wC1']" [ngStyle]="win.style"></div>
          </div>
        </div>
        <div class="bpart" style="height:10vh;">
          <div class="wins" style="grid-template-columns:repeat(6,1fr);align-content:start;height:100%;">
            <div class="w" *ngFor="let win of windows['wC2']" [ngStyle]="win.style"></div>
          </div>
        </div>
        <div class="bpart" style="height:48vh;">
          <div style="padding:6px 6px 0;">
            <div class="bb" style="padding:14px 14px 12px;">
              <div class="bb-tag">WELCOME</div>
              <div class="bb-title" style="font-size:clamp(16px,1.8vw,26px);">WELCOME TO<br />NOWCHESS</div>
              <div class="bb-subtitle">Play your next move from the skyline.</div>
              <button type="button" class="app-btn" (click)="startOneVsOne()" [disabled]="creating">
                {{ creating ? 'CREATING...' : 'START NOW →' }}
              </button>
            </div>
          </div>
          <div class="wins" style="grid-template-columns:repeat(7,1fr);">
            <div class="w" *ngFor="let win of windows['wC3']" [ngStyle]="win.style"></div>
          </div>
        </div>
      </div>

      <div class="bwrap" style="left:63%;width:18%;">
        <div class="ant" style="height:30px;"></div>
        <div class="bpart" style="height:5vh;width:110%;margin-left:-5%;">
          <div class="wins" style="grid-template-columns:repeat(6,1fr);height:100%;align-content:start;">
            <div class="w" *ngFor="let win of windows['wD1']" [ngStyle]="win.style"></div>
          </div>
        </div>
        <div class="bpart" style="height:42vh;">
          <div style="padding:5px 5px 0;">
            <div style="text-align:center;padding:4px 0 6px;">
              <span class="neon">MORE</span>
            </div>
            <div class="bb">
              <div class="bb-tag">OPTIONS</div>
              <div class="bb-title">MORE<br />OPTIONS</div>
              <button type="button" class="app-btn" (click)="openOptionsDialog()">OPEN MENU →</button>
            </div>
          </div>
          <div class="wins" style="grid-template-columns:repeat(6,1fr);">
            <div class="w" *ngFor="let win of windows['wD2']" [ngStyle]="win.style"></div>
          </div>
        </div>
      </div>

      <div class="bwrap" style="left:83%;width:10%;">
        <div class="bpart" style="height:30vh;">
          <div class="wins" style="grid-template-columns:repeat(3,1fr);height:100%;align-content:start;">
            <div class="w" *ngFor="let win of windows['wE1']" [ngStyle]="win.style"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Speech Bubble -->
    @if (showSpeechBubble) {
    <div class="speech-bubble-container" (click)="onSpeechBubbleClick()">
      <div class="speech-bubble">
        <div class="bubble-text">{{ bubbleMessage }}</div>
        <div class="bubble-tail"></div>
      </div>
    </div>
    }

    <!-- Zoomed Window View -->
    @if (isZoomedIn) {
    <div class="zoom-overlay" (click)="onZoomedViewClick()" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp()"
      (mouseleave)="onMouseUp()">
      <div class="zoom-window-wrapper" (click)="$event.stopPropagation()">
        <div class="zoom-window-frame">
          <div class="zoom-player-2">
            <img src="/assets/arabian-chess/player-two.gif" alt="Player 2" class="player-2-gif"
              (click)="$event.stopPropagation()" />
            @if (showSecondSpeechBubble) {
            <div class="second-speech-bubble">
              <div class="bubble-text">Feed me! 🍖</div>
              <div class="bubble-tail"></div>
            </div>
            }
            @if (showHappyBubble) {
            <div class="happy-speech-bubble">
              <div class="bubble-text">Happy meow! 😸</div>
              <div class="bubble-tail"></div>
            </div>
            }
          </div>
        </div>

        <!-- Draggable Meat Emoji -->
        @if (showMeatEmoji) {
        <div class="meat-emoji" [style.left.px]="meatX" [style.top.px]="meatY" (mousedown)="onMeatMouseDown($event)">
          🍖
        </div>
        }
      </div>
    </div>
    }

    <div class="haze"></div>
    <div class="ground"></div>
  </div>

  @if (showDifficultyDialog) {
  <div class="dialog-overlay" (click)="closeDifficultyDialog()">
    <div class="dialog-card" (click)="$event.stopPropagation()">
      <div class="dialog-title">SELECT DIFFICULTY</div>
      <div class="dialog-actions">
        <button type="button" class="app-btn" (click)="startVsBot('easy')" [disabled]="creating">EASY</button>
        <button type="button" class="app-btn" (click)="startVsBot('medium')" [disabled]="creating">MEDIUM</button>
        <button type="button" class="app-btn" (click)="startVsBot('hard')" [disabled]="creating">HARD</button>
      </div>
    </div>
  </div>
  }

  @if (showOptionsDialog) {
  <div class="dialog-overlay" (click)="closeOptionsDialog()">
    <div class="dialog-card" (click)="$event.stopPropagation()">
      <div class="dialog-title">MORE OPTIONS</div>
      <div class="dialog-actions">
        <button type="button" class="app-btn" (click)="openImportDialog()">IMPORT GAME</button>
      </div>
    </div>
  </div>
  }

  @if (showJoinDialog) {
  <div class="dialog-overlay" (click)="closeJoinDialog()">
    <div class="dialog-card" (click)="$event.stopPropagation()">
      <div class="dialog-title">JOIN GAME</div>
      <input type="text" class="dialog-input" [(ngModel)]="gameIdInput" placeholder="Paste game ID here"
        [disabled]="joiningGame" (keyup.enter)="submitJoinGame()" />
      <div class="dialog-actions">
        <button type="button" class="app-btn" (click)="submitJoinGame()"
          [disabled]="joiningGame || !gameIdInput.trim()">
          {{ joiningGame ? 'JOINING...' : 'JOIN' }}
        </button>
        <button type="button" class="app-btn" (click)="closeJoinDialog()" [disabled]="joiningGame">CANCEL</button>
      </div>
    </div>
  </div>
  }

  @if (showImportDialog) {
  <div class="dialog-overlay" (click)="closeImportDialog()">
    <div class="dialog-card" (click)="$event.stopPropagation()">
      <div class="dialog-title">IMPORT GAME</div>
      <div class="import-mode-group" role="radiogroup" aria-label="Import mode">
        <label class="import-mode-option">
          <input type="radio" name="importMode" [checked]="importMode === 'fen'" (change)="setImportMode('fen')"
            [disabled]="importing" />
          <span>FEN</span>
        </label>
        <label class="import-mode-option">
          <input type="radio" name="importMode" [checked]="importMode === 'pgn'" (change)="setImportMode('pgn')"
            [disabled]="importing" />
          <span>PGN</span>
        </label>
      </div>
      <textarea class="dialog-input dialog-textarea" [(ngModel)]="importText"
        [placeholder]="importMode === 'fen' ? 'Paste FEN here' : 'Paste PGN here'" [disabled]="importing"
        rows="5"></textarea>
      <div class="dialog-actions">
        <button type="button" class="app-btn" (click)="submitImportGame()" [disabled]="importing || !importText.trim()">
          {{ importing ? 'IMPORTING...' : 'IMPORT' }}
        </button>
        <button type="button" class="app-btn" (click)="closeImportDialog()" [disabled]="importing">CANCEL</button>
      </div>
    </div>
  </div>
  }

  @if (errorMessage) {
  <p class="error-banner">{{ errorMessage }}</p>
  }
</div>