chore: demo 2025-04-08 at the Dev Day conference

src/components/ui/Resources.vue

@@ -9,9 +9,10 @@ const props = defineProps<{
 </script>
 
 <template>
-  <p>
-    Gold: <ResourceEntry :available="props.available?.gold" :resource="props.resources.gold" />
-  </p>
+  <div class="flex gap-3 items-baseline text-2xl grow">
+    <span class="icon-[ph--hand-coins-thin] mt-1 mr-1 text-xl" />
+    <ResourceEntry :available="props.available?.gold" :resource="props.resources.gold" />
+  </div>
 </template>
 
 <style scoped>

src/components/ui/layout/game/debug/DebugMenu.vue

@@ -11,56 +11,62 @@ const { id: selectedBuildAreaId } = storeToRefs(useSelectedBuildingAreaStore())
 </script>
 
 <template>
-  <div class="border-4 border-red-600 text-red-950 bg-red-100 p-2 border-dashed flex flex-col gap-y-4 w-full">
-    <h3 class="text-lg font-bold">
-      Debug menu
-    </h3>
+  <UAccordion
+    class="border-4 border-red-600 bg-red-100 border-dashed"
+    :items="[{
+      label: 'Debug Menu',
+      icon: 'ph--bug-beetle',
+    }]"
+  >
+    <template #body>
+      <div class="flex flex-col gap-y-4 px-6 py-2">
+        <div class="grid grid-cols-2 gap-1">
+          <ToggleVisibilityButton v-model="debug.showVisualHelper">
+            visual helper
+          </ToggleVisibilityButton>
+          <ToggleVisibilityButton v-model="debug.showLightHelper">
+            lights helper
+          </ToggleVisibilityButton>
+          <ToggleVisibilityButton v-model="debug.showCameraHelper">
+            camera helper
+          </ToggleVisibilityButton>
+          <ToggleVisibilityButton v-model="debug.showFog">
+            fog
+          </ToggleVisibilityButton>
+          <ToggleVisibilityButton v-model="debug.showWaterWireframe">
+            water wireframe
+          </ToggleVisibilityButton>
+        </div>
 
-    <div class="grid grid-cols-2 gap-1">
-      <ToggleVisibilityButton v-model="debug.showVisualHelper">
-        visual helper
-      </ToggleVisibilityButton>
-      <ToggleVisibilityButton v-model="debug.showLightHelper">
-        lights helper
-      </ToggleVisibilityButton>
-      <ToggleVisibilityButton v-model="debug.showCameraHelper">
-        camera helper
-      </ToggleVisibilityButton>
-      <ToggleVisibilityButton v-model="debug.showFog">
-        fog
-      </ToggleVisibilityButton>
-      <ToggleVisibilityButton v-model="debug.showWaterWireframe">
-        water wireframe
-      </ToggleVisibilityButton>
-    </div>
+        <div class="flex flex-col">
+          <div>
+            Selected Build Area:
+          </div>
+          <div>
+            {{ selectedBuildAreaId ?? '<none>' }}
+          </div>
+        </div>
 
-    <div class="flex flex-col">
-      <div>
-        Selected Build Area:
+        <div class="flex flex-col">
+          <label for="gameTimeFactor">Current game time factor:</label>
+          <div class="flex gap-2 items-center w-max-full">
+            <input
+              id="gameTimeFactor"
+              v-model.number="currentFactor"
+              class="w-2/3"
+              :max="GAME_TIME_FACTOR_FASTER * 2"
+              :min="0"
+              type="range"
+            >
+            <b>{{ currentFactor.toLocaleString() }}</b>
+          </div>
+          <p class="text-sm italic">
+            each real time milliseconds progresses the game time by that much milliseconds
+          </p>
+        </div>
       </div>
-      <div>
-        {{ selectedBuildAreaId ?? '<none>' }}
-      </div>
-    </div>
-
-    <div class="flex flex-col">
-      <label for="gameTimeFactor">Current game time factor:</label>
-      <div class="flex gap-2 items-center w-max-full">
-        <input
-          id="gameTimeFactor"
-          v-model.number="currentFactor"
-          class="w-2/3"
-          :max="GAME_TIME_FACTOR_FASTER * 2"
-          :min="0"
-          type="range"
-        >
-        <b>{{ currentFactor.toLocaleString() }}</b>
-      </div>
-      <p class="text-sm italic">
-        each real time milliseconds progresses the game time by that much milliseconds
-      </p>
-    </div>
-  </div>
+    </template>
+  </UAccordion>
 </template>
 
 <style scoped>

src/components/ui/layout/game/sidebar/BuildingRow.vue

@@ -68,55 +68,101 @@ function build() {
 </script>
 
 <template>
-  <button
-    class="flex flex-col gap-2 border border-gray-200 rounded-sm p-2 bg-black/10 text-left"
-    :class="{
-      'hover:bg-black/30': canBuild === true,
-      'cursor-pointer': canBuild === true,
-      'cursor-not-allowed': canBuild !== true,
-    }"
-    :disabled="canBuild !== true"
-    @click="build"
-  >
-    <p class="font-bold text-lg">
-      {{ props.buildingType.name }}
-    </p>
-
-    <p class="ml-4 mb-2">
-      {{ props.buildingType.description }}
-    </p>
-
-    <div>
-      <p class="font-semibold">
-        Costs to build:
-      </p>
-      <div class="flex gap-2 ml-4">
-        <Resources :available="resources" :resources="costs" />
+  <div>
+    <UModal
+      :close="{
+        color: 'primary',
+        variant: 'outline',
+        class: 'rounded-full',
+      }"
+      overlay
+      :title="props.buildingType.name"
+      :ui="{
+        content: 'z-4',
+        overlay: 'z-3',
+      }"
+    >
+      <div
+        class="flex border border-gray-300 rounded-sm bg-gray-100 h-full aspect-square overflow-hidden"
+      >
+        <img
+          :alt="`Preview image of ${props.buildingType.name}`"
+          class="scale-250"
+          :class="{
+            'saturate-0 brightness-50': canBuild !== true,
+          }"
+          :src="props.buildingType.previewImgSrc"
+        >
       </div>
-    </div>
-
-    <p class="font-semibold">
-      Duration to build: <b>{{ buildingDuration.format() }}</b>
-    </p>
-
-    <div>
-      <p class="font-semibold">
-        Produces per hour:
-      </p>
-      <div class="flex gap-2 ml-4">
-        <Resources :resources="income.perHour()" />
-      </div>
-    </div>
-
-    <div v-if="typeof props.buildingType.maxInstances === 'number'">
-      <p class="italic" :class="{ 'text-red-500': canBuild === 'max-instances' }">
-        You can build
-        <b v-if="canBuild !== 'max-instances'">{{ props.buildingType.maxInstances - existingInstancesCount }}</b>
-        <b v-else>no</b>
-        more (max. <b>{{ props.buildingType.maxInstances }}</b>)
-      </p>
-    </div>
-  </button>
+
+      <template #body>
+        <div class="flex flex-col gap-2">
+          <div>
+            <div class="font-semibold">
+              Description:
+            </div>
+            <div class="ml-4">
+              {{ props.buildingType.description }}
+            </div>
+          </div>
+
+          <div>
+            <div class="font-semibold">
+              Costs to build:
+            </div>
+            <Resources
+              :available="resources"
+              class="ml-4"
+              :resources="costs"
+            />
+          </div>
+
+          <div>
+            <div class="font-semibold">
+              Duration to build:
+            </div>
+            <div class="ml-4">
+              {{ buildingDuration.format() }}
+            </div>
+          </div>
+
+          <div>
+            <div class="font-semibold">
+              Produces per hour:
+            </div>
+            <Resources
+              class="ml-4"
+              :resources="income.perHour()"
+            />
+          </div>
+
+          <div v-if="typeof props.buildingType.maxInstances === 'number'">
+            <p class="italic" :class="{ 'text-red-500': canBuild === 'max-instances' }">
+              You can build
+              <b v-if="canBuild !== 'max-instances'">{{ props.buildingType.maxInstances - existingInstancesCount }}</b>
+              <b v-else>no</b>
+              more (max. <b>{{ props.buildingType.maxInstances }}</b>)
+            </p>
+          </div>
+
+          <!-- <UButton
+            color="neutral"
+            :disabled="canBuild !== true"
+            label="Build"
+            variant="subtle"
+            @click="build()"
+          /> -->
+          <button
+            class="border rounded-md"
+            :disabled="canBuild !== true"
+            @click="build()"
+          >
+            Build
+          </button>
+        </div>
+      </template>
+    </UModal>
+  </div>
 </template>
 
 <style scoped>