This commit is contained in:
Azgaar 2020-04-29 00:02:05 +03:00
parent 8152ccbe9c
commit 5304306044
8 changed files with 300 additions and 26 deletions

View file

@ -19,13 +19,13 @@ function showBattleScreen(attacker, defender) {
modules.showBattleScreen = true;
// add listeners
//document.getElementById("regimentNameRestore").addEventListener("click", restoreName);
document.getElementById("battleAddRegiment").addEventListener("click", addSide);
function addHeaders() {
document.getElementById("battleScreen").querySelectorAll("th").forEach(el => el.remove());
const attackers = battleAttackers.querySelector("tr");
const defenders = battleDefenders.querySelector("tr");
let headers = "<th></th>";
let headers = "<th></th><th></th>";
for (const u of options.military) {
const label = capitalize(u.name.replace(/_/g, ' '));
@ -38,12 +38,55 @@ function showBattleScreen(attacker, defender) {
}
function addRegiment(div, regiment) {
let line = `<tr><th>${regiment.name}</th>`;
const state = ra(pack.states), supply = rand(1000) + " " + distanceUnitInput.value;
const color = state.color[0] === "#" ? state.color : "#999";
const icon = `<svg width="1.4em" height="1.4em" style="margin-bottom: -.6em;">
<rect x="0" y="0" width="100%" height="100%" fill="${color}" class="fillRect"></rect>
<text x="0" y="1.04em" style="">${regiment.icon}</text></svg>`;
const body = `<tbody id="battle${state.i}-${regiment.i}">`;
let initial = `<tr class="battleInitial"><td>${icon}</td><td class="regiment">${regiment.name.slice(0,25)}</td>`;
let casualties = `<tr class="battleCasualties"><td></td><td>${state.fullName}</td>`;
let survivors = `<tr class="battleSurvivors"><td></td><td>Supply line length: ${supply}</td>`;
for (const u of options.military) {
line += `<th>${regiment.u[u.name]||0}</th>`;
initial += `<td style="width: 2.5em; text-align: center">${regiment.u[u.name]||0}</td>`;
casualties += `<td style="width: 2.5em; text-align: center; color: red">0</td>`;
survivors += `<td style="width: 2.5em; text-align: center; color: green">${regiment.u[u.name]||0}</td>`;
}
initial += `<td style="width: 2.5em; text-align: center">${regiment.a||0}</td></tr>`;
casualties += `<td style="width: 2.5em; text-align: center; color: red">0</td></tr>`;
survivors += `<td style="width: 2.5em; text-align: center; color: green">${regiment.a||0}</td></tr>`;
div.innerHTML += body + initial + casualties + survivors + "</tbody>";
}
function addSide() {
const states = pack.states.filter(s => s.i && !s.removed);
const stateOptions = states.map(s => `<option value=${s.i}>${s.fullName}</option>`).join("");
const regiments = states[0].military.map(r => `<option value=${r.i}>${r.icon} ${r.name} (${r.a})</option>`).join("");
alertMessage.innerHTML = `<select id="addSideSide" data-tip="Select side"><option>Attackers</option><option>Defenders</option></select>
<select id="addSideState" data-tip="Select state">${stateOptions}</select><br>
<select id="addSideRegiment" data-tip="Select regiment">${regiments}</select>`;
$("#alert").dialog({resizable: false, title: "Add regiment to the battle",
buttons: {
Add: function() {
$(this).dialog("close");
const div = document.getElementById("addSideSide").selectedIndex ? battleDefenders : battleAttackers;
const state = pack.states.find(s => s.i == document.getElementById("addSideState").value);
const regiment = state.military.find(r => r.i == document.getElementById("addSideRegiment").value);
addRegiment(div, regiment);
},
Cancel: function() {$(this).dialog("close");}
}
});
document.getElementById("addSideState").onchange = function () {
const state = pack.states.find(s => s.i == this.value);
const regiments = state.military.map(r => `<option value=${r.i}>${r.icon} ${r.name} (${r.a})</option>`).join("");
document.getElementById("addSideRegiment").innerHTML = regiments;
}
line += `<th>${regiment.a||0}</th></tr>`;
div.querySelector("tbody").insertAdjacentHTML("beforebegin", line);
}
function closeBattleScreen() {