102 lines
3.8 KiB
Vue
102 lines
3.8 KiB
Vue
|
<template>
|
||
|
|
<div class="w-full h-full flex items-center justify-center relative">
|
||
|
|
<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full image-pixelated">
|
||
|
|
|
||
|
|
<!-- Weapon (Sword) -->
|
||
|
|
<g v-if="category === 'weapon'">
|
||
|
|
<path d="M2 8 L8 2 M3 8 L8 3" :stroke="color" stroke-width="1" />
|
||
|
|
<path d="M2 8 L3 9 L4 8 L3 7 Z" :fill="color" /> <!-- Hilt -->
|
||
|
|
<path d="M7 3 L8 2 L9 3" :fill="color" /> <!-- Tip -->
|
||
|
|
<rect x="3" y="6" width="1" height="1" :fill="secondaryColor" />
|
||
|
|
<rect x="6" y="3" width="1" height="1" :fill="secondaryColor" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Armor -->
|
||
|
|
<g v-else-if="category === 'armor'">
|
||
|
|
<path d="M2 2 H8 V5 L5 8 L2 5 V2 Z" :fill="color" fill-opacity="0.2" />
|
||
|
|
<path d="M2 2 H8 V5 L5 8 L2 5 V2 Z" :stroke="color" stroke-width="1" fill="none" />
|
||
|
|
<path d="M4 3 H6 V5 H4 V3 Z" :fill="secondaryColor" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Hat/Crown -->
|
||
|
|
<g v-else-if="category === 'hat' || category === 'crown'">
|
||
|
|
<path d="M2 4 H8 V7 H2 V4 Z" :fill="color" fill-opacity="0.2" />
|
||
|
|
<path d="M2 4 L2 3 L3 3 L3 2 L4 2 L4 3 L6 3 L6 2 L7 2 L7 3 L8 3 L8 4 V7 H2 Z" :stroke="color" stroke-width="1" fill="none" />
|
||
|
|
<rect x="4" y="5" width="2" height="1" :fill="secondaryColor" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Accessory/Ring/Amulet -->
|
||
|
|
<g v-else-if="category === 'accessory' || category === 'talisman'">
|
||
|
|
<circle cx="5" cy="4" r="2" :stroke="color" stroke-width="1" fill="none" />
|
||
|
|
<path d="M5 6 V8" :stroke="color" stroke-width="1" />
|
||
|
|
<rect x="4" y="8" width="2" height="2" :fill="secondaryColor" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Potion -->
|
||
|
|
<g v-else-if="category === 'potion'">
|
||
|
|
<path d="M4 2 H6 V3 H7 V4 H8 V8 H2 V4 H3 V3 H4 V2 Z" :fill="color" fill-opacity="0.2" />
|
||
|
|
<path d="M4 2 H6 V3 H7 V4 H8 V8 H2 V4 H3 V3 H4 V2 Z" :stroke="color" stroke-width="1" fill="none" />
|
||
|
|
<rect x="4" y="5" width="2" height="2" :fill="secondaryColor" />
|
||
|
|
<rect x="3" y="4" width="1" height="1" fill="white" fill-opacity="0.5" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Food -->
|
||
|
|
<g v-else-if="category === 'food'">
|
||
|
|
<circle cx="5" cy="5" r="3" :fill="color" />
|
||
|
|
<rect x="4" y="4" width="1" height="1" :fill="secondaryColor" />
|
||
|
|
<rect x="6" y="5" width="1" height="1" :fill="secondaryColor" />
|
||
|
|
<rect x="5" y="6" width="1" height="1" :fill="secondaryColor" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Book/Manual -->
|
||
|
|
<g v-else-if="category === 'book'">
|
||
|
|
<rect x="2" y="2" width="6" height="6" :fill="color" />
|
||
|
|
<rect x="3" y="3" width="4" height="4" fill="white" fill-opacity="0.3" />
|
||
|
|
<path d="M4 4 H7 M4 5 H7 M4 6 H6" stroke="#1b1026" stroke-width="0.5" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Crystal/Gem/Special -->
|
||
|
|
<g v-else-if="category === 'crystal' || category === 'special'">
|
||
|
|
<path d="M5 1 L8 4 L5 9 L2 4 Z" :fill="color" />
|
||
|
|
<path d="M5 1 L8 4 L5 9 L2 4 Z" :stroke="secondaryColor" stroke-width="0.5" fill="none" />
|
||
|
|
<path d="M5 1 V9 M2 4 H8" :stroke="secondaryColor" stroke-width="0.5" stroke-opacity="0.5" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Default (Box) -->
|
||
|
|
<g v-else>
|
||
|
|
<rect x="2" y="2" width="6" height="6" :stroke="color" stroke-width="1" fill="none" />
|
||
|
|
<path d="M2 2 L8 8 M8 2 L2 8" :stroke="color" stroke-width="0.5" />
|
||
|
|
</g>
|
||
|
|
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
category?: string;
|
||
|
|
type?: string;
|
||
|
|
color?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
category: 'special',
|
||
|
|
type: 'special',
|
||
|
|
color: '#e0d8f0'
|
||
|
|
});
|
||
|
|
|
||
|
|
const secondaryColor = computed(() => {
|
||
|
|
// Simple logic to generate a contrasting or complementary color
|
||
|
|
// For now, just return white or a fixed highlight
|
||
|
|
return '#ffffff';
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.image-pixelated {
|
||
|
|
image-rendering: pixelated;
|
||
|
|
}
|
||
|
|
</style>
|