From 7d8cca54e548d2a85287fd2325db88f2697be55a Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Sat, 4 Nov 2023 21:28:11 +0000
Subject: Add more shit

---
 frontend/.gitignore                           |   2 +
 frontend/Dockerfile                           |  20 ++
 frontend/package-lock.json                    |  11 +-
 frontend/package.json                         |   3 +-
 frontend/src/components/Board/TetrisBoard.vue | 270 --------------------
 frontend/src/components/Home.vue              |  15 ++
 frontend/src/components/TetrisBoard.vue       | 340 ++++++++++++++++++++++++++
 frontend/src/main.ts                          |   6 +-
 frontend/src/router/index.ts                  |  15 ++
 frontend/src/views/HomeView.vue               |   5 +-
 frontend/src/views/HostView.vue               |  75 ++++++
 frontend/src/views/JoinView.vue               |  60 +++++
 frontend/src/views/PlayView.vue               |  10 +
 13 files changed, 556 insertions(+), 276 deletions(-)
 create mode 100644 frontend/Dockerfile
 delete mode 100644 frontend/src/components/Board/TetrisBoard.vue
 create mode 100644 frontend/src/components/Home.vue
 create mode 100644 frontend/src/components/TetrisBoard.vue
 create mode 100644 frontend/src/views/HostView.vue
 create mode 100644 frontend/src/views/JoinView.vue
 create mode 100644 frontend/src/views/PlayView.vue

(limited to 'frontend')

diff --git a/frontend/.gitignore b/frontend/.gitignore
index 38adffa..cd1e201 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -26,3 +26,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+.env
\ No newline at end of file
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..723e97e
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,20 @@
+FROM node:18 as build
+
+WORKDIR /app
+
+COPY package.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+
+FROM nginx:1.21.1-alpine
+
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8c8ea96..99dddae 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,12 +8,13 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "qrcode.vue": "^3.4.1",
         "vue": "^3.3.4",
         "vue-router": "^4.2.5"
       },
       "devDependencies": {
         "@tsconfig/node18": "^18.2.2",
-        "@types/node": "^18.18.5",
+        "@types/node": "^18.18.8",
         "@vitejs/plugin-vue": "^4.4.0",
         "@vue/tsconfig": "^0.4.0",
         "npm-run-all2": "^6.1.1",
@@ -1094,6 +1095,14 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/qrcode.vue": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-3.4.1.tgz",
+      "integrity": "sha512-wq/zHsifH4FJ1GXQi8/wNxD1KfQkckIpjK1KPTc/qwYU5/Bkd4me0w4xZSg6EXk6xLBkVDE0zxVagewv5EMAVA==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-8.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 05e0af5..97c0345 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,12 +10,13 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "dependencies": {
+    "qrcode.vue": "^3.4.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@tsconfig/node18": "^18.2.2",
-    "@types/node": "^18.18.5",
+    "@types/node": "^18.18.8",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vue/tsconfig": "^0.4.0",
     "npm-run-all2": "^6.1.1",
diff --git a/frontend/src/components/Board/TetrisBoard.vue b/frontend/src/components/Board/TetrisBoard.vue
deleted file mode 100644
index 7528ad7..0000000
--- a/frontend/src/components/Board/TetrisBoard.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<script setup lang="ts">
-import { ref, type Ref } from 'vue';
-import { mergeTetrominoWithBoard, randomiseNextTetrominoes, tetrominoCollidesWithBoard } from '@/util/tetris';
-import { type Tetromino, allTetrominoes } from '@/model/tetrominoes';
-import { type Board } from '@/model/board';
-
-const renderBoard: Ref<Board> = ref([[]]);
-let gameBoard: Board = [
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-]
-let currentTetromino: Tetromino | null = null;
-let nextTetrominoes: Ref<Array<Tetromino>> = ref([]);
-let gameInterval: ReturnType<typeof setInterval>;
-let gameSpeed = 1000;
-let elapsedBlocks = 0;
-let gameInProgress = false;
-let points = ref(0);
-let notificationMessage = ref('Press start to begin!');
-let notificationBg = ref('\#dfdfdf');
-let notificationFg = ref('black');
-
-function updateRender() {
-  if (currentTetromino) {
-    renderBoard.value = mergeTetrominoWithBoard(gameBoard, currentTetromino);
-  } else {
-    renderBoard.value = gameBoard;
-  }
-}
-
-
-function rescheduleTickTimer() {
-  clearInterval(gameInterval);
-  gameInterval = setInterval(tick, gameSpeed);
-}
-
-const tick = () => {
-  if (!currentTetromino) {
-    let next = nextTetrominoes.value.shift();
-    currentTetromino = { ...next! };
-    currentTetromino.col = 3;
-    if (tetrominoCollidesWithBoard(gameBoard, currentTetromino)) {
-      clearInterval(gameInterval);
-      notificationBg.value = '\#FF4136';
-      notificationFg.value = 'white';
-      notificationMessage.value = 'Game over!';
-      return;
-    }
-
-
-    if (nextTetrominoes.value.length === 0) {
-      nextTetrominoes.value = randomiseNextTetrominoes();
-    }
-  }
-
-  updateRender();
-
-  if (tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, row: currentTetromino.row + 1 })) {
-    gameBoard = mergeTetrominoWithBoard(gameBoard, currentTetromino);
-    currentTetromino = null;
-    ++elapsedBlocks;
-
-    let clears = 0;
-    for (let row = 0; row < gameBoard.length; ++row) {
-      if (gameBoard[row].every(cell => cell)) {
-        clears++;
-        gameBoard.splice(row, 1);
-        gameBoard.unshift([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
-      }
-    }
-    
-    switch (clears) {
-      case 1:
-        points.value += 40;
-        break;
-      case 2:
-        points.value += 100;
-        break;
-      case 3:
-        points.value += 300;
-        break;
-      case 4:
-        points.value += 1200;
-        break;
-    }
-
-    if (gameSpeed > 150 && elapsedBlocks % 3 === 0) {
-      gameSpeed = Math.max(150, gameSpeed - (gameSpeed > 300 ? 75 : 10));
-      rescheduleTickTimer();
-    }
-    return;
-  }
-
-  ++currentTetromino.row;
-  
-};
-
-function startGame() {
-  elapsedBlocks = 0;
-  gameSpeed = 1000;
-  nextTetrominoes.value = randomiseNextTetrominoes();
-  gameInProgress = true;
-  notificationMessage.value = '';
-  
-  updateRender();
-  rescheduleTickTimer();
-}
-
-document.addEventListener('keydown', event => {
-  event.preventDefault();
-  if (currentTetromino && event.key === 'r') {
-    if (!tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, rotation: (currentTetromino.rotation + 1) % 4 })) {
-      currentTetromino!.rotation = (currentTetromino!.rotation + 1) % 4;
-    }
-
-    updateRender();
-  }
-  if (currentTetromino && ['ArrowLeft', 'h'].includes(event.key)) {
-    if (!tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, col: currentTetromino.col - 1 })) {
-      --currentTetromino.col;
-    }
-
-    updateRender();
-  }
-  if (currentTetromino && ['ArrowRight', 'l'].includes(event.key)) {
-    if (!tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, col: currentTetromino.col + 1 })) {
-      ++currentTetromino.col;
-    }
-
-    updateRender();
-  }
-  if (currentTetromino && ['ArrowDown', 'j', 'z'].includes(event.key)) {
-    if (!tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, row: currentTetromino.row + 1 })) {
-      ++currentTetromino.row;
-    }
-
-    updateRender();
-  }
-  if (currentTetromino && ['ArrowUp', 'k', 'c'].includes(event.key)) {
-    let rowsDropped = 0;
-    while (!tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, row: currentTetromino.row + 1 })) {
-      ++currentTetromino.row;
-      ++rowsDropped;
-    }
-    
-    if (rowsDropped === 0) {
-      return;
-    }
-    
-    points.value += rowsDropped + 1;
-
-    tick();
-  }
-});
-</script>
-
-<template>
-  <main>
-    <h1>Tetris</h1>
-    <div class="cols">
-      <div>
-        <div v-if="notificationMessage" class="notification-banner" :style="{ 'background-color': notificationBg, 'color': notificationFg}">
-          {{ notificationMessage }}
-        </div>
-        <div class="tetris-board">
-          <div v-for="(row, rowIndex) of renderBoard" class="tetris-row">
-            <div v-for="(col, colIndex) of row" class="tetris-cell"
-              :style="{ 'background-color': col ? `rgb(${allTetrominoes[col].color})` : 'white' }">
-
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="game-info">
-        <button v-if="!gameInProgress" @click="startGame">Start game</button>
-        <h2>Next up</h2>
-        <div class="next-tetromino">
-          <div v-for="(row, rowIndex) of nextTetrominoes[0]?.shapes[0]" class="tetris-row">
-            <div v-for="(col, colIndex) of row" class="tetris-cell"
-              :style="{ 'background-color': col ? `rgb(${nextTetrominoes[0]?.color})` : 'white' }">
-
-            </div>
-          </div>
-        </div>
-        
-        <h2>Score</h2>
-        <h3>
-          {{ points }}
-        </h3>
-
-        <h2>Controls</h2>
-        <p>
-          To move left and right, use the arrow keys or <kbd>H</kbd> and <kbd>L</kbd>.
-        </p>
-
-        <p>
-          To rotate, use <kbd>R</kbd>.
-        </p>
-
-        <p>
-          To do a soft drop, use the arrow down key or <kbd>J</kbd>.
-        </p>
-
-        <p>
-          To do a hard drop, use the arrow up key or <kbd>K</kbd>.
-        </p>
-      </div>
-    </div>
-
-  </main>
-</template>
-
-<style scoped>
-.cols {
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-}
-
-.game-info {
-  max-width: 250px;
-}
-
-.tetris-board {
-  width: calc(32px * 10);
-  height: calc(32px * 20);
-  border: 1px solid #dfdfdf;
-}
-
-.notification-banner {
-  width: calc(32px * 10 + 2px);
-  height: 22px;
-  text-align: center;
-  position: absolute;
-}
-
-.next-tetromino {
-  width: calc(32px * 4);
-  height: calc(32px * 4);
-}
-
-.tetris-row {
-  display: grid;
-  grid-template-columns: repeat(10, 1fr);
-}
-
-.tetris-cell {
-  width: 30px;
-  height: 30px;
-  border: 1px solid #dfdfdf;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
new file mode 100644
index 0000000..3dc0341
--- /dev/null
+++ b/frontend/src/components/Home.vue
@@ -0,0 +1,15 @@
+<template>
+  <h1>Tetris</h1>
+  <p>Pick an option</p>
+  <ul>
+    <li>
+      <RouterLink to="/play">Play solo game</RouterLink>
+    </li>
+    <li>
+      <RouterLink to="/host">Host networked game</RouterLink>
+    </li>
+    <li>
+      <RouterLink to="/join">Join networked game</RouterLink>
+    </li>
+  </ul>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/TetrisBoard.vue b/frontend/src/components/TetrisBoard.vue
new file mode 100644
index 0000000..4e5911b
--- /dev/null
+++ b/frontend/src/components/TetrisBoard.vue
@@ -0,0 +1,340 @@
+<script setup lang="ts">
+import { onMounted, ref, type Ref } from 'vue';
+import { mergeTetrominoWithBoard, randomiseNextTetrominoes, tetrominoCollidesWithBoard } from '@/util/tetris';
+import { type Tetromino, allTetrominoes } from '@/model/tetrominoes';
+import { type Board } from '@/model/board';
+
+const props = defineProps({
+  networked: Boolean,
+  inputQueue: Array<string>
+});
+
+const renderBoard: Ref<Board> = ref([[]]);
+let gameBoard: Board = [
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+]
+let currentTetromino: Tetromino | null = null;
+let nextTetrominoes: Ref<Array<Tetromino>> = ref([]);
+let gameInterval: ReturnType<typeof setInterval>;
+let gameSpeed = 1000;
+let elapsedBlocks = 0;
+let gameInProgress = false;
+let freezeTick = false;
+let points = ref(0);
+let notificationMessage = ref('Press start to begin!');
+let notificationBg = ref('\#dfdfdf');
+let notificationFg = ref('black');
+
+function updateRender() {
+  if (currentTetromino) {
+    renderBoard.value = mergeTetrominoWithBoard(gameBoard, currentTetromino);
+  } else {
+    renderBoard.value = gameBoard;
+  }
+}
+
+
+function rescheduleTickTimer() {
+  clearInterval(gameInterval);
+  gameInterval = setInterval(tick, gameSpeed);
+}
+
+const tick = () => {
+  if (!currentTetromino) {
+    let next = nextTetrominoes.value.shift();
+    currentTetromino = { ...next! };
+    currentTetromino.col = 3;
+    if (tetrominoCollidesWithBoard(gameBoard, currentTetromino)) {
+      clearInterval(gameInterval);
+      notificationBg.value = '\#FF4136';
+      notificationFg.value = 'white';
+      notificationMessage.value = 'Game over!';
+      return;
+    }
+
+
+    if (nextTetrominoes.value.length === 0) {
+      nextTetrominoes.value = randomiseNextTetrominoes();
+    }
+  }
+
+  updateRender();
+
+  if (tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, row: currentTetromino.row + 1 })) {
+    if (!freezeTick) {
+      freezeTick = true;
+      return;
+    }
+
+    gameBoard = mergeTetrominoWithBoard(gameBoard, currentTetromino);
+    currentTetromino = null;
+    ++elapsedBlocks;
+
+    let clears = 0;
+    for (let row = 0; row < gameBoard.length; ++row) {
+      if (gameBoard[row].every(cell => cell)) {
+        clears++;
+        gameBoard.splice(row, 1);
+        gameBoard.unshift([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+      }
+    }
+
+    switch (clears) {
+      case 1:
+        points.value += 40;
+        break;
+      case 2:
+        points.value += 100;
+        break;
+      case 3:
+        points.value += 300;
+        break;
+      case 4:
+        points.value += 1200;
+        break;
+    }
+
+    if (gameSpeed > 150 && elapsedBlocks % 3 === 0) {
+      gameSpeed = Math.max(150, gameSpeed - (gameSpeed > 300 ? 75 : 10));
+      rescheduleTickTimer();
+    }
+    freezeTick = false;
+    return;
+  } else {
+    freezeTick = false;
+  }
+
+  ++currentTetromino.row;
+
+};
+
+function startGame() {
+  elapsedBlocks = 0;
+  gameSpeed = 1000;
+  nextTetrominoes.value = randomiseNextTetrominoes();
+  gameInProgress = true;
+  notificationMessage.value = '';
+
+  updateRender();
+  rescheduleTickTimer();
+}
+
+function rotateTetronimo() {
+  if (currentTetromino && !tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, rotation: (currentTetromino.rotation + 1) % 4 })) {
+    currentTetromino!.rotation = (currentTetromino!.rotation + 1) % 4;
+  }
+
+  updateRender();
+}
+
+function moveTetrominoLeft() {
+  if (currentTetromino && !tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, col: currentTetromino.col - 1 })) {
+    --currentTetromino.col;
+  }
+
+  updateRender();
+}
+
+function moveTetrominoRight() {
+  if (currentTetromino && !tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, col: currentTetromino.col + 1 })) {
+    ++currentTetromino.col;
+  }
+
+  updateRender();
+}
+
+function dropTetromino() {
+  let rowsDropped = 0;
+  while (currentTetromino && !tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, row: currentTetromino.row + 1 })) {
+    ++currentTetromino.row;
+    ++rowsDropped;
+  }
+
+  if (rowsDropped === 0) {
+    return;
+  }
+
+  points.value += rowsDropped + 1;
+
+  tick();
+}
+
+function softDropTetromino() {
+  if (currentTetromino && !tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, row: currentTetromino.row + 1 })) {
+    ++currentTetromino.row;
+  }
+
+  updateRender();
+}
+
+function processInputQueue() {
+  if (!props.networked) {
+    return;
+  }
+
+  if (props.inputQueue!.length === 0) {
+    return;
+  }
+
+  let move = props.inputQueue!.shift();
+  if (move === 'left') {
+    moveTetrominoLeft();
+  } else if (move === 'right') {
+    moveTetrominoRight();
+  } else if (move === 'rotate') {
+    rotateTetronimo();
+  }
+}
+
+if (!props.networked) {
+  document.addEventListener('keydown', event => {
+    event.preventDefault();
+    if (currentTetromino && event.key === 'r') {
+      rotateTetronimo();
+    }
+    if (currentTetromino && ['ArrowLeft', 'h'].includes(event.key)) {
+      moveTetrominoLeft();
+    }
+    if (currentTetromino && ['ArrowRight', 'l'].includes(event.key)) {
+      moveTetrominoRight();
+    }
+    if (currentTetromino && ['ArrowDown', 'j', 'z'].includes(event.key)) {
+      softDropTetromino();
+    }
+    if (currentTetromino && ['ArrowUp', 'k', 'c'].includes(event.key)) {
+      dropTetromino();
+    }
+  });
+}
+
+if (props.networked) {
+  onMounted(() => {
+    setInterval(processInputQueue, 100);
+  });
+}
+
+onMounted(() => {
+  if (!gameInProgress) {
+    startGame();
+  }
+});
+</script>
+
+<template>
+  <main>
+    <h1>Tetris</h1>
+    <div class="cols">
+      <div>
+        <div v-if="notificationMessage" class="notification-banner"
+          :style="{ 'background-color': notificationBg, 'color': notificationFg }">
+          {{ notificationMessage }}
+        </div>
+        <div class="tetris-board">
+          <div v-for="(row, rowIndex) of renderBoard" class="tetris-row">
+            <div v-for="(col, colIndex) of row" class="tetris-cell"
+              :style="{ 'background-color': col ? `rgb(${allTetrominoes[col].color})` : 'white' }">
+
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="game-info">
+        <button v-if="!gameInProgress" @click="startGame">Start game</button>
+        <h2>Next up</h2>
+        <div class="next-tetromino">
+          <div v-for="(row, rowIndex) of nextTetrominoes[0]?.shapes[0]" class="tetris-row">
+            <div v-for="(col, colIndex) of row" class="tetris-cell"
+              :style="{ 'background-color': col ? `rgb(${nextTetrominoes[0]?.color})` : 'white' }">
+
+            </div>
+          </div>
+        </div>
+
+        <h2>Score</h2>
+        <h3>
+          {{ points }}
+        </h3>
+
+        <div v-if="!networked">
+          <h2>Controls</h2>
+          <p>
+            To move left and right, use the arrow keys or <kbd>H</kbd> and <kbd>L</kbd>.
+          </p>
+
+          <p>
+            To rotate, use <kbd>R</kbd>.
+          </p>
+
+          <p>
+            To do a soft drop, use the arrow down key or <kbd>J</kbd>.
+          </p>
+
+          <p>
+            To do a hard drop, use the arrow up key or <kbd>K</kbd>.
+          </p>
+        </div>
+      </div>
+    </div>
+
+  </main>
+</template>
+
+<style scoped>
+.cols {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+}
+
+.game-info {
+  max-width: 250px;
+}
+
+.tetris-board {
+  width: calc(32px * 10);
+  height: calc(32px * 20);
+  border: 1px solid #dfdfdf;
+}
+
+.notification-banner {
+  width: calc(32px * 10 + 2px);
+  height: 22px;
+  text-align: center;
+  position: absolute;
+}
+
+.next-tetromino {
+  width: calc(32px * 4);
+  height: calc(32px * 4);
+}
+
+.tetris-row {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+}
+
+.tetris-cell {
+  width: 30px;
+  height: 30px;
+  border: 1px solid #dfdfdf;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index a4db798..7f87494 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -3,11 +3,15 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import TetrisBoard from './components/Board/TetrisBoard.vue'
+import TetrisBoard from './components/TetrisBoard.vue'
+import Home from './components/Home.vue'
+import QrcodeVue from 'qrcode.vue'
 
 const app = createApp(App)
 
 app.use(router)
 app.component('TetrisBoard', TetrisBoard)
+app.component('Home', Home)
+app.component('QRCode', QrcodeVue)
 
 app.mount('#app')
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index e58491f..fe575db 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -8,6 +8,21 @@ const router = createRouter({
       path: '/',
       name: 'home',
       component: HomeView
+    },
+    {
+      path: '/host',
+      name: 'host',
+      component: () => import('../views/HostView.vue')
+    },
+    {
+      path: '/play',
+      name: 'play',
+      component: () => import('../views/PlayView.vue')
+    },
+    {
+      path: '/join/:id',
+      name: 'join',
+      component: () => import('../views/JoinView.vue')
     }
   ]
 })
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 09d319e..0b9fe32 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type TetrisBoard from '../components/Board/TetrisBoard.vue';
-
+import type Home from '../components/Home.vue';
 </script>
 
 <template>
   <main>
-    <TetrisBoard></TetrisBoard>
+    <Home></Home>
   </main>
 </template>
diff --git a/frontend/src/views/HostView.vue b/frontend/src/views/HostView.vue
new file mode 100644
index 0000000..5b29289
--- /dev/null
+++ b/frontend/src/views/HostView.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, type Ref } from 'vue';
+import type TetrisBoard from '../components/TetrisBoard.vue';
+
+let started = ref(false)
+let waitingForCode = ref(true)
+let code = ref('')
+let url = ref('');
+let numClients = ref(0);
+let inputQueue: Ref<Array<string>> = ref([]);
+
+let socket: WebSocket;
+
+function startGame() {
+  if (!socket) {
+    return;
+  }
+  socket.send(JSON.stringify({
+    action: 'start',
+    sessionId: code.value,
+  }));
+}
+
+fetch(`${import.meta.env.VITE_BACKEND_BASE_URL}/session`,
+  {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+  }
+).then(async (response) => {
+  const data: any = await response.json();
+  code.value = data.id;
+  url.value = `${import.meta.env.VITE_FRONTEND_BASE_URL}/join/${data.id}`;
+  waitingForCode.value = false;
+  openSocket(data.id);
+});
+
+function openSocket(id: string) {
+  socket = new WebSocket(`${import.meta.env.VITE_BACKEND_WS_URL}`);
+
+  socket.onopen = () => {
+    socket.send(JSON.stringify({
+      action: 'host',
+      sessionId: id,
+    }));
+  };
+  socket.onmessage = (event) => {
+    const data = JSON.parse(event.data);
+    if (data.action === 'join') {
+      numClients.value = data.clients;
+    } else if (data.action === 'state' && data.state === 'playing') {
+      started.value = true;
+    } else if (data.action === 'move') {
+      inputQueue.value.push(data.move);
+    }
+  };
+}
+</script>
+
+<template>
+  <main>
+    <template v-if="waitingForCode">
+      <h1>Requesting session...</h1>
+    </template>
+    <template v-if="!started && !waitingForCode">
+      <h1>Join this game</h1>
+      <QRCode size=500 level="M" :value="url"></QRCode>
+      <h2><a :href="url">{{ url }}</a></h2>
+      <p>Connected clients: {{ numClients }}</p>
+      <button @click="startGame">Start game</button>
+    </template>
+    <TetrisBoard v-if="started" :networked="true" :input-queue="inputQueue"></TetrisBoard>
+  </main>
+</template>
diff --git a/frontend/src/views/JoinView.vue b/frontend/src/views/JoinView.vue
new file mode 100644
index 0000000..abfbd1a
--- /dev/null
+++ b/frontend/src/views/JoinView.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const sessionId = route.params.id;
+
+const joiningGame = ref(true);
+const connected = ref(false);
+const gameState = ref('');
+
+const socket = new WebSocket(`${import.meta.env.VITE_BACKEND_WS_URL}`);
+socket.onopen = () => {
+  socket.send(JSON.stringify({
+    action: 'join',
+    sessionId: sessionId,
+  }));
+};
+socket.onmessage = (event) => {
+  const data = JSON.parse(event.data);
+  if (data.action === 'state') {
+    gameState.value = data.state;
+    joiningGame.value = false;
+    connected.value = true;
+  }
+};
+
+function sendMove(move: string) {
+  socket.send(JSON.stringify({
+    action: 'move',
+    sessionId: sessionId,
+    move: move,
+  }));
+}
+
+function sendLeft() {
+  sendMove('left');
+}
+
+function sendRotate() {
+  sendMove('rotate');
+}
+
+function sendRight() {
+  sendMove('right');
+}
+</script>
+
+<template>
+  <main>
+    <h1 v-if="joiningGame">Joining game "{{ sessionId }}"...</h1>
+    <h1 v-if="connected">Connected to "{{ sessionId }}"</h1>
+    <h1 v-if="gameState === 'waiting'">Waiting for host to start the game...</h1>
+    <div v-if="gameState === 'playing'">
+      <button @click="sendLeft">Left</button>
+      <button @click="sendRotate">Rotate</button>
+      <button @click="sendRight">Right</button>
+    </div>
+  </main>
+</template>
diff --git a/frontend/src/views/PlayView.vue b/frontend/src/views/PlayView.vue
new file mode 100644
index 0000000..8c00589
--- /dev/null
+++ b/frontend/src/views/PlayView.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import type TetrisBoard from '../components/TetrisBoard.vue';
+
+</script>
+
+<template>
+  <main>
+    <TetrisBoard :networked="false"></TetrisBoard>
+  </main>
+</template>
-- 
cgit v1.2.3-70-g09d2