feat: 장수 추가정보 카드

- 막대 구현 - 기존의 추가정보에 5턴분량 예턴 표기
2022-04-27 00:09:25 +09:00
parent c69d171c3a
commit ce877834cd
3 changed files with 214 additions and 13 deletions
@@ -0,0 +1,35 @@
+<template>
+  <div
+    v-b-tooltip.hover.top
+    :title="`${props.percent}$`"
+    class="sammo-bar"
+    :style="{
+      height: `${props.height}px`,
+      backgroundImage: `url(${imagePath}/pr${props.height - 2}.png)`,
+      backgroundRepeat: 'repeat-x',
+      backgroundPosition: 'center',
+      borderTop: 'solid 1px #888',
+      borderBottom: 'solid 1px #333',
+    }"
+  >
+    <div
+      class="sammo-bar-in"
+      :style="{
+        height: `${props.height}px`,
+        backgroundImage: `url(${imagePath}/pb${props.height - 2}.png)`,
+        backgroundRepeat: 'repeat-x',
+        backgroundPosition: 'left center',
+        width: `${clamp(props.percent, 0, 100)}%`,
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { clamp } from "lodash";
+const imagePath = window.pathConfig.gameImage;
+const props = defineProps<{
+  height: 7 | 10;
+  percent: number;
+}>();
+</script>