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/src/views/HomeView.vue |  5 ++-
 frontend/src/views/HostView.vue | 75 +++++++++++++++++++++++++++++++++++++++++
 frontend/src/views/JoinView.vue | 60 +++++++++++++++++++++++++++++++++
 frontend/src/views/PlayView.vue | 10 ++++++
 4 files changed, 147 insertions(+), 3 deletions(-)
 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/src/views')

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