2 files changed, 137 insertions, 52 deletions

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/Board/TetrisBoard.vue b/frontend/src/components/TetrisBoard.vue
index 7528ad7..4e5911b 100644
--- a/frontend/src/components/Board/TetrisBoard.vue
+++ b/frontend/src/components/TetrisBoard.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import { ref, type Ref } from 'vue';
+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],
@@ -33,6 +38,7 @@ 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');
@@ -74,6 +80,11 @@ const tick = () => {
   updateRender();
 
   if (tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, row: currentTetromino.row + 1 })) {
+    if (!freezeTick) {
+      freezeTick = true;
+      return;
+    }
+
     gameBoard = mergeTetrominoWithBoard(gameBoard, currentTetromino);
     currentTetromino = null;
     ++elapsedBlocks;
@@ -86,7 +97,7 @@ const tick = () => {
         gameBoard.unshift([0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
       }
     }
-    
+
     switch (clears) {
       case 1:
         points.value += 40;
@@ -106,11 +117,14 @@ const tick = () => {
       gameSpeed = Math.max(150, gameSpeed - (gameSpeed > 300 ? 75 : 10));
       rescheduleTickTimer();
     }
+    freezeTick = false;
     return;
+  } else {
+    freezeTick = false;
   }
 
   ++currentTetromino.row;
-  
+
 };
 
 function startGame() {
@@ -119,55 +133,108 @@ function startGame() {
   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;
-    }
+function rotateTetronimo() {
+  if (currentTetromino && !tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, rotation: (currentTetromino.rotation + 1) % 4 })) {
+    currentTetromino!.rotation = (currentTetromino!.rotation + 1) % 4;
+  }
+
+  updateRender();
+}
 
-    updateRender();
+function moveTetrominoLeft() {
+  if (currentTetromino && !tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, col: currentTetromino.col - 1 })) {
+    --currentTetromino.col;
   }
-  if (currentTetromino && ['ArrowLeft', 'h'].includes(event.key)) {
-    if (!tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, col: currentTetromino.col - 1 })) {
-      --currentTetromino.col;
-    }
 
-    updateRender();
+  updateRender();
+}
+
+function moveTetrominoRight() {
+  if (currentTetromino && !tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, col: currentTetromino.col + 1 })) {
+    ++currentTetromino.col;
   }
-  if (currentTetromino && ['ArrowRight', 'l'].includes(event.key)) {
-    if (!tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, col: currentTetromino.col + 1 })) {
-      ++currentTetromino.col;
-    }
 
-    updateRender();
+  updateRender();
+}
+
+function dropTetromino() {
+  let rowsDropped = 0;
+  while (currentTetromino && !tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, row: currentTetromino.row + 1 })) {
+    ++currentTetromino.row;
+    ++rowsDropped;
   }
-  if (currentTetromino && ['ArrowDown', 'j', 'z'].includes(event.key)) {
-    if (!tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, row: currentTetromino.row + 1 })) {
-      ++currentTetromino.row;
-    }
 
-    updateRender();
+  if (rowsDropped === 0) {
+    return;
   }
-  if (currentTetromino && ['ArrowUp', 'k', 'c'].includes(event.key)) {
-    let rowsDropped = 0;
-    while (!tetrominoCollidesWithBoard(gameBoard, { ...currentTetromino, row: currentTetromino.row + 1 })) {
-      ++currentTetromino.row;
-      ++rowsDropped;
+
+  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 (rowsDropped === 0) {
-      return;
+    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();
     }
-    
-    points.value += rowsDropped + 1;
+    if (currentTetromino && ['ArrowUp', 'k', 'c'].includes(event.key)) {
+      dropTetromino();
+    }
+  });
+}
+
+if (props.networked) {
+  onMounted(() => {
+    setInterval(processInputQueue, 100);
+  });
+}
 
-    tick();
+onMounted(() => {
+  if (!gameInProgress) {
+    startGame();
   }
 });
 </script>
@@ -177,7 +244,8 @@ document.addEventListener('keydown', event => {
     <h1>Tetris</h1>
     <div class="cols">
       <div>
-        <div v-if="notificationMessage" class="notification-banner" :style="{ 'background-color': notificationBg, 'color': notificationFg}">
+        <div v-if="notificationMessage" class="notification-banner"
+          :style="{ 'background-color': notificationBg, 'color': notificationFg }">
           {{ notificationMessage }}
         </div>
         <div class="tetris-board">
@@ -200,28 +268,30 @@ document.addEventListener('keydown', event => {
             </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>
+        <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 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 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>
+          <p>
+            To do a hard drop, use the arrow up key or <kbd>K</kbd>.
+          </p>
+        </div>
       </div>
     </div>