feat: add reserved command argument forms

2026-07-26 09:05:17 +00:00
parent f84efafc9a
commit 919a2fccda
9 changed files with 719 additions and 43 deletions
@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+
+type OptionValue = string | number;
+interface CommandOption {
+    value: OptionValue;
+    label: string;
+    color?: string;
+}
+interface CommandInputField {
+    key: string;
+    label: string;
+    kind: 'text' | 'number' | 'boolean' | 'select' | 'numberTuple' | 'hidden';
+    required: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    constValue?: OptionValue;
+    options?: CommandOption[];
+    optionSource?: 'cities' | 'nations' | 'generals' | 'crewTypes' | 'armTypes' | 'nationTypes' | 'colors' | 'items';
+    tupleLabels?: string[];
+}
+interface CommandInputOptions {
+    cities: CommandOption[];
+    nations: CommandOption[];
+    generals: CommandOption[];
+    crewTypes: CommandOption[];
+    armTypes: CommandOption[];
+    nationTypes: CommandOption[];
+    colors: CommandOption[];
+    items: Record<string, CommandOption[]>;
+}
+
+const props = defineProps<{
+    commandKey: string;
+    fields: CommandInputField[];
+    options: CommandInputOptions;
+}>();
+
+const emit = defineEmits<{
+    (event: 'update:args', args: Record<string, unknown>): void;
+    (event: 'update:valid', valid: boolean): void;
+}>();
+
+const values = reactive<Record<string, unknown>>({});
+
+const optionsFor = (field: CommandInputField): CommandOption[] => {
+    if (field.options) return field.options;
+    if (!field.optionSource) return [];
+    if (field.optionSource === 'items') {
+        return props.options.items[String(values.itemType ?? '')] ?? [];
+    }
+    return props.options[field.optionSource];
+};
+
+const defaultValue = (field: CommandInputField): unknown => {
+    if (field.kind === 'hidden') return field.constValue;
+    if (field.kind === 'boolean') return true;
+    if (field.kind === 'numberTuple') return [field.min ?? 0, field.min ?? 0];
+    if (field.kind === 'number') return field.min ?? 0;
+    if (field.kind === 'select') return optionsFor(field)[0]?.value ?? '';
+    return '';
+};
+
+const initialize = () => {
+    for (const key of Object.keys(values)) delete values[key];
+    for (const field of props.fields) values[field.key] = defaultValue(field);
+    const itemCodeField = props.fields.find((field) => field.key === 'itemCode');
+    if (itemCodeField) values.itemCode = defaultValue(itemCodeField);
+};
+
+const setSelectValue = (field: CommandInputField, rawValue: string) => {
+    const option = optionsFor(field).find((entry) => String(entry.value) === rawValue);
+    values[field.key] = option?.value ?? rawValue;
+    if (field.key === 'itemType') {
+        const itemField = props.fields.find((entry) => entry.key === 'itemCode');
+        if (itemField) values.itemCode = defaultValue(itemField);
+    }
+};
+
+const setTupleValue = (field: CommandInputField, index: number, rawValue: string) => {
+    const tuple = Array.isArray(values[field.key]) ? [...(values[field.key] as unknown[])] : [0, 0];
+    tuple[index] = Number(rawValue);
+    values[field.key] = tuple;
+};
+
+const isValid = computed(() =>
+    props.fields.every((field) => {
+        const value = values[field.key];
+        if (field.kind === 'text') {
+            const length = typeof value === 'string' ? value.trim().length : 0;
+            return (!field.required || length > 0) && (field.min === undefined || length >= field.min) &&
+                (field.max === undefined || length <= field.max);
+        }
+        if (field.kind === 'number') {
+            return typeof value === 'number' && Number.isFinite(value) &&
+                (field.min === undefined || value >= field.min) && (field.max === undefined || value <= field.max);
+        }
+        if (field.kind === 'numberTuple') {
+            return Array.isArray(value) && value.length === 2 &&
+                value.every((entry) => typeof entry === 'number' && Number.isFinite(entry) &&
+                    (field.min === undefined || entry >= field.min) && (field.max === undefined || entry <= field.max));
+        }
+        if (field.kind === 'select') return optionsFor(field).some((option) => option.value === value);
+        return value !== undefined;
+    })
+);
+
+watch(() => [props.commandKey, props.fields, props.options] as const, initialize, { immediate: true, deep: true });
+watch(
+    () => ({ ...values }),
+    () => {
+        emit('update:args', { ...values });
+        emit('update:valid', isValid.value);
+    },
+    { immediate: true, deep: true }
+);
+</script>
+
+<template>
+    <div v-if="props.fields.length" class="command-argument-form" data-testid="command-argument-form">
+        <div
+            v-for="field in props.fields.filter((entry) => entry.kind !== 'hidden')"
+            :key="field.key"
+            class="argument-row"
+        >
+            <label :for="`command-arg-${field.key}`">{{ field.label }}</label>
+            <input
+                v-if="field.kind === 'text'"
+                :id="`command-arg-${field.key}`"
+                :value="String(values[field.key] ?? '')"
+                :minlength="field.min"
+                :maxlength="field.max"
+                @input="values[field.key] = ($event.target as HTMLInputElement).value"
+            />
+            <input
+                v-else-if="field.kind === 'number'"
+                :id="`command-arg-${field.key}`"
+                type="number"
+                :value="Number(values[field.key] ?? 0)"
+                :min="field.min"
+                :max="field.max"
+                :step="field.step"
+                @input="values[field.key] = Number(($event.target as HTMLInputElement).value)"
+            />
+            <select
+                v-else-if="field.kind === 'select'"
+                :id="`command-arg-${field.key}`"
+                :value="String(values[field.key] ?? '')"
+                @change="setSelectValue(field, ($event.target as HTMLSelectElement).value)"
+            >
+                <option v-for="option in optionsFor(field)" :key="String(option.value)" :value="String(option.value)">
+                    {{ option.label }}
+                </option>
+            </select>
+            <div v-else-if="field.kind === 'boolean'" class="boolean-options">
+                <button
+                    type="button"
+                    :class="{ selected: values[field.key] === true }"
+                    @click="values[field.key] = true"
+                >
+                    {{ field.key === 'buyRice' ? '쌀 구매' : field.key === 'isGold' ? '금' : '예' }}
+                </button>
+                <button
+                    type="button"
+                    :class="{ selected: values[field.key] === false }"
+                    @click="values[field.key] = false"
+                >
+                    {{ field.key === 'buyRice' ? '쌀 판매' : field.key === 'isGold' ? '쌀' : '아니오' }}
+                </button>
+            </div>
+            <div v-else-if="field.kind === 'numberTuple'" class="tuple-options">
+                <label v-for="(tupleLabel, index) in field.tupleLabels ?? ['1', '2']" :key="tupleLabel">
+                    <span>{{ tupleLabel }}</span>
+                    <input
+                        type="number"
+                        :value="(values[field.key] as number[] | undefined)?.[index] ?? 0"
+                        :min="field.min"
+                        :max="field.max"
+                        :step="field.step"
+                        @input="setTupleValue(field, index, ($event.target as HTMLInputElement).value)"
+                    />
+                </label>
+            </div>
+        </div>
+        <div v-if="!isValid" class="argument-error" role="alert">필수 입력을 확인하세요.</div>
+    </div>
+</template>
+
+<style scoped>
+.command-argument-form {
+    border: 1px solid rgba(201, 164, 90, 0.35);
+    font-size: 0.75rem;
+}
+
+.argument-row {
+    display: grid;
+    grid-template-columns: minmax(76px, 0.36fr) 1fr;
+    min-height: 34px;
+    align-items: center;
+}
+
+.argument-row:nth-child(odd) {
+    background: rgba(255, 255, 255, 0.035);
+}
+
+.argument-row > label {
+    padding: 6px 8px;
+    color: rgba(232, 221, 196, 0.72);
+}
+
+input,
+select {
+    min-width: 0;
+    margin: 4px 6px 4px 0;
+    border: 1px solid rgba(201, 164, 90, 0.45);
+    background: rgba(7, 9, 12, 0.82);
+    color: #e8ddc4;
+    padding: 5px 6px;
+    font: inherit;
+}
+
+.boolean-options,
+.tuple-options {
+    display: flex;
+    gap: 5px;
+    padding: 4px 6px 4px 0;
+}
+
+.boolean-options button {
+    flex: 1;
+    border: 1px solid rgba(201, 164, 90, 0.35);
+    padding: 5px;
+}
+
+.boolean-options button.selected {
+    border-color: #c9a45a;
+    background: rgba(201, 164, 90, 0.18);
+    color: #f5e4bd;
+}
+
+.tuple-options label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+}
+
+.tuple-options input {
+    width: 80px;
+    margin: 0;
+}
+
+.argument-error {
+    padding: 5px 8px;
+    color: #ff9a8f;
+    border-top: 1px solid rgba(201, 164, 90, 0.2);
+}
+</style>
@@ -1,7 +1,26 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import CommandArgumentForm from './CommandArgumentForm.vue';
 import CommandSelectForm from './CommandSelectForm.vue';

+interface TurnCommandOption {
+    value: string | number;
+    label: string;
+    color?: string;
+}
+interface TurnCommandInputField {
+    key: string;
+    label: string;
+    kind: 'text' | 'number' | 'boolean' | 'select' | 'numberTuple' | 'hidden';
+    required: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    constValue?: string | number;
+    options?: TurnCommandOption[];
+    optionSource?: 'cities' | 'nations' | 'generals' | 'crewTypes' | 'armTypes' | 'nationTypes' | 'colors' | 'items';
+    tupleLabels?: string[];
+}
 interface TurnCommandAvailability {
    key: string;
    name: string;
@@ -9,6 +28,7 @@ interface TurnCommandAvailability {
    status: 'available' | 'blocked' | 'needsInput' | 'unknown';
    possible: boolean;
    reason?: string;
+    inputFields: TurnCommandInputField[];
 }

 interface TurnCommandGroup {
@@ -19,6 +39,16 @@ interface TurnCommandGroup {
 interface TurnCommandTable {
    general: TurnCommandGroup[];
    nation: TurnCommandGroup[];
+    inputOptions: {
+        cities: TurnCommandOption[];
+        nations: TurnCommandOption[];
+        generals: TurnCommandOption[];
+        crewTypes: TurnCommandOption[];
+        armTypes: TurnCommandOption[];
+        nationTypes: TurnCommandOption[];
+        colors: TurnCommandOption[];
+        items: Record<string, TurnCommandOption[]>;
+    };
 }

 interface SelectedCityInfo {
@@ -50,67 +80,74 @@ const props = defineProps<{
 }>();

 const emit = defineEmits<{
-    (event: 'set-general-turn', payload: { index: number; action: string }): void;
+    (event: 'set-general-turn', payload: { index: number; action: string; args: Record<string, unknown> }): void;
    (event: 'shift-general-turns', amount: number): void;
-    (event: 'set-nation-turn', payload: { index: number; action: string }): void;
+    (event: 'set-nation-turn', payload: { index: number; action: string; args: Record<string, unknown> }): void;
    (event: 'shift-nation-turns', amount: number): void;
 }>();

 const activeCategory = ref('');
 const selectedCommand = ref<TurnCommandAvailability | null>(null);
+const selectedScope = ref<'general' | 'nation' | null>(null);
+const commandArgs = ref<Record<string, unknown>>({});
+const commandArgsValid = ref(false);

 const handleSelect = (commandKey: string) => {
    if (!props.commandTable) {
        selectedCommand.value = null;
+        selectedScope.value = null;
        return;
    }
-    const allGroups = [...props.commandTable.general, ...props.commandTable.nation];
-    for (const group of allGroups) {
-        const match = group.values.find((entry) => entry.key === commandKey);
-        if (match) {
-            selectedCommand.value = match;
-            return;
+    for (const scope of ['general', 'nation'] as const) {
+        for (const group of props.commandTable[scope]) {
+            const match = group.values.find((entry) => entry.key === commandKey);
+            if (match) {
+                selectedCommand.value = match;
+                selectedScope.value = scope;
+                commandArgs.value = {};
+                commandArgsValid.value = !match.reqArg;
+                return;
+            }
        }
    }
    selectedCommand.value = null;
+    selectedScope.value = null;
 };

-const canReserveSelected = () => {
+const canReserveSelected = (scope: 'general' | 'nation') => {
    if (!selectedCommand.value) {
        return false;
    }
+    if (selectedScope.value !== scope) return false;
    if (!selectedCommand.value.possible) {
        return false;
    }
-    if (selectedCommand.value.status !== 'available') {
+    if (!['available', 'needsInput'].includes(selectedCommand.value.status)) {
        return false;
    }
-    if (selectedCommand.value.reqArg) {
-        return false;
-    }
-    return true;
+    return commandArgsValid.value;
 };

 const reserveGeneralTurn = (index: number) => {
    if (!selectedCommand.value) {
        return;
    }
-    emit('set-general-turn', { index, action: selectedCommand.value.key });
+    emit('set-general-turn', { index, action: selectedCommand.value.key, args: commandArgs.value });
 };

 const reserveNationTurn = (index: number) => {
    if (!selectedCommand.value) {
        return;
    }
-    emit('set-nation-turn', { index, action: selectedCommand.value.key });
+    emit('set-nation-turn', { index, action: selectedCommand.value.key, args: commandArgs.value });
 };

 const clearGeneralTurn = (index: number) => {
-    emit('set-general-turn', { index, action: '휴식' });
+    emit('set-general-turn', { index, action: '휴식', args: {} });
 };

 const clearNationTurn = (index: number) => {
-    emit('set-nation-turn', { index, action: '휴식' });
+    emit('set-nation-turn', { index, action: '휴식', args: {} });
 };

 const canNationReserve = () =>
@@ -146,6 +183,14 @@ const canNationReserve = () =>
            </div>
            <div v-else class="value muted">명령을 선택하세요.</div>
        </div>
+        <CommandArgumentForm
+            v-if="selectedCommand?.reqArg && props.commandTable"
+            :command-key="selectedCommand.key"
+            :fields="selectedCommand.inputFields"
+            :options="props.commandTable.inputOptions"
+            @update:args="commandArgs = $event"
+            @update:valid="commandArgsValid = $event"
+        />
        <div class="reserved-section">
            <div class="reserved-header">
                <span>일반 예턴</span>
@@ -160,7 +205,7 @@ const canNationReserve = () =>
                    <div class="turn-label">#{{ turn.index + 1 }}</div>
                    <div class="turn-action">{{ turn.action }}</div>
                    <div class="turn-buttons">
-                        <button :disabled="!canReserveSelected()" @click="reserveGeneralTurn(turn.index)">
+                        <button :disabled="!canReserveSelected('general')" @click="reserveGeneralTurn(turn.index)">
                            배치
                        </button>
                        <button class="ghost" @click="clearGeneralTurn(turn.index)">휴식</button>
@@ -183,7 +228,7 @@ const canNationReserve = () =>
                    <div class="turn-label">#{{ turn.index + 1 }}</div>
                    <div class="turn-action">{{ turn.action }}</div>
                    <div class="turn-buttons">
-                        <button :disabled="!canReserveSelected()" @click="reserveNationTurn(turn.index)">
+                        <button :disabled="!canReserveSelected('nation')" @click="reserveNationTurn(turn.index)">
                            배치
                        </button>
                        <button class="ghost" @click="clearNationTurn(turn.index)">휴식</button>
@@ -34,14 +34,16 @@ const emit = defineEmits<{

 const categories = computed(() => {
    if (!props.commandTable) {
-        return [] as Array<{ label: string; category: string; groupType: 'general' | 'nation' }>;
+        return [] as Array<{ id: string; label: string; category: string; groupType: 'general' | 'nation' }>;
    }
    const general = props.commandTable.general.map((group) => ({
+        id: `general:${group.category}`,
        label: group.category,
        category: group.category,
        groupType: 'general' as const,
    }));
    const nation = props.commandTable.nation.map((group) => ({
+        id: `nation:${group.category}`,
        label: `국가:${group.category}`,
        category: group.category,
        groupType: 'nation' as const,
@@ -54,11 +56,9 @@ const selectedGroup = computed(() => {
    if (!props.commandTable) {
        return null;
    }
-    const base = props.commandTable.general.find((group) => group.category === selectedCategory.value);
-    if (base) {
-        return base;
-    }
-    return props.commandTable.nation.find((group) => group.category === selectedCategory.value) ?? null;
+    const [scope, ...categoryParts] = selectedCategory.value.split(':');
+    const category = categoryParts.join(':');
+    return props.commandTable[scope === 'nation' ? 'nation' : 'general'].find((group) => group.category === category) ?? null;
 });

 watch(
@@ -77,8 +77,8 @@ watch(
            selectedCategory.value = '';
            return;
        }
-        if (!list.some((item) => item.category === selectedCategory.value)) {
-            selectedCategory.value = list[0].category;
+        if (!list.some((item) => item.id === selectedCategory.value)) {
+            selectedCategory.value = list[0].id;
        }
    },
    { immediate: true }
@@ -116,9 +116,9 @@ const statusLabel = (command: CommandAvailability) => {
            <div class="category-list">
                <button
                    v-for="category in categories"
-                    :key="category.label"
-                    :class="['category-btn', { active: selectedCategory === category.category }]"
-                    @click="selectedCategory = category.category"
+                    :key="category.id"
+                    :class="['category-btn', { active: selectedCategory === category.id }]"
+                    @click="selectedCategory = category.id"
                >
                    {{ category.label }}
                </button>
@@ -375,7 +375,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
        }
    };

-    const setGeneralTurn = async (turnIndex: number, action: string) => {
+    const setGeneralTurn = async (turnIndex: number, action: string, args: Record<string, unknown> = {}) => {
        const id = generalId.value;
        if (!id) {
            return;
@@ -385,7 +385,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
                generalId: id,
                turnIndex,
                action,
-                args: {},
+                args,
            });
            reservedGeneralTurns.value = result.turns;
        } catch (err) {
@@ -409,7 +409,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
        }
    };

-    const setNationTurn = async (turnIndex: number, action: string) => {
+    const setNationTurn = async (turnIndex: number, action: string, args: Record<string, unknown> = {}) => {
        const id = generalId.value;
        const currentGeneral = general.value;
        if (!id || !currentGeneral) {
@@ -423,7 +423,7 @@ export const useMainDashboardStore = defineStore('mainDashboard', () => {
                generalId: id,
                turnIndex,
                action,
-                args: {},
+                args,
            });
            reservedNationTurns.value = result.turns;
        } catch (err) {
@@ -5,6 +5,7 @@ import { addMinutes, format } from 'date-fns';
 import PanelCard from '../components/ui/PanelCard.vue';
 import SkeletonLines from '../components/ui/SkeletonLines.vue';
 import ChiefTurnCard from '../components/chief/ChiefTurnCard.vue';
+import CommandArgumentForm from '../components/main/CommandArgumentForm.vue';
 import CommandSelectForm from '../components/main/CommandSelectForm.vue';
 import { trpc } from '../utils/trpc';
 import { formatOfficerLevelText } from '../utils/nationFormat';
@@ -48,6 +49,19 @@ type CommandAvailability = {
    status: 'available' | 'blocked' | 'needsInput' | 'unknown';
    possible: boolean;
    reason?: string;
+    inputFields: Array<{
+        key: string;
+        label: string;
+        kind: 'text' | 'number' | 'boolean' | 'select' | 'numberTuple' | 'hidden';
+        required: boolean;
+        min?: number;
+        max?: number;
+        step?: number;
+        constValue?: string | number;
+        options?: Array<{ value: string | number; label: string; color?: string }>;
+        optionSource?: 'cities' | 'nations' | 'generals' | 'crewTypes' | 'armTypes' | 'nationTypes' | 'colors' | 'items';
+        tupleLabels?: string[];
+    }>;
 };

 type CommandGroup = {
@@ -58,6 +72,16 @@ type CommandGroup = {
 type CommandTable = {
    general: CommandGroup[];
    nation: CommandGroup[];
+    inputOptions: {
+        cities: Array<{ value: string | number; label: string; color?: string }>;
+        nations: Array<{ value: string | number; label: string; color?: string }>;
+        generals: Array<{ value: string | number; label: string; color?: string }>;
+        crewTypes: Array<{ value: string | number; label: string; color?: string }>;
+        armTypes: Array<{ value: string | number; label: string; color?: string }>;
+        nationTypes: Array<{ value: string | number; label: string; color?: string }>;
+        colors: Array<{ value: string | number; label: string; color?: string }>;
+        items: Record<string, Array<{ value: string | number; label: string; color?: string }>>;
+    };
 };

 const chiefApi = trpc as unknown as {
@@ -89,6 +113,8 @@ const commandTable = ref<CommandTable | null>(null);
 const selectedChiefLevel = ref<number | null>(null);
 const activeCategory = ref('');
 const selectedCommandKey = ref<string | null>(null);
+const commandArgs = ref<Record<string, unknown>>({});
+const commandArgsValid = ref(false);

 const isMobile = useMediaQuery('(max-width: 1024px)');

@@ -210,6 +236,11 @@ const selectedCommand = computed<CommandAvailability | null>(() => {
    return null;
 });

+watch(selectedCommand, (command) => {
+    commandArgs.value = {};
+    commandArgsValid.value = Boolean(command && !command.reqArg);
+});
+
 const canReserveSelected = computed(() => {
    if (!selectedCommand.value) {
        return false;
@@ -217,10 +248,10 @@ const canReserveSelected = computed(() => {
    if (!selectedCommand.value.possible) {
        return false;
    }
-    if (selectedCommand.value.status !== 'available') {
+    if (!['available', 'needsInput'].includes(selectedCommand.value.status)) {
        return false;
    }
-    return !selectedCommand.value.reqArg;
+    return commandArgsValid.value;
 });

 const selectedChief = computed<ChiefEntry | null>(() => {
@@ -308,7 +339,7 @@ const reserveTurn = async (turnIndex: number) => {
            generalId: data.value.me.id,
            turnIndex,
            action: selectedCommand.value.key,
-            args: {},
+            args: commandArgs.value,
        });
        updateMyTurns(result.turns);
    } catch (err) {
@@ -402,6 +433,14 @@ const shiftTurns = async (amount: number) => {
                    </div>
                    <div v-else class="value muted">명령을 선택하세요.</div>
                </div>
+                <CommandArgumentForm
+                    v-if="selectedCommand?.reqArg && commandTable"
+                    :command-key="selectedCommand.key"
+                    :fields="selectedCommand.inputFields"
+                    :options="commandTable.inputOptions"
+                    @update:args="commandArgs = $event"
+                    @update:valid="commandArgsValid = $event"
+                />
                <div class="turn-actions">
                    <button @click="shiftTurns(-1)">앞당김</button>
                    <button @click="shiftTurns(1)">미루기</button>
@@ -479,6 +518,14 @@ const shiftTurns = async (amount: number) => {
                            </div>
                            <div v-else class="value muted">명령을 선택하세요.</div>
                        </div>
+                        <CommandArgumentForm
+                            v-if="selectedCommand?.reqArg && commandTable"
+                            :command-key="selectedCommand.key"
+                            :fields="selectedCommand.inputFields"
+                            :options="commandTable.inputOptions"
+                            @update:args="commandArgs = $event"
+                            @update:valid="commandArgsValid = $event"
+                        />
                        <div class="turn-actions">
                            <button @click="shiftTurns(-1)">앞당김</button>
                            <button @click="shiftTurns(1)">미루기</button>
@@ -55,16 +55,16 @@ const {
    realtimeLabel,
 } = storeToRefs(dashboard);

-const reserveGeneralTurn = (payload: { index: number; action: string }) => {
-    void dashboard.setGeneralTurn(payload.index, payload.action);
+const reserveGeneralTurn = (payload: { index: number; action: string; args: Record<string, unknown> }) => {
+    void dashboard.setGeneralTurn(payload.index, payload.action, payload.args);
 };

 const shiftGeneralTurns = (amount: number) => {
    void dashboard.shiftGeneralTurns(amount);
 };

-const reserveNationTurn = (payload: { index: number; action: string }) => {
-    void dashboard.setNationTurn(payload.index, payload.action);
+const reserveNationTurn = (payload: { index: number; action: string; args: Record<string, unknown> }) => {
+    void dashboard.setNationTurn(payload.index, payload.action, payload.args);
 };

 const shiftNationTurns = (amount: number) => {