front/pages/lobby.vue

<script setup lang="ts">
// import { playSound } from '~/helpers/audioHelpers';
import { playSound } from "~/helpers/audioHelpers";
import { createGame, subscribe } from "~/netcode";
import type { Game, Player, User } from "~/netcode/interfaces";

const authStore = useAuthStore();

let eventSource: EventSource;

const config = useRuntimeConfig();
const req = await useFetch<Array<Game>>(config.public.endpoint + "/games", {
  credentials: "include",
  server: false,
});

let games = req.data;

const erika_alive = ref(true);
const router = useRouter();

function killErika() {
  playSound("/sounds/splat1.mp3");
  erika_alive.value = false;
}

onBeforeMount(async () => {
  eventSource = subscribe("/games/subscribe");
  eventSource.addEventListener("message", (message) => {
    const data = JSON.parse(message.data);
    if (data.type == "create") {
      games.value?.push(data);
    } else if (data.type == "delete") {
      const index = games.value?.findIndex((g) => g._id == data._id);
      if (index == -1 || !index) {
        throw new Error("Couldn't delete game");
      }
      games.value?.splice(index, 1);
    } else if (data.type == "joinGame") {
      games.value?.find((g) => g._id == data.game)?.teams.push(data.team);
    } else if (data.type == "start") {
      const targetGame = games.value?.find((g) => g._id == data.game);
      if (targetGame) {
        targetGame.started = true;
      }
    }
  });
});

onUnmounted(() => {
  eventSource.close();
});
</script>

<template>
  <div class="background">
    <header>
      <ClientOnly>
        <GamePlayerIcon
          v-if="authStore.logged"
          :user="(authStore.selfUser as User)"
        />
        <button v-else @click="navigateTo('/login')">Login</button>
      </ClientOnly>
    </header>
    <main>
      <div class="title">Entrez dans le Royaume de Héron !</div>
      <ClientOnly>
        <template v-if="authStore.logged">
          <div class="create-game-zone">
            <button
              @click="createGame"
              v-if="
                games?.some((g) => g.owner.userId !== authStore.selfUser.userId)
              "
            >
              Create Game
            </button>
          </div>
        </template>

        <div class="games-list-zone">
          <div v-for="g in games">
            <button
              v-if="g"
              @click="router.push({ path: `/game`, query: { id: g._id } })"
              :class="
                authStore.selfUser.userId == g.owner.userId ? 'own_game' : ''
              "
            >
              <template
                v-if="
                  g.teams.every((t) =>
                    t.players.every(
                      (p) => p.user.userId !== authStore.selfUser.userId
                    )
                  )
                "
              >
                SPECTATE
              </template>
              <template v-else>
                <template v-if="!g.started"> JOIN BACK </template>
                <template v-else> CONTINUE </template>
              </template>

              <br />
              {{
                g.teams.reduce(
                  (prev, curr) => prev.concat(curr.players),
                  [] as Player[]
                ).length
              }}
              current players:<br /><span>{{
                g.teams
                  .reduce(
                    (prev, curr) => prev.concat(curr.players),
                    [] as Player[]
                  )
                  .map((p) => p.user.username)
                  .join(",")
              }}</span>
            </button>
          </div>
        </div>
      </ClientOnly>
    </main>

    <div class="overlay" v-if="erika_alive">
      <div class="erika-zone">
        <img
          @click="router.push('/rules')"
          class="overlay-image"
          src="https://static.wikia.nocookie.net/umineko/images/9/9d/PC_Erika.Casual.Sprite_36.png"
          alt="pétasse"
        />
        <div class="overlay-button">
          <button class="kill-erika-button" @click.stop="killErika()">
            Tuer Erika
          </button>
        </div>
      </div>

      <div class="speech-bubble" @click.prevent.self>
        <p>
          Ohoho!<br />Je suis Erika Furudo, la détective la plus forte du monde
          !
        </p>
        <p>Je vais vous montrer comment jouer à Héron Realms !</p>
        <p>
          Cliquez moi-dessus pour afficher les
          <span style="color: red">règles</span>.
        </p>
        <p>
          Ou sinon, commencez direct en créant une partie ou rejoingnant une
          partie existante.
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.background {
  background-color: #f0f0f0;
  background-image: url("https://www.pockettactics.com/wp-content/sites/pockettactics/2023/01/fire-emblem-engage-review-29.jpg");
  background-size: cover;
  display: grid;
  grid-template-rows: 100px 1fr;
  grid-template-columns: 1fr;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.title {
  font-family: "Kanit", "Roboto", sans-serif;
  font-size: 64px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

main {
  display: flex;
  flex-direction: column;
  gap: 100px;
  margin-bottom: 100px;
}

.create-game-zone,
header {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 10px;
}

header {
  flex-direction: row;
  backdrop-filter: blur(50px);
  height: 100%;
}

.create-game-zone {
  flex-direction: column;
}

.create-game-zone button {
  background-color: #4caf50;
}

.games-list-zone {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.games-list-zone button {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 20px 24px;
  height: 120px;
}

.games-list-zone button.own_game {
  border: solid yellow 5px;
}

.overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  pointer-events: none;
}

.erika-zone {
  position: absolute;
  top: 60%;
  display: flex;
  justify-content: right;
  z-index: 2;
  height: 40%;
  width: 100%;
  object-fit: cover;
}

.overlay-image {
  position: absolute;
  height: 100%;
  cursor: pointer;
  pointer-events: all;
}

.overlay-button {
  position: absolute;
  z-index: 1;
  width: 300px;
  box-sizing: border-box;
  pointer-events: none;
}

.kill-erika-button {
  display: none;
  pointer-events: all;
  background-color: #f44336;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  margin: auto;
  cursor: pointer;
  border-radius: 12px;
  padding: 10px 24px;
  height: 50px;
  transition-duration: 0.4s;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.speech-bubble {
  position: absolute;
  top: 60%;
  right: 260px;
  z-index: 1;
  background-color: rgba(225, 225, 225, 0.8);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  font-family: "Kanit", "Roboto", sans-serif;
  font-size: 16px;
  color: black;
  text-align: center;
  max-width: 420px;
  line-height: 1.5;
}

.erika-zone:hover .overlay-button .kill-erika-button {
  display: inline-block;
}
</style>