TRXTD/src/App.vue

<script setup lang="ts">
import AuthModal from '@/components/AuthModal.vue'
import EndOverlay from '@/components/EndOverlay.vue'
import GameCanvas from '@/components/GameCanvas.vue'
import Hud from '@/components/Hud.vue'
import LobbyScreen from '@/components/LobbyScreen.vue'
import MPBar from '@/components/MPBar.vue'
import ObstaclePanel from '@/components/ObstaclePanel.vue'
import PauseOverlay from '@/components/PauseOverlay.vue'
import PiPCanvas from '@/components/PiPCanvas.vue'
import ResearchTree from '@/components/ResearchTree.vue'
import StartScreen from '@/components/StartScreen.vue'
import TowerPanel from '@/components/TowerPanel.vue'
import TowerShop from '@/components/TowerShop.vue'
import { playerColor } from '@/game/config'
import { store } from '@/game/store'
import { computed } from 'vue'

/** duel: colored frame + label around the main canvas showing whose board it is */
const frameStyle = computed(() => {
  if (!store.mp.active || store.mp.mode !== 'duel') return undefined
  const viewedOwner = store.mp.viewOpponent ? 1 - store.mp.myId : store.mp.myId
  return { boxShadow: `0 0 0 4px ${playerColor(viewedOwner)}` }
})

const badgeText = computed(() => {
  if (!store.mp.active || store.mp.mode !== 'duel') return ''
  return store.mp.viewOpponent
    ? `👁 ${store.mp.peerName} – Ansicht (zum Bauen zurückwechseln)`
    : '🛡 Deine Basis'
})

const badgeColor = computed(() => {
  const viewedOwner = store.mp.viewOpponent ? 1 - store.mp.myId : store.mp.myId
  return playerColor(viewedOwner)
})
</script>

<template>
  <div class="app">
    <StartScreen v-if="store.screen === 'menu'" />
    <LobbyScreen v-else-if="store.screen === 'lobby'" />
    <div v-else class="game-layout">
      <Hud />
      <MPBar />
      <div class="canvas-wrap">
        <div class="canvas-box" :style="frameStyle">
          <GameCanvas />
          <div
            v-if="badgeText"
            class="board-badge"
            :style="{ background: badgeColor }"
          >
            {{ badgeText }}
          </div>
          <TowerPanel />
          <ObstaclePanel />
          <PiPCanvas />
          <PauseOverlay />
          <EndOverlay />
        </div>
      </div>
      <TowerShop />
    </div>

    <AuthModal />
    <ResearchTree />
  </div>
</template>

<style scoped>
.app {
  height: 100dvh;
  overflow: hidden;
}
.game-layout {
  height: 100dvh;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.canvas-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas-box {
  position: relative;
  border-radius: 10px;
}
.board-badge {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  color: #10151c;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 20px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
</style>