wip: planning-slot test

polylan_submitter/src/components/PlanningCover.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { PlanningGameOut } from "../api/types.gen";
+
+defineProps<{
+  game: PlanningGameOut;
+  color: string;
+  // Slot time, shown on the colored card (the cover has its own hover badge)
+  when?: string;
+}>();
+
+// Not every game has a library capsule on Steam, fall back to the colored card
+const coverFailed = ref(false);
+</script>
+
+<template>
+  <img v-if="game.library_image && !coverFailed" :src="game.library_image" :alt="game.name" :title="game.name"
+    loading="lazy" class="w-full h-full object-cover object-top" @error="coverFailed = true" />
+  <div v-else class="planning-fallback w-full h-full flex flex-col justify-center gap-1 p-3 border-l-4"
+    :style="{ '--slot-color': color }">
+    <span class="font-semibold leading-tight text-base-content">{{ game.name }}</span>
+    <span v-if="when" class="text-xs text-base-content/70">{{ when }}</span>
+  </div>
+</template>
+
+<style scoped>
+.planning-fallback {
+  border-color: var(--slot-color);
+  background: linear-gradient(160deg,
+      color-mix(in srgb, var(--slot-color) 35%, var(--color-base-200)),
+      var(--color-base-200));
+}
+</style>