81 lines
3.0 KiB
Vue
81 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="w-12 h-12 relative image-pixelated">
|
||
|
|
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" shapeRendering="crispEdges">
|
||
|
|
<!-- Body/Head -->
|
||
|
|
<rect x="6" y="2" width="4" height="4" :fill="finalSkin" /> <!-- Head -->
|
||
|
|
<rect x="5" y="6" width="6" height="5" :fill="finalOutfit" /> <!-- Body -->
|
||
|
|
<rect x="5" y="6" width="2" height="3" :fill="finalOutfit" filter="brightness(0.9)" /> <!-- Left Arm -->
|
||
|
|
<rect x="9" y="6" width="2" height="3" :fill="finalOutfit" filter="brightness(0.9)" /> <!-- Right Arm -->
|
||
|
|
<rect x="6" y="11" width="1" height="3" :fill="finalSkin" /> <!-- Leg L -->
|
||
|
|
<rect x="9" y="11" width="1" height="3" :fill="finalSkin" /> <!-- Leg R -->
|
||
|
|
|
||
|
|
<!-- Hair -->
|
||
|
|
<rect x="5" y="1" width="6" height="2" :fill="finalHair" />
|
||
|
|
<rect x="4" y="2" width="1" height="3" :fill="finalHair" />
|
||
|
|
<rect x="11" y="2" width="1" height="3" :fill="finalHair" />
|
||
|
|
|
||
|
|
<!-- Face -->
|
||
|
|
<rect x="7" y="4" width="1" height="1" fill="#000" opacity="0.6"/> <!-- Eye -->
|
||
|
|
<rect x="9" y="4" width="1" height="1" fill="#000" opacity="0.6"/> <!-- Eye -->
|
||
|
|
|
||
|
|
<!-- Accessory/Deity Specifics -->
|
||
|
|
<rect v-if="deityId === 'Mazu'" x="5" y="0" width="6" height="1" fill="#d4af37" /> <!-- Crown -->
|
||
|
|
<rect v-if="deityId === 'EarthGod'" x="5" y="10" width="6" height="1" fill="#8e5c2e" /> <!-- Belt -->
|
||
|
|
<rect v-if="deityId === 'Matchmaker'" x="10" y="7" width="2" height="2" fill="#ff0000" /> <!-- Red Thread -->
|
||
|
|
|
||
|
|
<!-- Weapon -->
|
||
|
|
<path v-if="weapon === 'sword'" d="M11 9 L13 7 L14 8 L12 10 Z" fill="#ccc" />
|
||
|
|
<rect v-if="weapon === 'staff'" x="11" y="5" width="1" height="8" fill="#8d6e63" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
skinColor?: string;
|
||
|
|
hairColor?: string;
|
||
|
|
outfitColor?: string;
|
||
|
|
weapon?: 'none' | 'sword' | 'staff';
|
||
|
|
deityId?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
skinColor: '#ffdbac',
|
||
|
|
hairColor: '#5e412f',
|
||
|
|
outfitColor: '#78909c',
|
||
|
|
weapon: 'none'
|
||
|
|
});
|
||
|
|
|
||
|
|
const finalSkin = computed(() => {
|
||
|
|
if (props.deityId === 'Mazu') return '#ffe0bd';
|
||
|
|
if (props.deityId === 'EarthGod') return '#f0c0a8';
|
||
|
|
if (props.deityId === 'Matchmaker') return '#ffe0bd';
|
||
|
|
if (props.deityId === 'Wenchang') return '#ffe0bd';
|
||
|
|
return props.skinColor;
|
||
|
|
});
|
||
|
|
|
||
|
|
const finalHair = computed(() => {
|
||
|
|
if (props.deityId === 'Mazu') return '#1a1a1a';
|
||
|
|
if (props.deityId === 'EarthGod') return '#f0f0f0';
|
||
|
|
if (props.deityId === 'Matchmaker') return '#f0f0f0';
|
||
|
|
if (props.deityId === 'Wenchang') return '#1a1a1a';
|
||
|
|
return props.hairColor;
|
||
|
|
});
|
||
|
|
|
||
|
|
const finalOutfit = computed(() => {
|
||
|
|
if (props.deityId === 'Mazu') return '#ffa500';
|
||
|
|
if (props.deityId === 'EarthGod') return '#d75b5b';
|
||
|
|
if (props.deityId === 'Matchmaker') return '#d95763';
|
||
|
|
if (props.deityId === 'Wenchang') return '#9fd75b';
|
||
|
|
return props.outfitColor;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.image-pixelated {
|
||
|
|
image-rendering: pixelated;
|
||
|
|
}
|
||
|
|
</style>
|