1 files changed, 60 insertions, 0 deletions
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>