Add more weapons

This commit is contained in:
2024-08-11 16:11:38 -07:00
parent e02bafefff
commit 74527947ae
5 changed files with 376 additions and 219 deletions

View File

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

View File

@@ -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'),

View File

@@ -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) {