644 lines
20 KiB
Vue
644 lines
20 KiB
Vue
<template>
|
|
<TopBackBar title="장수 생성" type="gateway" />
|
|
|
|
<div v-if="gameConstStore && args" id="container" class="bg0">
|
|
<div class="nation-list">
|
|
<div class="nation-header nation-row bg1 center">
|
|
<div>국가명</div>
|
|
<div>임관권유문</div>
|
|
<div class="display-toggle d-grid">
|
|
<b-button
|
|
v-model="displayTable"
|
|
:pressed="displayTable"
|
|
:variant="displayTable ? 'info' : 'secondary'"
|
|
@click="displayTable = !displayTable"
|
|
>
|
|
{{ displayTable ? "숨기기" : "보이기" }}
|
|
</b-button>
|
|
</div>
|
|
<div class="zoom-toggle d-grid">
|
|
<b-button
|
|
v-model="toggleZoom"
|
|
:pressed="toggleZoom"
|
|
:variant="toggleZoom ? 'info' : 'secondary'"
|
|
:disabled="!displayTable"
|
|
@click="toggleZoom = !toggleZoom"
|
|
>
|
|
{{ toggleZoom ? "작게 보기" : "크게 보기" }}
|
|
</b-button>
|
|
</div>
|
|
</div>
|
|
<template v-if="displayTable">
|
|
<div
|
|
v-for="nation in nationList"
|
|
:key="nation.nation"
|
|
:class="['nation-row', 's-border-b', toggleZoom ? 'on-zoom' : 'on-fit']"
|
|
>
|
|
<div
|
|
:style="{
|
|
backgroundColor: nation.color,
|
|
color: isBrightColor(nation.color) ? 'black' : 'white',
|
|
fontSize: '1.3em',
|
|
}"
|
|
class="d-grid"
|
|
>
|
|
<div class="align-self-center center">
|
|
{{ nation.name }}
|
|
</div>
|
|
</div>
|
|
<div class="nation-scout-plate align-self-center">
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
<div class="nation-scout-msg" v-html="nation.scoutmsg ?? '-'" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- 국가 설명 -->
|
|
<div class="row bg1">
|
|
<div class="col center">장수 생성</div>
|
|
</div>
|
|
<div class="forms">
|
|
<div class="row">
|
|
<div class="col col-md-4 col-3 a-right align-self-center">장수명</div>
|
|
<div class="col col-md-3 col-9 align-self-center">
|
|
<input v-if="!blockCustomGeneralName" v-model="args.name" class="form-control" />
|
|
<span v-else>무작위</span>
|
|
</div>
|
|
<div class="col col-md-1 col-3 a-right align-self-center">전콘 사용</div>
|
|
<div class="col col-md-4 col-9 align-self-center">
|
|
<img style="height: 64px; width: 64px" :src="iconPath" />
|
|
<label> <input v-model="args.pic" type="checkbox" /> 사용 </label>
|
|
</div>
|
|
<div class="col col-md-4 col-3 align-self-center a-right">성격</div>
|
|
|
|
<div class="col col-md-8 col-9 align-self-center">
|
|
<div class="row">
|
|
<div class="col col-md-3 col-4 align-self-center">
|
|
<select v-model="args.character" class="form-select form-inline" style="max-width: 20ch">
|
|
<option v-for="(personalityObj, key) in availablePersonality" :key="key" :value="key">
|
|
{{ personalityObj.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="col col-md-9 col-8 align-self-center">
|
|
<small class="text-muted">
|
|
{{ availablePersonality[args.character].info }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--<div class="row">
|
|
<div class="col">
|
|
계정관리에서 자신만을 표현할 수 있는 아이콘을 업로드 해보세요!
|
|
</div>
|
|
</div>-->
|
|
<div class="row" style="margin-top: 1em">
|
|
<div class="col col-md-4 col-3 a-right align-self-center">
|
|
능력치
|
|
<br />
|
|
<small class="text-muted">통/무/지</small>
|
|
</div>
|
|
<div class="col col-md-2 col-3 align-self-center">
|
|
<input v-model.number="args.leadership" type="number" class="form-control" />
|
|
</div>
|
|
<div class="col col-md-2 col-3 align-self-center">
|
|
<input v-model.number="args.strength" type="number" class="form-control" />
|
|
</div>
|
|
<div class="col col-md-2 col-3 align-self-center">
|
|
<input v-model.number="args.intel" type="number" class="form-control" />
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-top: 1em">
|
|
<div class="col col-md-4 col-3 a-right align-self-center">능력치 조절</div>
|
|
<div class="col col-md-8 col-9">
|
|
<b-button variant="secondary" class="stat-btn" @click="randStatRandom"> 랜덤형 </b-button>
|
|
<b-button variant="secondary" class="stat-btn" @click="randStatLeadPow"> 통솔무력형 </b-button>
|
|
<b-button variant="secondary" class="stat-btn" @click="randStatLeadInt"> 통솔지력형 </b-button>
|
|
<b-button variant="secondary" class="stat-btn" @click="randStatPowInt"> 무력지력형 </b-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="border-top: solid 1px #aaa; margin-top: 0.5em">
|
|
<div class="col a-center" style="color: orange">
|
|
모든 능력치는 ( {{ stats.min }} <= 능력치 <= {{ stats.max }} ) 사이로 잡으셔야 합니다. <br />그 외의
|
|
능력치는 가입되지 않습니다.
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col a-center">
|
|
능력치의 총합은 {{ stats.total }} 입니다. 가입후 {{ stats.bonusMin }} ~ {{ stats.bonusMax }} 의 능력치 보너스를
|
|
받게 됩니다. <br />임의의 도시에서 재야로 시작하며 건국과 임관은 게임 내에서 실행합니다.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row bg1">
|
|
<div class="col col-md-11 col-9 center align-self-center">유산 포인트 사용</div>
|
|
<div class="col col-md-1 col-3">
|
|
<label>
|
|
<input v-model="displayInherit" type="checkbox" />
|
|
{{ displayInherit ? "숨기기" : "보이기" }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div v-if="displayInherit" class="inherit-block">
|
|
<div class="row">
|
|
<div class="col">
|
|
<NumberInputWithInfo v-model.number="inheritTotalPoint" title="보유한 유산 포인트" :readonly="true" />
|
|
</div>
|
|
<div class="col">
|
|
<NumberInputWithInfo v-model.number="inheritRequiredPoint" title="필요 유산 포인트" :readonly="true" />
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="row">
|
|
<div class="col col-md-6 col-sm-6 col-12 p-2 align-self-center">
|
|
<div class="row">
|
|
<div class="col col-6 a-right align-self-center">천재로 생성</div>
|
|
<div class="col col-6 align-self-center">
|
|
<select v-model="args.inheritSpecial" class="form-select form-inline" style="max-width: 20ch">
|
|
<option :value="undefined">사용안함</option>
|
|
<option v-for="(inheritSpecial, key) in availableInheritSpecial" :key="key" :value="key">
|
|
{{ inheritSpecial.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col align-self-center">
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
<small class="text-muted" v-html="availableInheritSpecial[args.inheritSpecial ?? '']?.info" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col col-md-6 col-sm-6 col-12 p-2 align-self-center">
|
|
<div class="row">
|
|
<div class="col col-6 a-right align-self-center">도시</div>
|
|
<div class="col col-6 align-self-center">
|
|
<select v-model.number="inheritCity" class="form-select form-inline" style="max-width: 20ch">
|
|
<option :value="undefined">사용안함</option>
|
|
<option v-for="city in availableInheritCity" :key="city.id" :value="city.id">
|
|
{{ `[${city.region}] ${city.name}` }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col col-md-6 col-sm-6 col-12 p-2 align-self-center">
|
|
<div class="a-center">
|
|
<label> <input v-model="inheritTurnTimeSet" type="checkbox" />턴 시간 고정 </label>
|
|
</div>
|
|
<div class="row turn_time_pad">
|
|
<div class="col col-md-4 offset-md-3 col-4 offset-3">
|
|
<NumberInputWithInfo
|
|
v-model="inheritTurnTimeMinute"
|
|
:readonly="!inheritTurnTimeSet"
|
|
:min="0"
|
|
:max="turnterm - 1"
|
|
:right="true"
|
|
title="분"
|
|
/>
|
|
</div>
|
|
<div class="col col-md-4 col-4">
|
|
<NumberInputWithInfo
|
|
v-model="inheritTurnTimeSecond"
|
|
:readonly="!inheritTurnTimeSet"
|
|
:min="0"
|
|
:max="60"
|
|
:right="true"
|
|
title="초"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col col-md-6 col-12 p-2">
|
|
<div class="a-center">추가 능력치 고정</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<NumberInputWithInfo
|
|
v-model="(args.inheritBonusStat ?? [0, 0, 0])[0]"
|
|
:max="stats.bonusMax"
|
|
title="통솔"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<NumberInputWithInfo
|
|
v-model="(args.inheritBonusStat ?? [0, 0, 0])[1]"
|
|
:max="stats.bonusMax"
|
|
title="무력"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<NumberInputWithInfo
|
|
v-model="(args.inheritBonusStat ?? [0, 0, 0])[2]"
|
|
:max="stats.bonusMax"
|
|
title="지력"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="border-top: solid 1px #aaa">
|
|
<div class="col a-center" style="margin: 0.5em">
|
|
<b-button color="primary" @click="submitForm"> 장수 생성 </b-button>
|
|
<b-button color="secondary" @click="resetArgs"> 다시 입력 </b-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
declare const staticValues: {
|
|
nationList: {
|
|
nation: number;
|
|
name: string;
|
|
color: string;
|
|
scout: number;
|
|
scoutmsg?: string;
|
|
}[];
|
|
turnterm: number;
|
|
|
|
member: {
|
|
name: string;
|
|
grade: number;
|
|
picture: string;
|
|
imgsvr: 0 | 1;
|
|
};
|
|
|
|
config: {
|
|
show_img_level: number;
|
|
blockCustomGeneralName: boolean;
|
|
}
|
|
|
|
serverID: string;
|
|
inheritTotalPoint: number;
|
|
};
|
|
</script>
|
|
<script lang="ts" setup>
|
|
import "@scss/game_bg.scss";
|
|
|
|
import TopBackBar from "@/components/TopBackBar.vue";
|
|
import { getIconPath } from "@util/getIconPath";
|
|
import { isBrightColor } from "@util/isBrightColor";
|
|
import { abilityLeadint, abilityLeadpow, abilityPowint, abilityRand } from "@util/generalStats";
|
|
import { shuffle, sum } from "lodash-es";
|
|
import NumberInputWithInfo from "@/components/NumberInputWithInfo.vue";
|
|
import { SammoAPI } from "./SammoAPI";
|
|
import type { JoinArgs } from "./defs/API/General";
|
|
import { GameConstStore, getGameConstStore } from "@/GameConstStore";
|
|
import { computed, onMounted, ref, watch } from "vue";
|
|
import type { CityID, GameIActionInfo } from "./defs/GameObj";
|
|
import { unwrap } from "@/util/unwrap";
|
|
|
|
const gameConstStore = ref<GameConstStore>();
|
|
|
|
const { serverID, member, turnterm } = staticValues;
|
|
|
|
const nationList = ref(shuffle(staticValues.nationList));
|
|
const args = ref<JoinArgs>();
|
|
|
|
const blockCustomGeneralName = staticValues.config.blockCustomGeneralName;
|
|
|
|
const stats = ref({
|
|
min: 50,
|
|
max: 50,
|
|
total: 50,
|
|
bonusMin: 1,
|
|
bonusMax: 5,
|
|
});
|
|
|
|
const inheritTotalPoint = ref(staticValues.inheritTotalPoint);
|
|
const availableInheritCity = ref<{ id: CityID; name: string; region: string }[]>([]);
|
|
const availableInheritSpecial = ref<Record<string, GameIActionInfo>>({});
|
|
const availablePersonality = ref<Record<string, GameIActionInfo>>({});
|
|
|
|
watch(gameConstStore, (gameConst) => {
|
|
if (gameConst === undefined) {
|
|
console.error();
|
|
return;
|
|
}
|
|
|
|
availableInheritCity.value = (() => {
|
|
const cityList: { id: CityID; name: string; region: string }[] = [];
|
|
for (const city of Object.values(gameConst.cityConst)) {
|
|
cityList.push({
|
|
id: city.id,
|
|
name: city.name,
|
|
region: gameConst.cityConstMap.region[city.region] as string,
|
|
});
|
|
}
|
|
cityList.sort((lhs, rhs) => {
|
|
const rC = lhs.region.localeCompare(rhs.region);
|
|
if (rC != 0) return rC;
|
|
return lhs.name.localeCompare(rhs.name);
|
|
});
|
|
return cityList;
|
|
})();
|
|
|
|
availableInheritSpecial.value = (() => {
|
|
const specialList: typeof availableInheritSpecial.value = {};
|
|
for (const specialWarID of Object.values(gameConst.gameConst.availableSpecialWar)) {
|
|
specialList[specialWarID] = unwrap(gameConst.iActionInfo.specialWar[specialWarID]);
|
|
}
|
|
return specialList;
|
|
})();
|
|
|
|
availablePersonality.value = (() => {
|
|
const personalityList: typeof availablePersonality.value = {};
|
|
for (const personalityID of Object.values(gameConst.gameConst.availablePersonality)) {
|
|
personalityList[personalityID] = unwrap(gameConst.iActionInfo.personality[personalityID]);
|
|
}
|
|
personalityList["Random"] = {
|
|
value: "Random",
|
|
name: "???",
|
|
info: "무작위 성격을 선택합니다.",
|
|
};
|
|
return personalityList;
|
|
})();
|
|
|
|
stats.value = {
|
|
min: gameConst.gameConst.defaultStatMin,
|
|
max: gameConst.gameConst.defaultStatMax,
|
|
total: gameConst.gameConst.defaultStatTotal,
|
|
bonusMin: gameConst.gameConst.bornMinStatBonus,
|
|
bonusMax: gameConst.gameConst.bornMaxStatBonus,
|
|
};
|
|
|
|
args.value = {
|
|
name: member.name,
|
|
leadership: stats.value.total - 2 * Math.floor(stats.value.total / 3),
|
|
strength: Math.floor(stats.value.total / 3),
|
|
intel: Math.floor(stats.value.total / 3),
|
|
pic: true,
|
|
character: "Random",
|
|
|
|
inheritCity: undefined,
|
|
inheritBonusStat: [0, 0, 0],
|
|
inheritSpecial: undefined,
|
|
inheritTurntime: undefined,
|
|
};
|
|
});
|
|
|
|
onMounted(async () => {
|
|
gameConstStore.value = await getGameConstStore();
|
|
});
|
|
|
|
function randStatRandom() {
|
|
if (args.value === undefined) throw "nyc";
|
|
[args.value.leadership, args.value.strength, args.value.intel] = abilityRand(stats.value);
|
|
}
|
|
function randStatLeadPow() {
|
|
if (args.value === undefined) throw "nyc";
|
|
[args.value.leadership, args.value.strength, args.value.intel] = abilityLeadpow(stats.value);
|
|
}
|
|
function randStatLeadInt() {
|
|
if (args.value === undefined) throw "nyc";
|
|
[args.value.leadership, args.value.strength, args.value.intel] = abilityLeadint(stats.value);
|
|
}
|
|
function randStatPowInt() {
|
|
if (args.value === undefined) throw "nyc";
|
|
[args.value.leadership, args.value.strength, args.value.intel] = abilityPowint(stats.value);
|
|
}
|
|
function resetArgs() {
|
|
if (!args.value) throw "nyc";
|
|
const defaultStatTotal = stats.value.total;
|
|
args.value.name = member.name;
|
|
args.value.pic = true;
|
|
args.value.character = "Random";
|
|
args.value.leadership = defaultStatTotal - 2 * Math.floor(defaultStatTotal / 3);
|
|
args.value.strength = Math.floor(defaultStatTotal / 3);
|
|
args.value.intel = Math.floor(defaultStatTotal / 3);
|
|
}
|
|
|
|
async function submitForm() {
|
|
if (!args.value) throw "nyc";
|
|
//검증은 언제 되어야 하는가?
|
|
const subbmitArgs = args.value;
|
|
const totalStat = subbmitArgs.leadership + subbmitArgs.strength + subbmitArgs.intel;
|
|
const defaultStatTotal = stats.value.total;
|
|
|
|
if (totalStat < defaultStatTotal) {
|
|
if (
|
|
!confirm(
|
|
`설정한 능력치가 ${totalStat}으로, 실제 최대치인 ${defaultStatTotal}보다 적습니다.\r\n그래도 진행할까요?`
|
|
)
|
|
) {
|
|
return false;
|
|
}
|
|
}
|
|
try {
|
|
await SammoAPI.General.Join(subbmitArgs);
|
|
} catch (e) {
|
|
console.error(e);
|
|
alert(`실패했습니다: ${e}`);
|
|
return;
|
|
}
|
|
|
|
alert("정상적으로 생성되었습니다. \n위키와 팁/강좌 게시판을 꼭 읽어보세요!");
|
|
location.href = "./";
|
|
}
|
|
|
|
const iconPath = computed(() => {
|
|
if (!args.value) throw "nyc";
|
|
|
|
if (args.value.pic) {
|
|
return getIconPath(member.imgsvr, member.picture);
|
|
}
|
|
return getIconPath(0, "default.jpg");
|
|
});
|
|
|
|
const inheritRequiredPoint = computed(() => {
|
|
if (!args.value || !gameConstStore.value) throw "nyc";
|
|
|
|
let inheritRequiredPoint = 0;
|
|
const gameConst = gameConstStore.value.gameConst;
|
|
|
|
if (args.value.inheritCity !== undefined) {
|
|
inheritRequiredPoint += gameConst.inheritBornCityPoint;
|
|
}
|
|
if (args.value.inheritSpecial !== undefined) {
|
|
inheritRequiredPoint += gameConst.inheritBornSpecialPoint;
|
|
}
|
|
if (args.value.inheritTurntime !== undefined) {
|
|
inheritRequiredPoint += gameConst.inheritBornTurntimePoint;
|
|
}
|
|
if (args.value.inheritBonusStat !== undefined && sum(args.value.inheritBonusStat) != 0) {
|
|
inheritRequiredPoint += gameConst.inheritBornStatPoint;
|
|
}
|
|
return inheritRequiredPoint;
|
|
});
|
|
|
|
const toggleZoom = ref(true);
|
|
|
|
const displayTable = ref<boolean>(JSON.parse(localStorage.getItem(`conf.${serverID}.join.displayTable`) ?? "true"));
|
|
watch(displayTable, (newValue: boolean) => {
|
|
localStorage.setItem(`conf.${serverID}.join.displayTable`, JSON.stringify(newValue));
|
|
});
|
|
|
|
const displayInherit = ref<boolean>(JSON.parse(localStorage.getItem(`conf.${serverID}.join.displayInherit`) ?? "true"));
|
|
watch(displayInherit, (newValue: boolean) => {
|
|
localStorage.setItem(`conf.${serverID}.join.displayInherit`, JSON.stringify(newValue));
|
|
});
|
|
|
|
const inheritCity = ref<number>();
|
|
watch(inheritCity, (newValue: undefined | number) => {
|
|
if (!args.value) throw "nyc";
|
|
|
|
if (!newValue) {
|
|
args.value.inheritCity = undefined;
|
|
return;
|
|
}
|
|
args.value.inheritCity = inheritCity.value;
|
|
});
|
|
|
|
const inheritTurnTimeSet = ref(false);
|
|
watch(inheritTurnTimeSet, (newValue: boolean) => {
|
|
if (!args.value) throw "nyc";
|
|
|
|
if (!newValue) {
|
|
args.value.inheritTurntime = undefined;
|
|
return;
|
|
}
|
|
args.value.inheritTurntime = inheritTurnTimeMinute.value * 60 + inheritTurnTimeSecond.value;
|
|
});
|
|
|
|
watch(
|
|
[inheritCity, inheritTurnTimeSet],
|
|
([newInheritCity, newInheritTurnTimeSet], [oldInheritCity, oldInheritTurnTimeSet]) => {
|
|
if (newInheritCity === undefined || newInheritTurnTimeSet === false) {
|
|
return;
|
|
}
|
|
alert("도시와 턴 시간을 동시에 설정할 수 없습니다.");
|
|
|
|
if (newInheritCity !== oldInheritCity) {
|
|
inheritCity.value = undefined;
|
|
}
|
|
if (newInheritTurnTimeSet !== oldInheritTurnTimeSet) {
|
|
inheritTurnTimeSet.value = false;
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
const inheritTurnTimeMinute = ref(0);
|
|
watch(inheritTurnTimeMinute, (newValue: number) => {
|
|
if (!args.value) throw "nyc";
|
|
if (!inheritTurnTimeSet.value) {
|
|
args.value.inheritTurntime = undefined;
|
|
return;
|
|
}
|
|
args.value.inheritTurntime = newValue * 60 + inheritTurnTimeSecond.value;
|
|
});
|
|
|
|
const inheritTurnTimeSecond = ref(0);
|
|
watch(inheritTurnTimeSecond, (newValue: number) => {
|
|
if (!args.value) throw "nyc";
|
|
|
|
if (!inheritTurnTimeSet.value) {
|
|
args.value.inheritTurntime = undefined;
|
|
return;
|
|
}
|
|
args.value.inheritTurntime = inheritTurnTimeMinute.value * 60 + newValue;
|
|
});
|
|
</script>
|
|
<style lang="scss">
|
|
@import "@scss/common/base.scss";
|
|
@import "@scss/editor_component.scss";
|
|
|
|
#container {
|
|
width: 100%;
|
|
max-width: 1000px;
|
|
margin: auto;
|
|
border: solid 1px #888888;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.forms {
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.stat-btn {
|
|
width: 8em;
|
|
margin-right: 1px;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.col-form-label {
|
|
text-align: right;
|
|
}
|
|
|
|
.turn_time_pad .col-form-label {
|
|
text-align: left;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@scss/common/break_500px.scss";
|
|
|
|
@include media-1000px {
|
|
.nation-list .nation-row {
|
|
display: grid;
|
|
grid-template-columns: 130px 870px;
|
|
}
|
|
|
|
.zoom-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.zoom-toggle > * {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@include media-500px {
|
|
.nation-list .nation-row.nation-header {
|
|
display: grid;
|
|
grid-template-columns: 3fr 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
|
|
.display-toggle {
|
|
grid-column: 2/3;
|
|
grid-row: 1/3;
|
|
}
|
|
.zoom-toggle {
|
|
grid-column: 3/4;
|
|
grid-row: 1/3;
|
|
}
|
|
}
|
|
|
|
.nation-list .nation-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr minmax(1fr, calc(200px * 500 / 870));
|
|
}
|
|
|
|
.on-fit {
|
|
.nation-scout-plate {
|
|
max-height: calc(200px * 500 / 870);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nation-scout-msg {
|
|
width: 870px;
|
|
transform-origin: 0px 0px;
|
|
transform: scale(calc(500 / 870));
|
|
}
|
|
}
|
|
|
|
.on-zoom {
|
|
.nation-scout-plate {
|
|
max-height: 200px;
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.nation-scout-msg {
|
|
max-width: 870px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|