Transcendence/front/volume/src/App.svelte

<script lang="ts">
  import Navbar from "./components/NavBar.svelte";
  import Profile from "./components/Profile.svelte";
  import MatchHistory from "./components/MatchHistory.svelte";
  import type { Match } from "./components/MatchHistory.svelte";
  import Friends from "./components/Friends.svelte";
  import type { Friend } from "./components/Friends.svelte";
  import Spectate from "./components/Spectate.svelte";
  import type { SpectateType } from "./components/Spectate.svelte";
  import Play from "./components/Play.svelte";
  import Pong from "./components/Pong/Pong.svelte";
  import Chat from "./components/Chat.svelte";

  let isProfileOpen = false;
  function clickProfile() {
    isProfileOpen = true;
  }
  let isHistoryOpen = false;
  function clickHistory() {
    isHistoryOpen = true;
  }
  let matches: Array<Match> = [
    { winner: "Alice", loser: "Bob", points: -5, rank: "22" },
    { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
    { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
    { winner: "Alice", loser: "Bob", points: 7, rank: "23" },
    { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
    { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
  ];
  let isFriendOpen = false;
  function clickFriends() {
    isFriendOpen = true;
  }
  let friends: Array<Friend> = [
    { username: "Alice", status: "online" },
    { username: "Bob", status: "online" },
    { username: "Charlie", status: "offline" },
    { username: "Dave", status: "offline" },
    { username: "Eve", status: "in a game" },
    { username: "Frank", status: "online" },
  ];
  let isSpectateOpen = false;
  function clickSpectate() {
    isSpectateOpen = true;
  }
  let spectate: Array<SpectateType> = [
    { player1: "Alice", player2: "Bob", id: "1" },
    { player1: "Alice", player2: "Bob", id: "4" },
    { player1: "Alice", player2: "Bob", id: "6" },
    { player1: "Alice", player2: "Bob", id: "8" },
    { player1: "Alice", player2: "Bob", id: "2" },
    { player1: "Alice", player2: "Bob", id: "3" },
  ];
</script>

<main>
  <Navbar {clickProfile} {clickHistory} {clickFriends} {clickSpectate} />
  {#if isSpectateOpen}
    <div
      on:click={() => (isSpectateOpen = false)}
      on:keydown={() => (isSpectateOpen = false)}
    >
      <Spectate {spectate} />
    </div>
  {/if}
  {#if isFriendOpen}
    <div
      on:click={() => (isFriendOpen = false)}
      on:keydown={() => (isFriendOpen = false)}
    >
      <Friends {friends} />
    </div>
  {/if}
  {#if isHistoryOpen}
    <div
      on:click={() => (isHistoryOpen = false)}
      on:keydown={() => (isHistoryOpen = false)}
    >
      <MatchHistory {matches} />
    </div>
  {/if}
  {#if isProfileOpen}
    <div
      on:click={() => (isProfileOpen = false)}
      on:keydown={() => (isProfileOpen = false)}
    >
      <Profile
        username="Alice"
        wins={10}
        losses={5}
        elo={256}
        rank={23}
        is2faEnabled={false}
      />
    </div>
  {/if}
  <Play />
  <Pong />
  <Chat />
</main>

<style>
</style>