From 0f23946da67bede97e5a99f6ccc2e5de867fbe9b Mon Sep 17 00:00:00 2001
From: lmaosoggypancakes <macerajosef@gmail.com>
Date: Mon, 19 Jun 2023 21:55:17 -0700
Subject: [PATCH] fix: mobile responsiveness

---
 components/Next.vue                      |  2 +-
 components/Previous.vue                  |  2 +-
 components/app/play/Avatar.vue           |  2 +-
 components/app/play/PlayModePanel.vue    |  2 +-
 components/app/play/cards/MasterCard.vue |  2 +-
 layouts/app.vue                          |  4 +--
 pages/app/play/[id].vue                  | 45 ++++++++++++++++++++----
 pages/app/play/index.vue                 |  6 ++--
 src-tauri/tauri.conf.json                |  2 +-
 9 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/components/Next.vue b/components/Next.vue
index fbc39d6..ca607d7 100644
--- a/components/Next.vue
+++ b/components/Next.vue
@@ -1,6 +1,6 @@
 <template>
   <NuxtLink
-    class="border-2 border-apricot bg-apricot text-primary hover:bg-opacity-90 inline w-64 rounded-md underline-none p-2"
+    class="border-2 border-accent bg-accent text-primary hover:bg-opacity-90 inline w-64 rounded-md underline-none p-2"
     :href="href"
   >
     <div class="flex flex-col w-fit float-left">
diff --git a/components/Previous.vue b/components/Previous.vue
index 122f818..a95f84e 100644
--- a/components/Previous.vue
+++ b/components/Previous.vue
@@ -1,6 +1,6 @@
 <template>
   <NuxtLink
-    class="border-2 border-apricot bg-apricot text-primary hover:bg-opacity-90 inline w-64 rounded-md underline-none p-2 flex-col"
+    class="border-2 border-accent bg-accent text-primary hover:bg-opacity-90 inline w-64 rounded-md underline-none p-2 flex-col"
     :href="href"
   >
     <div class="flex flex-col w-fit float-right grow-0">
diff --git a/components/app/play/Avatar.vue b/components/app/play/Avatar.vue
index 47fb13f..0721044 100644
--- a/components/app/play/Avatar.vue
+++ b/components/app/play/Avatar.vue
@@ -1,5 +1,5 @@
 <template>
-  <img :src="$props.src" class="rounded-2xl w-72 h-72" />
+  <img :src="$props.src" class="rounded-2xl w-72 h-72 place-self-center" />
 </template>
 
 <script setup lang="ts">
diff --git a/components/app/play/PlayModePanel.vue b/components/app/play/PlayModePanel.vue
index fc23377..d467f38 100644
--- a/components/app/play/PlayModePanel.vue
+++ b/components/app/play/PlayModePanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="rounded-xl col-span-3 space-y-4 w-full flex flex-col justify-between"
+    class="rounded-xl col-span-3 space-y-4 flex flex-col justify-between w-full"
   >
     <component
       v-for="mode in modes"
diff --git a/components/app/play/cards/MasterCard.vue b/components/app/play/cards/MasterCard.vue
index fac151f..a6757b4 100644
--- a/components/app/play/cards/MasterCard.vue
+++ b/components/app/play/cards/MasterCard.vue
@@ -21,5 +21,5 @@
 </template>
 <script setup lang="ts">
 import { Difficulty } from "~/types";
-const matchmaker = useMatchmaker;
+const matchmaker = useMatchmaker();
 </script>
diff --git a/layouts/app.vue b/layouts/app.vue
index 836d63b..bfbb730 100644
--- a/layouts/app.vue
+++ b/layouts/app.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-    class="max-h-screen md:grid grid-flow-row grid-rows-12 md:grid-flow-col md:grid-cols-12 relative min-h-screen grow-0 overflow-y-hidden bg-base-100"
+    class="max-h-screen md:grid grid-flow-row grid-rows-12 md:grid-flow-col md:grid-cols-12 relative grow-0 overflow-y-scroll bg-base-100"
   >
     <Navbar class="row-span-2 sticky left-0 top-0" />
-    <div class="md:col-span-10 min-h-screen w-full"><slot /></div>
+    <div class="md:col-span-10 w-full"><slot /></div>
   </div>
 </template>
diff --git a/pages/app/play/[id].vue b/pages/app/play/[id].vue
index f06cc41..9bad8c8 100644
--- a/pages/app/play/[id].vue
+++ b/pages/app/play/[id].vue
@@ -48,9 +48,9 @@
         </ul>
       </div>
       <div
-        class="col-span-3 p-8 flex items-center flex-col space-y-4 relative"
+        class="col-span-3 p-8 items-center flex-col space-y-4 relative"
         :class="{
-          hidden: isMyTurn,
+          'hidden lg:flex': isMyTurn,
           'shadow-[inset_0px_0px_10px_5px_rgba(169,255,203,1)]':
             !isMyTurn && gameStatus != GameStatus.OPPONENT_SUDDEN_DEATH,
           'shadow-[inset_0px_0px_10px_5px_rgba(219,45,45,1)]':
@@ -68,8 +68,8 @@
         </div>
       </div>
     </div>
-    <div class="w-full flex justify-center mt-auto border-t-2 border-secondary">
-      <ul class="space-x-4 my-4">
+    <div class="w-full grid mt-auto border-t-2 border-secondary">
+      <ul class="gap-4 my-4">
         <LetterBlock
           v-for="letter in letters"
           :letter="letter"
@@ -208,9 +208,6 @@ import {
 } from "@headlessui/vue";
 import axios from "axios";
 
-onMounted(() => {
-  setDiscordActivity(Activity.playing);
-});
 const MAX_SCORE = 20;
 const router = useRouter();
 const auth = useAuth();
@@ -421,4 +418,38 @@ const gameStatistics = computed(() => {
     gameStatus.value
   );
 });
+
+onMounted(() => {
+  setDiscordActivity(Activity.playing);
+  socket = io(`${config.public.apiUrl}/play`, {
+    transports: ["websocket"],
+    autoConnect: false,
+    query: {
+      id: route.params.id,
+    },
+    auth: {
+      id: route.params.id,
+      token: auth.token,
+    },
+  });
+  socket.on("connect", console.log);
+  socket.on("welcome", console.log);
+  socket.on("player-joined", console.log);
+  socket.on("ready", () => {
+    status.value = GameConnectionStatus.CONNECTED;
+  });
+  socket.on("new-move", ({ data }) => {
+    if ((data as Move).userId !== userStore.id) {
+      // latest move is from opponent, and so it's our turn
+      isMyTurn.value = true;
+    } else {
+      isMyTurn.value = false;
+    }
+    moves.value.push(data);
+  });
+  socket.on("your-turn", () => {
+    isMyTurn.value = true;
+  });
+  status.value = GameConnectionStatus.WAITING;
+});
 </script>
diff --git a/pages/app/play/index.vue b/pages/app/play/index.vue
index 0afdd84..e023870 100644
--- a/pages/app/play/index.vue
+++ b/pages/app/play/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-screen w-full sm:px-8 lg:px-32 py-32 text-seasalt overflow-y-auto xl:grid xl:grid-cols-2"
+    class="w-full px-8 py-32 text grid lg:grid-cols-2 lg:grid-flow-col gap-x-8"
   >
     <PlayModePanel
       primary
@@ -10,9 +10,9 @@
     />
     <nuxt-img
       :src="user.picture"
-      class="hidden xl:block place-self-center mask mask-squircle ml-8"
-      width="512"
+      class="hidden xl:block place-self-center mask mask-squircle"
       height="512"
+      width="512"
     />
   </div>
   <Matchmaking v-if="status.matchmaking" />
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index d056788..62dd6af 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Spellsword",
-    "version": "0.1.0-beta"
+    "version": "0.1.0"
   },
   "tauri": {
     "allowlist": {