Initial commit

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "events"]
+	path = netcode/events
+	url = git@git.legonzaur.fr:concept/events.git

.vscode/launch.json

@@ -0,0 +1,33 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "client: chrome",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "server: nuxt",
+            "outputCapture": "std",
+            "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
+            "args": [
+                "dev"
+            ],
+        }
+    ],
+    "compounds": [
+        {
+            "name": "fullstack: nuxt",
+            "configurations": [
+                "server: nuxt",
+                "client: chrome"
+            ]
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "files.exclude": {
+        "**/.nuxt": true,
+        "**/.output": true,
+        "**/node_modules": true
+    }
+}

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useUserStore } from "~/store/user.store";
+import { useLobbyStore } from "./store/lobby.store";
+import PageHeader from "./components/pageHeader.vue";
+const userStore = useUserStore();
+const lobbyStore = useLobbyStore();
+
+void userStore.whoami();
+void lobbyStore.fetchGames();
+
+
+onBeforeMount(() => {
+  lobbyStore.subscribe();
+});
+
+onBeforeUnmount(() => {
+  lobbyStore.close();
+});
+</script>
+
+<template>
+  <NuxtRouteAnnouncer />
+  <NuxtLayout>
+    <NuxtLoadingIndicator> Loading... </NuxtLoadingIndicator>
+    <PageHeader />
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+@import "vue-multiselect/dist/vue-multiselect.css";
+
+html {
+  height: 100%;
+}
+
+body {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+#__nuxt {
+  height: 100%;
+  display: grid;
+  grid-template-areas:
+    "header"
+    "main";
+  grid-template-rows: min-content 1fr;
+}
+</style>

components/lobby/game.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useLobbyStore } from "~/store/lobby.store";
+import { useUserStore } from "~/store/user.store";
+
+export interface Props {
+  id: number;
+}
+
+const loading = ref(false);
+
+const lobbyStore = useLobbyStore();
+const userStore = useUserStore();
+const props = defineProps<Props>();
+
+const game = lobbyStore.games[props.id];
+</script>
+
+<template>
+  {{ game.id }}
+  <User
+    v-for="player in game.players"
+    :key="player.id"
+    :id="player.userId"
+  ></User>
+  {{ game.started }}
+  {{ game }}
+
+  <NuxtLink :to="'/game/' + id"
+    ><input type="button" value="open" :disabled="!userStore.self || loading"
+  /></NuxtLink>
+  <br />
+</template>
+
+<style lang="css" scoped>
+input:disabled {
+  cursor: wait;
+}
+</style>

components/pageHeader.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { GameResponseDTO } from "~/netcode/events/dto/gameresponse.dto";
+import { useLobbyStore } from "~/store/lobby.store";
+import { useUserStore } from "~/store/user.store";
+
+const userStore = useUserStore();
+const lobbyStore = useLobbyStore();
+
+const currentGames = computed(() => {
+  const self = userStore.self;
+  if (!self) {
+    return [];
+  }
+  const games = Object.values(lobbyStore.games).filter((g) =>
+    g.players.some((p) => p.userId == self.id)
+  );
+  return games;
+});
+</script>
+
+<template>
+  <header>
+    <div id="self">
+      <template v-if="userStore.has_contacted">
+        <ClientOnly>
+          <template v-if="userStore.self && userStore.self.id">
+            <User :id="userStore.self.id"></User>
+            <NuxtLink :to="$config.public.endpoint + '/logout'"
+              ><button>Logout</button></NuxtLink
+            >
+          </template>
+          <NuxtLink v-else :to="$config.public.discordLoginEndpoint">
+            <button>Login</button>
+          </NuxtLink>
+        </ClientOnly>
+      </template>
+
+      <template v-else> Contacting server... </template>
+    </div>
+
+    <div id="links">
+      <NuxtLink to="/">Home</NuxtLink>
+      <NuxtLink to="/words">Words</NuxtLink>
+      <NuxtLink to="/concepts">Concepts</NuxtLink>
+    </div>
+
+    <div id="games">
+      <NuxtLink v-for="game of currentGames" :to="'/game/' + game.id"
+        ><div>Back to Current Game</div></NuxtLink
+      >
+    </div>
+  </header>
+</template>
+
+<style lang="css" scoped>
+header,
+header * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+header > * {
+  flex: 1 1 0px;
+}
+
+div#self {
+  gap: 10px;
+  height: 32px;
+}
+
+div#links {
+  flex-grow: 4;
+  gap: 1%;
+}
+
+div#links {
+}
+</style>

components/user.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useUserStore } from "~/store/user.store";
+
+export interface Props {
+  id: string;
+}
+
+const userStore = useUserStore();
+const props = defineProps<Props>();
+
+const user = await userStore.fetchUser(props.id);
+</script>
+
+<template>
+  <div class="user">
+    <img loading="lazy" class="user-avatar"
+      :src="`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}.webp?size=32`" />
+    {{ user?.username }}
+  </div>
+</template>
+
+<style lang="css">
+div.user {
+  display: flex;
+  align-items: center;
+}
+
+img.user-avatar {
+  height: 32px;
+  border-radius: 50%;
+}
+</style>

components/word.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { WordResponseDTO } from "~/netcode/events/dto/wordresponse.dto";
+import { useUserStore } from "~/store/user.store";
+import { useWordStore } from "~/store/word.store";
+
+export interface Props {
+  id: number;
+}
+
+const props = defineProps<Props>();
+
+const wordStore = useWordStore();
+const userStore = useUserStore();
+
+const word = wordStore.words[props.id];
+
+const disabled = computed(() => word.loading || !userStore.self);
+
+async function changeWordState() {
+  if (word.loading) {
+    return;
+  }
+  word.loading = true;
+  if (word.enabled) {
+    await wordStore.disableWord(word);
+  } else {
+    await wordStore.enableWord(word);
+  }
+  word.loading = false;
+}
+
+async function deleteWord() {
+  if (word.loading) {
+    return;
+  }
+  word.loading = true;
+  try {
+    await wordStore.deleteWord(word);
+  } finally {
+    word.loading = false;
+  }
+}
+</script>
+
+<template>
+  <div class="word">
+    <span>{{ word.value }}</span>
+    <input
+      type="checkbox"
+      :checked="word.enabled"
+      :disabled="disabled"
+      @click.prevent="changeWordState"
+    />
+    <input
+      :disabled="disabled"
+      type="button"
+      @click="deleteWord"
+      value="Delete"
+    />
+    <User :id="word.ownerId"></User>
+  </div>
+</template>
+
+<style lang="css" scoped>
+div.word {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  align-items: center;
+}
+
+input {
+  min-height: 28px;
+}
+
+input:disabled {
+  cursor: wait;
+}
+</style>

eslint.config.mjs

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import typescriptEslintEslintPlugin from "@typescript-eslint/eslint-plugin";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: ["**/.eslintrc.js"],
+  },
+  ...compat.extends(
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:prettier/recommended"
+  ),
+  {
+    plugins: {
+      "@typescript-eslint": typescriptEslintEslintPlugin,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+
+      parser: tsParser,
+      ecmaVersion: 5,
+      sourceType: "module",
+
+      parserOptions: {
+        project: "tsconfig.json",
+        tsconfigRootDir: __dirname,
+      },
+    },
+
+    rules: {
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "require-await": "off",
+      "@typescript-eslint/require-await": "error",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
+    },
+  },
+];

middleware/auth.global.ts

@@ -0,0 +1,31 @@
+import { useGameStore } from "~/store/game.store";
+
+const validPaths = ["/", "/rules", "/test", "/words", "/concepts"];
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  const config = useRuntimeConfig();
+
+  if (to.path.startsWith("/game/")) {
+    const gameId = Number(to.params.id);
+    const gameStore = useGameStore();
+
+    return;
+  }
+
+  if (to.path == "/login") {
+    const code = to.query.code;
+    if (!code) {
+      navigateTo(config.public.discordLoginEndpoint, { external: true });
+    } else {
+      navigateTo("/login");
+    }
+    return;
+  }
+
+  if (validPaths.includes(to.path)) {
+    return;
+  }
+  if (to.path !== "/") {
+    return navigateTo("/");
+  }
+});

netcode/handlers/game.handler.ts

@@ -0,0 +1,63 @@
+import { useGameStore } from "~/store/game.store";
+import type {
+  GameDeleteEvent,
+  GameEndTurnEvent,
+  GameJoinEvent,
+  GameMessageDeleteEvent,
+  GameMessageEvent,
+  GameStartEvent,
+} from "../events/game.events";
+import type { GameResponseDTO } from "../events/dto/gameresponse.dto";
+import { useUserStore } from "~/store/user.store";
+
+export const handlers = {
+  joingame: (event: GameJoinEvent) => {
+    const gameStore = useGameStore();
+    gameStore.game.players.push(event.player);
+  },
+  start: (event: GameStartEvent) => {
+    const gameStore = useGameStore();
+    const userStore = useUserStore();
+    gameStore.game.started = true;
+    gameStore.game.currentPlayer = event.currentPlayer;
+    gameStore.currentWord = null;
+    if (userStore.self && userStore.self.id == event.currentPlayer.userId) {
+      void gameStore.getCurrentWord(gameStore.game.id);
+    }
+  },
+  delete: async (event: GameDeleteEvent) => {
+    const gameStore = useGameStore();
+    gameStore.game = {} as GameResponseDTO;
+    alert("Game deleted");
+    await navigateTo("/");
+  },
+  message: (event: GameMessageEvent) => {
+    const gameStore = useGameStore();
+    gameStore.game.messages.push(event.message);
+    if (!event.message.authorId) {
+      const player = gameStore.game.players.find(
+        (p) => p.userId == event.message.value,
+      );
+      if (player) {
+        player.score++;
+      }
+    }
+  },
+  deleteMessage: (event: GameMessageDeleteEvent) => {
+    const gameStore = useGameStore();
+    const index = gameStore.game.messages.findIndex(
+      (m) => m.id == event.messageId,
+    );
+    gameStore.game.messages.splice(index, 1);
+  },
+  endTurn: (event: GameEndTurnEvent) => {
+    const gameStore = useGameStore();
+    const userStore = useUserStore();
+    gameStore.game.players.forEach((p) => (p.hasGuessed = false));
+    gameStore.game.messages = [];
+    gameStore.game.currentPlayer = event.currentPlayer;
+    if (userStore.self && userStore.self.id == event.currentPlayer.userId) {
+      void gameStore.getCurrentWord(gameStore.game.id);
+    }
+  },
+};

netcode/handlers/lobby.handler.ts

@@ -0,0 +1,34 @@
+import { useLobbyStore } from "~/store/lobby.store";
+import type {
+  LobbyCreateEvent,
+  LobbyDeleteEvent,
+  LobbyJoinEvent,
+  LobbyLeaveEvent,
+  LobbyStartEvent,
+} from "../events/lobby.events";
+
+export const handlers = {
+  create: (event: LobbyCreateEvent) => {
+    const lobbyStore = useLobbyStore();
+    lobbyStore.games[event.game.id] = event.game;
+  },
+  start: (event: LobbyStartEvent) => {
+    const lobbyStore = useLobbyStore();
+    lobbyStore.games[event.game.id].started = true;
+  },
+  delete: (event: LobbyDeleteEvent) => {
+    const lobbyStore = useLobbyStore();
+    delete lobbyStore.games[event.id];
+  },
+  joingame: (event: LobbyJoinEvent) => {
+    const lobbyStore = useLobbyStore();
+    lobbyStore.games[event.game.id].players.push(event.player);
+  },
+  leavegame: (event: LobbyLeaveEvent) => {
+    const lobbyStore = useLobbyStore();
+    const playerIndex = lobbyStore.games[event.game.id].players.findIndex(
+      (p) => p.userId == event.player.userId,
+    );
+    lobbyStore.games[event.game.id].players.splice(playerIndex, 1);
+  },
+};

netcode/handlers/word.handler.ts

@@ -0,0 +1,31 @@
+import { useWordStore } from "~/store/word.store";
+import {
+  WordCreateEvent,
+  WordDeleteEvent,
+  WordDisableEvent,
+  WordEditEvent,
+  WordEnableEvent,
+} from "../events/word.events";
+
+export const handlers = {
+  create: (event: WordCreateEvent) => {
+    const wordStore = useWordStore();
+    wordStore.words[event.word.id] = event.word;
+  },
+  edit: (event: WordEditEvent) => {
+    const wordStore = useWordStore();
+    wordStore.words[event.word.id].value = event.word.value;
+  },
+  delete: (event: WordDeleteEvent) => {
+    const wordStore = useWordStore();
+    delete wordStore.words[event.id];
+  },
+  enable: (event: WordEnableEvent) => {
+    const wordStore = useWordStore();
+    wordStore.words[event.id].enabled = true;
+  },
+  disable: (event: WordDisableEvent) => {
+    const wordStore = useWordStore();
+    wordStore.words[event.id].enabled = false;
+  },
+};

netcode/index.ts

@@ -0,0 +1,8 @@
+export function subscribe(endpoint: string) {
+  const config = useRuntimeConfig();
+  const evtSource = new EventSource(config.public.endpoint + endpoint, {
+    withCredentials: true,
+  });
+
+  return evtSource;
+}

nuxt.config.ts

@@ -0,0 +1,24 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+import 'reflect-metadata';
+
+export default defineNuxtConfig({
+  compatibilityDate: '2024-11-01',
+  devtools: { enabled: true },
+
+  runtimeConfig: {
+    public: {
+      endpoint: "https://playtest.legonzaur.fr/api", // can be overridden by NUXT_PUBLIC_ENDPOINT environment variable
+      discordLoginEndpoint: "",
+      devMode: false,
+    },
+  },
+
+  nitro: {
+    prerender: {
+      routes: ["/login", "/"],
+      crawlLinks: true,
+    },
+  },
+
+  modules: ["@pinia/nuxt", "@nuxt/image"],
+})

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/image": "^1.9.0",
+    "@pinia/nuxt": "^0.9.0",
+    "class-transformer": "^0.5.1",
+    "nuxt": "^3.17.2",
+    "pinia": "^2.3.0",
+    "reflect-metadata": "^0.2.2",
+    "vue": "latest",
+    "vue-multiselect": "^3.1.0",
+    "vue-router": "latest"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
+    "@typescript-eslint/typescript-estree": "^8.20.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "typescript-eslint": "^8.20.0"
+  }
+}

pages/game/[id].vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import type { GameResponseDTO } from "~/netcode/events/dto/gameresponse.dto";
+import { useGameStore } from "~/store/game.store";
+import { useUserStore } from "~/store/user.store";
+const route = useRoute();
+const gameId = Number(route.params.id);
+
+const userStore = useUserStore();
+const gameStore = useGameStore();
+let game = (await gameStore.fetchGame(
+  gameId
+)) as globalThis.Ref<GameResponseDTO>;
+if (!game.value) {
+  navigateTo("/");
+}
+
+onBeforeMount(() => {
+  gameStore.subscribe(gameId);
+});
+
+onUnmounted(() => {
+  gameStore.close();
+});
+
+function startGame() {
+  gameStore.startGame(gameId);
+}
+
+function joinGame() {
+  gameStore.joinGame(gameId);
+}
+
+function deleteGame() {
+  gameStore.deleteGame(gameId);
+}
+
+const isCurrentTurn = computed(
+  () =>
+    userStore.self && userStore.self?.id == game.value?.currentPlayer?.userId
+);
+
+watch(
+  () => userStore.self,
+  () => {
+    if (isCurrentTurn) {
+      if (!userStore.self) {
+        return;
+      }
+      if (!game.value?.currentPlayer) {
+        return;
+      }
+      if (game.value.currentPlayer.userId == userStore.self.id) {
+        void gameStore.getCurrentWord(gameId);
+      }
+    }
+  },
+  { immediate: true }
+);
+
+const wordInput = ref<HTMLInputElement>();
+const loading = ref(false);
+const messageText = ref("");
+async function createWord() {
+  if (messageText.value == "") {
+    return;
+  }
+  if (loading.value) {
+    return;
+  }
+  loading.value = true;
+  try {
+    await gameStore.sendMessage(gameId, messageText.value);
+    messageText.value = "";
+  } finally {
+    nextTick(() => {
+      loading.value = false;
+      nextTick(() => {
+        wordInput.value?.focus();
+      });
+    });
+  }
+}
+
+const selfPlayer = computed(() =>
+  game.value.players.find((p) => p.userId == userStore.self?.id)
+);
+
+function conceptClick(value: string) {
+  console.log(value)
+}
+</script>
+
+<template>
+  <main id="game">
+    <div id="sidebar">
+      <div v-if="isCurrentTurn">Current word : {{ gameStore.currentWord }}</div>
+      Players in game :
+      <div v-for="player in game.players" :key="player.id">
+        <User :id="player.userId"></User> {{ player.score }}
+      </div>
+
+      <template v-if="game.currentPlayer">
+        Current player :
+        <User :id="game.currentPlayer?.userId"></User>
+      </template>
+
+      {{ game }}
+      <template v-if="userStore.self">
+        <template v-if="!game.started">
+          <input type="button" v-if="game.ownerId == userStore.self.id" value="start" @click="startGame" />
+          <input type="button" v-if="!selfPlayer" value="join" @click="joinGame" />
+        </template>
+        <input v-if="game.ownerId == userStore.self.id" type="button" value="delete" @click="deleteGame" />
+      </template>
+
+      <div>
+        Messages
+        <span v-for="message in game.messages" :key="message.id">
+          <template v-if="message.authorId">
+            {{ message.value }}<User :id="message.authorId"></User>
+          </template>
+          <template v-else>
+            <User :id="message.value"></User> Guessed the word !
+          </template>
+        </span>
+        <input ref="wordInput" type="text" :disabled="loading || selfPlayer?.hasGuessed" @keypress.enter="createWord"
+          v-model="messageText" />
+        <button :disabled="loading || selfPlayer?.hasGuessed" @click="createWord">
+          Submit
+        </button>
+      </div>
+    </div>
+    <div id="gridContainer">
+      <ConceptGrid @click="conceptClick"></ConceptGrid>
+    </div>
+
+  </main>
+
+</template>
+
+<style lang="css">
+main#game {
+  display: grid;
+  justify-items: center;
+  grid-template-columns: 1fr minmax(0, 1fr);
+  grid-template-rows: 100%;
+  grid-template-areas: "sidebar grid";
+  height: 100%
+}
+
+#sidebar {
+  grid-area: sidebar;
+}
+
+#gridContainer {
+  justify-self: left;
+  grid-area: grid;
+}
+
+@media only screen and (max-width: 992px) {
+  main#game {
+    grid-template-columns: 100%;
+    grid-template-rows: minmax(0, 650px) 1fr;
+    grid-template-areas: "grid" "sidebar";
+  }
+}
+</style>

pages/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useLobbyStore } from "~/store/lobby.store";
+import { useUserStore } from "~/store/user.store";
+
+const loading = ref(false);
+const lobbyStore = useLobbyStore();
+const userStore = useUserStore();
+
+async function createGame() {
+  if (loading.value) {
+    return;
+  }
+  loading.value = true;
+  await lobbyStore
+    .createGame()
+    .then((data) => {
+      loading.value = false;
+      navigateTo("/game/" + data.id);
+    })
+    .catch((e) => {
+      if (e.data.statusCode == 400) {
+        console.error("Owned game limit reached");
+      } else {
+        console.log(e);
+      }
+    });
+}
+</script>
+
+<template>
+  <main>
+    <LobbyGame v-for="game in lobbyStore.games" :key="game.id" :id="game.id" />
+    <input type="button" value="Create Game" @click="createGame" :disabled="!userStore.self || loading" />
+  </main>
+
+</template>
+
+<style lang="css" scoped>
+input:disabled {
+  cursor: wait;
+}
+</style>

pages/login.vue

@@ -0,0 +1,3 @@
+<template>
+    Login
+</template>

pages/words.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useWordStore } from "~/store/word.store";
+
+const newWord = ref("");
+const wordStore = useWordStore();
+
+await wordStore.fetchWordList();
+
+const loading = ref(false);
+const wordInput = ref<HTMLInputElement | null>(null);
+
+async function createWord() {
+  if (loading.value) {
+    return;
+  }
+  loading.value = true;
+  try {
+    await wordStore.createWord(newWord.value);
+    newWord.value = "";
+  } finally {
+    nextTick(() => {
+      loading.value = false;
+      nextTick(() => {
+        wordInput.value?.focus();
+      });
+    });
+  }
+}
+
+onBeforeMount(() => {
+  wordStore.subscribe();
+});
+
+onUnmounted(() => {
+  wordStore.close();
+});
+</script>
+
+<template>
+  <main id="words">
+    <div class="header">
+      <span>Word</span>
+      <span>Status</span>
+      <span></span>
+      <span>Submitter</span>
+    </div>
+    <Word v-for="word in wordStore.words" :id="word.id" :key="word.id" />
+    <div class="new-word">
+      <span>
+        <input ref="wordInput" type="text" :disabled="loading" @keypress.enter="createWord" v-model="newWord" />
+        <button :disabled="loading" @click="createWord">Submit</button>
+      </span>
+    </div>
+  </main>
+</template>
+
+<style lang="css" scoped>
+main#words {
+  display: flex;
+  flex-direction: column;
+}
+
+div.header {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  align-items: center;
+}
+</style>

public/icons/concept/drawing.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="50mm"
+   height="50mm"
+   viewBox="0 0 50 50"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   sodipodi:docname="drawing.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     inkscape:zoom="2.8170388"
+     inkscape:cx="142.34806"
+     inkscape:cy="132.05356"
+     inkscape:window-width="2560"
+     inkscape:window-height="1371"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <text
+       xml:space="preserve"
+       style="font-size:8.96219px;text-align:start;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;stroke:none;stroke-width:0.744;paint-order:stroke fill markers;stroke-dasharray:none;fill-opacity:1"
+       x="-0.19718018"
+       y="28.360821"
+       id="text1"><tspan
+         sodipodi:role="line"
+         id="tspan1"
+         style="stroke-width:0.744;stroke-dasharray:none;stroke:none;fill:#000000;fill-opacity:1"
+         x="-0.19718018"
+         y="28.360821">Placeholder</tspan></text>
+  </g>
+  <metadata
+     id="metadata1">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <cc:license
+           rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" />
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Legonzaur</dc:title>
+          </cc:Agent>
+        </dc:creator>
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+</svg>

public/robots.txt

@@ -0,0 +1 @@
+

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

store/game.store.ts

@@ -0,0 +1,100 @@
+import { defineStore } from "pinia";
+import { subscribe } from "~/netcode";
+import { GameResponseDTO } from "~/netcode/events/dto/gameresponse.dto";
+import type { ConceptEvent } from "~/netcode/events/events";
+import { handlers } from "~/netcode/handlers/game.handler";
+
+export const useGameStore = defineStore("game", {
+  state: () => ({
+    game: {} as GameResponseDTO,
+    currentWord: null as null | string,
+    eventSource: null as null | EventSource,
+  }),
+  actions: {
+    subscribe(id: number) {
+      this.eventSource = subscribe(`/games/${id}/subscribe`);
+      this.eventSource.addEventListener("message", (message) => {
+        const data = JSON.parse(message.data as string) as ConceptEvent;
+        const type = data.type;
+        console.log(type);
+        if (type in handlers) {
+          handlers[type as keyof typeof handlers](data);
+        }
+      });
+    },
+    close() {
+      this.eventSource?.close();
+    },
+    async fetchGame(id: number) {
+      const config = useRuntimeConfig();
+      const data = await useFetch<GameResponseDTO>(
+        config.public.endpoint + `/games/` + id,
+        {
+          credentials: "include",
+          immediate: true,
+        },
+      );
+      if (data.data.value) {
+        this.game = data.data.value;
+      }
+      return data.data;
+    },
+    async joinGame(id: number) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<GameResponseDTO>(
+        config.public.endpoint + `/games/` + id + "/join",
+        {
+          method: "POST",
+          credentials: "include",
+        },
+      );
+    },
+    async startGame(id: number) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<GameResponseDTO>(
+        config.public.endpoint + `/games/` + id + "/start",
+        {
+          method: "POST",
+          credentials: "include",
+        },
+      );
+    },
+    async deleteGame(id: number) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<GameResponseDTO>(
+        config.public.endpoint + `/games/` + id,
+        {
+          method: "DELETE",
+          credentials: "include",
+        },
+      );
+    },
+    async getCurrentWord(id: number) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<string>(
+        config.public.endpoint + `/games/` + id + "/currentWord",
+        {
+          credentials: "include",
+        },
+      );
+      if (data) {
+        this.currentWord = data;
+      }
+
+      return data;
+    },
+    async sendMessage(id: number, message: string) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<string>(
+        config.public.endpoint + `/games/` + id + "/message",
+        {
+          method: "POST",
+          body: {
+            value: message,
+          },
+          credentials: "include",
+        },
+      );
+    },
+  },
+});

store/lobby.store.ts

@@ -0,0 +1,56 @@
+import { defineStore } from "pinia";
+import { subscribe } from "~/netcode";
+import type { GameResponseDTO } from "~/netcode/events/dto/gameresponse.dto";
+import type { ConceptEvent } from "~/netcode/events/events";
+import { handlers } from "~/netcode/handlers/lobby.handler";
+
+export const useLobbyStore = defineStore("lobby", {
+  state: () => ({
+    games: {} as Record<number, GameResponseDTO>,
+    eventSource: null as null | EventSource,
+  }),
+  actions: {
+    subscribe() {
+      this.eventSource = subscribe(`/games/subscribe`);
+      this.eventSource.addEventListener("message", (message) => {
+        const data = JSON.parse(message.data as string) as ConceptEvent;
+        const type = data.type;
+        if (type in handlers) {
+          handlers[type as keyof typeof handlers](data);
+        }
+      });
+    },
+    close() {
+      this.eventSource?.close();
+    },
+    async fetchGames() {
+      const config = useRuntimeConfig();
+      const data = await useFetch<GameResponseDTO[]>(
+        config.public.endpoint + `/games/`,
+        {
+          credentials: "include",
+          immediate: true,
+        },
+      );
+      if (data.data.value) {
+        for (const game of data.data.value) {
+          this.games[game.id] = game;
+        }
+      }
+
+      return data.data;
+    },
+    async createGame() {
+      const config = useRuntimeConfig();
+      const data = await $fetch<GameResponseDTO>(
+        config.public.endpoint + "/games",
+        {
+          method: "POST",
+          credentials: "include",
+        },
+      );
+      // this.games[data.id] = data;
+      return data;
+    },
+  },
+});

store/user.store.ts

@@ -0,0 +1,50 @@
+import { defineStore } from "pinia";
+import { UserResponseDTO } from "~/netcode/events/dto/userresponse.dto";
+import { type FetchContext } from "ofetch";
+
+export const useUserStore = defineStore("user", {
+  state: () => ({
+    users: {} as Record<string, UserResponseDTO>,
+    self: null as UserResponseDTO | null,
+    has_contacted: false,
+  }),
+  actions: {
+    async fetchUser(id: string) {
+      if (id in this.users) {
+        return this.users[id];
+      }
+      const config = useRuntimeConfig();
+      const data = await useFetch<UserResponseDTO>(
+        config.public.endpoint + `/users/` + id,
+        {
+          credentials: "include",
+          immediate: true,
+        },
+      );
+      if (data.data.value) {
+        this.users[data.data.value.id] = data.data.value;
+      }
+      return data.data.value;
+    },
+    async whoami() {
+      const config = useRuntimeConfig();
+      const req = await useFetch<UserResponseDTO>(
+        config.public.endpoint + "/whoami",
+        {
+          credentials: "include",
+          server: false,
+          immediate: true,
+          onResponse: (data: FetchContext<UserResponseDTO>) => {
+            if (data.response && data.response.ok && data.response._data) {
+              this.self = data.response._data;
+            }
+
+            this.has_contacted = true;
+          },
+          lazy: true,
+        },
+      );
+      return req;
+    },
+  },
+});

store/word.store.ts

@@ -0,0 +1,91 @@
+import { defineStore } from "pinia";
+import { subscribe } from "~/netcode";
+import { WordResponseDTO } from "~/netcode/events/dto/wordresponse.dto";
+import type { ConceptEvent } from "~/netcode/events/events";
+import { handlers } from "~/netcode/handlers/word.handler";
+
+export const useWordStore = defineStore("word", {
+  state: () => ({
+    words: {} as Record<string, WordResponseDTO>,
+    eventSource: null as null | EventSource,
+  }),
+  actions: {
+    subscribe() {
+      this.eventSource = subscribe(`/words/subscribe`);
+      this.eventSource.addEventListener("message", (message) => {
+        const data = JSON.parse(message.data as string) as ConceptEvent;
+        const type = data.type;
+        if (type in handlers) {
+          handlers[type as keyof typeof handlers](data);
+        }
+      });
+    },
+    close() {
+      this.eventSource?.close();
+    },
+    async fetchWordList() {
+      const config = useRuntimeConfig();
+      const data = await useFetch<WordResponseDTO[]>(
+        config.public.endpoint + `/words/all`,
+        {
+          credentials: "include",
+        },
+      );
+      if (data.data.value && !data.error.value) {
+        for (const word of data.data.value) {
+          this.words[word.id] = word;
+        }
+      }
+      return data;
+    },
+    async enableWord(word: WordResponseDTO) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<WordResponseDTO>(
+        config.public.endpoint + `/words/` + word.id + "/enable",
+        {
+          credentials: "include",
+          method: "PUT",
+        },
+      );
+      // word.enabled = true;
+      // return data;
+    },
+    async disableWord(word: WordResponseDTO) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<WordResponseDTO>(
+        config.public.endpoint + `/words/` + word.id + "/disable",
+        {
+          credentials: "include",
+          method: "PUT",
+        },
+      );
+      // word.enabled = false;
+      // return data;
+    },
+
+    async createWord(value: string) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<WordResponseDTO>(
+        config.public.endpoint + `/words/`,
+        {
+          credentials: "include",
+          body: { value },
+          method: "POST",
+        },
+      );
+      // this.words[data.id] = data;
+      // return data;
+    },
+    async deleteWord(word: WordResponseDTO) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<WordResponseDTO>(
+        config.public.endpoint + `/words/` + word.id,
+        {
+          credentials: "include",
+          method: "DELETE",
+        },
+      );
+      // delete this.words[word.id];
+    },
+  },
+});

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "strictPropertyInitialization": false,
+  }
+}