feat: select paired emote lines from own character
This commit is contained in:
+34
-10
@@ -10,7 +10,7 @@ import { EMOTE_COOLDOWN_MS, EMOTE_IDS, EMOTE_LABELS, EMOTE_LINES, type EmoteId }
|
||||
import { sound } from './sound.js';
|
||||
|
||||
const fighter = (i: number, appearance?: FighterAppearance) => `<div class="fighter" data-fighter="${i}">
|
||||
<div class="avatar"><div class="emote-bubble" role="status" hidden></div><div class="aura"></div><div class="motion-trails"><i></i><i></i><i></i></div><div class="character-direction">${fighterArt(i, false, appearance)}</div>${ashPileArt()}<div class="projectile"></div><div class="shield"></div><div class="impact"></div></div>
|
||||
<div class="avatar"><div class="emote-bubble" role="status" hidden></div><div class="aura"></div><div class="motion-trails"><i></i><i></i><i></i></div><div class="character-direction">${fighterArt(i, false, appearance)}</div>${ashPileArt()}<div class="projectile"></div><div class="shield"></div><div class="impact"></div><button type="button" class="emote-trigger" data-emote-trigger="${i}" aria-label="내 캐릭터 감정표현 선택" aria-expanded="false" aria-controls="emote-choices" hidden></button></div>
|
||||
<div class="fighter-caption"><span class="choice-status"></span><span class="action-label"></span><span class="energy-change" aria-hidden="true"></span></div>
|
||||
</div>`;
|
||||
|
||||
@@ -19,17 +19,38 @@ export function createMatchView(container: HTMLElement, onAction: (action: Actio
|
||||
<div class="timing"><span class="selection-status" role="status"></span><span class="time-label" aria-label="남은 시간"></span><div class="time-track" role="progressbar" aria-label="남은 선택 시간" aria-valuemin="0" aria-valuemax="100"><span></span></div></div>
|
||||
<div class="arena"><div class="arena-floor" aria-hidden="true"></div><div class="result-banner" hidden><h2></h2><p class="finish-reason"></p></div>${fighter(0, appearances?.[0])}<div class="duel-cue"><span class="versus" aria-hidden="true">VS</span><strong class="countdown-number" role="status"></strong></div><span class="clash-label" role="status"></span><div class="clash-burst" aria-hidden="true"></div>${fighter(1, appearances?.[1])}</div>
|
||||
<div class="player-controls" role="group" aria-label="내 행동 선택"><div class="energy">${actionIcon('charge')}<strong class="energy-count"></strong></div><div class="action-buttons">${ACTION_IDS.map(id => `<button data-action="${id}" aria-label="${ACTIONS[id].name}, ${ACTIONS[id].effect}${ACTIONS[id].cost ? `, 기 ${ACTIONS[id].cost} 소모` : ''}"><span class="action-symbol">${actionIcon(id)}</span><strong>${ACTIONS[id].name}</strong><small>${id === 'charge' || id === 'guard' ? ACTIONS[id].effect : `기 ${ACTIONS[id].cost} 소모`}</small><span class="chosen-mark">${checkIcon}</span></button>`).join('')}</div></div>
|
||||
<details class="emote-menu"><summary>감정표현</summary><div>${EMOTE_IDS.map(id => `<button type="button" data-emote="${id}">${EMOTE_LABELS[id]}</button>`).join('')}</div></details>
|
||||
<div class="emote-menu" id="emote-choices" role="group" aria-label="감정표현 선택" hidden>${EMOTE_IDS.map(id => `<button type="button" data-emote="${id}">${EMOTE_LABELS[id]}</button>`).join('')}</div>
|
||||
<div class="match-result" hidden><div class="result-stats"></div><p class="save-status" role="status"></p><div class="split"><button class="rematch primary">다시 대전</button><button class="home-return">시작 화면</button></div><p class="rematch-status" role="status"></p></div>`;
|
||||
const arena = container.querySelector<HTMLElement>('.arena')!;
|
||||
const emoteMenu = container.querySelector<HTMLDetailsElement>('.emote-menu')!;
|
||||
let emoteReadyAt = 0, sendingEmote = false;
|
||||
const emoteMenu = container.querySelector<HTMLElement>('.emote-menu')!;
|
||||
let emoteReadyAt = 0, sendingEmote = false, emoteOpen = false;
|
||||
const emoteTriggers = Array.from(container.querySelectorAll<HTMLButtonElement>('[data-emote-trigger]'));
|
||||
function closeEmotes(restoreFocus = false) {
|
||||
emoteOpen = false; emoteMenu.hidden = true;
|
||||
emoteTriggers.forEach(button => button.setAttribute('aria-expanded', 'false'));
|
||||
if (restoreFocus) emoteTriggers.find(button => Number(button.dataset.emoteTrigger) === current?.selfIndex)?.focus();
|
||||
}
|
||||
emoteTriggers.forEach(button => {
|
||||
button.onclick = () => {
|
||||
if (!current || !onEmote || Number(button.dataset.emoteTrigger) !== current.selfIndex || current.phase === 'finished' || !current.opponentPresent) return;
|
||||
if (emoteOpen) { closeEmotes(); return; }
|
||||
const actor = button.getBoundingClientRect(), root = container.getBoundingClientRect();
|
||||
emoteMenu.style.left = `${Math.max(8, Math.min(root.width - 164, actor.left - root.left + actor.width / 2 - 78))}px`;
|
||||
emoteMenu.style.top = `${Math.max(72, actor.top - root.top - 104)}px`;
|
||||
emoteOpen = true; tick();
|
||||
button.setAttribute('aria-expanded', 'true');
|
||||
emoteMenu.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();
|
||||
};
|
||||
});
|
||||
container.onpointerdown = event => {
|
||||
if (event.target instanceof Element && !event.target.closest('.emote-menu, .emote-trigger')) closeEmotes();
|
||||
};
|
||||
container.onkeydown = event => { if (event.key === 'Escape' && emoteOpen) { event.preventDefault(); closeEmotes(true); } };
|
||||
emoteMenu.querySelectorAll<HTMLButtonElement>('[data-emote]').forEach(button => {
|
||||
button.onclick = async () => {
|
||||
if (!current || sendingEmote || Date.now() < emoteReadyAt) return;
|
||||
const matchId = current.matchId;
|
||||
sendingEmote = true; emoteMenu.open = false;
|
||||
emoteMenu.querySelector('summary')?.focus();
|
||||
sendingEmote = true; closeEmotes(true);
|
||||
try { if (await onEmote?.(button.dataset.emote as EmoteId) && current?.matchId === matchId) emoteReadyAt = Date.now() + EMOTE_COOLDOWN_MS; }
|
||||
finally { sendingEmote = false; }
|
||||
};
|
||||
@@ -70,7 +91,10 @@ export function createMatchView(container: HTMLElement, onAction: (action: Actio
|
||||
arena.hidden = !!introduction;
|
||||
const revealing = resultReported !== s.matchId && !!s.reveal && now < s.reveal.revealEndsAt;
|
||||
const resultVisible = s.phase === 'finished' && !revealing;
|
||||
emoteMenu.hidden = !onEmote || !!introduction || s.phase === 'finished' || !s.opponentPresent;
|
||||
const emotesAvailable = !!onEmote && !introduction && s.phase !== 'finished' && s.opponentPresent;
|
||||
if (!emotesAvailable) closeEmotes();
|
||||
emoteMenu.hidden = !emoteOpen;
|
||||
emoteTriggers.forEach(button => { button.hidden = !emotesAvailable || Number(button.dataset.emoteTrigger) !== s.selfIndex; });
|
||||
emoteMenu.querySelectorAll<HTMLButtonElement>('button').forEach(button => { button.disabled = sendingEmote || Date.now() < emoteReadyAt; });
|
||||
if (resultVisible && resultReported !== s.matchId) renderer.reset();
|
||||
const recovering = !resultVisible && !s.opponentPresent;
|
||||
@@ -113,7 +137,7 @@ export function createMatchView(container: HTMLElement, onAction: (action: Actio
|
||||
const bubble = node.querySelector<HTMLElement>('.emote-bubble');
|
||||
const emote = s.emotes?.[i];
|
||||
if (bubble) {
|
||||
const line = emote && emote.expiresAt > now && !resultVisible ? EMOTE_LINES[(s.appearances ?? appearances)?.[i]?.characterId ?? i]?.[emote.id] : '';
|
||||
const line = emote && emote.expiresAt > now && !resultVisible ? EMOTE_LINES[emote.id]?.[emote.variant] : '';
|
||||
bubble.hidden = !line;
|
||||
if (bubble.textContent !== (line ?? '')) bubble.textContent = line ?? '';
|
||||
}
|
||||
@@ -154,7 +178,7 @@ export function createMatchView(container: HTMLElement, onAction: (action: Actio
|
||||
update(state: LocalMatchState) {
|
||||
if (current?.matchId === state.matchId && current.version > state.version) return;
|
||||
if (lastId !== state.matchId) {
|
||||
emoteReadyAt = 0; emoteMenu.open = false;
|
||||
emoteReadyAt = 0; closeEmotes();
|
||||
cutscene.reset(); renderer.reset(); lastId = state.matchId; busy = false; submission++;
|
||||
el('.match-introduction .queue-fighter').innerHTML = fighterArt(state.selfIndex, false, (state.appearances ?? appearances)?.[state.selfIndex]);
|
||||
}
|
||||
@@ -181,6 +205,6 @@ export function createMatchView(container: HTMLElement, onAction: (action: Actio
|
||||
}
|
||||
cutscene.update(state);
|
||||
tick();
|
||||
}, destroy() { submission++; clearInterval(interval); cutscene.destroy(); renderer.destroy(); sound.stop(); container.innerHTML = ''; current = undefined; },
|
||||
}, destroy() { submission++; clearInterval(interval); cutscene.destroy(); renderer.destroy(); sound.stop(); container.onpointerdown = null; container.onkeydown = null; container.innerHTML = ''; current = undefined; },
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user