Remove prone toggle

public/assets/css/map.css

@@ -78,24 +78,12 @@ g.troop-counter-template text {
   stroke: none;
 }
 
-[href="#counter-prone"] {
-  transform: translate(-5px, 6px);
-}
-
 g.clone {
   stroke: white;
   stroke-width: 0.5px;
   stroke-dasharray: 1;
 }
 
-g.clone [href="#counter-prone"] {
-  opacity: 0.5;
-}
-
-.removed[href="#counter-prone"] {
-  opacity: 0.5;
-}
-
 g[data-allegiance="defender"].clone {
   fill: rgb(255, 126, 126);
 }
@@ -505,8 +493,8 @@ use[class^="counter-"] {
 }
 
 g.counter use[class^="counter-"] {
-  --translateX: calc(var(--x) - 5px);
-  --translateY: var(--y);
+  --translateX: calc((var(--x)) * 1.25 - 5px);
+  --translateY: calc((var(--y)) * 1.25 - 5px);
 }
 
 [data-q][data-r][data-s][data-t] > use[class^="counter-"] {

public/assets/css/style.css

@@ -91,10 +91,6 @@ g.troop-counter-template text {
   stroke: none;
 }
 
-g.troop-counter [href="#counter-prone"] {
-  transform: translate(-5px, 6px);
-}
-
 text.counter, #troop-counter text {
   font-size: 12px;
   font-weight: bold;

public/index.html

@@ -221,7 +221,6 @@
       </button>
 
       <span style="white-space: nowrap;">
-        Prone: <input type="checkbox" id="toggle-prone-counter" />
         <button type="button" class="set-firing-arc" data-size="small">
           <img src="assets/images/firing_arc_small.png" height="12" /> 2 MP
         </button>

src/index.js

@@ -16,7 +16,6 @@ if (window.IS_DEV) {
 
 const mapPlaceholder = document.querySelector('.map-placeholder'),
   distanceOutput = document.getElementById('status'),
-  proneToggle = document.getElementById('toggle-prone-counter'),
   contentVisToggleEl = document.querySelector('#edge-inputs input[type="checkbox"].visible'),
   fileName = localStorage.getItem('map') || 'scenario-side_show',
   map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
@@ -85,10 +84,10 @@ async function buildScenario(req) {
   // recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
   recordSheet.start(null, scenarioUnits);
 
-  //const [trooper] = gameboard.getUnits();
-  //Observable.notify('select', trooper);
-  //gameboard.setCounter('prone');
-  //gameboard.setCounter('1st-floor');
+  const [trooper] = gameboard.getUnits();
+  Observable.notify('select', trooper);
+  gameboard.setCounter('prone');
+  gameboard.setCounter('1st-floor');
 }
 
 function updateTurnCounter() {
@@ -173,11 +172,6 @@ document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el =>
   el.addEventListener('input', gameboard.toggleFiringArcVisibility)
 );
 
-document.getElementById('toggle-prone-counter').addEventListener('input', function () {
-  const selected = recordSheet.getSelected();
-  selected && gameboard.toggleProne();
-});
-
 document.querySelectorAll('.end-move').forEach(el =>
   el.addEventListener('click', () => Observable.notify('endmove'))
 );
@@ -313,4 +307,3 @@ dice.forEach(el => {
 });
 
 Observable.subscribe('distance', distance);
-Observable.subscribe('proneflag', checked => proneToggle.checked = checked);

src/modules/game/soldier.js

@@ -152,24 +152,6 @@ export function endMove(svg, counter) {
   removeClones(svg, counter);
 }
 
-export function hasProne(counter) {
-  return !!counter.querySelector('[href="#counter-prone"]:not(.removed)');
-}
-
-export function toggleProne(counter) {
-  let proneCounter = counter.querySelector('[href="#counter-prone"]');
-
-  if (!proneCounter) {
-    proneCounter = document.createElementNS(svgns, 'use');
-    proneCounter.setAttributeNS(null, 'href', '#counter-prone');
-    counter.appendChild(proneCounter);
-  } else if ('preexisting' in proneCounter.dataset) {
-    proneCounter.classList.toggle('removed');
-  } else {
-    proneCounter.remove();
-  }
-}
-
 export function getSelectedClass() {
   return selectedClass;
 }

src/modules/gameboard.js

@@ -79,7 +79,6 @@ function getSelected() {
 function deselect() {
   const selected = getSelected();
   placing = [];
-  Observable.notify('proneflag', false);
 
   if (selected) {
     selected.classList.remove(soldier.getSelectedClass());
@@ -194,7 +193,6 @@ function select(data) {
 
   counter.classList.add(soldier.getSelectedClass());
   firingArc.get(svg, counter).forEach(el => el.removeAttribute('clip-path'));
-  Observable.notify('proneflag', soldier.hasProne(counter));
   placing.push(counter);
 }
 
@@ -266,7 +264,6 @@ export function start(el) {
     }
 
     const selected = getSelected();
-    //Observable.notify('proneflag', selected && soldier.hasProne(selected));
   }
 
   getCells(svg).forEach(cell => {
@@ -317,7 +314,6 @@ export function start(el) {
       }
 
       const selected = getSelected();
-      Observable.notify('proneflag', selected && soldier.hasProne(selected));
     });
 
     cell.addEventListener('dblclick', e => {
@@ -406,14 +402,14 @@ export function start(el) {
 
   // debug //
   // Add a trooper counter
-  //const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
+  const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
   // const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
-  //const cell = getCell(0, 0, 0, 0);
-  //const trooper = soldier.createCounter(attacker, 'blazer');
+  const cell = getCell(0, 0, 0, 0);
+  const trooper = soldier.createCounter(attacker, 'blazer');
   //const trooperSack = document.createElementNS(svgns, 'g');
   //trooperSack.classList.add('cell-contents');
   //trooperSack.append(trooper);
-  //soldier.place(svg, trooper, cell);
+  soldier.place(svg, trooper, cell);
 
   // Add some counters in an unoccupied cell
   //const countersCell = getCell(-1, 1, 0, 0);
@@ -445,11 +441,6 @@ export function clearFiringArcs(allegiance) {
   firingArc.clear(svg, allegiance);
 }
 
-export function toggleProne() {
-  const selected = getSelected();
-  if (selected) soldier.toggleProne(selected);
-}
-
 export function toggleFiringArcVisibility() {
   firingArc.toggleVisibility(svg, this.dataset.allegiance);
 }