core/hwe/ts/PageGlobalDiplomacy.vue

<template>
  <BContainer v-if="asyncReady" id="container" :toast="{ root: true }" class="pageGlobalDiplomacy">
    <TopBackBar title="중원 정보"></TopBackBar>
    <div class="diplomacy bg0">
      <div class="s-border-tb center tb-title" style="background-color: blue">외교 현황</div>
      <div class="diplomacy_area">
        <table v-if="diplomacy" class="center" style="margin: auto; min-width: 400px">
          <thead>
            <tr>
              <th></th>
              <th
                class="thead-nation"
                v-for="nation of diplomacy.nations"
                :key="nation.nation"
                :style="{
                  color: isBrightColor(nation.color) ? '#000' : '#fff',
                  backgroundColor: nation.color,
                }"
              >
                {{ nation.name }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="me of diplomacy.nations" :key="me.nation">
              <th
                class="tbody-nation"
                :style="{
                  color: isBrightColor(me.color) ? '#000' : '#fff',
                  backgroundColor: me.color,
                }"
              >
                {{ me.name }}
              </th>
              <template v-for="you of diplomacy.nations" :key="you.nation">
                <td class="tbody-cell" v-if="me.nation == you.nation">＼</td>
                <td
                  class="tbody-cell"
                  style="background-color: #660000"
                  v-else-if="me.nation == diplomacy.myNationID || you.nation == diplomacy.myNationID"
                  v-html="infomativeStateCharMap[diplomacy.diplomacyList[me.nation][you.nation]]"
                />
                <td
                  class="tbody-cell"
                  v-else
                  v-html="neutralStateCharMap[diplomacy.diplomacyList[me.nation][you.nation]]"
                />
              </template>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td :colspan="Object.keys(diplomacy.nations).length + 1" class="center">
                불가침 :
                <span style="color: limegreen">@</span>, 통상 : ㆍ, 선포 : <span style="color: magenta">▲</span>, 교전 :
                <span style="color: red">★</span>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <div class="map_area mx-0 bg0">
      <div class="s-border-tb center tb-title" style="background-color: green">중원 지도</div>
      <div class="row g-0">
        <div class="map_position">
          <MapViewer
            v-if="map"
            :server-nick="serverNick"
            :serverID="serverID"
            :map-name="unwrap(gameConstStore?.gameConst.mapName)"
            :model-value="map"
            :is-detail-map="true"
            :city-position="cityPosition"
            :format-city-info="formatCityInfoText"
            :image-path="imagePath"
            :disallow-click="true"
          />
        </div>
        <div class="nation_position"><SimpleNationList v-if="diplomacy" :nations="diplomacy.nations" /></div>
      </div>
    </div>
    <BottomBar></BottomBar>
  </BContainer>
</template>

<script lang="ts">
declare const staticValues: {
  serverNick: string;
  serverID: string;
};

declare const getCityPosition: () => CityPositionMap;
declare const formatCityInfo: (city: MapCityParsedRaw) => MapCityParsed;
</script>
<script lang="ts" setup>
import { onMounted, provide, ref } from "vue";
import { BContainer, useToast } from "bootstrap-vue-3";
import TopBackBar from "@/components/TopBackBar.vue";
import BottomBar from "@/components/BottomBar.vue";
import { SammoAPI } from "./SammoAPI";
import SimpleNationList from "./components/SimpleNationList.vue";
import MapViewer, { type CityPositionMap, type MapCityParsedRaw, type MapCityParsed } from "./components/MapViewer.vue";
import { getGameConstStore, type GameConstStore } from "./GameConstStore";
import { unwrap } from "@/util/unwrap";
import type { diplomacyState, MapResult } from "./defs";
import type { GetDiplomacyResponse } from "./defs/API/Global";
import { isString } from "lodash";
import { isBrightColor } from "@/util/isBrightColor";

const serverID = staticValues.serverID;
const serverNick = staticValues.serverNick;

const asyncReady = ref<boolean>(false);
const gameConstStore = ref<GameConstStore>();
provide("gameConstStore", gameConstStore);
const storeP = getGameConstStore().then((store) => {
  gameConstStore.value = store;
});

void Promise.all([storeP]).then(() => {
  asyncReady.value = true;
});

const infomativeStateCharMap: Record<diplomacyState, string> = {
  0: '<span style="color:red;">★</span>',
  1: '<span style="color:magenta;">▲</span>',
  2: "ㆍ",
  7: '<span style="color:green;">@</span>',
};

const neutralStateCharMap: Record<diplomacyState, string> = {
  0: '<span style="color:red;">★</span>',
  1: '<span style="color:magenta;">▲</span>',
  2: "",
  7: "에러",
};

const cityPosition = getCityPosition();
const formatCityInfoText = formatCityInfo;
const imagePath = window.pathConfig.gameImage;

const map = ref<MapResult>();
const diplomacy = ref<GetDiplomacyResponse>();

const toasts = unwrap(useToast());

onMounted(async () => {
  try {
    map.value = await SammoAPI.Global.GetMap({
      neutralView: 0,
      showMe: 1,
    });
  } catch (e) {
    if (isString(e)) {
      toasts.danger({
        title: "에러",
        body: e,
      });
    }
    console.error(e);
  }
});

onMounted(async () => {
  try {
    diplomacy.value = await SammoAPI.Global.GetDiplomacy();
  } catch (e) {
    if (isString(e)) {
      toasts.danger({
        title: "에러",
        body: e,
      });
    }
    console.error(e);
  }
});
</script>

<style lang="scss" scoped>
.diplomacy_area {
  width: 100%;
  overflow-x: auto;
}
.thead-nation {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: end;
  padding-bottom: 1ch;
  padding-top: 1ch;
  padding-left: 0;
  padding-right: 0;
  min-width: 1ch;
  max-width: 3ch;
  font-weight: normal;
}
.tbody-nation {
  text-align: end;
  padding-right: 1ch;
  padding-left: 1ch;
  min-width: 10ch;
  font-weight: normal;
}
.diplomacy {
  margin-top: 1.5em;
}
.map_area {
  margin-top: 1.5em;
}

.tb-title {
  font-size: 1.2em;
}

.tbody-cell {
  border-left: solid 1px gray;
  border-top: solid 1px gray;
  padding: 0;
}
</style>