diff --git a/public/assets/images/counters.svg b/public/assets/images/counters.svg index f433d97..4ff96a3 100644 --- a/public/assets/images/counters.svg +++ b/public/assets/images/counters.svg @@ -49,6 +49,16 @@ + + + + + + + + + + @@ -58,63 +68,6 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -125,14 +78,6 @@ - - - - - - - - @@ -160,6 +105,17 @@ + + + + + + + + + + + @@ -168,6 +124,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -178,12 +190,11 @@ - + - - - + + @@ -248,6 +259,18 @@ + + + + + + + + + + + + @@ -278,12 +301,24 @@ + + + + + + + + + + - - + + + + diff --git a/public/assets/images/map4.svg b/public/assets/images/map4.svg index d38738c..bf5a220 100644 --- a/public/assets/images/map4.svg +++ b/public/assets/images/map4.svg @@ -1,23 +1,6 @@ - - - - - - - - - - - - - - - - - @@ -25,7 +8,7 @@ - + @@ -56,7 +39,7 @@ - + diff --git a/src/modules/game/soldier.js b/src/modules/game/soldier.js index 8407621..efca3ef 100644 --- a/src/modules/game/soldier.js +++ b/src/modules/game/soldier.js @@ -7,9 +7,9 @@ function dataSelector({ dataset: { allegiance, number, squad }}) { return `[data-number="${number}"][data-allegiance="${allegiance}"][data-squad="${squad}"]`; } -function traceSelector(counter) { - return `polyline.move-trace${dataSelector(counter)}`; -} +//function traceSelector(counter) { +// return `polyline.move-trace${dataSelector(counter)}`; +//} function getCellPosition(cell) { const [x, y] = cell.getAttributeNS(null, 'transform').match(/-?\d+\.?\d*/g); @@ -17,44 +17,44 @@ function getCellPosition(cell) { return { x, y }; } -function getClones(svg, counter) { - return svg.querySelectorAll(`.counter.clone${dataSelector(counter)}`); -} +//function getClones(svg, counter) { +// return svg.querySelectorAll(`.counter.clone${dataSelector(counter)}`); +//} -function addMoveToHistory(selected) { - const clone = selected.cloneNode(true); - clone.classList.remove(selectedClass); - clone.classList.add('clone'); - selected.parentElement.appendChild(clone); +//function addMoveToHistory(selected) { +// const clone = selected.cloneNode(true); +// clone.classList.remove(selectedClass); +// clone.classList.add('clone'); +// selected.parentElement.appendChild(clone); +// +// return clone; +//} - return clone; -} +//function updatePlacement(cell, selected, clone) { +// const { q, r, s, t } = clone.parentElement.dataset; +// +// selected.dataset.previous = [q, r, s, t]; +// placeIn(cell, selected); +// +// Array.from(selected.children).forEach(n => { +// if (n.classList.contains('removed')) { +// n.remove(); +// } else if ('preexisting' in n.dataset) { +// delete n.dataset.preexisting; +// } +// }); +//} -function updatePlacement(cell, selected, clone) { - const { q, r, s, t } = clone.parentElement.dataset; - - selected.dataset.previous = [q, r, s, t]; - placeIn(cell, selected); - - Array.from(selected.children).forEach(n => { - if (n.classList.contains('removed')) { - n.remove(); - } else if ('preexisting' in n.dataset) { - delete n.dataset.preexisting; - } - }); -} - -function createTrace(previous, current, selected) { - const trace = document.createElementNS(svgns, 'polyline'); - - trace.dataset.number = selected.dataset.number; - trace.dataset.allegiance = selected.dataset.allegiance; - trace.classList.add('move-trace'); - trace.setAttributeNS(null, 'points', `${previous.x},${previous.y} ${current.x},${current.y}`); - - return trace; -} +//function createTrace(previous, current, selected) { +// const trace = document.createElementNS(svgns, 'polyline'); +// +// trace.dataset.number = selected.dataset.number; +// trace.dataset.allegiance = selected.dataset.allegiance; +// trace.classList.add('move-trace'); +// trace.setAttributeNS(null, 'points', `${previous.x},${previous.y} ${current.x},${current.y}`); +// +// return trace; +//} function placeIn(location, target) { location.querySelector('use[href="#hex"]').after(target); @@ -87,29 +87,30 @@ export function createCounter(selected, weapon = 'rifle') { return g; } -export function handleTrace(svg, selected, clone, current) { - let trace = getTrace(svg, selected); - - if (!trace) { - trace = createTrace(getCellPosition(clone.parentElement), current, selected); - svg.querySelector('.grid').before(trace); - } else { - const points = `${trace.getAttribute('points')} ${current.x},${current.y}`; - trace.setAttributeNS(null, 'points', points); - } -} +//export function handleTrace(svg, selected, clone, current) { +// let trace = getTrace(svg, selected); +// +// if (!trace) { +// trace = createTrace(getCellPosition(clone.parentElement), current, selected); +// svg.querySelector('.grid').before(trace); +// } else { +// const points = `${trace.getAttribute('points')} ${current.x},${current.y}`; +// trace.setAttributeNS(null, 'points', points); +// } +//} export function getAllCounters(container) { return container.querySelectorAll('g.counter[data-allegiance][data-number]'); } export function getCounter(svg, selected) { - return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`); + //return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`); + return svg.querySelector(`.counter${dataSelector(selected)}`); } -export function getTrace(svg, counter) { - return svg.querySelector(traceSelector(counter)); -} +//export function getTrace(svg, counter) { +// return svg.querySelector(traceSelector(counter)); +//} export function place(svg, selected, cell) { //console.log(selected.parentElement); @@ -134,23 +135,23 @@ export function place(svg, selected, cell) { //} } -export function removeClones(svg, counter) { - getClones(svg, counter).forEach(c => c.remove()); -} +//export function removeClones(svg, counter) { +// getClones(svg, counter).forEach(c => c.remove()); +//} -export function endMove(svg, counter) { - Array.from(counter.children).forEach(n => { - if (n.classList.contains('removed')) { - n.remove(); - } else { - n.dataset.preexisting = ''; - } - }); +//export function endMove(svg, counter) { + //Array.from(counter.children).forEach(n => { + // if (n.classList.contains('removed')) { + // n.remove(); + // } else { + // n.dataset.preexisting = ''; + // } + //}); - svg.querySelector(traceSelector(counter))?.remove(); - delete counter.dataset.previous; - removeClones(svg, counter); -} + //svg.querySelector(traceSelector(counter))?.remove(); + //delete counter.dataset.previous; + //removeClones(svg, counter); +//} export function getSelectedClass() { return selectedClass; diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js index fd2aaf1..8c91ee5 100644 --- a/src/modules/gameboard.js +++ b/src/modules/gameboard.js @@ -46,16 +46,16 @@ 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; - - return { - of: function ({ dataset: { allegiance, number }}) { - return isClone && clAl == allegiance && clNum == number; - } - }; -} +//function isClone(counter) { +// const isClone = counter.classList.contains('clone'), +// { allegiance: clAl, number: clNum } = counter.dataset; +// +// return { +// of: function ({ dataset: { allegiance, number }}) { +// return isClone && clAl == allegiance && clNum == number; +// } +// }; +//} function getCellPosition(cell) { const [x, y] = cell.getAttributeNS(null, 'transform').match(/-?\d+\.?\d*/g); @@ -127,56 +127,56 @@ function drawSightLine(sourceCell, targetCell) { svg.querySelector('.gameboard').appendChild(line); } -function moveBackOneStepInHistory(counter) { - const trace = soldier.getTrace(svg, counter); +//function moveBackOneStepInHistory(counter) { +// const trace = soldier.getTrace(svg, counter); +// +// counter.remove(); +// counter = getCounterAtGridIndex(...counter.dataset.previous.split(',')); +// counter.classList.remove('clone'); +// counter.classList.add(soldier.getSelectedClass()); +// +// if (!('previous' in counter.dataset)) { +// trace.remove(); +// } else { +// const points = trace.getAttribute('points').split(' '); +// points.pop(); +// trace.setAttributeNS(null, 'points', points.join(' ')); +// } +// +// return counter; +//} - counter.remove(); - counter = getCounterAtGridIndex(...counter.dataset.previous.split(',')); - counter.classList.remove('clone'); - counter.classList.add(soldier.getSelectedClass()); +//function clearMoveHistory(clone, counter) { +// clone.classList.remove('clone'); +// clone.classList.add(soldier.getSelectedClass()); +// counter.remove(); +// counter = clone; +// soldier.removeClones(svg, counter); +// soldier.getTrace(svg, counter).remove(); +// +// return counter; +//} - if (!('previous' in counter.dataset)) { - trace.remove(); - } else { - const points = trace.getAttribute('points').split(' '); - points.pop(); - trace.setAttributeNS(null, 'points', points.join(' ')); - } +//function deleteClone(occupant, counter, cell) { +// const index = getGridIndex(occupant), +// trace = soldier.getTrace(svg, counter), +// pos = getCellPosition(cell), +// points = trace.getAttribute('points').split(' ').filter(p => p != `${pos.x},${pos.y}`).join(' ');; +// +// let current = counter; +// trace.setAttributeNS(null, 'points', points); +// +// while (current.dataset.previous != `${index.q},${index.r},${index.s},${index.t}`) { +// current = getCounterAtGridIndex(...current.dataset.previous.split(',')); +// } +// +// current.dataset.previous = occupant.dataset.previous; +// occupant.remove(); +//} - return counter; -} - -function clearMoveHistory(clone, counter) { - clone.classList.remove('clone'); - clone.classList.add(soldier.getSelectedClass()); - counter.remove(); - counter = clone; - soldier.removeClones(svg, counter); - soldier.getTrace(svg, counter).remove(); - - return counter; -} - -function deleteClone(occupant, counter, cell) { - const index = getGridIndex(occupant), - trace = soldier.getTrace(svg, counter), - pos = getCellPosition(cell), - points = trace.getAttribute('points').split(' ').filter(p => p != `${pos.x},${pos.y}`).join(' ');; - - let current = counter; - trace.setAttributeNS(null, 'points', points); - - while (current.dataset.previous != `${index.q},${index.r},${index.s},${index.t}`) { - current = getCounterAtGridIndex(...current.dataset.previous.split(',')); - } - - current.dataset.previous = occupant.dataset.previous; - occupant.remove(); -} - -function hasPreviousMoveInHistory(counter) { - return 'previous' in counter.dataset; -} +//function hasPreviousMoveInHistory(counter) { +// return 'previous' in counter.dataset; +//} function selectOffBoard() { Observable.notify('select', this, { revealRecord: true }); @@ -229,7 +229,7 @@ function endMove() { const selected = getSelected(); if (selected) { - soldier.endMove(svg, selected); + //soldier.endMove(svg, selected); deselect(); } } @@ -405,9 +405,33 @@ export function start(el) { //cell2.classList.add('hover'); // - //const trooper1 = soldier.createCounter({ dataset: { allegiance: 'attacker', number: 1, squad: 1 }}, 'blazer'); + ['lmg', 'mmg', 'hmg', 'splaser', 'hsplaser', 'mpppc'].forEach((w, i) => { + soldier.place( + svg, + soldier.createCounter({ dataset: { allegiance: 'attacker', number: i + 1, squad: 1 }}, w), + getCell(-3 - i, 9, -6 + i, 0) + ) + }); + + ['srm', 'hsrm', 'law', 'gl', 'autogl', 'lrrifle'].forEach((w, i) => { + soldier.place( + svg, + soldier.createCounter({ dataset: { allegiance: 'attacker', number: i + 1, squad: 2 }}, w), + getCell(-2 - i, 8, -6 + i, 0) + ) + }); + + ['satchelcharge', 'grenade', 'nonlethalhand', 'lethalhand', 'flamer', 'hflamer', 'inferno'].forEach((w, i) => { + soldier.place( + svg, + soldier.createCounter({ dataset: { allegiance: 'attacker', number: i + 1, squad: 3 }}, w), + getCell(-2 - i, 7, -5 + i, 0) + ) + }); + //const weapon = 'mpppc'; + //const trooper1 = soldier.createCounter({ dataset: { allegiance: 'attacker', number: 1, squad: 1 }}, weapon); //soldier.place(svg, trooper1, getCell(-3, 9, -6, 0)); - // + //soldier.place( // svg, // soldier.createCounter({ dataset: { allegiance: 'defender', number: 1, squad: 1 }}, 'blazer'), diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js index 5abb108..3c933d5 100644 --- a/src/modules/record_sheet.js +++ b/src/modules/record_sheet.js @@ -49,7 +49,121 @@ const weapons = { damage: '4/2/1 L', shortRange: '1-10', longRange: '11-24' - } + }, + pistol: { + name: 'Pistol', + damage: '3L', + shortRange: '1-7', + longRange: '8-20' + }, + laserpistol: { + name: 'Laser Pistol', + damage: '4L', + shortRange: '1-12', + longRange: '13-30' + }, + laserrifle: { + name: 'Laser Rifle', + damage: '5L', + shortRange: '1-17', + longRange: '18-105' + }, + gyrojetrifle: { + name: 'Gyrojet Rifle', + damage: '6L', + shortRange: '1-57', + longRange: '58-180' + }, + autopistol: { + name: 'Auto Pistol', + damage: '2L', + shortRange: '1-7', + longRange: '8-20' + }, + law: { + name: 'LAW', + damage: '7/3/1 L', + shortRange: '1-22', + longRange: '23-80' + }, + hsrm: { + name: 'Heavy SRM', + damage: '13/6/3/1 L', + shortRange: '1-54', + longRange: '55-96' + }, + gl: { + name: 'Grenade Launcher', + damage: '4/2/1 L', + shortRange: '1-10', + longRange: '11-24' + }, + autogl: { + name: 'Auto Grenade Launcher', + damage: '3/2/1 L', + shortRange: '1-22', + longRange: '23-50' + }, + lrrifle: { + name: 'Light Recoilless Rifle', + damage: '4/2/1 L', + shortRange: '1-36', + longRange: '37-70' + }, + satchelcharge: { + name: 'Satchel Charge', + damage: '10/5/2 L', + shortRange: 'NA', + longRange: 'NA' + }, + flamer: { + name: 'Flamer', + damage: '2/1 L', + shortRange: '1-6', + longRange: '7-12' + }, + hflamer: { + name: 'Heavy Flamer', + damage: '2/2/1 L', + shortRange: '1-6', + longRange: '7-12' + }, + inferno: { + name: 'Inferno', + damage: '4/2/1 L', + shortRange: '1-44', + longRange: '45-108' + }, + mmg: { + name: 'Medium MG', + damage: '6L', + shortRange: '1-30', + longRange: '31-84' + }, + hmg: { + name: 'Heavy MG', + damage: '7L', + shortRange: '1-36', + longRange: '37-110' + }, + splaser: { + name: 'Semi-Portable Laser', + damage: '11L', + shortRange: '1-80', + longRange: '81-240' + }, + mpppc: { + name: 'Man-Pack PPC', + damage: '8L', + shortRange: '1-50', + longRange: '51-110' + }, + grenade: { + name: 'Grenade', + damage: '6/3/1 L', + shortRange: 'Special', + longRange: 'Special' + }, } function createIcon(number) {