feat: chiefCenter 500px 재구현

- API: 사령턴 관련 - TopBackBar에 갱신 추가
2021-12-25 21:51:47 +09:00
parent c961096b70
commit 5142c94f84
27 changed files with 1774 additions and 171 deletions
@@ -0,0 +1,56 @@
+<template>
+  <div
+    :class="[`chiefBox${chiefLevel}`, 'subRows']"
+    v-for="(officer, idx) in [chiefList[chiefLevel]]"
+    :key="idx"
+    :style="style"
+    @click="$emit('click', this)"
+  >
+    <div
+      class="bg1 nameHeader"
+      :style="{
+        color: getNpcColor(officer.npcType ?? 0),
+        textDecoration: isMe ? 'underline' : undefined,
+      }"
+    >
+      {{ officer.name ?? "-" }}
+    </div>
+    <div class="bg1 center row gx-0">
+      <div class="col">{{ officer.officerLevelText }}</div>
+      <div class="col">{{ (officer.turnTime ?? "  -  ").slice(-5) }}</div>
+    </div>
+    <div
+      class="tableCell align-self-center"
+      v-for="(turn, idx) in officer.turn"
+      :key="idx"
+      :style="{
+        fontSize:
+          mb_strwidth(turn.brief) > 28
+            ? `${28 / mb_strwidth(turn.brief)}em`
+            : undefined,
+      }"
+    >
+      {{ turn.brief }}
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { getNpcColor } from "@/common_legacy";
+import { mb_strwidth } from "@/util/mb_strwidth";
+import { defineComponent } from "vue";
+import VueTypes from "vue-types";
+
+export default defineComponent({
+  props: {
+    chiefLevel: VueTypes.integer.isRequired,
+    style: VueTypes.object.isRequired,
+    chiefList: VueTypes.object.isRequired,
+    isMe: VueTypes.bool.isRequired,
+  },
+  emits: ["click"],
+  methods: {
+    mb_strwidth,
+    getNpcColor,
+  },
+});
+</script>
@@ -0,0 +1,83 @@
+<template>
+  <div
+    :class="['subRows', 'c-bg2', 'chiefCommand']"
+    :style="style"
+  >
+    <div class="bg1 center row gx-0" style="font-size: 1.2em">
+      <div class="col-5 align-self-center text-end">
+        {{ officer.officerLevelText }} :
+      </div>
+      <div
+        class="col-7 align-self-center"
+        :style="{
+          color: getNpcColor(officer.npcType ?? 0),
+        }"
+      >
+        {{ officer.name }}
+      </div>
+    </div>
+    <div class="row gx-0" v-for="(turn, idx) in officer.turn" :key="idx">
+      <div class="col-2 time_pad f_tnum">
+        {{ turnTimes[idx] }}
+      </div>
+      <div
+        class="tableCell align-self-center col-10 center turn_pad"
+        :style="{
+          fontSize:
+            mb_strwidth(turn.brief) > 28
+              ? `${28 / mb_strwidth(turn.brief)}em`
+              : undefined,
+        }"
+      >
+        {{ turn.brief }}
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { getNpcColor } from "@/common_legacy";
+import { ChiefResponse } from "@/defs";
+import { formatTime } from "@/util/formatTime";
+import { mb_strwidth } from "@/util/mb_strwidth";
+import { parseTime } from "@/util/parseTime";
+import addMinutes from "date-fns/esm/addMinutes/index";
+import { range } from "lodash";
+import { defineComponent, PropType } from "vue";
+import VueTypes from "vue-types";
+
+export default defineComponent({
+  props: {
+    style: VueTypes.object.isRequired,
+    officer: {
+        type: Object as PropType<ChiefResponse['chiefList'][0]>,
+        required: true,
+    },
+    turnTerm: VueTypes.integer.isRequired,
+  },
+  methods: {
+    getNpcColor,
+    mb_strwidth,
+  },
+
+  data() {
+      const turnTimes: string[] = [];
+
+      if (!this.officer.turnTime) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          for(const _ of range(this.officer.turn.length)){
+              turnTimes.push('-');
+          }
+      }
+      else{
+          const baseTurnTime = parseTime(this.officer.turnTime);
+          for(const idx of range(this.officer.turn.length)){
+              turnTimes.push(formatTime(addMinutes(baseTurnTime, idx * this.turnTerm), this.turnTerm >= 5 ? "HH:mm":"mm:ss"));
+          }
+      }
+
+      return {
+          turnTimes,
+      }
+  },
+});
+</script>