From 1bef976ed7c10dfb48a45d659271f13c2334f547 Mon Sep 17 00:00:00 2001
From: Dustin Michels <dustin7538@gmail.com>
Date: Mon, 9 Dec 2024 01:23:27 -0500
Subject: [PATCH] small tweaks

---
 frontend/src/App.vue                    |   6 +-
 frontend/src/components/GuessedList.vue |   9 +-
 frontend/src/components/Radio.vue       | 141 ++++++++++++------------
 3 files changed, 78 insertions(+), 78 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e6a8599..23af749 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,7 +3,7 @@
     <div class="hero-body">
       <div class="container has-text-centered">
         <h1 class="title">🌍 GeoHearo 🦸</h1>
-        <h2 class="subtitle">Guess the country by its radio</h2>
+        <h2 class="subtitle">Guess the country from its radio stations</h2>
       </div>
     </div>
   </section>
@@ -17,7 +17,7 @@
 
       <!-- Two Columns -->
       <div class="columns">
-        <!-- Right Column: Radio + Guesses Components -->
+        <!-- Left Column: Radio + Guesses Components -->
         <div class="column">
           <SearchBar
             :countries="countries"
@@ -34,7 +34,7 @@
           </button>
         </div>
 
-        <!-- Left Column: Map Component -->
+        <!-- Right Column: Map Component -->
         <div class="column is-two-thirds">
           <div class="box">
             <Map :guessed="guessed" :secretCountry="secretCountry" />
diff --git a/frontend/src/components/GuessedList.vue b/frontend/src/components/GuessedList.vue
index bf1eddd..d6af638 100644
--- a/frontend/src/components/GuessedList.vue
+++ b/frontend/src/components/GuessedList.vue
@@ -6,10 +6,13 @@
       <span v-if="guess.name" class="panel-row">
         <span class="panel-index">{{ index + 1 }})</span>
         <span class="panel-name">{{ guess.name }}</span>
-        <span class="panel-direction">{{
+        <span class="panel-direction" v-if="guess.isCorrect">🎉</span>
+        <span class="panel-direction" v-else>{{
           directionToArrow(guess.direction)
         }}</span>
-        <span class="panel-distance"
+
+        <span class="panel-distance" v-if="guess.isCorrect">🎉</span>
+        <span class="panel-distance" v-else
           >({{ formatNumber(guess.distance) }} km)</span
         >
       </span>
@@ -44,7 +47,7 @@ const formatNumber = (num: number) => {
 }
 
 .panel-name {
-  flex: 2; /* Takes up twice the space of the other flexible elements */
+  flex: 1.5; /* Takes up twice the space of the other flexible elements */
 }
 
 .panel-direction {
diff --git a/frontend/src/components/Radio.vue b/frontend/src/components/Radio.vue
index b4ab5db..9b99f27 100644
--- a/frontend/src/components/Radio.vue
+++ b/frontend/src/components/Radio.vue
@@ -1,83 +1,80 @@
 <template>
-  <div class="container">
-    <div class="columns">
-      <div class="column">
-        <div class="audio__player">
-          <div class="audio__player-controls">
-            <div class="audio__player-button">
-              <img :src="IconPrev" @click="decreaseStationIdx" />
-            </div>
-            <div class="audio__player-play" @click="togglePlay">
-              <img
-                :src="CoverImageDefault"
-                alt=""
-                :class="`${isPlaying ? 'audio__player-spin-anim' : ''}`"
-              />
-              <div class="audio__player-play-icon" v-show="!isLoading">
-                <img :src="isPlaying ? IconPause : IconPlay" />
-              </div>
-              <div class="audio__player-play-icon" v-show="isLoading">
-                <img :src="IconLoading" />
-              </div>
+  <div class="grid">
+    <div class="cell">
+      <div class="audio__player">
+        <div class="audio__player-controls">
+          <div class="audio__player-button">
+            <img :src="IconPrev" @click="decreaseStationIdx" />
+          </div>
+          <div class="audio__player-play" @click="togglePlay">
+            <img
+              :src="CoverImageDefault"
+              alt=""
+              :class="`${isPlaying ? 'audio__player-spin-anim' : ''}`"
+            />
+            <div class="audio__player-play-icon" v-show="!isLoading">
+              <img :src="isPlaying ? IconPause : IconPlay" />
             </div>
-            <div class="audio__player-button">
-              <img :src="IconNext" @click="increaseStationIdx" />
+            <div class="audio__player-play-icon" v-show="isLoading">
+              <img :src="IconLoading" />
             </div>
           </div>
-
-          <div>
-            <div class="square-radio-group">
-              <div
-                class="square-radio"
-                v-for="(station, index) in radioStations"
-                :key="station.channel_id"
-                @click="selectedStationIdx = index"
-              >
-                <input
-                  type="radio"
-                  :id="station.channel_id"
-                  name="square-radio"
-                  :value="index"
-                  :checked="index === selectedStationIdx"
-                />
-                <label :for="station.channel_id">{{ index + 1 }}</label>
-              </div>
+          <div class="audio__player-button">
+            <img :src="IconNext" @click="increaseStationIdx" />
+          </div>
+        </div>
+        <div>
+          <div class="square-radio-group">
+            <div
+              class="square-radio"
+              v-for="(station, index) in radioStations"
+              :key="station.channel_id"
+              @click="selectedStationIdx = index"
+            >
+              <input
+                type="radio"
+                :id="station.channel_id"
+                name="square-radio"
+                :value="index"
+                :checked="index === selectedStationIdx"
+              />
+              <label :for="station.channel_id">{{ index + 1 }}</label>
             </div>
           </div>
-          <audio ref="audioPlayer" :src="audioSrc"></audio>
         </div>
+        <audio ref="audioPlayer" :src="audioSrc"></audio>
       </div>
-      <div class="column">
-        <table class="table">
-          <tr>
-            <td>Station Name</td>
-            <td>
-              <span v-if="isGameOver">
-                {{ radioStations[selectedStationIdx].channel_name }}
-              </span>
-              <span v-else>????</span>
-            </td>
-          </tr>
-          <tr>
-            <td>City</td>
-            <td>
-              <span v-if="isGameOver">
-                {{ radioStations[selectedStationIdx].place_name }}
-              </span>
-              <span v-else>????</span>
-            </td>
-          </tr>
-          <tr>
-            <td>Link</td>
-            <td>
-              <a v-if="isGameOver" :href="stationLink" target="_blank">
-                radio.garden
-              </a>
-              <span v-else>????</span>
-            </td>
-          </tr>
-        </table>
-      </div>
+    </div>
+    <div class="cell">
+      <table class="table">
+        <tr>
+          <td>Station Name</td>
+          <td>
+            <span v-if="isGameOver">
+              {{ radioStations[selectedStationIdx].channel_name }}
+            </span>
+            <span v-else>????</span>
+          </td>
+        </tr>
+        <tr>
+          <td>City</td>
+          <td>
+            <span v-if="isGameOver">
+              {{ radioStations[selectedStationIdx].place_name }}
+            </span>
+            <span v-else>????</span>
+          </td>
+        </tr>
+        <tr>
+          <td>Link</td>
+          <td>
+            <a v-if="isGameOver" :href="stationLink" target="_blank">
+              radio.garden
+            </a>
+            <span v-else>????</span>
+          </td>
+        </tr>
+      </table>
     </div>
   </div>
 </template>