Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-08-06 19:51:22 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-08-06 19:51:22 -0700
commit0783d703c1365f3307cb9e780b81f5ef19387bac (patch)
tree33759472ca73cc062cedce6430fb7540bc68c040
parentc6cdbcf492a1830bcc16259d018980072485e4fb (diff)
WIP: very rough armor
Diffstat
-rw-r--r--public/assets/css/soldier_record_block.css37
-rw-r--r--public/assets/css/style.css3
-rw-r--r--public/assets/images/counters.svg12
-rw-r--r--public/assets/images/map4.svg7
-rw-r--r--public/assets/images/scenario-dragon_hunting.svg36
-rw-r--r--public/assets/images/scenario-race_against_time.svg137
-rw-r--r--public/assets/images/scenario-side_show.svg2
-rw-r--r--src/modules/gameboard.js22
-rw-r--r--src/modules/record_sheet.js50
9 files changed, 250 insertions, 56 deletions
diff --git a/public/assets/css/soldier_record_block.css b/public/assets/css/soldier_record_block.css
index 5fb8c7c..096a1b2 100644
--- a/public/assets/css/soldier_record_block.css
+++ b/public/assets/css/soldier_record_block.css
@@ -5,6 +5,9 @@ span {
}
.physical-status-track {
+ display: flex;
+ justify-content: space-between;
+ align-items: end;
text-align: center;
}
@@ -57,3 +60,37 @@ p {
.grenades input:checked + svg circle {
fill: gray;
}
+
+[slot="block-number"]:not(:last-of-type) {
+ display: inline-block;
+ width: 1.3em;
+}
+
+damage-block.armor span[slot="block-number"] {
+ border: 1px solid black;
+ padding: 2px;
+ border-radius: 50%;
+ position: relative;
+}
+
+.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover {
+ border: 1px solid orangered;
+ cursor: pointer;
+}
+
+.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover::before {
+ content: '🡄'; /*<⇽⭠⮈🠈 🠜 🡄*/
+ position: absolute;
+ margin-left: -1.5em;
+}
+
+.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover {
+ border: 1px solid orangered;
+ cursor: pointer;
+}
+
+.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover::after {
+ content: '🡆'; /* 🠊 🡆 */
+ position: absolute;
+ margin-left: 1em;
+}
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 235fa73..3f6cd88 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -134,6 +134,9 @@ button.set-firing-arc img {
white-space: nowrap;
background-color: white;
transition: transform 0.25s;
+ user-select: none;
+ -webkit-user-select: none;
+ cursor: default;
}
.soldier-record span[slot] {
diff --git a/public/assets/images/counters.svg b/public/assets/images/counters.svg
index 8c3e444..487bce0 100644
--- a/public/assets/images/counters.svg
+++ b/public/assets/images/counters.svg
@@ -105,7 +105,7 @@
</g>
</g>
- <g id="gl" style="r: inherit;" class="weapon-symbol">
+ <g id="smggl" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#auto"/>
@@ -115,6 +115,16 @@
</g>
</g>
+ <g id="riflegl" style="r: inherit;" class="weapon-symbol">
+ <use style="r: inherit;" href="#counter-base"/>
+ <g style="stroke: white; stroke-width: 0.5px; fill: none;">
+ <use href="#semi-auto" />
+ <circle cy="-2.25" r="1"/>
+ <line x1="0" y1="-5" x2="0" y2="5"/>
+ <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+ </g>
+ </g>
+
<g id="mech-template" style="pointer-events: none;">
<clipPath id="mech-template-clip-path" r="36.5">
<use href="#dead-zone"/>
diff --git a/public/assets/images/map4.svg b/public/assets/images/map4.svg
index 0113404..d38738c 100644
--- a/public/assets/images/map4.svg
+++ b/public/assets/images/map4.svg
@@ -55,7 +55,7 @@
<g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north" style="--i: -2">
- <g class="counter" data-allegiance="attacker" data-number="1" data-squad="1">
+ <g class="counter" data-allegiance="attacker" data-number="1" data-squad="1" data-armor="4">
<use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
@@ -117,11 +117,6 @@
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
- <!--<g class="counter" data-allegiance="defender" data-number="2" data-squad="1">-->
- <!-- <use class="primary-weapon" href="counters.svg#hsplaser"/>-->
- <!-- <use class="troop-number" href="counters.svg#number-2"/>-->
- <!-- <use class="squad-number" href="counters.svg#number-1"/>-->
- <!--</g>-->
<g class="counter" data-allegiance="defender" data-number="1" data-squad="2">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-1"/>
diff --git a/public/assets/images/scenario-dragon_hunting.svg b/public/assets/images/scenario-dragon_hunting.svg
index 40f0a87..2b7e701 100644
--- a/public/assets/images/scenario-dragon_hunting.svg
+++ b/public/assets/images/scenario-dragon_hunting.svg
@@ -18,49 +18,49 @@
</g>
<g data-edge="south" style="--i: 78">
<g data-x="13">
- <g class="counter" data-allegiance="defender" data-number="1" data-squad="1">
+ <g class="counter" data-allegiance="defender" data-number="1" data-squad="1" data-armor="2">
<use class="primary-weapon" href="#smg"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="14">
- <g class="counter" data-allegiance="defender" data-number="2" data-squad="1">
+ <g class="counter" data-allegiance="defender" data-number="2" data-squad="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="15">
- <g class="counter" data-allegiance="defender" data-number="3" data-squad="1">
+ <g class="counter" data-allegiance="defender" data-number="3" data-squad="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#hsplaser"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="16">
- <g class="counter" data-allegiance="defender" data-number="4" data-squad="1">
+ <g class="counter" data-allegiance="defender" data-number="4" data-squad="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#lmg"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="17">
- <g class="counter" data-allegiance="defender" data-number="5" data-squad="1">
+ <g class="counter" data-allegiance="defender" data-number="5" data-squad="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#lmg"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="18">
- <g class="counter" data-allegiance="defender" data-number="6" data-squad="1">
+ <g class="counter" data-allegiance="defender" data-number="6" data-squad="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="19">
- <g class="counter" data-allegiance="defender" data-number="7" data-squad="1">
+ <g class="counter" data-allegiance="defender" data-number="7" data-squad="1" data-armor="2">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-1"/>
@@ -68,49 +68,49 @@
</g>
<g data-x="13">
- <g class="counter" data-allegiance="defender" data-number="1" data-squad="2">
- <use class="primary-weapon" href="#gl"/>
+ <g class="counter" data-allegiance="defender" data-number="1" data-squad="2" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="14">
- <g class="counter" data-allegiance="defender" data-number="2" data-squad="2">
- <use class="primary-weapon" href="counters.svg#gl"/>
+ <g class="counter" data-allegiance="defender" data-number="2" data-squad="2" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="15">
- <g class="counter" data-allegiance="defender" data-number="3" data-squad="2">
- <use class="primary-weapon" href="counters.svg#gl"/>
+ <g class="counter" data-allegiance="defender" data-number="3" data-squad="2" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="16">
- <g class="counter" data-allegiance="defender" data-number="4" data-squad="2">
- <use class="primary-weapon" href="counters.svg#gl"/>
+ <g class="counter" data-allegiance="defender" data-number="4" data-squad="2" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="17">
- <g class="counter" data-allegiance="defender" data-number="5" data-squad="2">
+ <g class="counter" data-allegiance="defender" data-number="5" data-squad="2" data-armor="2">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="18">
- <g class="counter" data-allegiance="defender" data-number="6" data-squad="2">
+ <g class="counter" data-allegiance="defender" data-number="6" data-squad="2" data-armor="2">
<use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
</g>
<g data-x="19">
- <g class="counter" data-allegiance="defender" data-number="7" data-squad="2">
+ <g class="counter" data-allegiance="defender" data-number="7" data-squad="2" data-armor="2">
<use class="primary-weapon" href="counters.svg#lmg"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-2"/>
diff --git a/public/assets/images/scenario-race_against_time.svg b/public/assets/images/scenario-race_against_time.svg
index 2aef61c..f6116fb 100644
--- a/public/assets/images/scenario-race_against_time.svg
+++ b/public/assets/images/scenario-race_against_time.svg
@@ -7,25 +7,25 @@
</g>
</g>
- <g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
+ <g class="start-locations">
<g data-edge="north" style="--i: -2">
<g data-x="13">
<g class="counter" data-allegiance="attacker" data-number="1">
- <use class="primary-weapon" href="counters.svg#blazer"/>
+ <use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="14">
<g class="counter" data-allegiance="attacker" data-number="2">
- <use class="primary-weapon" href="counters.svg#rifle"/>
+ <use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="15">
<g class="counter" data-allegiance="attacker" data-number="3">
- <use class="primary-weapon" href="counters.svg#rifle"/>
+ <use class="primary-weapon" href="counters.svg#riflegl"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
@@ -58,57 +58,158 @@
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
+
+ <g data-x="13">
+ <g class="counter" data-allegiance="attacker" data-number="1" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#smggl"/>
+ <use class="troop-number" href="counters.svg#number-1"/>
+ <use class="squad-number" href="counters.svg#number-5"/>
+ </g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="attacker" data-number="2" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#smggl"/>
+ <use class="troop-number" href="counters.svg#number-2"/>
+ <use class="squad-number" href="counters.svg#number-5"/>
+ </g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="attacker" data-number="3" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#smggl"/>
+ <use class="troop-number" href="counters.svg#number-3"/>
+ <use class="squad-number" href="counters.svg#number-5"/>
+ </g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="attacker" data-number="4" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#blazer"/>
+ <use class="troop-number" href="counters.svg#number-4"/>
+ <use class="squad-number" href="counters.svg#number-5"/>
+ </g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="attacker" data-number="5" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#blazer"/>
+ <use class="troop-number" href="counters.svg#number-5"/>
+ <use class="squad-number" href="counters.svg#number-5"/>
+ </g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="attacker" data-number="6" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#blazer"/>
+ <use class="troop-number" href="counters.svg#number-6"/>
+ <use class="squad-number" href="counters.svg#number-5"/>
+ </g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="attacker" data-number="7" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#blazer"/>
+ <use class="troop-number" href="counters.svg#number-7"/>
+ <use class="squad-number" href="counters.svg#number-5"/>
+ </g>
+ </g>
</g>
+
<g data-edge="south" style="--i: 26">
<g data-x="13">
- <g class="counter" data-allegiance="defender" data-number="1">
- <use class="primary-weapon" href="#blazer"/>
+ <g class="counter" data-allegiance="defender" data-number="1" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="14">
- <g class="counter" data-allegiance="defender" data-number="2">
- <use class="primary-weapon" href="counters.svg#rifle"/>
+ <g class="counter" data-allegiance="defender" data-number="2" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#smggl"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="15">
- <g class="counter" data-allegiance="defender" data-number="3">
- <use class="primary-weapon" href="counters.svg#rifle"/>
+ <g class="counter" data-allegiance="defender" data-number="3" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="16">
- <g class="counter" data-allegiance="defender" data-number="4">
- <use class="primary-weapon" href="counters.svg#smg"/>
+ <g class="counter" data-allegiance="defender" data-number="4" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#lmg"/>
<use class="troop-number" href="counters.svg#number-4"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="17">
- <g class="counter" data-allegiance="defender" data-number="5">
- <use class="primary-weapon" href="counters.svg#smg"/>
+ <g class="counter" data-allegiance="defender" data-number="5" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-5"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="18">
- <g class="counter" data-allegiance="defender" data-number="6">
- <use class="primary-weapon" href="counters.svg#smg"/>
+ <g class="counter" data-allegiance="defender" data-number="6" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-6"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
<g data-x="19">
- <g class="counter" data-allegiance="defender" data-number="7">
- <use class="primary-weapon" href="counters.svg#smg"/>
+ <g class="counter" data-allegiance="defender" data-number="7" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#srm"/>
<use class="troop-number" href="counters.svg#number-7"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
</g>
+
+ <g data-x="13">
+ <g class="counter" data-allegiance="defender" data-number="1" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#smggl"/>
+ <use class="troop-number" href="counters.svg#number-1"/>
+ <use class="squad-number" href="counters.svg#number-2"/>
+ </g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="defender" data-number="2" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#smggl"/>
+ <use class="troop-number" href="counters.svg#number-2"/>
+ <use class="squad-number" href="counters.svg#number-2"/>
+ </g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="defender" data-number="3" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#smggl"/>
+ <use class="troop-number" href="counters.svg#number-3"/>
+ <use class="squad-number" href="counters.svg#number-2"/>
+ </g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="defender" data-number="4" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#lmg"/>
+ <use class="troop-number" href="counters.svg#number-4"/>
+ <use class="squad-number" href="counters.svg#number-2"/>
+ </g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="defender" data-number="5" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#blazer"/>
+ <use class="troop-number" href="counters.svg#number-5"/>
+ <use class="squad-number" href="counters.svg#number-2"/>
+ </g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="defender" data-number="6" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#blazer"/>
+ <use class="troop-number" href="counters.svg#number-6"/>
+ <use class="squad-number" href="counters.svg#number-2"/>
+ </g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="defender" data-number="7" data-armor="2">
+ <use class="primary-weapon" href="counters.svg#srm"/>
+ <use class="troop-number" href="counters.svg#number-7"/>
+ <use class="squad-number" href="counters.svg#number-2"/>
+ </g>
+ </g>
</g>
</g>
</g>
diff --git a/public/assets/images/scenario-side_show.svg b/public/assets/images/scenario-side_show.svg
index 1769146..ccbafe7 100644
--- a/public/assets/images/scenario-side_show.svg
+++ b/public/assets/images/scenario-side_show.svg
@@ -63,7 +63,7 @@
<g data-edge="south" style="--i: 53">
<g data-x="13">
<g class="counter" data-allegiance="defender" data-number="1">
- <use class="primary-weapon" href="#blazer"/>
+ <use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 8cb6af1..3741ad2 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -379,17 +379,17 @@ export function start(el) {
//cell2.classList.add('hover');
//
- soldier.place(
- svg,
- soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 1 }}, 'hsplaser'),
- getCell(-2, 3, -1, 0)
- );
-
- soldier.place(
- svg,
- soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 5 }}, 'rifle'),
- getCell(-3, 3, 0, 0)
- );
+ //soldier.place(
+ // svg,
+ // soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 1 }}, 'hsplaser'),
+ // getCell(-2, 3, -1, 0)
+ //);
+ //
+ //soldier.place(
+ // svg,
+ // soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 5 }}, 'rifle'),
+ // getCell(-3, 3, 0, 0)
+ //);
// Add some counters in an unoccupied cell
//const countersCell = getCell(-1, 1, 0, 0);
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index e5be4bf..34ffe80 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -38,11 +38,17 @@ const weapons = {
shortRange: '1-44',
longRange: '45-108'
},
- gl: {
+ smggl: {
name: 'SMG w/Grenade Launcher',
damage: '4/2/1 L',
shortRange: '1-10',
longRange: '11-24'
+ },
+ riflegl: {
+ name: 'Rifle w/Grenade Launcher',
+ damage: '4/2/1 L',
+ shortRange: '1-10',
+ longRange: '11-24'
}
}
@@ -121,6 +127,48 @@ function createRecord(unit) {
spans.forEach(el => div.appendChild(el));
+ if (unit.dataset.armor) {
+ const s = `damage-block:nth-of-type(n + 1):nth-of-type(-n + ${unit.dataset.armor})`;
+ const armorBlocks = div.shadowRoot.querySelectorAll(s);
+
+ armorBlocks.forEach(el => {
+ el.classList.add('armor');
+ });
+
+ const ls = 'damage-block:nth-child(1 of .armor):not(:first-child)';
+ const rs = 'damage-block:nth-last-child(1 of .armor):not(:last-child)';
+ const moveArmorEl = div.shadowRoot.querySelectorAll(`${ls}, ${rs}`);
+
+ function moveArmorHandler(e) {
+ e.stopPropagation();
+
+ this.removeEventListener('click', moveArmorHandler);
+ if (!this.previousElementSibling.classList.contains('armor')) {
+ this.previousElementSibling.classList.add('armor');
+ this.previousElementSibling.addEventListener('click', moveArmorHandler);
+ let current = this.nextElementSibling;
+ while (current.nextElementSibling && current.nextElementSibling.classList.contains('armor')) {
+ current = current.nextElementSibling;
+ }
+ current.classList.remove('armor');
+ current.removeEventListener('click', moveArmorHandler);
+ current.previousElementSibling.addEventListener('click', moveArmorHandler);
+ } else if (!this.nextElementSibling.classList.contains('armor')) {
+ this.nextElementSibling.classList.add('armor');
+ this.nextElementSibling.addEventListener('click', moveArmorHandler);
+ let current = this.previousElementSibling;
+ while (current.previousElementSibling && current.previousElementSibling.classList.contains('armor')) {
+ current = current.previousElementSibling;
+ }
+ current.classList.remove('armor');
+ current.removeEventListener('click', moveArmorHandler);
+ current.nextElementSibling.addEventListener('click', moveArmorHandler);
+ }
+ }
+
+ moveArmorEl.forEach(el => el.addEventListener('click', moveArmorHandler));
+ }
+
function makeInactiveDivider(parent) {
const div = document.createElement('div');
div.classList.add('inactive-divider');