Merge pull request 'React -> Vue' (#6 ) from vue into developmaunt

Reviewed-on: https://git.mau-mau.nl/MauMau/MauMau-Client/pulls/6
Merge remote-tracking branch 'origin/vue' into vue
2024-09-01 15:11:26 +00:00 · 2024-09-01 16:41:11 +02:00 · 2024-09-01 16:41:04 +02:00 · 2024-07-15 14:45:21 +00:00 · 2024-07-14 17:05:07 +02:00 · 2024-07-14 16:28:46 +02:00
88 changed files with 4795 additions and 28247 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,3 +1,3 @@
-.env.example
-.idea
-README.md
+**/node_modules
+**/dist
+.env.local
--- a/.env.example
+++ b/.env.example
@@ -1 +0,0 @@
-REACT_APP_API_URL="mau-mau.nl"
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
--- a/.gitea/workflows/main.yml
+++ b/.gitea/workflows/main.yml
@@ -22,7 +22,7 @@ jobs:
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
-          node-version: 16
+          node-version: 20

      - name: Install dependencies
        run: npm install
@@ -30,9 +30,6 @@ jobs:
      - name: Build
        run: npm run build

-      - name: Test
-        run: npm test -- --watch=false
-
  deploy:
    runs-on: ubuntu-latest
    needs: build
@@ -42,11 +39,6 @@ jobs:
        with:
          fetch-depth: 0

-      - name: Create .env File
-        run: |
-          touch .env
-          echo "REACT_APP_API_URL=https://mau-mau.nl/api \n REACT_APP_WEBSOCKET_URL=ws://mau-mau.nl/api" > .env
-
      - name: Set up Docker BuildX
        uses: docker/setup-buildx-action@v2
        with:
--- a/.gitignore
+++ b/.gitignore
@@ -1,26 +1,30 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.development
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*

+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
--- a/22
+++ b/22
@@ -1,10 +1,18 @@
-# Create a production build of the app
-FROM node:16.9.1 as build
+# build stage
+FROM node:lts-alpine AS build-stage
+ARG API_ENDPOINT="https://api.mau-mau.nl"
+ARG WEBSOCKET_ENDPOINT="wss://api.mau-mau.nl"
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
 COPY . .
-
-RUN npm install --silent
+RUN echo "VITE_API_ENDPOINT=${API_ENDPOINT}" > .env
+RUN echo "VITE_WEBSOCKET_ENDPOINT=${WEBSOCKET_ENDPOINT}" >> .env
 RUN npm run build
-RUN npm install -g serve

-EXPOSE 3000
-CMD serve -l 3000 -s build
+# production stage
+FROM nginx:stable-alpine AS production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
--- a/README.md
+++ b/README.md
@@ -1 +1,32 @@
-Mau
+# MauMau-Client-Vue
+
+## Env variables
+
+```env
+VITE_API_ENDPOINT=http://{url}:{port}
+VITE_WEBSOCKET_ENDPOINT=ws://{url}:{port}
+```
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,24 +0,0 @@
-version: '3.9'
-services:
-  server:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    container_name: 'MauMau-Client'
-    ports:
-      - '80:80'
-    restart: always
-    networks:
-      - MauMau
-    labels:
-      traefik.enable: "true"
-      traefik.http.routers.maumau.entrypoints: "websecure"
-      traefik.http.routers.maumau.rule: "Host(`mau-mau.nl`)"
-      traefik.http.routers.maumau.tls: "true"
-      traefik.http.routers.maumau.tls.certresolver: "lets-encrypt"
-      traefik.docker.network: "traefik"
-networks:
-  MauMau:
-    driver: bridge
-  traefik:
-      external: true
--- a/env.d.ts
+++ b/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/index.html
+++ b/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mau Mau!</title>
+</head>
+<body id="app"></body>
+<script type="module" src="/src/main.ts"></script>
+</html>
--- a/nginx.conf
+++ b/nginx.conf
@@ -0,0 +1,8 @@
+server {
+  listen 80;
+  location / {
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+    try_files $uri $uri/ /index.html =404;
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,48 +1,44 @@
 {
  "name": "maumau-client",
-  "version": "0.1.0",
+  "version": "0.0.0",
  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.14",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-query": "^3.39.3",
-    "react-router": "^6.9.0",
-    "react-router-dom": "^6.9.0",
-    "react-scripts": "5.0.1",
-    "react-use-websocket": "^4.3.1",
-    "sass": "^1.59.3",
-    "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
-  },
+  "type": "module",
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "@mdi/svg": "^7.4.47",
+    "@vueuse/core": "^10.11.0",
+    "pinia": "^2.1.7",
+    "vue": "^3.4.21",
+    "vue-confetti-explosion": "^1.0.2",
+    "vue-router": "^4.3.0",
+    "vue-toast-notification": "^3.1.2"
  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.12.5",
+    "@types/uuid": "^9.0.8",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "npm-run-all2": "^6.1.2",
+    "prettier": "^3.2.5",
+    "sass": "^1.77.5",
+    "typescript": "~5.4.0",
+    "vite": "^5.2.8",
+    "vite-plugin-vue-devtools": "^7.0.25",
+    "vue-tsc": "^2.0.11"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Mau-Mau!"/>
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Mau-Mau</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,25 +0,0 @@
-{
-  "short_name": "Mau Mau",
-  "name": "Mau Mau",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('Home screen contains \'MauMau\'', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/Mau-Mau/i);
-  expect(linkElement).toBeInTheDocument();
-});
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +0,0 @@
-import React from 'react';
-import '../src/styles/App.scss';
-import Router from "./config/Router";
-import {useTheme} from "./utils/contexts/ThemeContext";
-
-function App() {
-
-    const {isDarkMode} = useTheme();
-
-    return (
-        <div className={`app ${isDarkMode ? 'dark' : 'light'}`}>
-            <Router/>
-        </div>
-    );
-}
-
-export default App;
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <RouterView />
+</template>
+
+<style lang="scss">
+@import "./scss/variables";
+@import "./scss/layout";
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  @extend .container-full;
+
+  background-color: $background-color;
+  color: $background-text-color;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+body {
+  @extend .container-full;
+
+  position: relative;
+  padding: 1rem;
+}
+</style>
--- a/src/assets/fonts/CattieRegular.ttf
+++ b/src/assets/fonts/CattieRegular.ttf
--- a/src/assets/fonts/OrientalCatsLight.otf
+++ b/src/assets/fonts/OrientalCatsLight.otf
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import StylessButton from "@/components/button/StylessButton.vue";
+import {nextTick, reactive, ref} from "vue";
+import {useScroll, watchArray} from "@vueuse/core";
+
+export interface ChatMessage {
+  Id: string;
+  Sender: string;
+  Message: string;
+}
+
+const props = defineProps<{
+  chats: ChatMessage[]
+}>();
+
+const emits = defineEmits<{
+  (event: "send", message: string): void
+}>();
+
+const chatRef = ref<HTMLElement>();
+const scroll = useScroll(chatRef);
+
+const state = reactive<{
+  chatInput: string;
+}>({
+  chatInput: "",
+});
+
+watchArray(props.chats, async () => {
+  await nextTick();
+  if (scroll.arrivedState.bottom) {
+    chatRef.value?.children[chatRef.value.children.length - 1]?.scrollIntoView();
+  }
+});
+
+const sendChat = () => {
+  emits("send", state.chatInput);
+  state.chatInput = "";
+};
+</script>
+
+<template>
+  <ol ref="chatRef" class="chat-list">
+    <li v-for="chat in chats" :key="chat.Id">
+      <strong>{{ chat.Sender }}</strong>: {{ chat.Message }}
+    </li>
+  </ol>
+  <form @submit.prevent="sendChat" class="chat-form">
+    <label>
+      Chat:
+      <input v-model="state.chatInput" type="text" autocomplete="off"/>
+    </label>
+    <StylessButton type="submit">Send</StylessButton>
+  </form>
+</template>
+
+<style scoped lang="scss">
+.chat {
+  &-list {
+    list-style-type: none;
+    word-wrap: break-word;
+    overflow-y: scroll;
+    padding: 0;
+
+    li {
+      margin-bottom: 0.25rem;
+    }
+  }
+
+  &-form {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    background-color: #2E2E2E;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+
+    input {
+      background-color: transparent;
+      border: none;
+      color: white;
+      outline: none;
+    }
+  }
+}
+</style>
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  to?: string,
+  show?: boolean,
+}>(), {
+  to: "body",
+});
+</script>
+
+<template>
+  <Teleport v-if="show" :to="to">
+    <Transition>
+      <dialog v-if="show" class="modal">
+        <slot />
+      </dialog>
+    </Transition>
+  </Teleport>
+</template>
+
+
+<style scoped lang="scss">
+@import "@/scss/layout";
+
+.modal {
+  @extend .container-fill, .place-center;
+
+  background-color: rgba(0, 0, 0, 0.25);
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  > * {
+    z-index: 1000;
+  }
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
--- a/src/components/button/DangerButton.vue
+++ b/src/components/button/DangerButton.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const emits = defineEmits<{
+  (event: "click"): void
+}>();
+
+const onClick = () => {
+  emits("click");
+}
+</script>
+
+<template>
+  <button class="danger-button" @click="onClick">
+    <slot />
+  </button>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/variables";
+
+.danger-button {
+  background: $danger-color;
+  color: $surface-text-color;
+  border: none;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  vertical-align: baseline;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: inherit;
+  }
+
+  &:hover {
+    background-color: lighten($danger-color, 10%);
+  }
+}
+</style>
--- a/src/components/button/PrimaryButton.vue
+++ b/src/components/button/PrimaryButton.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const emits = defineEmits<{
+  (event: "click"): void
+}>();
+
+const onClick = () => {
+  emits("click");
+}
+</script>
+
+<template>
+<button class="primary-button" @click="onClick">
+  <slot />
+</button>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/variables";
+
+.primary-button {
+  background: $surface-color;
+  color: $surface-text-color;
+  border: none;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  vertical-align: baseline;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: inherit;
+  }
+
+  &:hover {
+    background-color: lighten($surface-color, 10%);
+  }
+}
+</style>
--- a/src/components/button/StylessButton.vue
+++ b/src/components/button/StylessButton.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const props = defineProps<{
+  disabled?: boolean
+}>();
+
+const emits = defineEmits<{
+  (event: "click"): void
+}>();
+
+const onClick = () => {
+  emits('click');
+};
+</script>
+
+<template>
+  <button class="styless-button" :disabled="disabled" @click="onClick">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.styless-button {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  vertical-align: baseline;
+  outline: inherit;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: inherit;
+  }
+}
+</style>
--- a/src/components/form/Input.vue
+++ b/src/components/form/Input.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {reactive} from "vue";
+
+const props = defineProps<{
+  initialValue?: string
+  placeholder?: string
+  clearOnSubmit?: boolean
+}>();
+
+const emit = defineEmits<{
+  (event: "input", value: string): void
+  (event: "submit", value: string): void
+}>();
+
+const state = reactive<{
+  value: string,
+}>({
+  value: props.initialValue ?? ""
+});
+
+const onInput = () => {
+  emit('input', state.value);
+};
+
+const onSubmit = () => {
+  emit('submit', state.value);
+  if (props.clearOnSubmit) state.value = '';
+};
+</script>
+
+<template>
+  <label class="input">
+    <input v-model="state.value" v-on:keydown.prevent.enter="onSubmit" @input="onInput"
+           type="text" :placeholder="placeholder" autocomplete="off"/>
+    <slot name="buttonEnd" @click="onSubmit"/>
+  </label>
+</template>
+
+<style scoped>
+.input {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  background-color: #2E2E2E;
+  border-radius: 0.5rem;
+
+  input {
+    background-color: transparent;
+    border: none;
+    color: white;
+    outline: none;
+    min-width: 0;
+    padding: 1rem;
+    text-align: center;
+
+    &::placeholder {
+      text-align: center;
+    }
+  }
+}
+</style>
--- a/src/components/layout/Backdrop.vue
+++ b/src/components/layout/Backdrop.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div class="backdrop">
+  <slot />
+</div>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/layout.scss";
+
+.backdrop {
+  @extend .container-fill;
+
+  top: 0;
+  left: 0;
+  position: absolute;
+  z-index: -1;
+}
+</style>
--- a/src/components/layout/CenterItem.vue
+++ b/src/components/layout/CenterItem.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div class="center">
+  <slot />
+</div>
+</template>
+
+<style scoped>
+.center {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+}
+</style>
--- a/src/components/maumau/game/Card.vue
+++ b/src/components/maumau/game/Card.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import StylessButton from "@/components/button/StylessButton.vue";
+import type {ICard} from "@/types/card.type";
+import {computed} from "vue";
+
+const props = withDefaults(defineProps<{
+  card?: ICard,
+  clickable?: boolean,
+  hoverable?: boolean
+}>(), {
+  clickable: p => p.card !== undefined
+});
+
+const emits = defineEmits<{
+  (event: 'click', card?: ICard): void
+}>();
+
+const imageUrl = computed(() => {
+  if (!props.card) {
+    return new URL("@/assets/cards/back.png", import.meta.url).href;
+  }
+
+  // I hate this with a passion, but vite doesn't want to resolve dynamic paths >:(
+  switch (props.card.type) {
+    case "SPADES":
+      switch (props.card.value) {
+        case "TWO":
+          return new URL("@/assets/cards/spades_two.png", import.meta.url).href;
+        case "THREE":
+          return new URL("@/assets/cards/spades_three.png", import.meta.url).href;
+        case "FOUR":
+          return new URL("@/assets/cards/spades_four.png", import.meta.url).href;
+        case "FIVE":
+          return new URL("@/assets/cards/spades_five.png", import.meta.url).href;
+        case "SIX":
+          return new URL("@/assets/cards/spades_six.png", import.meta.url).href;
+        case "SEVEN":
+          return new URL("@/assets/cards/spades_seven.png", import.meta.url).href;
+        case "EIGHT":
+          return new URL("@/assets/cards/spades_eight.png", import.meta.url).href;
+        case "NINE":
+          return new URL("@/assets/cards/spades_nine.png", import.meta.url).href;
+        case "TEN":
+          return new URL("@/assets/cards/spades_ten.png", import.meta.url).href;
+        case "JACK":
+          return new URL("@/assets/cards/spades_jack.png", import.meta.url).href;
+        case "QUEEN":
+          return new URL("@/assets/cards/spades_queen.png", import.meta.url).href;
+        case "KING":
+          return new URL("@/assets/cards/spades_king.png", import.meta.url).href;
+        case "ACE":
+          return new URL("@/assets/cards/spades_ace.png", import.meta.url).href;
+        default:
+          return new URL("@/assets/cards/back.png", import.meta.url).href;
+      }
+    case "HEARTS":
+      switch (props.card.value) {
+        case "TWO":
+          return new URL("@/assets/cards/hearts_two.png", import.meta.url).href;
+        case "THREE":
+          return new URL("@/assets/cards/hearts_three.png", import.meta.url).href;
+        case "FOUR":
+          return new URL("@/assets/cards/hearts_four.png", import.meta.url).href;
+        case "FIVE":
+          return new URL("@/assets/cards/hearts_five.png", import.meta.url).href;
+        case "SIX":
+          return new URL("@/assets/cards/hearts_six.png", import.meta.url).href;
+        case "SEVEN":
+          return new URL("@/assets/cards/hearts_seven.png", import.meta.url).href;
+        case "EIGHT":
+          return new URL("@/assets/cards/hearts_eight.png", import.meta.url).href;
+        case "NINE":
+          return new URL("@/assets/cards/hearts_nine.png", import.meta.url).href;
+        case "TEN":
+          return new URL("@/assets/cards/hearts_ten.png", import.meta.url).href;
+        case "JACK":
+          return new URL("@/assets/cards/hearts_jack.png", import.meta.url).href;
+        case "QUEEN":
+          return new URL("@/assets/cards/hearts_queen.png", import.meta.url).href;
+        case "KING":
+          return new URL("@/assets/cards/hearts_king.png", import.meta.url).href;
+        case "ACE":
+          return new URL("@/assets/cards/hearts_ace.png", import.meta.url).href;
+        default:
+          return new URL("@/assets/cards/back.png", import.meta.url).href;
+      }
+    case "DIAMONDS":
+      switch (props.card.value) {
+        case "TWO":
+          return new URL("@/assets/cards/diamonds_two.png", import.meta.url).href;
+        case "THREE":
+          return new URL("@/assets/cards/diamonds_three.png", import.meta.url).href;
+        case "FOUR":
+          return new URL("@/assets/cards/diamonds_four.png", import.meta.url).href;
+        case "FIVE":
+          return new URL("@/assets/cards/diamonds_five.png", import.meta.url).href;
+        case "SIX":
+          return new URL("@/assets/cards/diamonds_six.png", import.meta.url).href;
+        case "SEVEN":
+          return new URL("@/assets/cards/diamonds_seven.png", import.meta.url).href;
+        case "EIGHT":
+          return new URL("@/assets/cards/diamonds_eight.png", import.meta.url).href;
+        case "NINE":
+          return new URL("@/assets/cards/diamonds_nine.png", import.meta.url).href;
+        case "TEN":
+          return new URL("@/assets/cards/diamonds_ten.png", import.meta.url).href;
+        case "JACK":
+          return new URL("@/assets/cards/diamonds_jack.png", import.meta.url).href;
+        case "QUEEN":
+          return new URL("@/assets/cards/diamonds_queen.png", import.meta.url).href;
+        case "KING":
+          return new URL("@/assets/cards/diamonds_king.png", import.meta.url).href;
+        case "ACE":
+          return new URL("@/assets/cards/diamonds_ace.png", import.meta.url).href;
+        default:
+          return new URL("@/assets/cards/back.png", import.meta.url).href;
+      }
+    case "CLUBS":
+      switch (props.card.value) {
+        case "TWO":
+          return new URL("@/assets/cards/clubs_two.png", import.meta.url).href;
+        case "THREE":
+          return new URL("@/assets/cards/clubs_three.png", import.meta.url).href;
+        case "FOUR":
+          return new URL("@/assets/cards/clubs_four.png", import.meta.url).href;
+        case "FIVE":
+          return new URL("@/assets/cards/clubs_five.png", import.meta.url).href;
+        case "SIX":
+          return new URL("@/assets/cards/clubs_six.png", import.meta.url).href;
+        case "SEVEN":
+          return new URL("@/assets/cards/clubs_seven.png", import.meta.url).href;
+        case "EIGHT":
+          return new URL("@/assets/cards/clubs_eight.png", import.meta.url).href;
+        case "NINE":
+          return new URL("@/assets/cards/clubs_nine.png", import.meta.url).href;
+        case "TEN":
+          return new URL("@/assets/cards/clubs_ten.png", import.meta.url).href;
+        case "JACK":
+          return new URL("@/assets/cards/clubs_jack.png", import.meta.url).href;
+        case "QUEEN":
+          return new URL("@/assets/cards/clubs_queen.png", import.meta.url).href;
+        case "KING":
+          return new URL("@/assets/cards/clubs_king.png", import.meta.url).href;
+        case "ACE":
+          return new URL("@/assets/cards/clubs_ace.png", import.meta.url).href;
+        default:
+          return new URL("@/assets/cards/back.png", import.meta.url).href;
+      }
+      case "JOKER":
+        switch (props.card.value) {
+          case "RED":
+            return new URL("@/assets/cards/joker_red.png", import.meta.url).href;
+          case "BLACK":
+            return new URL("@/assets/cards/joker_black.png", import.meta.url).href;
+          default:
+            return new URL("@/assets/cards/back.png", import.meta.url).href;
+        }
+    default:
+      return new URL("@/assets/cards/back.png", import.meta.url).href;
+  }
+});
+
+const onClick = () => {
+  emits('click', props.card);
+}
+</script>
+
+<template>
+  <StylessButton class="card" :class="hoverable ? 'card__hover' : ''" :disabled="!clickable" @click="onClick">
+    <img class="card__texture" :src="imageUrl" :alt="card?.type + ' ' + card?.value"/>
+  </StylessButton>
+</template>
+
+<style scoped lang="scss">
+.card {
+  width: 100px;
+  height: 150px;
+  min-width: 100px;
+
+  &__texture {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  &__hover {
+    img {
+      transition: margin-top 250ms ease-in-out;
+
+      &:hover {
+        margin-top: -1rem;
+      }
+    }
+  }
+}
+</style>
--- a/src/components/maumau/game/CurrentTypeBackdrop.vue
+++ b/src/components/maumau/game/CurrentTypeBackdrop.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import Backdrop from "@/components/layout/Backdrop.vue";
+import {CardType} from "@/types/card.type";
+import SpadesImage from "@mdi/svg/svg/cards-spade.svg";
+import HeartsImage from "@mdi/svg/svg/cards-heart.svg";
+import DiamondsImage from "@mdi/svg/svg/cards-diamond.svg";
+import ClubsImage from "@mdi/svg/svg/cards-club.svg";
+import {computed} from "vue";
+
+const props = defineProps<{
+  currentType: CardType;
+}>();
+
+const currentTypeImage = computed(() => {
+  switch (props.currentType) {
+    case CardType.SPADES:
+      return SpadesImage;
+    case CardType.HEARTS:
+      return HeartsImage;
+    case CardType.DIAMONDS:
+      return DiamondsImage;
+    case CardType.CLUBS:
+      return ClubsImage;
+    default:
+      return undefined;
+  }
+})
+
+</script>
+
+<template>
+  <Backdrop>
+    <div class="current-type-backdrop">
+      <Transition v-if="currentTypeImage">
+        <img :key="currentType" :src="currentTypeImage" :alt="currentType">
+      </Transition>
+    </div>
+  </Backdrop>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/layout.scss";
+
+.current-type-backdrop {
+  @extend .container-fill, .place-center;
+
+  img {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+  position: absolute;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
--- a/src/components/maumau/game/Deck.vue
+++ b/src/components/maumau/game/Deck.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type {ICard} from "@/types/card.type";
+import Card from "@/components/maumau/game/Card.vue";
+
+const props = defineProps<{
+  currentCard?: ICard,
+}>();
+
+const emits = defineEmits<{
+  (event: 'click'): void
+}>();
+
+const onNewCardClick = () => {
+  emits('click');
+}
+</script>
+
+<template>
+<div class="deck">
+  <Card :card="currentCard" :clickable="false" />
+  <Card class="deck-new-cards" @click="onNewCardClick" clickable hoverable />
+</div>
+</template>
+
+<style scoped lang="scss">
+.deck {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+
+  &-new-cards {
+    background-image: url("@/assets/cards/back.png");
+    background-size: 100px 150px;
+  }
+}
+</style>
--- a/src/components/maumau/game/Game.vue
+++ b/src/components/maumau/game/Game.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import Hand from "@/components/maumau/game/Hand.vue";
+import Deck from "@/components/maumau/game/Deck.vue";
+import type {useGame} from "@/composables/game.composable";
+import {ref, watch} from "vue";
+import CurrentTypeBackdrop from "@/components/maumau/game/CurrentTypeBackdrop.vue";
+import PlayerList from "@/components/maumau/game/PlayerList.vue";
+import TypeChoiceModal from "@/components/maumau/game/TypeChoiceModal.vue";
+
+const props = defineProps<{
+  game: ReturnType<typeof useGame>,
+}>();
+
+const gameState = ref(props.game.state.value);
+
+const setTurnTitle = () => {
+  if (gameState.value.CurrentPlayer.Id === gameState.value.Me.Id){
+    document.title = "Mau - Your turn!"
+  } else {
+    document.title = "Mau - " + gameState.value.CurrentPlayer.Name + "'s turn!"
+  }
+}
+
+setTurnTitle();
+
+watch(() => props.game.state.value, (newState) => {
+  gameState.value = newState;
+
+  setTurnTitle();
+});
+</script>
+
+<template>
+<div class="game">
+  <div class="game-container">
+    <PlayerList :current="gameState.CurrentPlayer" :players="gameState.Players" :me="gameState.Me" />
+    <Deck :currentCard="gameState.CurrentCard" @click="game.onGrabCard" />
+    <Hand :cards="gameState.Hand" @click="game.onPlayCard" />
+  </div>
+  <TypeChoiceModal :show="gameState.MyState === 'CHOOSE'" @choice="game.onCardTypeChoice" />
+  <CurrentTypeBackdrop :currentType="gameState.NextAllowedCardType ?? gameState.CurrentCard.type" />
+</div>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/layout";
+
+.game {
+  @extend .container-fill;
+
+  position: relative;
+
+  &-container {
+    @extend .container-fill-height;
+
+    display: grid;
+    grid-template-rows: repeat(3, 1fr);
+    place-items: center;
+  }
+}
+</style>
--- a/src/components/maumau/game/Hand.vue
+++ b/src/components/maumau/game/Hand.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+
+import type {ICard} from "@/types/card.type";
+import Card from "@/components/maumau/game/Card.vue";
+
+const props = defineProps<{
+  cards?: ICard[],
+}>();
+
+const emits = defineEmits<{
+  (event: 'click', card: ICard): void
+}>();
+
+const onCardClick = (card?: ICard) => {
+  if (!card) return;
+  emits('click', card);
+}
+
+const keepItemInPlace = (el: Element) => {
+  const htmlElement = el as HTMLElement;
+  const rect = htmlElement.getBoundingClientRect();
+  htmlElement.style.left = `${rect.left}px`;
+  htmlElement.style.top = `${rect.top}px`;
+}
+</script>
+
+<template>
+  <ul class="hand">
+    <TransitionGroup @beforeLeave="keepItemInPlace">
+      <li v-for="card in cards" :key="card.id">
+        <Card :card="card" @click="onCardClick" hoverable/>
+      </li>
+    </TransitionGroup>
+  </ul>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/layout";
+
+.hand {
+  @extend .container-fill-height;
+
+  position: relative;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  flex-flow: row nowrap !important;
+  overflow-x: scroll;
+  gap: 0.5rem;
+}
+
+.v-enter-from, .v-leave-to {
+  opacity: 0;
+  transform: translateY(-25%);
+}
+
+.v-leave-active {
+  position: fixed;
+}
+
+.v-enter-active,
+.v-leave-active,
+.v-move {
+  transition: all 0.5s ease-out;
+}
+</style>
--- a/src/components/maumau/game/PlayerList.vue
+++ b/src/components/maumau/game/PlayerList.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type {Player} from "@/composables/game.composable";
+
+const props = defineProps<{
+  players: Player[],
+  me: Player,
+  current: Player,
+}>();
+
+const isTurn = (player: Player) => player.Id === props.current.Id;
+const isMe = (player: Player) => player.Id === props.me.Id;
+
+</script>
+
+<template>
+<ol class="player-list">
+  <li v-for="player in players" :key="player.Id" class="player-list__info" :class="isTurn(player) ? 'current-turn' : ''">
+      <h3>{{ player.Name }} {{ isMe(player) ? "(You)" : "" }}</h3>
+      <p>{{ player.CardsLeft }} cards left</p>
+  </li>
+</ol>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/layout";
+
+.player-list {
+  @extend .container-fill-width;
+
+  list-style: none;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    place-content: center;
+  }
+
+  .current-turn {
+    border: 1px solid red;
+  }
+}
+</style>
--- a/src/components/maumau/game/TypeChoiceModal.vue
+++ b/src/components/maumau/game/TypeChoiceModal.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import {CardType} from "@/types/card.type";
+import Modal from "@/components/Modal.vue";
+import StylessButton from "@/components/button/StylessButton.vue";
+
+interface Choice {
+  type: CardType,
+  char: string
+}
+
+const props = defineProps<{
+  show?: boolean
+}>();
+
+const emits = defineEmits<{
+  (event: "choice", cardType: CardType): void
+}>();
+
+const choices: Choice[] = [
+  {type: CardType.SPADES, char: '♠'},
+  {type: CardType.HEARTS, char: '♥'},
+  {type: CardType.DIAMONDS, char: '♦'},
+  {type: CardType.CLUBS, char: '♣'}
+];
+
+const onTypeChoice = (cardType: CardType) => {
+  emits("choice", cardType);
+}
+
+const getReadableName = (cardType: CardType) => {
+  return cardType.charAt(0) + cardType.substring(1).toLowerCase();
+}
+</script>
+
+<template>
+  <Modal :show="show">
+    <div class="choice-modal">
+      <div class="choice-modal__choices">
+        <StylessButton v-for="choice in choices" :key="choice.type" @click="onTypeChoice(choice.type)"
+                       :title="getReadableName(choice.type)">
+          {{ choice.char }}
+        </StylessButton>
+      </div>
+      <h3 class="choice-modal__title">Choose a card type</h3>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/variables";
+
+.choice-modal {
+  background-color: $modal-color;
+  color: $modal-text-color;
+  border-radius: 0.5rem;
+  padding: 1rem 2rem;
+
+  &__choices {
+    display: flex;
+    gap: 1rem;
+    justify-content: space-between;
+    font-size: 5rem;
+  }
+
+  &__title {
+    text-align: center;
+    margin-top: 1rem;
+  }
+}
+</style>
--- a/src/components/maumau/lobby/Lobby.vue
+++ b/src/components/maumau/lobby/Lobby.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type {useGame} from "@/composables/game.composable";
+import {onMounted} from "vue";
+import WinnerModal from "@/components/maumau/lobby/WinnerModal.vue";
+import PrimaryButton from "@/components/button/PrimaryButton.vue";
+import PlayerList from "@/components/maumau/lobby/PlayerList.vue";
+
+const props = defineProps<{
+  game: ReturnType<typeof useGame>,
+}>();
+
+onMounted(() => {
+  document.title = "Mau - Waiting for host to start the game...";
+});
+</script>
+
+<template>
+  <div class="lobby">
+    <h1 class="lobby-title">Waiting for host to start the game</h1>
+
+    <PlayerList :players="game.players.value" @kick="game.onKick"/>
+
+    <section>
+      <h2>Game Settings</h2>
+      <p>Not available yet...</p>
+    </section>
+
+    <PrimaryButton @click="game.startGame()">Start Game</PrimaryButton>
+  </div>
+
+  <WinnerModal :winner="props.game.winner.value" @close="game.clearWinner"/>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/layout";
+
+.lobby {
+  @extend .container-fill-height;
+
+  display: grid;
+  grid-template-rows: auto 1fr 1fr auto;
+  grid-gap: 1rem;
+}
+</style>
--- a/src/components/maumau/lobby/PlayerList.vue
+++ b/src/components/maumau/lobby/PlayerList.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import DangerButton from "@/components/button/DangerButton.vue";
+import type {Connection} from "@/types/connection.type";
+import PrimaryButton from "@/components/button/PrimaryButton.vue";
+
+const props = defineProps<{
+  players: Connection[]
+}>();
+
+const emits = defineEmits<{
+  (event: "kick", player: Connection): void
+}>();
+
+const onKick = (player: Connection) => {
+  emits("kick", player);
+}
+</script>
+
+<template>
+  <section class="player-list">
+    <header class="player-list__header">
+      <h2>Players</h2>
+      <PrimaryButton>Add bot</PrimaryButton>
+    </header>
+
+    <ol class="list">
+      <li class="player" v-for="player in players" :key="player.Id">
+        <p>{{ player.Name }}</p>
+        <DangerButton @click="onKick(player)">Kick</DangerButton>
+      </li>
+    </ol>
+  </section>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/variables";
+
+.player-list {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  overflow: hidden;
+
+  &__header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+
+    h2 {
+      margin: 0;
+    }
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    list-style: none;
+    padding-left: 0;
+    overflow-y: scroll;
+
+    .player {
+      border-radius: $border-radius;
+      padding: 0.5rem;
+      background-color: $surface-color;
+      display: grid;
+      grid-template-columns: 1fr auto;
+    }
+  }
+}
+</style>
--- a/src/components/maumau/lobby/WinnerModal.vue
+++ b/src/components/maumau/lobby/WinnerModal.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import StylessButton from "@/components/button/StylessButton.vue";
+import type {Connection} from "@/types/connection.type";
+import Modal from "@/components/Modal.vue";
+import ConfettiExplosion from "vue-confetti-explosion";
+import {useWindowSize} from "@vueuse/core";
+
+const props = defineProps<{
+  winner?: Connection,
+}>();
+
+const {width, height} = useWindowSize();
+
+const emits = defineEmits<{
+  (event: "close"): void,
+}>();
+
+const onClose = () => {
+  emits("close");
+}
+</script>
+
+<template>
+  <Modal :show="winner !== undefined">
+    <div class="winner-modal">
+      <StylessButton class="winner-modal__close" @click="onClose">⨉</StylessButton>
+      <h2 class="winner-modal__title">{{ winner!.Name }} won!</h2>
+    </div>
+  </Modal>
+  <Teleport v-if="winner !== undefined" to="body">
+    <div class="confetti">
+      <ConfettiExplosion :stageHeight="height" :stageWidth="width" :colors="['#FFA500', '#FFA500', '#FFFFFF']"/>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/layout";
+@import "@/scss/variables";
+
+.winner-modal {
+  background-color: $modal-color;
+  color: $modal-text-color;
+  border-radius: 0.5rem;
+  padding: 3rem 4rem;
+  position: relative;
+
+  &__title {
+    font-size: 3rem;
+    text-align: center;
+  }
+
+  &__close {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    font-size: 1.5rem;
+    cursor: pointer;
+  }
+}
+
+.confetti {
+  @extend .container-fill;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+}
+</style>
--- a/src/composables/game.composable.ts
+++ b/src/composables/game.composable.ts
@@ -0,0 +1,165 @@
+import {useUserName} from "@/stores/userName";
+import {useWebSocket, WebSocketCloseCodes, type WebSocketMessage} from "@/composables/webSocket";
+import {ref} from "vue";
+import {type ChatMessage} from "@/components/Chat.vue";
+import {useRouter} from "vue-router";
+import type {Connection} from "@/types/connection.type";
+import {useToast} from "vue-toast-notification";
+import {CardType, CardValue, type ICard} from "@/types/card.type";
+
+export interface Player extends Connection {
+    CardsLeft: number;
+}
+
+interface GameState {
+    Me: Player;
+    MyState: string;
+    Hand: ICard[];
+    CurrentCard: ICard;
+    NextAllowedCardType: CardType;
+    CurrentPlayer: Player;
+    Players: Player[];
+}
+
+const parseCard = (data: string): ICard => {
+    const [typeString, valueString] = data.split(" ");
+    return {
+        id: data,
+        type: CardType[typeString as keyof typeof CardType],
+        value: CardValue[valueString as keyof typeof CardValue]
+    };
+}
+
+const parseGameState = (gameData: any): GameState => {
+    const hand: ICard[] = gameData.Hand.map(parseCard);
+    const currentCard = parseCard(gameData.CurrentCard);
+    return {
+        Me: gameData.Me,
+        MyState: gameData.MyState,
+        Hand: hand,
+        CurrentCard: currentCard,
+        NextAllowedCardType: CardType[gameData.NextAllowedCardType as keyof typeof CardType],
+        CurrentPlayer: gameData.CurrentPlayer,
+        Players: gameData.Players
+    };
+}
+
+export const useGame = (roomId: string) => {
+    const userNameStore = useUserName();
+    const router = useRouter();
+    const toast = useToast();
+
+
+    const WS_URL = import.meta.env.VITE_WEBSOCKET_ENDPOINT || "__WEBSOCKET_ENDPOINT__";
+
+    const chatMessages = ref<ChatMessage[]>([]);
+    const players = ref<Connection[]>([]);
+    const currentRoomType = ref<string>("LOBBY");
+    const state = ref<GameState>({} as GameState);
+    const winner = ref<Connection | undefined>()
+
+    const webSocket = useWebSocket(WS_URL + "/room/" + roomId + "/" + userNameStore.userName, {
+        onOpen: (_event: Event) => {
+            console.log("Connected to WebSocket");
+        },
+        onMessage: (event: MessageEvent) => {
+            console.log("Message received:", event.data);
+            const data = JSON.parse(event.data);
+            handleMessage(data);
+        },
+        onClose: (_event: Event) => {
+            router.push("/").then(() => console.log("Disconnected from WebSocket"));
+        },
+        onError: (error: Event) => {
+            toast.error("Something went wrong!")
+            console.error("WebSocket error", error);
+        },
+    });
+
+    const handleMessage = (message: WebSocketMessage) => {
+        const data = JSON.parse(message.Data);
+        switch (message.Type) {
+            case "CHAT":
+                chatMessages.value.push(data);
+                break;
+            case "JOIN":
+                players.value = data.Connections;
+                chatMessages.value.push({
+                    Id: Date.now().toString(),
+                    Sender: "System",
+                    Message: data.NewConnection.Name + " joined!"
+                });
+                break;
+            case "GAME":
+                currentRoomType.value = "GAME";
+                state.value = parseGameState(data);
+                break;
+            case "END":
+                currentRoomType.value = "LOBBY";
+                winner.value = data.Winner;
+                state.value = {} as GameState;
+                break;
+            case "LEAVE":
+                const playerIndex = players.value.findIndex(player => player.Id === data.Connection.Id);
+                if (playerIndex !== -1) {
+                    players.value.splice(playerIndex, 1);
+                    chatMessages.value.push({
+                        Id: Date.now().toString(),
+                        Sender: "System",
+                        Message: data.Connection.Name + " left!"
+                    });
+                }
+                break;
+        }
+    }
+
+    const startGame = () => {
+        webSocket.sendJsonMessage("LOBBY", "START");
+    }
+
+    const onChatSend = (chatMessage: string) => {
+        webSocket.sendJsonMessage("CHAT", chatMessage);
+    }
+
+    const onLeaveGame = async () => {
+        webSocket.close(WebSocketCloseCodes.CLOSE_GOING_AWAY, "User left the room");
+        await router.push("/");
+    }
+
+    const onGrabCard = () => {
+        webSocket.sendJsonMessage("DRAW");
+    }
+
+    const onPlayCard = (card: ICard) => {
+        webSocket.sendJsonMessage("PLAY", {CardType: card.type, CardValue: card.value});
+    }
+
+    const onKick = (player: Connection) => {
+        webSocket.sendJsonMessage("KICK", player.Id);
+    }
+
+    const onCardTypeChoice = (cardType: CardType) => {
+        webSocket.sendJsonMessage("CHOOSE", cardType);
+    }
+
+    const clearWinner = () => {
+        winner.value = undefined;
+    }
+
+    return {
+        webSocket,
+        currentRoomType,
+        chatMessages,
+        players,
+        state,
+        winner,
+        startGame,
+        onChatSend,
+        onLeaveGame,
+        onGrabCard,
+        onPlayCard,
+        onKick,
+        onCardTypeChoice,
+        clearWinner,
+    }
+}
--- a/src/composables/webSocket.ts
+++ b/src/composables/webSocket.ts
@@ -0,0 +1,92 @@
+/**
+ * A list of WebSocket close codes. </br>
+ * Beside this list of codes, a custom code between the range 3000-4999 may be used for private use.
+ * @see https://www.rfc-editor.org/rfc/rfc6455.html#section-7.4.1
+ */
+export const WebSocketCloseCodes = {
+    // Successful operation / regular socket shutdown
+    CLOSE_NORMAL: 1000,
+    // Client is leaving (browser tab closing)
+    CLOSE_GOING_AWAY: 1001,
+    // Endpoint received a malformed frame
+    CLOSE_PROTOCOL_ERROR: 1002,
+    // Endpoint received an unsupported frame (e.g. binary-only endpoint received text frame)
+    CLOSE_UNSUPPORTED: 1003,
+    // Expected close status, received none
+    CLOSE_NO_STATUS: 1005,
+    // No close code frame has been received
+    CLOSE_ABNORMAL: 1006,
+    // Endpoint received inconsistent message (e.g. malformed UTF-8)
+    UNSUPPORTED_PAYLOAD: 1007,
+    // Generic code used for situations other than 1003 and 1009
+    POLICY_VIOLATION: 1008,
+    // Endpoint won't process large frame
+    CLOSE_TOO_LARGE: 1009,
+    // Client wanted an extension which server did not negotiate
+    MANDATORY_EXTENSION: 1010,
+    // Internal server error while operating
+    SERVER_ERROR: 1011,
+    // Server/service is restarting
+    SERVICE_RESTART: 1012,
+    // Temporary server condition forced blocking client's request
+    TRY_AGAIN_LATER: 1013,
+    // Server acting as gateway received an invalid response
+    BAD_GATEWAY: 1014,
+    // Transport Layer Security handshake failure
+    TLS_HANDSHAKE_FAIL: 1015
+} as const;
+
+export interface WebSocketMessage {
+    Type: string;
+    Data: any;
+}
+
+interface UseWebSocketOptions {
+    onClose?: (event: CloseEvent) => void;
+    onError?: (event: Event) => void;
+    onMessage?: (event: MessageEvent) => void;
+    onOpen?: (event: Event) => void;
+}
+
+export const useWebSocket = (url: string, options: UseWebSocketOptions) => {
+    const socket = new WebSocket(url);
+
+    const isOpen = () => {
+        return socket.readyState === WebSocket.OPEN;
+    }
+
+    if (options.onClose) {
+        socket.onclose = options.onClose;
+    }
+    if (options.onError) {
+        socket.onerror = options.onError;
+    }
+    if (options.onMessage) {
+        socket.onmessage = options.onMessage;
+    }
+    if (options.onOpen) {
+        socket.onopen = options.onOpen;
+    }
+
+    const sendMessage = (message: string) => {
+        console.log("Sending message: ", message);
+        socket.send(message);
+    }
+
+    const sendJsonMessage = (type: string, data?: any) => {
+        if (data instanceof String || typeof data === "string") {
+            sendMessage(JSON.stringify({Type: type, Data: data}));
+            return;
+        }
+        sendMessage(JSON.stringify({Type: type, Data: JSON.stringify(data)}));
+    }
+
+    const close = (code?: number, reason?: string) => {
+        if (!isOpen()) return;
+        // TODO: Weird behavior where closing doesnt work with code/reason
+        // socket.close(code, reason);
+        socket.close();
+    }
+
+    return {socket, isOpen, sendMessage, sendJsonMessage, close};
+}
--- a/src/config/Router.tsx
+++ b/src/config/Router.tsx
@@ -1,21 +0,0 @@
-import React from "react";
-import {BrowserRouter, Route, Routes} from "react-router-dom";
-import MainLobby from "../layout/pages/MainLobby";
-import NotFound from "../layout/pages/NotFound";
-import Room from "../layout/pages/Room";
-import Rooms from "../layout/pages/Rooms";
-
-const Router = () => {
-    return (
-        <BrowserRouter>
-            <Routes>
-                <Route path="/" element={<MainLobby/>}/>
-                <Route path="rooms" element={<Rooms/>}/>
-                <Route path="room/:roomId" element={<Room/>}/>
-                <Route path="*" element={<NotFound/>}/>
-            </Routes>
-        </BrowserRouter>
-    );
-}
-
-export default Router;
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,15 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import ThemeContextProvider from "./utils/contexts/ThemeContext";
-
-const root = ReactDOM.createRoot(
-    document.getElementById('root') as HTMLElement
-);
-root.render(
-    <React.StrictMode>
-        <ThemeContextProvider>
-            <App/>
-        </ThemeContextProvider>
-    </React.StrictMode>
-);
--- a/src/layout/components/Button.tsx
+++ b/src/layout/components/Button.tsx
@@ -1,13 +0,0 @@
-import React, {FunctionComponent} from "react";
-
-interface Props {
-    className?: string
-    onClick?: () => void
-    children?: React.ReactNode
-}
-
-export const GHButton: FunctionComponent<Props> = ({className, onClick, children}) => {
-    return (
-        <span className={`gh-button ${className}`} onClick={onClick}>{children}</span>
-    );
-}
--- a/src/layout/components/Card.tsx
+++ b/src/layout/components/Card.tsx
@@ -1,32 +0,0 @@
-import React, {FunctionComponent} from "react";
-
-interface Props {
-    cardString: string;
-    handleClick?: (cardString: string) => void;
-    isHidden?: boolean;
-    isClickable?: boolean;
-}
-
-const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isClickable}) => {
-    const cardType = cardString.split(' ')[0].toLowerCase();
-    const cardValue = cardString.split(' ')[1].toLowerCase();
-
-    const cardSource = isHidden ?
-        require(`../../assets/cards/back.png`) :
-        require(`../../assets/cards/${cardType}_${cardValue}.png`);
-    const cardName = isHidden ? 'back' : `${cardType} ${cardValue}`;
-
-    const handleCardClick = () => {
-        if (handleClick) {
-            handleClick(cardString);
-        }
-    }
-
-    return (
-        <div className={`card ${isClickable && 'card-clickable'}`}>
-            <img className="card__texture" src={cardSource} alt={cardName} onClick={handleCardClick}/>
-        </div>
-    )
-}
-
-export default Card;
--- a/src/layout/components/Deck.tsx
+++ b/src/layout/components/Deck.tsx
@@ -1,29 +0,0 @@
-import React, {FunctionComponent} from "react";
-import Card from "./Card";
-
-interface Props {
-    currentCard: string;
-    actionOnClick: () => void;
-}
-
-const Deck: FunctionComponent<Props> = ({currentCard, actionOnClick}) => {
-
-    const handleClick = (card: string) => {
-        actionOnClick();
-    }
-
-    return (
-        <div className="deck-container">
-            <div className="used-cards">
-                <p></p>
-                <Card cardString={currentCard}/>
-            </div>
-            <div className="deck">
-                <p></p>
-                <Card cardString={"AA  BB"} handleClick={handleClick} isHidden={true}/>
-            </div>
-        </div>
-    );
-}
-
-export default Deck;
--- a/src/layout/components/Game.tsx
+++ b/src/layout/components/Game.tsx
@@ -1,46 +0,0 @@
-import React, {FunctionComponent} from "react";
-import Deck from "./Deck";
-import Hand from "./Hand";
-
-interface GameState {
-    PlayerName: string;
-    Hand: string[];
-    CurrentCard: string;
-    CurrentPlayer: string;
-    Players: string[];
-}
-
-interface Props {
-    gameState: GameState
-    handleCardSend: (cardString: string) => void;
-    handleDraw: () => void;
-}
-
-const Game:FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw}) => {
-    return (
-        <div className="game">
-            {
-                gameState.CurrentCard &&
-                <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw}/>
-            }
-            {
-                gameState.Hand &&
-                <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
-            }
-            <ul>
-                {
-                    gameState.Players &&
-                    gameState.Players.map((player, index) => {
-                        const isCurrentPlayer = player === gameState.CurrentPlayer;
-                        const isMe = player === gameState.PlayerName;
-                        return <li key={index} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
-                            {player} {isMe && '(You)'}
-                        </li>
-                    })
-                }
-            </ul>
-        </div>
-    )
-}
-
-export default Game;
--- a/src/layout/components/Hand.tsx
+++ b/src/layout/components/Hand.tsx
@@ -1,28 +0,0 @@
-import React, {FunctionComponent} from 'react';
-import Card from "./Card";
-
-interface Props {
-    hand: string[];
-    actionOnClick: (cardString: string) => void;
-    isHidden?: boolean;
-}
-
-const Hand: FunctionComponent<Props> = ({hand, actionOnClick, isHidden}) => {
-
-    const isMyHand = !isHidden;
-
-    return (
-        <div className="hand">
-            {
-                hand.map((card, index) => {
-                    return (
-                        <Card key={index} cardString={card} handleClick={actionOnClick} isHidden={!isMyHand}
-                              isClickable={isMyHand}/>
-                    )
-                })
-            }
-        </div>
-    )
-}
-
-export default Hand;
--- a/src/layout/pages/MainLobby.tsx
+++ b/src/layout/pages/MainLobby.tsx
@@ -1,39 +0,0 @@
-import React from "react";
-import useTitle from "../../utils/hooks/TitleHook";
-import Card from "../components/Card";
-import {useNavigate} from "react-router";
-
-const ROOM_URL = `${process.env.REACT_APP_API_URL}/room`;
-
-const MainLobby = () => {
-
-    useTitle('Mau-Mau Lobby');
-
-    const navigateTo = useNavigate();
-
-    const handleCreateRoom = () => {
-        fetch(ROOM_URL, {
-            method: 'POST',
-        }).then(res => res.json()).then(room => {
-            navigateTo(`/room/${room}`);
-        });
-    }
-
-    return (
-        <div className={"main-lobby"}>
-            <h1 className={"main-lobby__title mau"}>Mau-Mau</h1>
-            <div className={"main-lobby__container"}>
-                <div className={"main-lobby__container-button clickable"} onClick={handleCreateRoom}>
-                    <h2 className={"mau"}>Host Game</h2>
-                    <Card cardString={'SPADES ACE'} isClickable/>
-                </div>
-                <div className={"main-lobby__container-button clickable"} onClick={() => navigateTo('/rooms')}>
-                    <h2 className={"mau"}>Join Game</h2>
-                    <Card cardString={'SPADES ACE'} isHidden isClickable/>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default MainLobby;
--- a/src/layout/pages/NotFound.tsx
+++ b/src/layout/pages/NotFound.tsx
@@ -1,9 +0,0 @@
-const NotFound = () => {
-    return (
-        <div>
-            404
-        </div>
-    );
-}
-
-export default NotFound;
--- a/src/layout/pages/Room.tsx
+++ b/src/layout/pages/Room.tsx
@@ -1,114 +0,0 @@
-import useWebSocket from "react-use-websocket";
-import React from "react";
-import {useNavigate, useParams} from "react-router";
-import {GHButton} from "../components/Button";
-import useTitle from "../../utils/hooks/TitleHook";
-import Game from "../components/Game";
-
-interface GameState {
-    PlayerName: string;
-    Hand: string[];
-    CurrentCard: string;
-    CurrentPlayer: string;
-    Players: string[];
-}
-
-interface ChatMessage {
-    PlayerName: string;
-    Message: string;
-}
-
-interface SocketMessage {
-    Type: string;
-    Payload: any;
-}
-
-const Room = () => {
-
-    useTitle('Mau!');
-
-    const navigateTo = useNavigate();
-
-    const {roomId} = useParams();
-
-    const WS_URL = `${process.env.REACT_APP_WEBSOCKET_URL}/room/${roomId}`;
-
-    const [gameState, setGameState] = React.useState<GameState>({
-        PlayerName: '',
-        Hand: [],
-        CurrentCard: '',
-        CurrentPlayer: '',
-        Players: []
-    });
-    const [chatMessages, setChatMessages] = React.useState<ChatMessage[]>([]);
-    const [chatInput, setChatInput] = React.useState<string>('');
-
-    const websocket = useWebSocket(WS_URL, {
-        onOpen: () => {
-            console.log('WebSocket connection established.');
-        },
-        onMessage: (event) => {
-            const data = JSON.parse(event.data);
-            const payload = JSON.parse(data.Payload);
-            if (data.Type === 'GAME') setGameState(payload);
-            if (data.Type === 'CHAT') setChatMessages(prev => [...prev, payload]);
-        }
-    });
-
-    const handleLeaveRoom = () => {
-        const socket = websocket.getWebSocket();
-        if (socket) socket.close();
-        navigateTo('/');
-    }
-
-    const handleSend = (message: SocketMessage) => {
-        websocket.sendMessage(JSON.stringify(message));
-    }
-
-    const handleCardSend = (card: string) => {
-        handleSend({
-            Type: "GAME",
-            Payload: JSON.stringify({
-                Action: "PLAYCARD",
-                Data: JSON.stringify({
-                    CardType: card.split(' ')[0],
-                    CardValue: card.split(' ')[1]
-                })
-            })
-        })
-    }
-
-    const handleDraw = () => {
-        handleSend({
-            Type: "GAME",
-            Payload: JSON.stringify({
-                Action: "DRAW",
-                Data: ""
-            })
-        });
-    }
-
-    const handleChat = (message: string) => {
-        handleSend({
-            Type: "CHAT",
-            Payload: message
-        });
-    }
-
-    return (
-        <div>
-            <h1>Room {roomId}</h1>
-            <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
-            <Game gameState={gameState} handleCardSend={handleCardSend} handleDraw={handleDraw}/>
-            <input type="text" placeholder={"Chat"} value={chatInput} onChange={(e) => setChatInput(e.target.value)} />
-            <button onClick={() => handleChat(chatInput)}>Send</button>
-            <ul>
-                {chatMessages.map((message, index) => (
-                    <li key={index}>{message.PlayerName}: {message.Message}</li>
-                ))}
-            </ul>
-        </div>
-    )
-}
-
-export default Room;
--- a/src/layout/pages/Rooms.tsx
+++ b/src/layout/pages/Rooms.tsx
@@ -1,35 +0,0 @@
-import useTitle from "../../utils/hooks/TitleHook";
-import React from "react";
-import {useNavigate} from "react-router";
-
-const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`;
-
-const Rooms = () => {
-
-    useTitle('Mau-Mau Rooms');
-    const navigateTo = useNavigate();
-
-    const [rooms, setRooms] = React.useState<string[]>([]);
-
-    React.useEffect(() => {
-        fetch(ROOM_URL)
-            .then(r => r.json())
-            .then(data => setRooms(data));
-    }, []);
-
-    return (
-        <div>
-            <h1>Rooms</h1>
-            <ul>
-                {
-                    rooms.map((room, index) => {
-                        return <li key={index} className={"clickable"}
-                                   onClick={() => navigateTo(`/room/${room}`)}>{room}</li>
-                    })
-                }
-            </ul>
-        </div>
-    );
-};
-
-export default Rooms;
--- a/src/logo.svg
+++ b/src/logo.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,17 @@
+import {createApp} from 'vue';
+import {createPinia} from 'pinia';
+import ToastPlugin from 'vue-toast-notification';
+import 'vue-toast-notification/dist/theme-bootstrap.css';
+
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+app.use(ToastPlugin, {
+    position: 'top-right',
+});
+
+app.mount('#app');
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -0,0 +1,29 @@
+import {createRouter, createWebHistory} from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: HomeView,
+        },
+        {
+            path: '/rooms',
+            name: 'rooms',
+            component: () => import('../views/RoomsView.vue'),
+        },
+        {
+            path: '/rooms/:roomId',
+            name: 'room',
+            component: () => import('../views/RoomView.vue'),
+        }
+    ]
+});
+
+router.beforeEach((to, from) => {
+    document.title = to.meta?.title as string ?? "MauMau!";
+})
+
+export default router;
--- a/src/scss/layout.scss
+++ b/src/scss/layout.scss
@@ -0,0 +1,71 @@
+@import "./variables.scss";
+
+.container {
+  &-full {
+    width: 100dvw;
+    height: 100dvh;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  &-fill {
+    width: 100%;
+    height: 100%;
+  }
+
+  &-fill-width {
+    width: 100%;
+  }
+
+  &-fill-height {
+    height: 100%;
+  }
+
+  &-xs {
+    max-width: $breakpoint-xs;
+    width: 100%;
+  }
+
+  &-sm {
+    max-width: $breakpoint-sm;
+    width: 100%;
+  }
+
+  &-md {
+    max-width: $breakpoint-md;
+    width: 100%;
+  }
+
+  &-lg {
+    max-width: $breakpoint-lg;
+    width: 100%;
+  }
+
+  &-xl {
+    max-width: $breakpoint-xl;
+    width: 100%;
+  }
+
+  &-xxl {
+    max-width: $breakpoint-xxl;
+    width: 100%;
+  }
+}
+
+.place {
+  &-center {
+    display: grid;
+    place-items: center;
+  }
+
+  &-start {
+    display: grid;
+    place-items: start;
+  }
+
+  &-end {
+    display: grid;
+    place-items: end;
+  }
+}
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -0,0 +1,20 @@
+$background-color: #131313;
+$background-text-color: #ffffff;
+
+$surface-color: #2e2e2e;
+$surface-text-color: #ffffff;
+
+$modal-color: #9f7d2f;
+$modal-text-color: #ffffff;
+
+$danger-color: #6b0000;
+$success-color: #276b00;
+
+$breakpoint-xs: 320px;
+$breakpoint-sm: 640px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 1024px;
+$breakpoint-xl: 1280px;
+$breakpoint-xxl: 1536px;
+
+$border-radius: 0.5rem;
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
--- a/src/stores/userName.ts
+++ b/src/stores/userName.ts
@@ -0,0 +1,20 @@
+import {defineStore} from "pinia";
+import {ref} from "vue";
+
+export const useUserName = defineStore('username', () => {
+    const userName = ref<string>("Mau");
+
+    const setUserName = (nameParam?: string | null) => {
+        console.log("Setting username to: ", nameParam);
+        userName.value = nameParam || generateUserName();
+        localStorage.setItem("userName", userName.value);
+    }
+
+    const generateUserName = () => {
+        return "Mau-" + Math.random().toString(36).substring(2, 15);
+    }
+
+    setUserName(localStorage.getItem("userName"));
+
+    return { userName, setUserName }
+})
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -1,17 +0,0 @@
-@import "vendor/vendor";
-@import "layout/layout";
-@import "utils/utils";
-
-@font-face {
-  font-family: "Mau";
-  src: local('Mau'), url(../assets/fonts/OrientalCatsLight.otf) format('opentype');
-}
-
-.app {
-  width: 100vw;
-  height: 100vh;
-}
-
-.mau {
-  font-family: "Mau", serif;
-}
--- a/src/styles/layout/_layout.scss
+++ b/src/styles/layout/_layout.scss
@@ -1,2 +0,0 @@
-@import "pages/pages";
-@import "components/components";
--- a/src/styles/layout/components/_components.scss
+++ b/src/styles/layout/components/_components.scss
@@ -1,4 +0,0 @@
-@import "button";
-@import "card";
-@import "hand";
-@import "deck";
--- a/src/styles/layout/components/button.scss
+++ b/src/styles/layout/components/button.scss
@@ -1,56 +0,0 @@
-.gh-button {
-  appearance: none;
-  background-color: #FAFBFC;
-  border: 1px solid rgba(27, 31, 35, 0.15);
-  border-radius: 6px;
-  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
-  box-sizing: border-box;
-  color: #24292E;
-  cursor: pointer;
-  display: inline-block;
-  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  list-style: none;
-  padding: 6px 16px;
-  position: relative;
-  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
-  vertical-align: middle;
-  white-space: nowrap;
-  word-wrap: break-word;
-
-  :hover {
-    background-color: #F3F4F6;
-    text-decoration: none;
-    transition-duration: 0.1s;
-  }
-
-  :disabled {
-    background-color: #FAFBFC;
-    border-color: rgba(27, 31, 35, 0.15);
-    color: #959DA5;
-    cursor: default;
-  }
-
-  :active {
-    background-color: #EDEFF2;
-    box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
-    transition: none 0s;
-  }
-
-  :focus {
-    outline: 1px transparent;
-  }
-
-  :before {
-    display: none;
-  }
-
-  ::-webkit-details-marker {
-    display: none;
-  }
-}
--- a/src/styles/layout/components/card.scss
+++ b/src/styles/layout/components/card.scss
@@ -1,14 +0,0 @@
-.card {
-  width: 100px;
-  min-width: 100px;
-
-  &-clickable {
-    cursor: pointer;
-  }
-
-  &__texture {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-}
--- a/src/styles/layout/components/deck.scss
+++ b/src/styles/layout/components/deck.scss
@@ -1,6 +0,0 @@
-.deck-container {
-  display: flex;
-  flex-direction: row;
-  margin-left: 0.5rem;
-  gap: 0.5rem;
-}
--- a/src/styles/layout/components/hand.scss
+++ b/src/styles/layout/components/hand.scss
@@ -1,9 +0,0 @@
-.hand {
-  display: flex;
-  flex-direction: row;
-  //justify-content: center;
-  flex-flow: nowrap !important;
-  overflow-x: scroll;
-  padding: 0.5rem;
-  gap: 0.5rem;
-}
--- a/src/styles/layout/pages/_pages.scss
+++ b/src/styles/layout/pages/_pages.scss
@@ -1 +0,0 @@
-@import "mainlobby";
--- a/src/styles/layout/pages/mainlobby.scss
+++ b/src/styles/layout/pages/mainlobby.scss
@@ -1,24 +0,0 @@
-.main-lobby {
-  width: 100vw;
-  height: 75vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  align-items: center;
-
-  &__container {
-    display: flex;
-    gap: 2rem;
-
-    &-button {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-
-  &__title {
-    font-size: 5rem;
-  }
-}
--- a/src/styles/utils/_utils.scss
+++ b/src/styles/utils/_utils.scss
@@ -1,2 +0,0 @@
-@import "pointer";
-@import "theme";
--- a/src/styles/utils/pointer.scss
+++ b/src/styles/utils/pointer.scss
@@ -1,4 +0,0 @@
-.clickable {
-  cursor: pointer;
-  user-select: none;
-}
--- a/src/styles/utils/theme.scss
+++ b/src/styles/utils/theme.scss
@@ -1,8 +0,0 @@
-.dark {
-  background-color: #333;
-  color: #fff;
-}
-.light {
-  background-color: #fff;
-  color: #333;
-}
--- a/src/styles/vendor/_vendor.scss
+++ b/src/styles/vendor/_vendor.scss
@@ -1 +0,0 @@
-@import "normalize";
--- a/src/styles/vendor/normalize.scss
+++ b/src/styles/vendor/normalize.scss
@@ -1,352 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
-  border-style: none;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-  display: none;
-}
-
-.layout {
-  height: 100%;
-}
--- a/src/types/card.type.ts
+++ b/src/types/card.type.ts
@@ -0,0 +1,31 @@
+export enum CardType {
+    SPADES = "SPADES",
+    HEARTS = "HEARTS",
+    DIAMONDS = "DIAMONDS",
+    CLUBS = "CLUBS",
+    JOKER = "JOKER"
+}
+
+export enum CardValue {
+    TWO = "TWO",
+    THREE = "THREE",
+    FOUR = "FOUR",
+    FIVE = "FIVE",
+    SIX = "SIX",
+    SEVEN = "SEVEN",
+    EIGHT = "EIGHT",
+    NINE = "NINE",
+    TEN = "TEN",
+    JACK = "JACK",
+    QUEEN = "QUEEN",
+    KING = "KING",
+    ACE = "ACE",
+    RED = "RED",
+    BLACK = "BLACK"
+}
+
+export interface ICard {
+    id: string;
+    type: CardType;
+    value: CardValue;
+}
--- a/src/types/connection.type.ts
+++ b/src/types/connection.type.ts
@@ -0,0 +1,4 @@
+export interface Connection {
+    Id: string;
+    Name: string;
+}
--- a/src/utils/contexts/ThemeContext.tsx
+++ b/src/utils/contexts/ThemeContext.tsx
@@ -1,28 +0,0 @@
-import React from "react";
-
-interface IThemeContext {
-    isDarkMode: boolean
-    toggleTheme?: () => void
-}
-
-const ThemeContext = React.createContext<IThemeContext>({
-    isDarkMode: true
-});
-
-export const useTheme = () => React.useContext(ThemeContext);
-
-const ThemeContextProvider = ({children}: any) => {
-    const [isDarkMode, setIsDarkMode] = React.useState(true);
-
-    const toggleTheme = () => {
-        setIsDarkMode(!isDarkMode);
-    };
-
-    return (
-        <ThemeContext.Provider value={{isDarkMode, toggleTheme}}>
-            {children}
-        </ThemeContext.Provider>
-    );
-};
-
-export default ThemeContextProvider;
--- a/src/utils/hooks/TitleHook.ts
+++ b/src/utils/hooks/TitleHook.ts
@@ -1,14 +0,0 @@
-import React from "react";
-
-const useTitle = (title: string) => {
-    React.useEffect(() => {
-        const prevTitle = document.title;
-        document.title = title;
-
-        return () => {
-            document.title = prevTitle;
-        };
-    }, [title]);
-};
-
-export default useTitle;
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import Input from "@/components/form/Input.vue";
+import {useUserName} from "@/stores/userName";
+import {useRouter} from "vue-router";
+import PrimaryButton from "@/components/button/PrimaryButton.vue";
+
+const userNameStore = useUserName();
+const router = useRouter();
+
+const onHostClick = async () => {
+  const appUrl = import.meta.env.VITE_API_ENDPOINT || "__API_ENDPOINT__";
+  fetch(appUrl + "/room", {
+    method: "POST"
+  }).then(response => response.json())
+      .then(room => router.push({name: "room", params: {roomId: room}}))
+      .catch(console.error);
+}
+
+const onBrowseClick = () => {
+  router.push({name: "rooms"});
+}
+</script>
+
+<template>
+  <div class="home">
+    <div class="hero">
+      <h1 class="hero__title">MauMau</h1>
+      <form>
+        <Input :initialValue="userNameStore.userName" placeholder="Username" @input="userNameStore.setUserName"/>
+      </form>
+    </div>
+    <div class="interactions">
+      <div class="interactions-container">
+        <h2 class="interactions-container__title">Join game</h2>
+        <form class="interactions-container__buttons">
+          <Input placeholder="Enter roomcode" autocomplete="off"/>
+          <PrimaryButton type="button" @click="onBrowseClick">Browse rooms</PrimaryButton>
+        </form>
+      </div>
+      <div class="interactions-container">
+        <h2 class="interactions-container__title">Host game</h2>
+        <div class="interactions-container__buttons">
+          <PrimaryButton @click="onHostClick">Start Hosting</PrimaryButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/variables";
+@import "@/scss/layout";
+
+@font-face {
+  font-family: "Cattie";
+  src: url(@/assets/fonts/CattieRegular.ttf) format('truetype');
+}
+
+.home {
+  @extend .container-fill;
+  display: flex;
+  flex-direction: column;
+  place-items: center;
+
+  .hero {
+    @extend .container-md;
+
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
+    @media screen and (max-width: $breakpoint-md) {
+      height: 40%;
+    }
+
+    &__title {
+      text-align: center;
+      font-size: 6rem;
+      font-weight: lighter;
+      font-family: Cattie ,sans-serif;
+    }
+  }
+
+  .interactions {
+    @extend .container-md, .container-fill-height, .place-start;
+
+    height: 50%;
+    display: grid;
+    grid-template: 1fr / repeat(2, 1fr);
+    grid-gap: 2rem;
+
+    @media screen and (max-width: $breakpoint-md) {
+      height: 60%;
+      grid-template: repeat(2, 1fr) / 1fr;
+    }
+
+    &-container {
+      @extend .container-fill-width;
+
+      background-color: white;
+      padding: 0 1rem 1rem 1rem;
+      border: 0.5rem black;
+      border-radius: 0.5rem;
+      box-shadow: 1rem 1rem 1rem rgba(255, 255, 255, 0.25);
+      color: black;
+      min-height: 66%;
+      display: grid;
+      grid-template-rows: auto 1fr;
+
+      @media screen and (max-width: $breakpoint-md) {
+        min-height: 100%;
+      }
+
+      &__title {
+        font-size: 2rem;
+        text-align: center;
+      }
+
+      &__buttons {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+
+        * {
+          @extend .container-fill-width;
+        }
+      }
+    }
+  }
+
+  :deep(input) {
+    font-size: 1.5rem;
+  }
+
+  :deep(button) {
+    font-size: 1.5rem;
+  }
+}
+</style>
--- a/src/views/RoomView.vue
+++ b/src/views/RoomView.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import Chat from "@/components/Chat.vue";
+import Lobby from "@/components/maumau/lobby/Lobby.vue";
+import Game from "@/components/maumau/game/Game.vue";
+import {onBeforeUnmount, onMounted} from "vue";
+import {useRoute} from "vue-router";
+import {WebSocketCloseCodes} from "@/composables/webSocket";
+import {useGame} from "@/composables/game.composable";
+import PrimaryButton from "@/components/button/PrimaryButton.vue";
+
+const route = useRoute();
+
+const roomId = route.params.roomId as string;
+
+const game = useGame(roomId);
+
+onMounted(() => {
+  window.addEventListener("beforeunload", () =>
+      game.webSocket.close(WebSocketCloseCodes.CLOSE_GOING_AWAY, "User left the room"));
+})
+
+onBeforeUnmount(() => {
+  game.webSocket.close(WebSocketCloseCodes.CLOSE_GOING_AWAY, "User left the room");
+});
+</script>
+
+<template>
+  <div class="room">
+    <aside class="sidebar">
+      <div>
+        <h1>Mau-Mau</h1>
+        <h2>Room {{ roomId.split('-')[0] }}</h2>
+        <PrimaryButton @click="game.onLeaveGame()">
+          Leave Room
+        </PrimaryButton>
+      </div>
+      <Chat :chats="game.chatMessages.value" @send="game.onChatSend"/>
+    </aside>
+    <main>
+      <Game v-if="game.currentRoomType.value === 'GAME'" :game="game"/>
+      <Lobby v-if="game.currentRoomType.value === 'LOBBY'" :game="game"/>
+    </main>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/variables";
+@import "@/scss/layout";
+
+.room {
+  @extend .container-fill;
+
+  display: flex;
+  gap: 1rem;
+
+  @media screen and (max-width: $breakpoint-md) {
+    flex-direction: column;
+  }
+
+  aside {
+    display: grid;
+    min-width: 20%;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    overflow: hidden auto;
+
+    @media screen and (min-width: $breakpoint-md) {
+      max-width: $breakpoint-xs;
+      width: 100%;
+    }
+
+    button {
+      padding: 0.5rem;
+      font-size: 1rem;
+      width: 100%;
+    }
+  }
+
+  main {
+    @extend .container-fill;
+  }
+}
+</style>
--- a/src/views/RoomsView.vue
+++ b/src/views/RoomsView.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import PrimaryButton from "@/components/button/PrimaryButton.vue";
+import {onBeforeMount, reactive} from "vue";
+import StylessButton from "@/components/button/StylessButton.vue";
+import router from "@/router";
+
+const state = reactive<{
+  rooms: string[],
+}>({
+  rooms: [],
+})
+
+const onRoomClick = (room: string) => {
+  router.push({name: "room", params: {roomId: room}});
+}
+
+const onHomeClick = () => {
+  router.push({name: "home"});
+}
+
+onBeforeMount(async () => {
+  const appUrl = import.meta.env.VITE_API_ENDPOINT || "__API_ENDPOINT__";
+  fetch(appUrl + "/room")
+      .then(r => r.json())
+      .then(data => state.rooms = data);
+})
+</script>
+
+<template>
+  <div class="rooms">
+    <aside>
+      <div>
+        <h1>Mau-Mau</h1>
+        <PrimaryButton @click="onHomeClick">
+          Back to home
+        </PrimaryButton>
+      </div>
+    </aside>
+    <main>
+      <div class="header">
+        <h1>Browse rooms</h1>
+        <PrimaryButton>Or join a random one</PrimaryButton>
+      </div>
+      <ul class="rooms-list">
+        <li v-for="room in state.rooms" :key="room">
+          <StylessButton @click="onRoomClick(room)">{{ room }}</StylessButton>
+        </li>
+      </ul>
+    </main>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import "@/scss/variables";
+@import "@/scss/layout";
+
+.rooms {
+  @extend .container-fill;
+
+  display: flex;
+  gap: 1rem;
+
+  @media screen and (max-width: $breakpoint-md) {
+    flex-direction: column;
+  }
+
+  aside {
+    display: grid;
+    min-width: 20%;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    overflow: hidden auto;
+
+    @media screen and (min-width: $breakpoint-md) {
+      max-width: $breakpoint-xs;
+      width: 100%;
+    }
+
+    button {
+      padding: 0.5rem;
+      font-size: 1rem;
+      width: 100%;
+    }
+  }
+
+  main {
+    @extend .container-fill;
+
+    .header {
+      padding-top: 0.67em;
+      display: grid;
+      grid-template-columns: 1fr auto;
+
+      h1 {
+        margin: 0;
+      }
+    }
+  }
+}
+</style>
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,26 +1,11 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
    },
-  "include": [
-    "src"
+    {
+      "path": "./tsconfig.app.json"
+    }
  ]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,20 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import VueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueJsx(),
+    VueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
Author	SHA1	Message	Date
DTieman	c6097b971a	Merge pull request 'React -> Vue' (#6 ) from vue into developmaunt All checks were successful Build Mau & Deploy Mau / build (push) Successful in 46s Details Build Mau & Deploy Mau / deploy (push) Successful in 1m39s Details Reviewed-on: https://git.mau-mau.nl/MauMau/MauMau-Client/pulls/6	2024-09-01 15:11:26 +00:00
DTieman	5a9bf6913b	Merge remote-tracking branch 'origin/vue' into vue Some checks failed Build Mau & Deploy Mau / build (push) Successful in 1m8s Details Build Mau & Deploy Mau / deploy (push) Has been cancelled Details Build Mau & Deploy Mau / build (pull_request) Successful in 48s Details Build Mau & Deploy Mau / deploy (pull_request) Successful in 2m21s Details	2024-09-01 16:41:11 +02:00
DTieman	cb2a8ead3a	Changed overflow to correct orientation	2024-09-01 16:41:04 +02:00
DTieman	22cbb104f6	Update .gitea/workflows/main.yml Some checks failed Build Mau & Deploy Mau / deploy (push) Has been cancelled Details Build Mau & Deploy Mau / build (push) Has been cancelled Details Build Mau & Deploy Mau / build (pull_request) Successful in 43s Details Build Mau & Deploy Mau / deploy (pull_request) Successful in 1m46s Details	2024-07-15 14:45:21 +00:00
DTieman	4e6391b9ea	favicon and project name Some checks failed Build Mau & Deploy Mau / build (push) Failing after 44s Details Build Mau & Deploy Mau / deploy (push) Has been skipped Details Build Mau & Deploy Mau / build (pull_request) Failing after 48s Details Build Mau & Deploy Mau / deploy (pull_request) Has been skipped Details	2024-07-14 17:05:07 +02:00
DTieman	e059fc347c	Vue rewrite Some checks failed Build Mau & Deploy Mau / build (push) Failing after 46s Details Build Mau & Deploy Mau / deploy (push) Has been skipped Details	2024-07-14 16:28:46 +02:00
DTieman	e30e2d5d60	Merge pull request 'Back-end update and new styling' (#4 ) from quality-rewrite into developmaunt Some checks failed Build Mau & Deploy Mau / build (push) Successful in 1m50s Details Build Mau & Deploy Mau / deploy (push) Successful in 4m4s Details Build Mau & Deploy Mau / build (pull_request) Has been cancelled Details Build Mau & Deploy Mau / deploy (pull_request) Has been cancelled Details Reviewed-on: https://git.mau-mau.nl/MauMau/MauMau-Client/pulls/4	2024-05-25 20:59:48 +00:00
DTieman	6ba1523853	Updated front-end to match back-end and better styling Some checks failed Build Mau & Deploy Mau / build (push) Successful in 1m48s Details Build Mau & Deploy Mau / deploy (push) Has been cancelled Details Build Mau & Deploy Mau / build (pull_request) Successful in 1m37s Details Build Mau & Deploy Mau / deploy (pull_request) Failing after 2m3s Details	2024-05-19 23:50:47 +02:00
DTieman	4ae1538552	Updated front-end to match back-end rewrite All checks were successful Build Mau & Deploy Mau / build (push) Successful in 1m25s Details Build Mau & Deploy Mau / deploy (push) Successful in 3m49s Details	2024-05-05 17:08:20 +02:00
DTieman	b738263726	Fixed eslint Some checks failed Build Mau & Deploy Mau / build (push) Successful in 1m22s Details Build Mau & Deploy Mau / build (pull_request) Successful in 1m32s Details Build Mau & Deploy Mau / deploy (push) Has been cancelled Details Build Mau & Deploy Mau / deploy (pull_request) Has been cancelled Details	2024-04-22 22:52:24 +02:00
DTieman	d5df884ae8	Better lobby system Some checks failed Build Mau & Deploy Mau / build (push) Failing after 1m17s Details Build Mau & Deploy Mau / deploy (push) Has been skipped Details Build Mau & Deploy Mau / build (pull_request) Failing after 1m24s Details Build Mau & Deploy Mau / deploy (pull_request) Has been skipped Details	2024-04-22 21:52:12 +02:00
DTieman	4959e197bb	Mostly design update + Some checks failed Build Mau & Deploy Mau / build (push) Failing after 1m23s Details Build Mau & Deploy Mau / deploy (push) Has been skipped Details - Chat cleaning - Player hand size visibility	2024-04-21 16:28:55 +02:00
DTieman	d907a56483	Custom names and time in chat All checks were successful Build Mau & Deploy Mau / build (push) Successful in 1m25s Details Build Mau & Deploy Mau / deploy (push) Successful in 3m27s Details	2024-04-20 23:44:23 +02:00
DTieman	d547db430c	Better layout Some checks failed Build Mau & Deploy Mau / build (push) Has been cancelled Details Build Mau & Deploy Mau / deploy (push) Has been cancelled Details	2024-04-20 00:23:18 +02:00
DTieman	e78d0d46f7	Slightly better chat (send with enter) All checks were successful Build Mau & Deploy Mau / build (push) Successful in 1m26s Details Build Mau & Deploy Mau / deploy (push) Successful in 7m9s Details	2024-04-19 23:28:29 +02:00
DTieman	5f8c6994aa	Added the ability to choose your cardtype when playing a jack or the newly added joker Some checks failed Build Mau & Deploy Mau / build (push) Successful in 1m29s Details Build Mau & Deploy Mau / deploy (push) Has been cancelled Details	2024-04-19 22:12:31 +02:00
DTieman	66c2d322a2	Update .gitea/workflows/main.yml Some checks failed Build Mau & Deploy Mau / build (push) Successful in 1m24s Details Build Mau & Deploy Mau / deploy (push) Failing after 2m26s Details	2024-04-17 08:54:42 +00:00
DTieman	03930d2d81	Update .gitea/workflows/main.yml All checks were successful Build Mau & Deploy Mau / build (push) Successful in 1m25s Details Build Mau & Deploy Mau / deploy (push) Successful in 4m2s Details	2024-04-17 08:44:35 +00:00
DTieman	6bd1f316d1	Merge pull request 'fix-url' (#2 ) from fix-url into mauster Some checks failed Build Mau & Deploy Mau / deploy (push) Has been cancelled Details Build Mau & Deploy Mau / build (push) Has been cancelled Details Reviewed-on: https://git.mau-mau.nl/MauMau/MauMau-Client/pulls/2	2024-04-17 08:42:00 +00:00
DTieman	74f51d60d0	Merge pull request 'Update src/layout/pages/MainLobby.tsx' (#1 ) from fix-url into mauster All checks were successful Build Mau & Deploy Mau / build (push) Successful in 1m32s Details Build Mau & Deploy Mau / deploy (push) Successful in 4m12s Details Reviewed-on: https://git.mau-mau.nl/MauMau/MauMau-Client/pulls/1	2024-04-17 08:05:36 +00:00
DTieman	dc4dd5c19b	Update src/layout/pages/Rooms.tsx Some checks are pending Build Mau & Deploy Mau / build (push) Waiting to run Details Build Mau & Deploy Mau / deploy (push) Blocked by required conditions Details	2024-04-17 08:05:23 +00:00
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>