From cfbaeca52bb424fd3582853bd0368cb9da99f6e6 Mon Sep 17 00:00:00 2001 From: legonzaur Date: Sun, 21 Jul 2024 19:01:07 +0200 Subject: [PATCH] Feat : EXPERIMENTAL : add SSR --- components/AnimatedBackground.vue | 3 +- netcode/index.ts | 3 + nuxt.config.ts | 7 +- pages/game/[id].vue | 381 +++++++++++++++--------------- pages/lobby.vue | 51 ++-- pages/test.vue | 3 - services/loadCards.ts | 55 +++-- 7 files changed, 268 insertions(+), 235 deletions(-) delete mode 100644 pages/test.vue diff --git a/components/AnimatedBackground.vue b/components/AnimatedBackground.vue index e0fa5fd..f216eb0 100644 --- a/components/AnimatedBackground.vue +++ b/components/AnimatedBackground.vue @@ -9,7 +9,7 @@ const emit = defineEmits<{ ready: []; }>(); -const worker = new ShaderWorker(); +let worker: Worker; const canvas = ref(null); const canvas_resize_temp = ref(null); @@ -136,6 +136,7 @@ watch([_colorEnd, _colorStart], () => { }); onMounted(async () => { + worker = new ShaderWorker(); recolorShader(); await initShader(); window.addEventListener("resize", resizeShader, true); diff --git a/netcode/index.ts b/netcode/index.ts index b73725a..4768577 100644 --- a/netcode/index.ts +++ b/netcode/index.ts @@ -13,7 +13,10 @@ export async function getLobby() { const config = useRuntimeConfig(); const req = await useFetch>(config.public.endpoint + "/games", { credentials: "include", + server: false, }); + // await req.execute(); + await req.execute(); if (req.data.value == null) { throw new Error("Lobby answer is empty"); } diff --git a/nuxt.config.ts b/nuxt.config.ts index 11cccf3..807dbad 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -1,7 +1,7 @@ // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ devtools: { enabled: true }, - ssr: false, + ssr: true, runtimeConfig: { public: { endpoint: process.env.NUXT_PUBLIC_ENDPOINT, // can be overridden by NUXT_PUBLIC_ENDPOINT environment variable @@ -12,4 +12,9 @@ export default defineNuxtConfig({ vue: { runtimeCompiler: true, }, + nitro: { + prerender: { + crawlLinks: true, + }, + }, }); diff --git a/pages/game/[id].vue b/pages/game/[id].vue index dd86776..23551ca 100644 --- a/pages/game/[id].vue +++ b/pages/game/[id].vue @@ -49,7 +49,7 @@ const containers = computed>(() => ({ ), })); -const eventSource = subscribe(`/games/${gameId}/subscribe`); +let eventSource: EventSource; const actions = ref<(() => Promise)[]>([]); @@ -68,202 +68,213 @@ async function execAction(callback: () => Promise) { } } -eventSource.addEventListener("message", async (message) => { - const current_game = game.value; - if (!current_game) { - throw new Error("game not found"); - } - const data = JSON.parse(message.data); - console.log(data); - if (data.type == "start") { - throw new Error("not implemented"); - } else if (data.type == "populateContainer") { - queueAction(async () => { - // await containerEvents.get(data.container)?.startAnimation(); - }); - const fromContainer = containers.value[data.container._id as string]; - queueAction(async () => { - for (const card of data.container.cards) { - playSound("/sounds/distribute.mp3"); - fromContainer.cards.push(card); - await delay(settingsStore.animationSpeed); +onMounted(() => { + eventSource = subscribe(`/games/${gameId}/subscribe`); + eventSource.addEventListener("message", async (message) => { + const current_game = game.value; + if (!current_game) { + throw new Error("game not found"); + } + const data = JSON.parse(message.data); + console.log(data); + if (data.type == "start") { + throw new Error("not implemented"); + } else if (data.type == "populateContainer") { + queueAction(async () => { + // await containerEvents.get(data.container)?.startAnimation(); + }); + const fromContainer = containers.value[data.container._id as string]; + queueAction(async () => { + for (const card of data.container.cards) { + playSound("/sounds/distribute.mp3"); + fromContainer.cards.push(card); + await delay(settingsStore.animationSpeed); + } + }); + queueAction(async () => { + // await containerEvents.get(data.container)?.endAnimation(); + }); + } else if (data.type == "shuffleContainer") { + queueAction(async () => { + playSound("/sounds/shuffle.mp3"); + const container = containers.value[data.container as string]; + container.shuffling = true; + await delay(settingsStore.animationSpeed * 2); + container.shuffling = false; + await delay(settingsStore.animationSpeed * 2); + }); + } else if (data.type == "distributeCards") { + // containerEvents.get(data.from)?.getCardsPosition(data.cards) + + queueAction(async () => { + // containerEvents.get(data.from)?.startAnimation(); + // containerEvents.get(data.to)?.startAnimation(); + }); + + const fromContainer = containers.value[data.from as string]; + const toContainer = containers.value[data.to as string]; + for (const card of data.cards) { + queueAction(async () => { + const index = fromContainer.cards.findIndex( + (c) => !c || c._id == card._id + ); + fromContainer.cards.splice(index, 1); + await delay(settingsStore.animationSpeed); + }); + + queueAction(async () => { + playSound("/sounds/distribute.mp3"); + toContainer.cards.push(card); + await delay(settingsStore.animationSpeed); + }); } - }); - queueAction(async () => { - // await containerEvents.get(data.container)?.endAnimation(); - }); - } else if (data.type == "shuffleContainer") { - queueAction(async () => { - playSound("/sounds/shuffle.mp3"); - const container = containers.value[data.container as string]; - container.shuffling = true; - await delay(settingsStore.animationSpeed * 2); - container.shuffling = false; - await delay(settingsStore.animationSpeed * 2); - }); - } else if (data.type == "distributeCards") { - // containerEvents.get(data.from)?.getCardsPosition(data.cards) - - queueAction(async () => { - // containerEvents.get(data.from)?.startAnimation(); - // containerEvents.get(data.to)?.startAnimation(); - }); - - const fromContainer = containers.value[data.from as string]; - const toContainer = containers.value[data.to as string]; - for (const card of data.cards) { + queueAction(async () => { + // containerEvents.get(data.from)?.endAnimation(); + // containerEvents.get(data.to)?.endAnimation(); + await delay(settingsStore.animationSpeed * 2); + }); + } else if (data.type == "endTurn") { + queueAction(async () => { + current_game.currentTurn = data.currentTurn; + await delay(settingsStore.animationSpeed); + const playingPlayer = current_game.teams.find( + (t) => t._id == current_game.currentTurn.currentTeam + )?.players[0]; + if (playingPlayer) { + focusPlayer(playingPlayer); + await delay(settingsStore.animationSpeed); + } + }); + } else if (data.type == "lockCard") { + queueAction(async () => { + playSound("/sounds/lock.mp3"); + current_game.currentTurn.cardsLocked.push(data.card); + await delay(settingsStore.animationSpeed); + }); + } else if (data.type == "destroyCard") { + const fromContainer = containers.value[data.from as string]; queueAction(async () => { const index = fromContainer.cards.findIndex( - (c) => !c || c._id == card._id + (c) => !c || c._id == data.card ); fromContainer.cards.splice(index, 1); await delay(settingsStore.animationSpeed); }); queueAction(async () => { - playSound("/sounds/distribute.mp3"); - toContainer.cards.push(card); + playSound("/sounds/destroy.mp3"); await delay(settingsStore.animationSpeed); }); - } - queueAction(async () => { - // containerEvents.get(data.from)?.endAnimation(); - // containerEvents.get(data.to)?.endAnimation(); - await delay(settingsStore.animationSpeed * 2); - }); - } else if (data.type == "endTurn") { - queueAction(async () => { - current_game.currentTurn = data.currentTurn; - await delay(settingsStore.animationSpeed); - const playingPlayer = current_game.teams.find( - (t) => t._id == current_game.currentTurn.currentTeam - )?.players[0]; - if (playingPlayer) { - focusPlayer(playingPlayer); + } else if (data.type == "joinGame") { + queueAction(async () => { + playSound("/sounds/teleport.mp3"); + current_game.teams.push(data.team); + }); + } else if (data.type == "lockEffect") { + queueAction(async () => { + current_game.currentTurn.lockedEffects.push(data.effect); await delay(settingsStore.animationSpeed); - } - }); - } else if (data.type == "lockCard") { - queueAction(async () => { - playSound("/sounds/lock.mp3"); - current_game.currentTurn.cardsLocked.push(data.card); - await delay(settingsStore.animationSpeed); - }); - } else if (data.type == "destroyCard") { - const fromContainer = containers.value[data.from as string]; - queueAction(async () => { - const index = fromContainer.cards.findIndex( - (c) => !c || c._id == data.card - ); - fromContainer.cards.splice(index, 1); - await delay(settingsStore.animationSpeed); - }); - - queueAction(async () => { - playSound("/sounds/destroy.mp3"); - await delay(settingsStore.animationSpeed); - }); - } else if (data.type == "joinGame") { - queueAction(async () => { - playSound("/sounds/teleport.mp3"); - current_game.teams.push(data.team); - }); - } else if (data.type == "lockEffect") { - queueAction(async () => { - current_game.currentTurn.lockedEffects.push(data.effect); - await delay(settingsStore.animationSpeed); - }); - } else if (data.type == "unlockEffect") { - queueAction(async () => { - const effectIndex = current_game.currentTurn.lockedEffects.indexOf( - data.effect - ); - current_game.currentTurn.lockedEffects.splice(effectIndex, 1); - await delay(settingsStore.animationSpeed); - }); - } else if (data.type == "currentTurn.updateGold") { - queueAction(async () => { - console.log(`adding gold amount : ` + data.operation); - current_game.currentTurn.gold = data.gold; - }); - } else if (data.type == "currentTurn.updateDamage") { - queueAction(async () => { - console.log(`adding damage amount : ` + data.operation); - current_game.currentTurn.damage = data.damage; - }); - } else if (data.type == "currentTurn.addToken") { - queueAction(async () => { - current_game.currentTurn.tokens.push(data.token); - await delay(settingsStore.animationSpeed); - }); - } else if (data.type == "currentTurn.useToken") { - queueAction(async () => { - const index = current_game.currentTurn.tokens.findIndex( - (t) => t._id == data.tokenId - ); - current_game.currentTurn.tokens.splice(index, 1); - await delay(settingsStore.animationSpeed); - }); - } else if (data.type == "team.updateHealth") { - queueAction(async () => { - const team = game.value?.teams.find((t) => t._id == data.team); - if (!team) { - throw new Error("Team not found"); - } - console.log(`adding health amount : ` + data.operation); - team.health = data.health; - }); - } else if (data.type == "player.addFuckUMarker") { - queueAction(async () => { - console.log(`adding fuckUMarkers : ` + data.operation); - const targetPlayer = playerList.value.find((p) => p._id == data.playerId); - if (!targetPlayer) { - throw new Error("Cannot add fuckU Markers : player not found"); - } - targetPlayer.fuckUMarkers = data.fuckUMarkers; - }); - } else if (data.type == "player.removeFuckUMarker") { - queueAction(async () => { - console.log(`adding fuckUMarkers : ` + data.operation); - const targetPlayer = playerList.value.find((p) => p._id == data.playerId); - if (!targetPlayer) { - throw new Error("Cannot remove fuckU Markers : player not found"); - } - targetPlayer.fuckUMarkers = data.fuckUMarkers; - }); - } else if (data.type == "player.addDiscardMarker") { - queueAction(async () => { - console.log(`adding discardMarkers : ` + data.operation); - const targetPlayer = playerList.value.find((p) => p._id == data.playerId); - if (!targetPlayer) { - throw new Error("Cannot add discard Markers : player not found"); - } - targetPlayer.discardMarkers = data.discardMarkers; - }); - } else if (data.type == "player.removeDiscardMarker") { - queueAction(async () => { - console.log(`adding fuckUMarkers : ` + data.operation); - const targetPlayer = playerList.value.find((p) => p._id == data.playerId); - if (!targetPlayer) { - throw new Error("Cannot remove discard Markers : player not found"); - } - targetPlayer.discardMarkers = data.discardMarkers; - }); - } else if (data.type == "killTeam") { - queueAction(async () => { - const index = game.value?.teams.findIndex((t) => t._id == data.teamId); - if (!index) { - console.error("team index not found. Desyncs might happen"); - await refresh(); - return; - } - game.value?.teams.splice(index, 1); - }); - } else if (data.type == "endGame") { - queueAction(async () => { - alert("game Ended"); - }); - } + }); + } else if (data.type == "unlockEffect") { + queueAction(async () => { + const effectIndex = current_game.currentTurn.lockedEffects.indexOf( + data.effect + ); + current_game.currentTurn.lockedEffects.splice(effectIndex, 1); + await delay(settingsStore.animationSpeed); + }); + } else if (data.type == "currentTurn.updateGold") { + queueAction(async () => { + console.log(`adding gold amount : ` + data.operation); + current_game.currentTurn.gold = data.gold; + }); + } else if (data.type == "currentTurn.updateDamage") { + queueAction(async () => { + console.log(`adding damage amount : ` + data.operation); + current_game.currentTurn.damage = data.damage; + }); + } else if (data.type == "currentTurn.addToken") { + queueAction(async () => { + current_game.currentTurn.tokens.push(data.token); + await delay(settingsStore.animationSpeed); + }); + } else if (data.type == "currentTurn.useToken") { + queueAction(async () => { + const index = current_game.currentTurn.tokens.findIndex( + (t) => t._id == data.tokenId + ); + current_game.currentTurn.tokens.splice(index, 1); + await delay(settingsStore.animationSpeed); + }); + } else if (data.type == "team.updateHealth") { + queueAction(async () => { + const team = game.value?.teams.find((t) => t._id == data.team); + if (!team) { + throw new Error("Team not found"); + } + console.log(`adding health amount : ` + data.operation); + team.health = data.health; + }); + } else if (data.type == "player.addFuckUMarker") { + queueAction(async () => { + console.log(`adding fuckUMarkers : ` + data.operation); + const targetPlayer = playerList.value.find( + (p) => p._id == data.playerId + ); + if (!targetPlayer) { + throw new Error("Cannot add fuckU Markers : player not found"); + } + targetPlayer.fuckUMarkers = data.fuckUMarkers; + }); + } else if (data.type == "player.removeFuckUMarker") { + queueAction(async () => { + console.log(`adding fuckUMarkers : ` + data.operation); + const targetPlayer = playerList.value.find( + (p) => p._id == data.playerId + ); + if (!targetPlayer) { + throw new Error("Cannot remove fuckU Markers : player not found"); + } + targetPlayer.fuckUMarkers = data.fuckUMarkers; + }); + } else if (data.type == "player.addDiscardMarker") { + queueAction(async () => { + console.log(`adding discardMarkers : ` + data.operation); + const targetPlayer = playerList.value.find( + (p) => p._id == data.playerId + ); + if (!targetPlayer) { + throw new Error("Cannot add discard Markers : player not found"); + } + targetPlayer.discardMarkers = data.discardMarkers; + }); + } else if (data.type == "player.removeDiscardMarker") { + queueAction(async () => { + console.log(`adding fuckUMarkers : ` + data.operation); + const targetPlayer = playerList.value.find( + (p) => p._id == data.playerId + ); + if (!targetPlayer) { + throw new Error("Cannot remove discard Markers : player not found"); + } + targetPlayer.discardMarkers = data.discardMarkers; + }); + } else if (data.type == "killTeam") { + queueAction(async () => { + const index = game.value?.teams.findIndex((t) => t._id == data.teamId); + if (!index) { + console.error("team index not found. Desyncs might happen"); + await refresh(); + return; + } + game.value?.teams.splice(index, 1); + }); + } else if (data.type == "endGame") { + queueAction(async () => { + alert("game Ended"); + }); + } + }); }); const playerList = computed(() => diff --git a/pages/lobby.vue b/pages/lobby.vue index 4bd73ec..54c8dcd 100644 --- a/pages/lobby.vue +++ b/pages/lobby.vue @@ -2,33 +2,13 @@ // import { playSound } from '~/helpers/audioHelpers'; import { playSound } from "~/helpers/audioHelpers"; import { createGame, getLobby, subscribe } from "~/netcode"; -import type { Player } from "~/netcode/interfaces"; +import type { Game, Player } from "~/netcode/interfaces"; const authStore = useAuthStore(); -const games = await getLobby(); +let eventSource: EventSource; -const 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) { - 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; - } - } -}); +let games = ref([]); const erika_alive = ref(true); const router = useRouter(); @@ -38,6 +18,31 @@ function killErika() { erika_alive.value = false; } +onBeforeMount(async () => { + games.value = (await getLobby()).value; + console.log(games.value); + 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) { + 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(); }); diff --git a/pages/test.vue b/pages/test.vue deleted file mode 100644 index e519b41..0000000 --- a/pages/test.vue +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/services/loadCards.ts b/services/loadCards.ts index 141b220..da25a33 100644 --- a/services/loadCards.ts +++ b/services/loadCards.ts @@ -1,7 +1,5 @@ import type { App, Component, DefineComponent } from "vue"; -import { getCurrentInstance } from "vue"; - export const cards = {} as Record; export async function compileCards(app: App) { @@ -41,28 +39,41 @@ export async function compileCards(app: App) { Object.entries(svgs).map(async ([k, v]) => { const regex = /([\d]+)(?=\.svg)/gm; const url = (v as any).default as string; - let template = await (await fetch(url)).text(); - let arrayTemplate = template.split("\n"); - arrayTemplate.splice(0, 1); - template = arrayTemplate.join("\n"); + try { + let template: string; + if (process.dev && !process.client) { + template = (await import(k + "?raw" /* @vite-ignore */)).default; + } else { + template = await (await fetch(url)).text(); + } - return [ - Number(k.match(regex)![0]).toString(), - markRaw( - defineAsyncComponent({ - loader: async () => - defineComponent({ - props: ["used_effects_indexes", "card"], - methods: { - effectClick(effect: number) { - this.$emit("effectClick", effect); + let arrayTemplate = template.split("\n"); + arrayTemplate.splice(0, 1); + template = arrayTemplate.join("\n"); + return [ + Number(k.match(regex)![0]).toString(), + markRaw( + defineAsyncComponent({ + loader: async () => + defineComponent({ + props: ["used_effects_indexes", "card"], + methods: { + effectClick(effect: number) { + this.$emit("effectClick", effect); + }, }, - }, - template: template, - }), - }) - ), - ]; + template: template, + }), + }) + ), + ]; + } catch (e) { + console.error(e, k); + return []; + } + // let arrayTemplate = template.split("\n"); + // arrayTemplate.splice(0, 1); + // template = arrayTemplate.join("\n"); }) );