Add an optional title to the top of the podium

src/hooks/podium.ts

@@ -2,6 +2,8 @@ import { useLocalStorage } from '@vueuse/core'
 
 export interface PodiumSettings {
   background?: string
+  withTitle?: boolean
+  title?: string
 }
 
 const settings = useLocalStorage<PodiumSettings>('rs-podium-settings', {})

src/views/PodiumConfig.vue

@@ -7,6 +7,9 @@
       <text-button color="orange" @click="bc.postMessage('lower')">
         Lower
       </text-button>
+      <text-button @click="bc.postMessage('update-title')">
+        Title
+      </text-button>
     </div>
     <button-link :to="`/podium/live?theme=${theme}`">
       Display
@@ -49,8 +52,23 @@
     </div>
   </div>
 
-  <div class="mx-auto container flex justify-center mt-8">
+  <div class="mx-auto container grid grid-cols-[max-content] items-center justify-center mt-8">
     <div>
+      <p class="font-semibold pt-4">
+        Title
+      </p>
+      <checkbox-field
+        :model-value="settings.withTitle"
+        label="Add title"
+        @update:model-value="setWithTitle($event)"
+      />
+      <text-field
+        v-if="settings.withTitle"
+        v-model="settings.title"
+        label="Title"
+      />
+    </div>
+    <div class="self-center">
       <photo-picker
         v-model="settings.background"
         label="Background image"
@@ -62,7 +80,7 @@
 <script lang="ts" setup>
 import { nextTick, ref } from 'vue'
 import countries from '../assets/countries.json'
-import { TextButton, SelectField, ButtonLink } from '@ropescore/components'
+import { TextButton, SelectField, ButtonLink, CheckboxField, TextField } from '@ropescore/components'
 import { useHead } from '@vueuse/head'
 import { usePodium } from '../hooks/podium'
 import PhotoPicker from '../components/PhotoPicker.vue'
@@ -95,4 +113,9 @@ function addNewFn (pos: typeof positions[number], code: string) {
     addNew[pos].value = undefined
   })
 }
+
+function setWithTitle (withTitle: boolean) {
+  settings.value.withTitle = withTitle
+  if (!withTitle) settings.value.title = undefined
+}
 </script>

src/views/PodiumLive.vue

@@ -1,44 +1,46 @@
 <template>
   <main
-    class="grid grid-cols-3 gap-6 px-8 py-6"
-    :class="{ 'dark bg-black': theme === 'dark' }"
+    class="flex flex-col"
+    :class="{
+      'dark bg-black text-white': theme === 'dark',
+      'text-black': theme !== 'dark'
+    }"
   >
-    <div
-      v-for="pos in positions"
-      :key="pos"
-      :class="{
-        'mt-32': pos === '2nd',
-        'mt-64': pos === '3rd'
-      }"
-    >
-      <h2
-        class="text-8xl font-bold text-center mb-4"
-        :class="{
-          'text-black': theme !== 'dark',
-          'text-white': theme === 'dark'
-        }"
-      >
-        {{ pos }}
-      </h2>
-
+    <div v-if="settings.withTitle" class="col-span-3 text-4xl text-center font-semibold px-8 pt-6">
+      {{ title || '&nbsp;' }}
+    </div>
+    <div class="grid grid-cols-3 gap-6 px-8 py-6">
       <div
-        class="grid gap-4 items-start justify-center custom-cols transition-all ease-in-out custom-duration"
+        v-for="pos in positions"
+        :key="pos"
         :class="{
-          'mt-[100vh]': !raised
+          'mt-32': pos === '2nd',
+          'mt-64': pos === '3rd'
         }"
-        :style="`--cols:${state?.[pos].length ?? 1}`"
       >
-        <img
-          v-for="(flag, idx) of state?.[pos] ?? []"
-          :key="idx + flag"
-          class="w-full border-2"
+        <h2 class="text-8xl font-bold text-center mb-4">
+          {{ pos }}
+        </h2>
+
+        <div
+          class="grid gap-4 items-start justify-center custom-cols transition-all ease-in-out custom-duration"
           :class="{
-            'border-gray-800': theme !== 'dark',
-            'border-gray-400': theme === 'dark'
+            'mt-[100vh]': !raised
           }"
-          :alt="flag"
-          :src="`/flags/${flag}.svg`"
+          :style="`--cols:${state?.[pos].length ?? 1}`"
         >
+          <img
+            v-for="(flag, idx) of state?.[pos] ?? []"
+            :key="idx + flag"
+            class="w-full border-2"
+            :class="{
+              'border-gray-800': theme !== 'dark',
+              'border-gray-400': theme === 'dark'
+            }"
+            :alt="flag"
+            :src="`/flags/${flag}.svg`"
+          >
+        </div>
       </div>
     </div>
   </main>
@@ -47,7 +49,7 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
 import { useHead } from '@vueuse/head'
-import { usePodium } from '../hooks/podium'
+import { usePodium, type PodiumSettings } from '../hooks/podium'
 import { getOpfsImgUrl } from '../helpers'
 import { useTheme } from '../hooks/theme'
 
@@ -62,6 +64,7 @@ const positions = ['2nd', '1st', '3rd'] as const
 const theme = useTheme()
 
 const state = ref<Record<'1st' | '2nd' | '3rd', string[]>>()
+const title = ref<string>()
 const raised = ref(false)
 const { settings } = usePodium()
 
@@ -73,6 +76,12 @@ bc.addEventListener('message', evt => {
   } else if (evt.data === 'lower') {
     raised.value = false
   }
+
+  if (evt.data === 'raise' || evt.data === 'update-title') {
+    const st = localStorage.getItem('rs-podium-settings')
+    const parsed: PodiumSettings | null = st ? JSON.parse(st) : null
+    title.value = parsed?.title
+  }
 })
 
 const bgUrlVar = ref('')