add qr to tetris playing screen

2 files changed, 7 insertions, 2 deletions

diff --git a/frontend/src/components/TetrisBoard.vue b/frontend/src/components/TetrisBoard.vue
index 0185e53..9767d03 100644
--- a/frontend/src/components/TetrisBoard.vue
+++ b/frontend/src/components/TetrisBoard.vue
@@ -6,7 +6,8 @@ import { type Board } from '@/model/board';
 
 const props = defineProps({
   networked: Boolean,
-  inputQueue: Array<string>
+  inputQueue: Array<string>,
+  qrCode: String,
 });
 
 const renderBoard: Ref<Board> = ref([[]]);
@@ -292,6 +293,10 @@ onMounted(() => {
             To do a hard drop, use the arrow up key or <kbd>K</kbd>.
           </p>
         </div>
+        <div v-if="networked">
+          <h2>Join this game</h2>
+          <QRCode size=200 level="M" :value="qrCode"></QRCode>
+        </div>
       </div>
     </div>
 
diff --git a/frontend/src/views/HostView.vue b/frontend/src/views/HostView.vue
index 5b29289..4b25aa8 100644
--- a/frontend/src/views/HostView.vue
+++ b/frontend/src/views/HostView.vue
@@ -70,6 +70,6 @@ function openSocket(id: string) {
       <p>Connected clients: {{ numClients }}</p>
       <button @click="startGame">Start game</button>
     </template>
-    <TetrisBoard v-if="started" :networked="true" :input-queue="inputQueue"></TetrisBoard>
+    <TetrisBoard v-if="started" :networked="true" :input-queue="inputQueue" :qrCode="url"></TetrisBoard>
   </main>
 </template>