Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--public/assets/images/counters.svg58
-rw-r--r--public/assets/images/mech_template.pngbin42150 -> 41913 bytes
-rw-r--r--public/index.html1
-rw-r--r--src/index.js1
-rw-r--r--src/modules/gameboard.js54
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 @@
<g id="mech-template" style="pointer-events: none;">
<clipPath id="mech-template-clip-path" r="36.5">
- <circle r="36.5"/>
+ <use href="#dead-zone"/>
</clipPath>
- <g transform="rotate(0)">
- <image href="mech_template.png" width="77" height="77" transform="translate(-38.75, -38.5)"/>
+ <mask id="foot-mask">
+ <use href="#foot" fill="white"/>
+ <use href="#direction-arrow" fill="black" transform="rotate(-60)"/>
+ </mask>
+ <g id="mech-template-lower" class="lower-body" transform="rotate(0)">
<g class="feet" style="fill: black; fill-opacity: 0.5;">
- <rect class="left" x="-16.25" y="5.75" width="34.5" height="12.25"/>
- <rect class="right" x="-16.25" y="5.75" width="34.5" height="12.25" transform="scale(1 -1)"/>
+ <rect id="foot" class="left" x="-16.25" y="5.75" width="34.5" height="12.25" mask="url(#foot-mask)"/>
+ <rect class="right" x="-16.25" y="5.75" width="34.5" height="12.25" mask="url(#foot-mask)" transform="scale(1 -1)"/>
</g>
<g style="stroke: black; stroke-opacity: 1">
- <circle r="36.5"/>
- <polyline points="-20,-3 -22,0 -20,3" fill="none"/>
- <g clip-path="url(#mech-template-clip-path)">
- <path class="front" d="M -34.64,-15 -21.65,-7.5 M -34.64,15 -21.65,7.5"/>
- <path class="side" d="M -4.33,-37.5 -4.33,-22.5 M -4.33,37.5 -4.33,22.5"/>
- <path class="rear" d="M 34.64,-15 21.65,-7.5 M 34.64,15 21.65,7.5"/>
- </g>
+ <circle id="dead-zone" r="36.5"/>
+ <path id="direction-arrow" d="M -14.5,-3.75 v 7.5 L -23.5,0 Z"/>
+ <use href="#direction-arrow" transform="scale(-1)"/>
+ <use href="#direction-arrow" transform="rotate(60)"/>
+ <use href="#direction-arrow" transform="rotate(-60)"/>
</g>
</g>
+
+ <g id="mech-template-upper" class="upper-body" style="stroke: black; stroke-opacity: 1;" clip-path="url(#mech-template-clip-path)" transform="rotate(0)">
+ <!--<g class="wireframe" stroke-width="5" fill="white" opacity="0.5">-->
+ <!-- <g transform="translate(-34.25) scale(0.1)">-->
+ <!-- <path class="head" d="m 4.0908417,-9.04338 h -8.48997 l -4.35295,4.52169 -0.35295,4.52169 0.35295,4.52169 4.35295,4.52169 h 8.48997 l 5.01571,-6.78253 v -4.52169 z"/>-->
+ <!-- <path class="center-torso" d="M 73.496377,-7.22566 62.633758,-15.5316 h -5.2888 l -10.738522,-5.17999 -9.0667,-4.24937 -21.406323,5.89156 v 8.7238 l -5.15397,6.09354 V 4.2521 l 5.15397,6.09354 v 8.7238 l 21.406323,5.89156 9.0667,-4.24937 10.738522,-5.17999 h 5.2888 L 73.496377,7.2257 Z"/>-->
+ <!-- <path class="right-torso" d="m -6.7520783,-6.59922 v -15.79032 l 5.82424995,-9.29935 3.60677005,3.98845 11.8111303,-6.13081 17.149371,-4.77374 17.391083,9.43268 v 6.31519 l -2.42409,2.14553 -9.0667,-4.24937 -21.406323,5.89156 v 8.7238 l -5.15397,6.09354 -3.5080213,-0.21991 -3.38058,-4.57141 h -8.48997 z"/>-->
+ <!-- <path class="right-arm" d="m -0.92782835,-31.68889 3.60677005,3.98845 11.8111313,-6.13081 2.62276,-7.31338 8.63276,-4.29671 3.05582,-0.30739 2.10841,-2.47261 5.200374,-0.5805 2.930309,-3.36555 3.11131,0.0171 2.38505,4.12288 3.79966,-0.78512 1.46152,-3.42842 2.544481,-0.40266 2.30883,3.63323 24.656381,-6.33811 3.864819,-0.15867 2.81442,-2.76434 5.4953,0.15451 2.155511,3.94225 4.18179,-0.21209 3.609612,-5.69279 -0.0402,-6.30448 -5.203753,-4.14746 -4.90958,-1.99715 -2.48602,-4.3639 -45.763211,11.0802 -3.16957,3.57392 -10.812734,5.81498 -4.90248,0.15313 -2.51173,1.04053 h -4.29739 v 1.77544 h -6.21302 L 0.32187165,-41.24826 Z"/>-->
+ <!-- <path class="left-torso" d="m -6.7520783,6.59926 v 15.79032 l 5.82424995,9.29935 3.60677005,-3.98845 11.8111303,6.13081 17.149371,4.77374 17.391083,-9.43268 v -6.31519 l -2.42409,-2.14553 -9.0667,4.24937 -21.406323,-5.89156 v -8.7238 L 10.979443,4.2521 7.4714217,4.47201 4.0908417,9.04342 h -8.48997 z"/>-->
+ <!-- <path class="left-arm" d="m -0.92782835,31.68893 3.60677005,-3.98845 11.8111313,6.13081 2.62276,7.31338 8.63276,4.29671 3.05582,0.30739 2.10841,2.47261 5.200374,0.5805 2.930309,3.36555 3.11131,-0.0171 2.38505,-4.12288 3.79966,0.78512 1.46152,3.42842 2.544481,0.40266 2.30883,-3.63323 24.656381,6.338108 3.864819,0.15867 2.81442,2.76434 5.4953,-0.15451 2.155511,-3.94225 4.18179,0.21209 3.609612,5.69279 -0.0402,6.30448 -5.203753,4.14746 -4.90958,1.99715 -2.48602,4.3639 -45.763211,-11.0802 -3.16957,-3.57392 -10.812734,-5.81498 -4.90248,-0.15313 -2.51173,-1.04053 h -4.29739 V 53.45445 h -6.21302 L 0.32187165,41.2483 Z"/>-->
+ <!-- </g>-->
+ <!-- <g transform="translate(-22, -18) scale(0.1)">-->
+ <!-- <path class="right-torso" d="m -6.7520783,-6.59922 v -15.79032 l 5.82424995,-9.29935 3.60677005,3.98845 11.8111303,-6.13081 17.149371,-4.77374 17.391083,9.43268 v 6.31519 l -2.42409,2.14553 -9.0667,-4.24937 -21.406323,5.89156 v 8.7238 l -5.15397,6.09354 -3.5080213,-0.21991 -3.38058,-4.57141 h -8.48997 z"/>-->
+ <!-- <path class="right-arm" d="m -0.92782835,-31.68889 3.60677005,3.98845 11.8111313,-6.13081 2.62276,-7.31338 8.63276,-4.29671 3.05582,-0.30739 2.10841,-2.47261 5.200374,-0.5805 2.930309,-3.36555 3.11131,0.0171 2.38505,4.12288 3.79966,-0.78512 1.46152,-3.42842 2.544481,-0.40266 2.30883,3.63323 24.656381,-6.33811 3.864819,-0.15867 2.81442,-2.76434 5.4953,0.15451 2.155511,3.94225 4.18179,-0.21209 3.609612,-5.69279 -0.0402,-6.30448 -5.203753,-4.14746 -4.90958,-1.99715 -2.48602,-4.3639 -45.763211,11.0802 -3.16957,3.57392 -10.812734,5.81498 -4.90248,0.15313 -2.51173,1.04053 h -4.29739 v 1.77544 h -6.21302 L 0.32187165,-41.24826 Z"/>-->
+ <!-- </g>-->
+ <!-- <g transform="translate(-22, 18) scale(0.1)">-->
+ <!-- <path class="left-torso" d="m -6.7520783,6.59926 v 15.79032 l 5.82424995,9.29935 3.60677005,-3.98845 11.8111303,6.13081 17.149371,4.77374 17.391083,-9.43268 v -6.31519 l -2.42409,-2.14553 -9.0667,4.24937 -21.406323,-5.89156 v -8.7238 L 10.979443,4.2521 7.4714217,4.47201 4.0908417,9.04342 h -8.48997 z"/>-->
+ <!-- <path class="left-arm" d="m -0.92782835,31.68893 3.60677005,-3.98845 11.8111313,6.13081 2.62276,7.31338 8.63276,4.29671 3.05582,0.30739 2.10841,2.47261 5.200374,0.5805 2.930309,3.36555 3.11131,-0.0171 2.38505,-4.12288 3.79966,0.78512 1.46152,3.42842 2.544481,0.40266 2.30883,-3.63323 24.656381,6.338108 3.864819,0.15867 2.81442,2.76434 5.4953,-0.15451 2.155511,-3.94225 4.18179,0.21209 3.609612,5.69279 -0.0402,6.30448 -5.203753,4.14746 -4.90958,1.99715 -2.48602,4.3639 -45.763211,-11.0802 -3.16957,-3.57392 -10.812734,-5.81498 -4.90248,-0.15313 -2.51173,-1.04053 h -4.29739 V 53.45445 h -6.21302 L 0.32187165,41.2483 Z"/>-->
+ <!-- </g>-->
+ <!-- <g transform="translate(4, -20) scale(0.1)">-->
+ <!-- <path class="right-arm" d="m -0.92782835,-31.68889 3.60677005,3.98845 11.8111313,-6.13081 2.62276,-7.31338 8.63276,-4.29671 3.05582,-0.30739 2.10841,-2.47261 5.200374,-0.5805 2.930309,-3.36555 3.11131,0.0171 2.38505,4.12288 3.79966,-0.78512 1.46152,-3.42842 2.544481,-0.40266 2.30883,3.63323 24.656381,-6.33811 3.864819,-0.15867 2.81442,-2.76434 5.4953,0.15451 2.155511,3.94225 4.18179,-0.21209 3.609612,-5.69279 -0.0402,-6.30448 -5.203753,-4.14746 -4.90958,-1.99715 -2.48602,-4.3639 -45.763211,11.0802 -3.16957,3.57392 -10.812734,5.81498 -4.90248,0.15313 -2.51173,1.04053 h -4.29739 v 1.77544 h -6.21302 L 0.32187165,-41.24826 Z"/>-->
+ <!-- </g>-->
+ <!-- <g transform="translate(4, 20) scale(0.1)">-->
+ <!-- <path class="left-arm" d="m -0.92782835,31.68893 3.60677005,-3.98845 11.8111313,6.13081 2.62276,7.31338 8.63276,4.29671 3.05582,0.30739 2.10841,2.47261 5.200374,0.5805 2.930309,3.36555 3.11131,-0.0171 2.38505,-4.12288 3.79966,0.78512 1.46152,3.42842 2.544481,0.40266 2.30883,-3.63323 24.656381,6.338108 3.864819,0.15867 2.81442,2.76434 5.4953,-0.15451 2.155511,-3.94225 4.18179,0.21209 3.609612,5.69279 -0.0402,6.30448 -5.203753,4.14746 -4.90958,1.99715 -2.48602,4.3639 -45.763211,-11.0802 -3.16957,-3.57392 -10.812734,-5.81498 -4.90248,-0.15313 -2.51173,-1.04053 h -4.29739 V 53.45445 h -6.21302 L 0.32187165,41.2483 Z"/>-->
+ <!-- </g>-->
+ <!--</g>-->
+ <!--<image href="mech_template.png" width="77" height="77" transform="translate(-38.75, -38.5)"/>-->
+ <path class="front" d="M -34.64,-15 -21.65,-7.5 M -34.64,15 -21.65,7.5"/>
+ <path class="side" d="M -4.33,-37.5 -4.33,-22.5 M -4.33,37.5 -4.33,22.5"/>
+ <path class="rear" d="M 34.64,-15 21.65,-7.5 M 34.64,15 21.65,7.5"/>
+ <!--<polyline points="-32,-2 -33,0, -32,2"/>-->
+ <line x1="-31" y1="0" x2="-26" y2="0"/>
+ </g>
</g>
</svg>
diff --git a/public/assets/images/mech_template.png b/public/assets/images/mech_template.png
index af41f78..506762b 100644
--- a/public/assets/images/mech_template.png
+++ b/public/assets/images/mech_template.png
Binary files 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 @@
<button type="button" class="set-grenade">
<img src="assets/images/icon_grenade.png" height="12" />
</button>
+ <button type="button" class="set-mech-template">M</button>
</span>
</div>
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);
+}