devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

feat: 턴 선택기에 복합 커맨드 선택 적용

Browse Source 
- vue-multiselect 기반
- 초성 검색
- 이득, 불리 표기
- 불가 표기
- 선택후 단축 표기
This commit is contained in:
Hide_D
2021-12-05 23:00:46 +09:00
parent db07fb35e0
commit f98db556c5
8 changed files with 98 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/css/common.css
-9
View File
@@ -245,11 +245,6 @@ div.bar_out div.bar_in {
padding: 0;
}
.commandBasic {
background-color: black;
color: white;
}
.compensatePositive {
color: skyblue;
}
@@ -258,10 +253,6 @@ div.bar_out div.bar_in {
color: orange;
}
.compensateNeutral {
color: white;
}
.commandBasic.commandImpossible {
background-color: red;
color: white;
hwe/func.php
+1
View File
@@ -480,6 +480,7 @@ function getCommandTable(General $general){
'compensation'=>$commandObj->getCompensationStyle(),
'possible'=>$commandObj->hasMinConditionMet(),
'title'=>$commandObj->getCommandDetailTitle(),
'simpleName'=>$commandObj->getName(),
'reqArg'=>$commandObj::$reqArg,
];
}
hwe/sammo/Command/General/che_랜덤임관.php
+1 -1
View File
@@ -25,7 +25,7 @@ use sammo\MustNotBeReachedException;
class che_랜덤임관 extends Command\GeneralCommand
{
static protected $actionName = '랜덤임관';
static protected $actionName = '무작위 국가로 임관';
protected function argTest(): bool
{
hwe/sammo/Command/General/che_장수대상임관.php
+1 -1
View File
@@ -24,7 +24,7 @@ use sammo\CityConst;
class che_장수대상임관 extends Command\GeneralCommand{
static protected $actionName = '따라 임관';
static protected $actionName = '장수를 따라 임관';
static public $reqArg = true;
protected function argTest():bool{
hwe/scss/common_legacy.scss
+12 -12
View File
@@ -247,26 +247,26 @@ div.bar_out div.bar_in {
padding: 0;
}
.commandBasic {
background-color: black;
color: white;
}
.compensatePositive {
color: skyblue;
color: $cyan;
display: inline-block;
width: 1rem;
}
.compensateNegative {
color: orange;
color: $red;
display: inline-block;
width: 1rem;
}
.compensateNeutral {
color: white;
.compensateNeutral{
display: inline-block;
width: 1rem;
}
.commandBasic.commandImpossible {
background-color: red;
color: white;
.commandImpossible {
color: $red;
text-decoration: line-through $red;
}
.select2-selection--single.simple-select2-align-center .select2-selection__rendered {
hwe/scss/vue-multiselect.scss
+1 -8
View File
@@ -1,12 +1,5 @@
@use "sass:math";
$vue-multiselect-disabled-color: $white;
$vue-multiselect-disabled-bg: $gray-700;
$form-select-color: $white;
$vue-multiselect-bg: $black;
$vue-multiselect-color: $white;
$vue-multiselect-tag-color: $white;
$vue-multiselect-spinner-color: $white;
$vue-multiselect-disabled-bg: $gray-400;
$vue-multiselect-padding-x: $form-select-padding-x !default;
$vue-multiselect-padding-y: $form-select-padding-y !default;
hwe/ts/ReservedCommand.vue
+65 -9
View File
@@ -75,7 +75,7 @@
'white-space': 'nowrap',
'font-size': `${Math.min(
14,
(70 / (`${turnObj.year ?? 1}`.length + 8)) * 1.8
(75 / (`${turnObj.year ?? 1}`.length + 8)) * 1.8
)}px`,
overflow: 'hidden',
}"
@@ -136,7 +136,7 @@
:group-select="false"
group-values="values"
group-label="category"
label="title"
label="searchText"
track-by="value"
open-direction="top"
:show-labels="false"
@@ -149,7 +149,34 @@
:maxHeight="400"
>
<template v-slot:noResult>검색 결과가 없습니다.</template>
<template v-slot:option="props"><!--FIXME: 카테고리--><span :class="props.option.compensation>0?'compensatePositive':(props.option.compensation<0?'compensateNegative':'compensateNeutral')">{{ props.option.title }}</span></template>
<template v-slot:option="props"
><!--FIXME: 카테고리-->
<template v-if="props.option.title">
<span
class="compensatePositive"
v-if="props.option.compensation > 0"
>▲</span
>
<span
class="compensateNegative"
v-else-if="props.option.compensation < 0"
>▼</span
>
<span class="compensateNeutral" v-else></span>
<span :class="[
props.option.possible?'':'commandImpossible',
]">
{{ props.option.title }}
</span>
</template>
<template v-else-if="props.option.category">
{{ props.option.category }}
</template>
</template>
<template v-slot:singleLabel="props">
{{ props.option.simpleName }}
</template>
</v-multiselect>
</div>
<div class="col-3 d-grid">
@@ -167,16 +194,20 @@ import { stringifyUrl } from "query-string";
import { defineComponent } from "vue";
import { formatTime } from "./util/formatTime";
import { joinYearMonth } from "./util/joinYearMonth";
import { mb_strwidth } from "./util/mb_strwidth";
import { parseTime } from "./util/parseTime";
import { parseYearMonth } from "./util/parseYearMonth";
import { sammoAPI } from "./util/sammoAPI";
import { filter초성 } from "./util/filter초성";
type commandItem = {
value: string;
title: string;
compensation: number;
simpleName: string;
possible: boolean;
reqArg: boolean;
searchText?: string;
};
declare const maxTurn: number;
@@ -251,7 +282,7 @@ export default defineComponent({
this.serverNow = formatTime(serverNow, "HH:mm:ss");
setTimeout(() => {
this.updateNow();
}, 250);
}, 1000 - serverNow.getMilliseconds());
},
toggleTurn(turnIdx: number) {
this.pressed[turnIdx] = !this.pressed[turnIdx];
@@ -352,14 +383,22 @@ export default defineComponent({
for (const obj of result.turn) {
const [year, month] = parseYearMonth(yearMonth);
let tooltip: string | undefined = undefined;
let tooltip: string[] = [];
let style: Record<string, unknown> = {};
const brief = obj.brief;
if (yearMonth <= autorunLimitYearMonth) {
if (obj.brief == "휴식") {
obj.brief = "휴식<small>(자율 행동)</small>";
}
style.color = "#aaffff";
tooltip = `자율 행동 기간: ${autorunLimitYear}년 ${autorunLimitMonth}월까지`;
tooltip.push(`자율 행동 기간: ${autorunLimitYear}년 ${autorunLimitMonth}월까지`);
}
if(mb_strwidth(brief) > 22){
tooltip.push(brief);
}
reservedCommandList.push({
@@ -367,7 +406,7 @@ export default defineComponent({
year,
month,
time: formatTime(nextTurnTime, "HH:mm"),
tooltip,
tooltip: tooltip.length==0?undefined:tooltip.join("\n"),
style,
});
@@ -423,12 +462,21 @@ export default defineComponent({
setTimeout(() => {
this.updateNow();
}, 250);
}, 1000 - serverNowObj.getMilliseconds());
const pressed = Array.from<boolean>({ length: maxTurn }).fill(false);
pressed[0] = true;
const selectedCommand = commandList[0].values[0];
for(const subCategory of commandList){
for(const command of subCategory.values){
if(command.searchText){
continue;
}
const filteredText = filter초성(command.simpleName).replace(/\s+/g, '');
command.searchText = `${command.simpleName} ${filteredText}`
}
}
const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
length: maxTurn,
@@ -473,7 +521,7 @@ export default defineComponent({
.commandTable {
width: 100%;
display: grid;
grid-template-columns: minmax(30px, 1fr) minmax(70px, 2.5fr) minmax(40px, 1fr) 5fr;
grid-template-columns: minmax(30px, 1fr) minmax(75px, 2.5fr) minmax(40px, 1fr) 5fr;
//30, 70, 37.65, 160
}
@@ -481,6 +529,11 @@ export default defineComponent({
.commandPad {
margin-left: 10px;
.turn_pad {
overflow: hidden;
text-overflow: ellipsis;
}
.multiselect__content-wrapper {
width: 133.3%;
}
@@ -532,5 +585,8 @@ export default defineComponent({
.turn_pad .turn_text {
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
hwe/ts/util/filter초성.ts
+17
View File
@@ -0,0 +1,17 @@
export function filter초성(text: string): string {
const 초성 = [
"ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ",
"ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"
];
const result: string[] = [];
for (const char of text) {
const code = (char.codePointAt(0) ?? 0) - 44032;
if (0 <= code && code < 11172) {
result.push(초성[~~(code / 588)]);
}
else {
result.push(char);
}
}
return result.join('');
}