3.0.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatguessr",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "ChatGuessr",
   "repository": "https://github.com/tzhf/chatguessr",
   "homepage": "https://chatguessr.com",

src/main/GameHandler.ts

@@ -242,7 +242,7 @@ export default class GameHandler {
         await this.#db.deleteGlobalStats(date.timeStamp)
         return true
       } catch (e) {
-        console.log(e)
+        console.error(e)
         return false
       }
     })

src/renderer/assets/styles.css

@@ -46,9 +46,8 @@ hr {
   background-repeat: no-repeat;
   position: relative;
   display: inline-block;
-  font-size: 1.2rem;
-  width: 1.33333333em;
-  line-height: 1rem;
+  font-size: 1.2em;
+  width: 1.333333em;
   flex-shrink: 0;
 }
 .flag:before {

src/renderer/components/Leaderboard/Leaderboard.vue

@@ -32,32 +32,34 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, computed } from 'vue'
+import { shallowRef, reactive, watch, computed } from 'vue'
 import { getLocalStorage, setLocalStorage } from '@/useLocalStorage'
 import Tabs from '../ui/Tabs.vue'
 import Timeframe from './Timeframe.vue'
 import IconCup from '@/assets/icons/winner_cup.svg'
 
 const { chatguessrApi } = window
 
-const currentTab = ref<StatisticsInterval>(getLocalStorage('cg_leaderboard__currentTab', 'all'))
+const currentTab = shallowRef<StatisticsInterval>(
+  getLocalStorage('cg_leaderboard__currentTab', 'all')
+)
 watch(currentTab, () => {
   setLocalStorage('cg_leaderboard__currentTab', currentTab.value)
 })
 
-const tabs = ref<{ name: StatisticsInterval; value: string }[]>([
+const tabs = shallowRef<{ name: StatisticsInterval; value: string }[]>([
   { name: 'day', value: 'Today' },
   { name: 'week', value: 'This week' },
   { name: 'month', value: 'This month' },
   { name: 'year', value: 'This year' },
   { name: 'all', value: 'All time' }
 ])
 
-const dailyStats = ref<Statistics>(await chatguessrApi.getGlobalStats('day'))
-const weeklyStats = ref<Statistics>(await chatguessrApi.getGlobalStats('week'))
-const monthlyStats = ref<Statistics>(await chatguessrApi.getGlobalStats('month'))
-const yearlyStats = ref<Statistics>(await chatguessrApi.getGlobalStats('year'))
-const allTimeStats = ref<Statistics>(await chatguessrApi.getGlobalStats('all'))
+const dailyStats = shallowRef<Statistics>(await chatguessrApi.getGlobalStats('day'))
+const weeklyStats = shallowRef<Statistics>(await chatguessrApi.getGlobalStats('week'))
+const monthlyStats = shallowRef<Statistics>(await chatguessrApi.getGlobalStats('month'))
+const yearlyStats = shallowRef<Statistics>(await chatguessrApi.getGlobalStats('year'))
+const allTimeStats = shallowRef<Statistics>(await chatguessrApi.getGlobalStats('all'))
 
 const clearStats = reactive({
   state: 'default',
@@ -109,7 +111,7 @@ const handleClearStatsClick = async (sinceTime: StatisticsInterval) => {
   width: 80vw;
   height: 84vh;
   text-align: center;
-  padding: 1rem 1rem 0.5rem;
+  padding: 0.5rem 1rem;
 }
 h1 {
   font-weight: 400;

src/renderer/components/Leaderboard/Table.vue

@@ -10,7 +10,10 @@
     <tbody>
       <tr v-for="(stat, i) of stats" :key="stat.player.userId">
         <td>
-          {{ i === 0 ? '🏆' : i === 1 ? '🥈' : i === 2 ? '🥉' : i + 1 }}
+          <span v-if="i === 0" class="medal">🏆</span>
+          <span v-else-if="i === 1" class="medal">🥈</span>
+          <span v-else-if="i === 2" class="medal">🥉</span>
+          <span v-else>{{ i + 1 }}</span>
         </td>
         <td>
           <div class="flex items-center gap-02">
@@ -73,4 +76,7 @@ tbody tr:hover {
   transition: all 0.1s;
   transform: scale(1.01);
 }
+.medal {
+  font-size: 18px;
+}
 </style>

src/renderer/components/Leaderboard/Timeframe.vue

@@ -6,7 +6,7 @@
         <Table :stats="stats.victories" text="Victories" />
       </div>
     </div>
-    <div class="flex flex-1 relative gap-1 h-full">
+    <div class="flex flex-1 relative gap-05 h-full">
       <div class="relative w-full">
         <h2>STREAKS</h2>
         <div class="table-container">

src/renderer/components/Settings.vue

@@ -228,7 +228,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch } from 'vue'
+import { shallowRef, shallowReactive, reactive, watch } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import Tabs from './ui/Tabs.vue'
 import IconTwitch from '@/assets/icons/twitch.svg'
@@ -241,10 +241,10 @@ const { socketConnectionState, twitchConnectionState } = defineProps<{
   socketConnectionState: SocketConnectionState
 }>()
 
-const currentTab = ref(
+const currentTab = shallowRef(
   twitchConnectionState.state === 'disconnected' ? 'twitch-connect' : 'game-settings'
 )
-const tabs = ref([
+const tabs = shallowRef([
   { name: 'game-settings', value: 'Game settings' },
   { name: 'twitch-connect', value: 'Twitch connect' },
   { name: 'ban-list', value: 'Ban list' }
@@ -255,20 +255,20 @@ watch(settings, () => {
   chatguessrApi.saveSettings({ ...settings })
 })
 
-const newChannelName = ref(settings.channelName)
+const newChannelName = shallowRef(settings.channelName)
 const onChannelNameUpdate = () => {
   settings.channelName = newChannelName.value
   chatguessrApi.reconnect()
 }
 
-const cgLink = ref(
+const cgLink = shallowRef(
   twitchConnectionState.state === 'connected'
     ? `chatguessr.com/map/${twitchConnectionState.botUsername}`
     : ''
 )
 
-const bannedUsers = reactive<{ username: string }[]>(await chatguessrApi.getBannedUsers())
-const newBannedUser = ref('')
+const bannedUsers = shallowReactive<{ username: string }[]>(await chatguessrApi.getBannedUsers())
+const newBannedUser = shallowRef('')
 const addBannedUser = () => {
   if (!newBannedUser.value) return
   bannedUsers.push({ username: newBannedUser.value })
@@ -281,7 +281,7 @@ const removeBannedUser = (index: number, user: { username: string }) => {
   bannedUsers.splice(index, 1)
 }
 
-const currentVerion = ref(await chatguessrApi.getCurrentVersion())
+const currentVerion = shallowRef(await chatguessrApi.getCurrentVersion())
 </script>
 
 <style scoped>