feat(game-ui): redesign settings and tournament layouts

2026-08-13 15:58:37 +00:00
parent 0e0c82afd6
commit ab2360d4d9
12 changed files with 823 additions and 160 deletions
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { resolveGeneralIconUrl, useDefaultGeneralIcon, type GeneralIconSource } from '../../utils/generalIcon';
+
+const props = withDefaults(
+    defineProps<{
+        name: string;
+        picture?: GeneralIconSource['picture'];
+        imageServer?: GeneralIconSource['imageServer'];
+        iconSize?: number;
+        hideIcon?: boolean;
+    }>(),
+    {
+        picture: null,
+        imageServer: 0,
+        iconSize: 28,
+        hideIcon: false,
+    }
+);
+
+const iconUrl = computed(() =>
+    resolveGeneralIconUrl({
+        picture: props.picture,
+        imageServer: props.imageServer,
+    })
+);
+const identityStyle = computed(() => ({ '--general-identity-icon-size': `${props.iconSize}px` }));
+</script>
+
+<template>
+    <span class="general-identity" :style="identityStyle">
+        <img
+            v-if="!hideIcon && name !== '-'"
+            class="general-identity-icon"
+            :src="iconUrl"
+            alt=""
+            aria-hidden="true"
+            @error="useDefaultGeneralIcon"
+        />
+        <span class="general-identity-name">{{ name }}</span>
+    </span>
+</template>
+
+<style scoped>
+.general-identity {
+    display: inline-flex;
+    min-width: 0;
+    max-width: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    vertical-align: middle;
+}
+.general-identity-icon {
+    width: var(--general-identity-icon-size);
+    height: var(--general-identity-icon-size);
+    flex: 0 0 var(--general-identity-icon-size);
+    border: 1px solid rgb(255 255 255 / 28%);
+    background: #111;
+    object-fit: cover;
+}
+.general-identity-name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+</style>