Add: Gameroon screen

2025-11-14 02:25:20 +02:00
parent d69df9d280
commit 915d6cfbcc
37 changed files with 402 additions and 1 deletions
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+    const props = defineProps<{
+        icon: string,
+        title: string,
+        description: string
+    }>()
+    const icon = computed(() => `/img/icons/${props.icon}`)
+</script>
+
+<template>
+    <div class="playfield-button">
+        <h3>{{ title }}</h3>
+        <NuxtImg :src="icon" alt="" format="webp" quality="80" />
+        <p>{{ description }}</p>
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+$button-size: 80px;
+
+    .playfield-button {
+        height: $button-size;
+        width: $button-size;
+        padding: 0.4rem;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        gap: 0.4rem;
+        grid-template-areas: 
+            "title"
+            "image"
+            "description";
+        justify-content: center;
+        align-items: center;
+        border: 1px solid hsl(0 74% 10% / 50%);
+        border-bottom-color: hsl(0 74% 80% / 10%);
+        border-radius: 0.5rem;
+        background-image: linear-gradient(to bottom, hsl(0 74% 80%), hsl(0 74% 70%));
+        box-shadow: inset 3px 3px 0.5rem hsl(0 74% 20%);
+        font-size: 0.2rem;
+        
+        overflow: hidden;
+        
+        
+        img {
+            grid-area: image;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            display: block;
+            aspect-ratio: 1 / 1;
+            min-width: 0;
+            min-height: 0;
+            max-width: 80%;
+            max-height: 100%;
+            margin: auto;
+        }
+
+        h3 {
+            grid-area: title;
+            font-weight: bold;
+            margin: 0;
+            font-size: 0.3rem;
+            text-align: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        p {
+            grid-area: description;
+            font-size: 0.2rem;
+            text-align: center;
+            overflow: hidden;
+            
+        }
+    }
+</style>