Chore : components cleanup

components/game/overlay/Discard.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { buyCard, buyGem, useToken } from "~/netcode";
+import {
+  CardEffects,
+  type Card,
+  type Container,
+  type Effect,
+  type Game,
+  type Player,
+} from "~/netcode/interfaces";
+
+export interface Props {
+  game: Game;
+  discard: Container;
+  player: Player;
+}
+
+const props = defineProps<Props>();
+
+const authStore = useAuthStore();
+
+const emit = defineEmits(["close"]);
+function marketCardClick(e: string) {
+  buyCard(props.game._id, e);
+}
+
+function fireGemCardClick(e: string) {
+  buyGem(props.game._id);
+}
+
+const discardTokens = computed(() =>
+  props.game.currentTurn.tokens.filter((t) =>
+    [
+      CardEffects.RESTACK_DISCARDED_ACTION,
+      CardEffects.RESTACK_DISCARDED_CARD,
+      CardEffects.RESTACK_DISCARDED_CHAMPION,
+      CardEffects.SACRIFICE,
+    ].includes(t.effect)
+  )
+);
+
+function tokenClick({ card, token }: { card: Card; token: Effect }) {
+  useToken(props.game._id, token._id, card._id);
+}
+</script>
+
+<template>
+  <div class="overlay">
+    <button @click="$emit('close')">Close</button>
+    <span>Discard of {{ player.user.username }}</span>
+
+    <div class="discard_unwrapped" @click.stop>
+      <GameCardPreview
+        :container="discard"
+        :wrapped="false"
+        :hidden="false"
+        :tokens="discardTokens"
+        :noEffects="true"
+        :playingTurn="game.currentTurn"
+        @tokenClick="tokenClick"
+      ></GameCardPreview>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+span {
+  background: white;
+}
+.overlay {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>
+
+<style>
+.discard_unwrapped {
+  width: max-content;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  /* position: relative; */
+  gap: 2px;
+  margin: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
+  border-radius: 10px;
+  /* filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, 0.6)); */
+  /* backdrop-filter: blur(5px) brightness(80%); */
+  background: rgba(60, 47, 117, 0.46);
+  /* left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%); */
+}
+</style>

components/game/overlay/LoadingScreen.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div id="loading_screen">Loading...</div>
+</template>
+
+<style scoped>
+#loading_screen {
+    left: 0;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: white;
+}
+</style>

components/game/overlay/ResultDialog.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { Player } from "~/netcode/interfaces";
+
+export interface Props {
+  isVisible: Boolean;
+  won: Boolean;
+  players: Array<Player>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  won: () => false,
+  players: () => [],
+});
+
+const emit = defineEmits(["close"]);
+
+const close = () => {
+  reloadNuxtApp();
+};
+</script>
+
+<template>
+  <div v-if="isVisible" class="dialog-overlay" @click="close">
+    <div class="dialog-box">
+      <div class="dialog-header">
+        <h3 v-if="won">Victoire!</h3>
+        <h3 v-else>Défaite!</h3>
+      </div>
+      <div class="dialog-body">
+        <GamePlayerIcon :player="players[0]"></GamePlayerIcon>
+        <p v-if="won">Vous avez gagné!</p>
+        <p v-else>
+          Vous avez perdu face à ce magnifique individu qui a très clairement
+          beaucoup plus de bitches que vous! Cela dit, je pense qu'il n'y a pas
+          de bonnes ou de mauvaises situations, juste des situations
+          différentes. Vous avez perdu, mais vous avez gagné en expérience!
+          C'est ça le plus important dans la vie, n'est-ce pas? Apprendre de ses
+          erreurs et devenir meilleur! Alors, ne soyez pas triste, soyez heureux
+          d'avoir eu l'opportunité d'apprendre quelque chose aujourd'hui! Et
+          puis, vous savez ce qu'on dit, "ce qui ne nous tue pas nous rend plus
+          fort"! Alors, allez-y, soyez fort! Et n'oubliez pas, la prochaine
+          fois, vous gagnerez! Vous verrez! Vous êtes un gagnant, vous êtes un
+          champion! Vous êtes le meilleur! Vous êtes le roi du monde!
+          <img
+            src="/img/so_back.png"
+            alt="Une image décrivant le meme 'We are so back'"
+          />
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.dialog-box {
+  background-image: url("/img/bg-grass.png");
+  padding: 0 20px;
+  border-radius: 5px;
+  width: 800px;
+  border-radius: 30px;
+  max-width: 100%;
+  color: white;
+  text-align: center;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.dialog-box h3 {
+  font-size: 30px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  margin: 0;
+  width: 100%;
+  padding: 10px 0;
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+.dialog-header,
+.dialog-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+}
+
+.dialog-body {
+  padding: 10px 0;
+}
+</style>

components/game/overlay/options/Dialog.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+const settingsStore = useSettingsStore();
+
+export interface Props {
+  isVisible: boolean;
+}
+
+const _devicePixelRatio = computed(() => devicePixelRatio);
+const _window = computed(() => window);
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const emit = defineEmits(["close"]);
+
+const close = () => {
+  emit("close");
+};
+</script>
+
+<template>
+  <div v-if="isVisible" class="dialog-overlay" @click="close">
+    <div class="dialog-box" @click.stop>
+      <div class="dialog-header">
+        <h3>Visuals</h3>
+      </div>
+      <div class="dialog-header">
+        <span>Toggle Card Style</span>
+      </div>
+      <div class="dialog-body">
+        <button @click="settingsStore.switchCardStyles">
+          Toggle Card style
+        </button>
+      </div>
+      <div class="dialog-footer">
+        <span>{{ settingsStore.cardStyle }}</span>
+      </div>
+      <div class="dialog-header">
+        <span>Animation Speed</span>
+      </div>
+      <div class="dialog-body">
+        <input type="range" min="0" max="250" step="25" v-model="settingsStore.animationSpeed" />
+      </div>
+      <div class="dialog-footer">
+        <span>{{ settingsStore.animationSpeed }}ms</span>
+      </div>
+      <div class="dialog-header">
+        <span>Fast mode</span>
+      </div>
+      <div class="dialog-body">
+        <input type="checkbox" v-model="settingsStore.fastAnimations" />
+      </div>
+      <div class="dialog-header">
+        <h3>Graphics</h3>
+      </div>
+      <div class="dialog-header">
+        <span>Shader Quality</span>
+      </div>
+      <div class="dialog-body">
+        <input type="range" min="1" max="10" v-model="settingsStore.shaderQuality"
+          :disabled="settingsStore.shaderFramerate == 0" />
+      </div>
+      <div class="dialog-footer">
+        <span>{{
+          Math.floor(
+            (_window.innerWidth *
+              _devicePixelRatio *
+              settingsStore.shaderQuality) /
+            10
+          )
+        }}x{{
+            Math.floor(
+              (_window.innerHeight *
+                _devicePixelRatio *
+                settingsStore.shaderQuality) /
+              10
+            )
+          }}</span>
+      </div>
+      <div class="dialog-header">
+        <span>Shader Framerate</span>
+      </div>
+      <div class="dialog-body">
+        <input type="range" min="0" max="65" step="5" v-model="settingsStore.shaderFramerate" />
+      </div>
+      <div class="dialog-footer">
+        <span v-if="settingsStore.shaderFramerate == 65">vsync</span>
+        <span v-else>{{ settingsStore.shaderFramerate }} fps</span>
+      </div>
+      <div class="dialog-header">
+        <span>Pixelated</span>
+      </div>
+      <div class="dialog-body">
+        <input type="checkbox" v-model="settingsStore.shaderPixelated" />
+      </div>
+      <div class="dialog-header">
+        <h3>Other</h3>
+      </div>
+      <div class="dialog-header">
+        <span>Enable dragging (experimental)</span>
+      </div>
+      <div class="dialog-body">
+        <input type="checkbox" v-model="settingsStore.enableDragging" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  display: grid;
+}
+
+.dialog-box {
+  background-image: url("../img/bg-grass.png");
+  padding: 0 20px;
+  border-radius: 5px;
+  width: 800px;
+  border-radius: 30px;
+  max-width: 100%;
+  color: white;
+  text-align: center;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+}
+
+.dialog-box h3 {
+  font-size: 30px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  margin: 0;
+  width: 100%;
+  padding: 10px 0;
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+.dialog-header,
+.dialog-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+}
+
+.dialog-header {
+  grid-column-start: 1;
+}
+
+.dialog-body {
+  padding: 10px 0;
+  grid-column-start: 2;
+}
+
+.dialog-footer {
+  grid-column-start: 3;
+}
+</style>