CSS and finalizing

Preloading · Dec 19, 2023 · 262e8f2 · 262e8f2
1 parent 8682685
commit 262e8f2
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/src/components/Game/InGame/ChooseOptions.vue b/src/components/Game/InGame/ChooseOptions.vue
@@ -1,26 +1,30 @@
 <template>
     <div>
-        <h1>30s</h1>
-        <div>
-            <div class="rounded waitingPlayer">
-                <img alt="Your Avatar" :src="avatar" class="col rounded"> 
-                <span class="usernameHost">{{ username }}</span>
-                <div v-if="chosenOption != 0">
-                    <img :src="moveImg">
-                    <p>{{ moveText }}</p>
+        <!-- <h1>30s</h1> -->
+        <div class="container-fluid">
+            <div class="row row-gap-3">
+                <div class="rounded waitingPlayer col my-auto">
+                    <img alt="Your Avatar" :src="avatar" class="col rounded"> 
+                    <span class="usernameHost fs-3">{{ username }}</span>
+                    <div v-if="chosenOption != 0" class="text-end">
+                        <img :src="moveImg" style="height: 64px; width: 64px;">
+                        <span class="usernameHost">{{ moveText }}</span>
+                    </div>
                 </div>
-            </div>
-            <h2>{{ statusText }}</h2>
-            <div class="rounded waitingPlayer">
-                <img :alt="opponentUsername + '\'s avatar'" :src="opponentAvatar" class="col rounded" > 
-                <span class="usernameHost">{{ opponentUsername }}</span>
-                <div v-if="showingWinners && opponentChoice != 0">
-                    <img :src="opponentMoveImg">
-                    <p>{{ opponentMoveText }}</p>
+                <h2 class="col text-center my-auto">{{ statusText }}</h2>
+                <div class="rounded waitingPlayer col my-auto">
+                    <img :alt="opponentUsername + '\'s avatar'" :src="opponentAvatar" class="col rounded" > 
+                    <span class="usernameHost fs-3">{{ opponentUsername }}</span>
+                    <div v-if="showingWinners && opponentChoice != 0" class="text-end">
+                        <img :src="opponentMoveImg" style="height: 64px; width: 64px;">
+                        <span class="usernameHost">{{ opponentMoveText }}</span>
+                    </div>
                 </div>
             </div>
         </div>
 
+        <br>
+
         <ul class="d-flex flex-wrap">
             <ChoosableOption v-for='outcome in outcomes' @selectMove="selectMove" :outcome="outcome" :currentlySelected="chosenOptionWrapper"  :disabled="isOptionsLocked"/> 
         </ul>

diff --git a/src/components/Game/InGame/PlayerInGame.vue b/src/components/Game/InGame/PlayerInGame.vue
@@ -1,5 +1,5 @@
 <template>
-    GAMEPLAY HAS STARTED WOOP WOOP!!!
+    <!-- GAMEPLAY HAS STARTED WOOP WOOP!!! -->
     <ChooseOptions :game-doc-id="props.gameDocId" :player-doc-id="props.playerDocId"/>
 </template>
 <script setup>

diff --git a/src/main.js b/src/main.js
@@ -23,7 +23,7 @@ app.use(VueFire, {
     ],
   })
 app.use(VueGtag, {
-  config: { id: "G-4FHX7HGJ24 "}
+  config: { id: "G-4FHX7HGJ24"}
 })
 
 app.mount('#app')