Web Dev Solutions

Catalin Mititiuc

From 3f24534eb775fa26df35a2fbeb909aef3480317f Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Tue, 16 Jul 2024 14:05:08 -0700 Subject: WIP: Turn/torso-twist mech template on keypress --- public/assets/images/counters.svg | 58 ++++++++++++++++++++++++++------- public/assets/images/mech_template.png | Bin 42150 -> 41913 bytes public/index.html | 1 + src/index.js | 1 + src/modules/gameboard.js | 54 +++++++++++++++++++++++++++++- 5 files changed, 101 insertions(+), 13 deletions(-) diff --git a/public/assets/images/counters.svg b/public/assets/images/counters.svg index 952de20..bf91f9f 100644 --- a/public/assets/images/counters.svg +++ b/public/assets/images/counters.svg @@ -74,23 +74,57 @@ - + - - + + + + + - - + + - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/images/mech_template.png b/public/assets/images/mech_template.png index af41f78..506762b 100644 Binary files a/public/assets/images/mech_template.png and b/public/assets/images/mech_template.png differ diff --git a/public/index.html b/public/index.html index 9db6c80..f4b28a9 100644 --- a/public/index.html +++ b/public/index.html @@ -234,6 +234,7 @@ + diff --git a/src/index.js b/src/index.js index 2da4f2f..46f39fd 100644 --- a/src/index.js +++ b/src/index.js @@ -159,6 +159,7 @@ document.querySelectorAll('.set-firing-arc').forEach(el => ); document.querySelector('.set-grenade').addEventListener('click', gameboard.setGrenade); +document.querySelector('.set-mech-template').addEventListener('click', gameboard.setMechTemplate); document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEventListener('input', gameboard.toggleFiringArcVisibility) diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js index 65c4bb1..d35b2b9 100644 --- a/src/modules/gameboard.js +++ b/src/modules/gameboard.js @@ -38,6 +38,10 @@ function isGrenade(el) { return el && el.getAttribute('href') === '#counter-grenade'; } +function isMechTemplate(el) { + return el && el.getAttribute('class') === 'mech-template'; +} + function isClone(counter) { const isClone = counter.classList.contains('clone'), { allegiance: clAl, number: clNum } = counter.dataset; @@ -203,8 +207,9 @@ export function start(el) { const occupant = getCellOccupant(cell); let toPlace = placing.pop(); - if (isGrenade(toPlace)) { + if (isGrenade(toPlace) || isMechTemplate(toPlace)) { getHex(cell).after(toPlace); + removeEventListener("keydown", handleMechTemplateRotation); } else if (toPlace && !occupant) { soldier.place(svg, toPlace, cell); toPlace.removeEventListener('click', selectOffBoard); @@ -266,6 +271,10 @@ export function start(el) { cell.addEventListener('pointerover', () => { const selected = getSelected(); + if (placing[0]?.getAttributeNS(null, 'class') == 'mech-template') { + cell.appendChild(placing[0]); + } + if (selected && svg.querySelector('.grid').contains(selected) && !getLockedSightLine(svg) && cell !== selected.parentElement) { clearSightLine(); drawSightLine(selected.parentElement, cell); @@ -442,3 +451,46 @@ export function setGrenade() { placing.push(counter); } + +function handleMechTemplateRotation(event) { + const counter = placing[0]; + const upper = placing[0].querySelector('use[href="#mech-template-upper"]'); + + if (event.key === 'a') { + let direction = +counter.style.transform.match(/-?\d+/) || 0; + direction -= 60; + counter.style.transform = `rotate(${direction}deg)`; + } else if (event.key === 'd') { + let direction = +counter.style.transform.match(/-?\d+/) || 0; + direction += 60; + counter.style.transform = `rotate(${direction}deg)`; + } else if (event.key === 'q') { + let facing = +upper.style.transform.match(/-?\d+/) || 0; + facing = facing <= -60 ? -60 : facing - 60; + upper.style.transform = `rotate(${facing}deg)`; + } else if (event.key === 'e') { + let facing = +upper.style.transform.match(/-?\d+/) || 0; + facing = facing >= 60 ? 60 : facing + 60; + upper.style.transform = `rotate(${facing}deg)`; + } +} + +export function setMechTemplate() { + const counter = document.createElementNS(svgns, 'g'); + counter.setAttributeNS(null, 'class', 'mech-template'); + counter.style.pointerEvents = 'none'; + counter.style.transition = 'transform 0.5s'; + + const lower = document.createElementNS(svgns, 'use'); + lower.setAttributeNS(null, 'href', '#mech-template-lower'); + + const upper = document.createElementNS(svgns, 'use'); + upper.setAttributeNS(null, 'href', '#mech-template-upper'); + upper.style.transition = 'transform 0.5s'; + + counter.appendChild(lower); + counter.appendChild(upper); + + addEventListener("keydown", handleMechTemplateRotation); + placing.push(counter); +} -- cgit v1.2.3