diff --git a/src/main.js b/src/main.js index 4aee775..e56b52e 100644 --- a/src/main.js +++ b/src/main.js @@ -321,6 +321,13 @@ function addShootForOwner() { if (play === state.play) { state = workingState; renderUi(); document.querySelector('#status').textContent = hasShoot(state.play) ? '슛 행동은 전술당 1개만 가능합니다' : '슛은 마지막 단계의 공 소유 선수만 가능합니다'; return; } state = workingState; const track = play.sequences[sequenceIndex].tracks.find((candidate) => candidate.playerId === ownerId); updatePlay(play, '슛 행동 추가', track.actions.length - 1); } +function removeShootAction() { + const shot = state.play.sequences.flatMap((sequence, sequenceIndex) => sequence.tracks.flatMap((track) => track.actions.map((action, actionIndex) => ({ action, actionIndex, playerId: track.playerId, sequenceIndex })))).find(({ action }) => action.type === 'shoot'); + if (!shot) return; + const play = removeAction(state.play, shot.sequenceIndex, shot.playerId, shot.actionIndex); + if (play === state.play) return; + setState({ ...commitActionEdit(state, play, shot.sequenceIndex, shot.playerId), selectedAction: -1 }, '슛 행동 삭제'); +} function renderUi() { const readOnly = currentTeam?.role === 'viewer'; @@ -356,6 +363,7 @@ function renderUi() { document.querySelector('#delete-action').disabled = state.mode === 'start' || state.selectedAction < 0; const shootButton = document.querySelector('#shoot-action'); shootButton.hidden = selectedPlayer?.id !== finalOwnerId; shootButton.disabled = playHasShoot || state.mode === 'start' || state.selectedSequence !== state.play.sequences.length - 1; + const removeShootButton = document.querySelector('#remove-shoot-action'); removeShootButton.hidden = !playHasShoot; const passButton = document.querySelector('[data-mode="pass"]'); const canPass = selectedPlayer?.team === 'offense' && selectedPlayer.id === finalOwnerId; passButton.hidden = !canPass; passButton.disabled = playHasShoot || !canPass; document.querySelector('#add-sequence').disabled = playHasShoot; @@ -454,6 +462,7 @@ app.addEventListener('click', (event) => { if (event.target.closest('#save-play')) { saveCurrentPlay(); return; } if (event.target.closest('#load-play')) { loadSelectedPlay(); return; } if (event.target.closest('#shoot-action')) { addShootForOwner(); return; } + if (event.target.closest('#remove-shoot-action')) { removeShootAction(); return; } if (event.target.closest('#undo')) { const next = editorHistory.undo(state); if (next !== state) setState(next, '실행 취소', false); return; } if (event.target.closest('#redo')) { const next = editorHistory.redo(state); if (next !== state) setState(next, '다시 실행', false); return; } if (event.target.closest('#set-ball-owner')) { const selectedPlayer = state.play.players.find((player) => player.id === state.selectedPlayerId); if (selectedPlayer?.team === 'offense') { const play = setSequenceBallOwner(state.play, state.selectedSequence, selectedPlayer.id); if (play === state.play) document.querySelector('#status').textContent = hasShoot(state.play) ? '슛 행동을 먼저 삭제하세요' : '먼저 패스 행동을 삭제하세요'; else setState({ ...state, play, mode: 'move', selectedAction: -1 }, `Sequence ${state.selectedSequence + 1} 공 소유자 O${selectedPlayer.number}`); } return; } diff --git a/src/style.css b/src/style.css index 389ecc2..1334b50 100644 --- a/src/style.css +++ b/src/style.css @@ -72,6 +72,8 @@ h1 { display:flex; align-items:center; gap:10px; color:#f4f2e8; font-size:17px; @media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } } .mode-group button span { white-space: nowrap; } +.mode-group #remove-shoot-action { color:#a34b3f; } +.mode-group #remove-shoot-action span { white-space:normal; line-height:1.1; } .account-gate { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px; background:linear-gradient(145deg,#edf2eb,#f8f9f6 55%,#f5e8df); overflow:auto; } .account-card { width:min(470px,100%); padding:32px; border:1px solid #dfe7dc; border-radius:20px; background:#fff; box-shadow:0 24px 70px #23342e18; } .account-brand { display:flex; align-items:center; gap:10px; margin-bottom:34px; } .account-brand .brand-mark { width:40px; height:40px; } .account-brand strong { font-size:28px; letter-spacing:-.06em; line-height:1; } .account-brand strong span { font-weight:400; } .account-brand small { display:block; margin-top:5px; color:var(--muted); font-size:7px; letter-spacing:.14em; } diff --git a/src/ui.js b/src/ui.js index d7ccd6d..43ac222 100644 --- a/src/ui.js +++ b/src/ui.js @@ -107,7 +107,7 @@ export function editorLayout() {