WIP: Turn/torso-twist mech template on keypress

This commit is contained in:
2024-07-16 14:05:08 -07:00
parent 5ea152f4f6
commit 3f24534eb7
5 changed files with 101 additions and 13 deletions

View File

@@ -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);
}