refac: 감찰부 vue3 재 작성 (#222)

- 장수 정보, 추가 정보 vue3 component
- b_battleCenter -> v_battleCenter

Reviewed-on: https://storage.hided.net/gitea/devsam/core/pulls/222

hwe/ts/components/SammoBar.vue

@@ -1,25 +1,40 @@
 <template>
   <div
     v-b-tooltip.hover.top
-    :title="`${props.percent}$`"
+    :title="`${props.percent.toLocaleString(undefined, { maximumFractionDigits: 2 })}%`"
     class="sammo-bar"
     :style="{
-      height: `${props.height}px`,
-      backgroundImage: `url(${imagePath}/pr${props.height - 2}.png)`,
-      backgroundRepeat: 'repeat-x',
-      backgroundPosition: 'center',
+      height: `${props.height + 2}px`,
+      position: 'relative',
       borderTop: 'solid 1px #888',
       borderBottom: 'solid 1px #333',
+      margin: 'auto',
+      width: props.width === undefined ? '100%' : props.width,
     }"
   >
+    <div
+      class="sammo-bar-base"
+      :style="{
+        position: 'absolute',
+        left: '0',
+        width: '100%',
+        height: `${props.height}px`,
+        backgroundImage: `url(${imagePath}/pr${props.height - 2}.gif)`,
+        backgroundRepeat: 'repeat-x',
+        backgroundPosition: 'center',
+      }"
+    ></div>
     <div
       class="sammo-bar-in"
       :style="{
+        position: 'absolute',
+        left: '0',
+        width: `${clamp(props.percent, 0, 100)}%`,
         height: `${props.height}px`,
-        backgroundImage: `url(${imagePath}/pb${props.height - 2}.png)`,
+        backgroundImage: `url(${imagePath}/pb${props.height - 2}.gif)`,
         backgroundRepeat: 'repeat-x',
         backgroundPosition: 'left center',
-        width: `${clamp(props.percent, 0, 100)}%`,
+
       }"
     />
   </div>
@@ -30,6 +45,7 @@ import { clamp } from "lodash";
 const imagePath = window.pathConfig.gameImage;
 const props = defineProps<{
   height: 7 | 10;
+  width?: string;
   percent: number;
 }>();
 </script>