Skip to content

Commit

Permalink
small tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@dustinmichels
dustinmichels committed Dec 9, 2024
1 parent 6c67700 commit 1bef976
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 78 deletions.
6 changes: 3 additions & 3 deletions frontend/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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"
Expand All @@ -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" />
Expand Down
9 changes: 6 additions & 3 deletions frontend/src/components/GuessedList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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 {
Expand Down
141 changes: 69 additions & 72 deletions frontend/src/components/Radio.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down

0 comments on commit 1bef976

Please sign in to comment.