From ea9ef95c0554889df267bc4f9e3f8b77b674cede Mon Sep 17 00:00:00 2001 From: Aidan Blum Levine Date: Sun, 5 Feb 2023 12:48:44 -0500 Subject: [PATCH 1/2] show island count in sidebar --- client/visualizer/src/main/looper.ts | 2 +- client/visualizer/src/sidebar/stats.ts | 15 ++++++++++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/client/visualizer/src/main/looper.ts b/client/visualizer/src/main/looper.ts index e4d8b181..16105700 100644 --- a/client/visualizer/src/main/looper.ts +++ b/client/visualizer/src/main/looper.ts @@ -74,7 +74,7 @@ export default class Looper { teamNames.push(meta.teams[team].name) teamIDs.push(meta.teams[team].teamID) } - this.stats.initializeGame(teamNames, teamIDs) + this.stats.initializeGame(teamNames, teamIDs, match.current.mapStats.island_stats.size) const extraInfo = (this.mapinfo ? this.mapinfo + "\n" : "") + (this.conf.doingRotate ? " (Map rotated and flipped! Disable for new matches with 'Z'.)" : "") this.stats.setExtraInfo(extraInfo) if (!showTourneyUpload) this.stats.hideTourneyUpload() diff --git a/client/visualizer/src/sidebar/stats.ts b/client/visualizer/src/sidebar/stats.ts index 44ede8d9..3e2492b7 100644 --- a/client/visualizer/src/sidebar/stats.ts +++ b/client/visualizer/src/sidebar/stats.ts @@ -106,7 +106,7 @@ export default class Stats { let teamNames: Array = ["?????", "?????"]; let teamIDs: Array = [1, 2]; - this.initializeGame(teamNames, teamIDs); + this.initializeGame(teamNames, teamIDs, 0); } /** @@ -179,6 +179,12 @@ export default class Stats { return table; } + private initIslandCount(islands: number){ + let wrapper = document.createElement("div"); + wrapper.innerHTML = `${islands} islands (${Math.ceil(islands * .75)} to win)` + return wrapper; + } + private initRelativeBars(teamIDs: Array) { let metalIDs = [0, 1, 2]; let colors = ["#963749", "#25b5bc", "#f413b1"]; @@ -448,7 +454,7 @@ export default class Stats { /** * Clear the current stats bar and reinitialize it with the given teams. */ - initializeGame(teamNames: Array, teamIDs: Array) { + initializeGame(teamNames: Array, teamIDs: Array, islands: number) { // Remove the previous match info while (this.div.firstChild) { this.div.removeChild(this.div.firstChild); @@ -510,6 +516,9 @@ export default class Stats { this.div.appendChild(teamDiv); } + + this.div.appendChild(document.createElement("hr")); + this.div.append(this.initIslandCount(islands)) this.div.appendChild(document.createElement("hr")); // Add stats table @@ -541,7 +550,7 @@ export default class Stats { const relativeBarsParent = document.createElement("tbody"); relativeBarsParent.style.width = "100%"; relativeBarsTable.appendChild(relativeBarsParent); - this.div.appendChild(relativeBarsTable); + this.div.appendChild(relativeBarsTable); this.relativeBars = this.initRelativeBars(teamIDs); const relativeBarsElements = [ From b1851906daba6c5e54c5a2e925a49c535221b1b5 Mon Sep 17 00:00:00 2001 From: Aidan Blum Levine Date: Sun, 5 Feb 2023 13:54:52 -0500 Subject: [PATCH 2/2] show current island control --- client/visualizer/src/main/looper.ts | 10 + client/visualizer/src/sidebar/stats.ts | 1167 ++++++++++++------------ 2 files changed, 601 insertions(+), 576 deletions(-) diff --git a/client/visualizer/src/main/looper.ts b/client/visualizer/src/main/looper.ts index 16105700..577f21dd 100644 --- a/client/visualizer/src/main/looper.ts +++ b/client/visualizer/src/main/looper.ts @@ -360,6 +360,16 @@ export default class Looper { // } // } + let t1_islands = 0 + let t2_islands = 0 + world.mapStats.island_stats.forEach(element => { + if(element.owner == 1) + t1_islands++ + if(element.owner == 2) + t2_islands++ + }); + this.stats.setIslandCount(t1_islands, t2_islands) + let teamAdamantium: number[] = [] let teamMana: number[] = [] let teamElixir: number[] = [] diff --git a/client/visualizer/src/sidebar/stats.ts b/client/visualizer/src/sidebar/stats.ts index 3e2492b7..f62516da 100644 --- a/client/visualizer/src/sidebar/stats.ts +++ b/client/visualizer/src/sidebar/stats.ts @@ -1,27 +1,27 @@ -import { Config } from '../config'; -import * as cst from '../constants'; -import { AllImages } from '../imageloader'; -import { gameworld, schema } from 'battlecode-playback'; -import Runner from '../runner'; -import Chart = require('chart.js'); -import { HEADQUARTERS } from '../constants'; -import { threadId } from 'worker_threads'; +import { Config } from '../config' +import * as cst from '../constants' +import { AllImages } from '../imageloader' +import { gameworld, schema } from 'battlecode-playback' +import Runner from '../runner' +import Chart = require('chart.js') +import { HEADQUARTERS } from '../constants' +import { threadId } from 'worker_threads' const blue_background_chart_rgb: Chart.ChartColor = 'rgba(54, 162, 235, 0)' const blue_border_chart_rgb: Chart.ChartColor = 'rgb(108, 140, 188)' -const red_background_chart_rgb: Chart.ChartColor = 'rgba(255, 99, 132, 0)' +const red_background_chart_rgb: Chart.ChartColor = 'rgba(255, 99, 132, 0)' const red_border_chart_rgb: Chart.ChartColor = 'rgb(131,24,27)' const hex: Object = { 1: "var(--red)", 2: "var(--blue)" -}; +} type HeadQuarterBar = { bar: HTMLDivElement, headQuarter: HTMLSpanElement, //bid: HTMLSpanElement -}; +} type BuffDisplay = { numBuffs: HTMLSpanElement, @@ -44,10 +44,10 @@ type IncomeDisplay = { */ export default class Stats { - readonly div: HTMLDivElement; - private readonly images: AllImages; + readonly div: HTMLDivElement + private readonly images: AllImages - private readonly tourIndexJump: HTMLInputElement; + private readonly tourIndexJump: HTMLInputElement private teamNameNodes: HTMLSpanElement[] = []; @@ -55,36 +55,36 @@ export default class Stats { private robotImages: Map> = new Map(); // the robot image elements in the unit statistics display private robotTds: Map>> = new Map(); - private headQuarterBars: HeadQuarterBar[]; - private maxVotes: number; + private headQuarterBars: HeadQuarterBar[] + private maxVotes: number + + private incomeDisplays: IncomeDisplay[] + + private relativeBars: HTMLDivElement[] - private incomeDisplays: IncomeDisplay[]; + private buffDisplays: BuffDisplay[] - private relativeBars: HTMLDivElement[]; - - private buffDisplays: BuffDisplay[]; - - private extraInfo: HTMLDivElement; - - private robotConsole: HTMLDivElement; - - private runner: Runner; //needed for file uploading in tournament mode - - private conf: Config; + private extraInfo: HTMLDivElement + private islandCountDisplay: HTMLDivElement + private robotConsole: HTMLDivElement - private tourneyUpload: HTMLDivElement; + private runner: Runner //needed for file uploading in tournament mode - private incomeChartAdamantium: Chart; - private incomeChartMana: Chart; - private incomeChartElixir: Chart; + private conf: Config - private distribChartAdamantium: Chart; - private distribChartMana: Chart; - private distribChartElixir: Chart; + private tourneyUpload: HTMLDivElement - private ECs: HTMLDivElement; - - private islandDisplays: HTMLSpanElement[]; + private incomeChartAdamantium: Chart + private incomeChartMana: Chart + private incomeChartElixir: Chart + + private distribChartAdamantium: Chart + private distribChartMana: Chart + private distribChartElixir: Chart + + private ECs: HTMLDivElement + + private islandDisplays: HTMLSpanElement[] // Note: robot types and number of teams are currently fixed regardless of // match info. Keep in mind if we ever change these, or implement this less // statically. @@ -92,36 +92,36 @@ export default class Stats { readonly robots: schema.BodyType[] = cst.bodyTypeList; constructor(conf: Config, images: AllImages, runner: Runner) { - this.conf = conf; - this.images = images; + this.conf = conf + this.images = images for (const robot in this.images.robots_high_quality) { - let robotImages: Array = this.images.robots_high_quality[robot]; - this.robotImages[robot] = robotImages.map((image) => image.cloneNode() as HTMLImageElement); + let robotImages: Array = this.images.robots_high_quality[robot] + this.robotImages[robot] = robotImages.map((image) => image.cloneNode() as HTMLImageElement) } - - this.div = document.createElement("div"); - this.tourIndexJump = document.createElement("input"); - this.runner = runner; - - let teamNames: Array = ["?????", "?????"]; - let teamIDs: Array = [1, 2]; - this.initializeGame(teamNames, teamIDs, 0); + + this.div = document.createElement("div") + this.tourIndexJump = document.createElement("input") + this.runner = runner + + let teamNames: Array = ["?????", "?????"] + let teamIDs: Array = [1, 2] + this.initializeGame(teamNames, teamIDs, 0) } /** * Colored banner labeled with the given teamName */ private teamHeaderNode(teamName: string, inGameID: number) { - let teamHeader: HTMLDivElement = document.createElement("div"); - teamHeader.className += ' teamHeader'; - - let teamNameNode = document.createElement('span'); - teamNameNode.innerHTML = teamName; - teamHeader.style.backgroundColor = hex[inGameID]; - teamHeader.appendChild(teamNameNode); - this.teamNameNodes[inGameID] = teamNameNode; - return teamHeader; + let teamHeader: HTMLDivElement = document.createElement("div") + teamHeader.className += ' teamHeader' + + let teamNameNode = document.createElement('span') + teamNameNode.innerHTML = teamName + teamHeader.style.backgroundColor = hex[inGameID] + teamHeader.appendChild(teamNameNode) + this.teamNameNodes[inGameID] = teamNameNode + return teamHeader } /** @@ -129,41 +129,41 @@ export default class Stats { * Uses the teamID to decide which color image to display. */ private robotTable(teamID: number, inGameID: number): HTMLTableElement { - let table: HTMLTableElement = document.createElement("table"); - table.setAttribute("align", "center"); + let table: HTMLTableElement = document.createElement("table") + table.setAttribute("align", "center") // Create the table row with the robot images - let robotImages: HTMLTableRowElement = document.createElement("tr"); - robotImages.appendChild(document.createElement("td")); // blank header + let robotImages: HTMLTableRowElement = document.createElement("tr") + robotImages.appendChild(document.createElement("td")) // blank header // Create the table row with the robot counts - let robotCounts = {}; + let robotCounts = {} for (let value in this.robotTds[teamID]) { - robotCounts[value] = document.createElement("tr"); - const title = document.createElement("td"); - if (value === "count") title.innerHTML = "Count"; - if (value === "hp") title.innerHTML = "Σ(HP)"; - robotCounts[value].appendChild(title); + robotCounts[value] = document.createElement("tr") + const title = document.createElement("td") + if (value === "count") title.innerHTML = "Count" + if (value === "hp") title.innerHTML = "Σ(HP)" + robotCounts[value].appendChild(title) } for (let robot of this.robots) { - let tdRobot: HTMLTableCellElement = document.createElement("td"); - tdRobot.className = "robotSpriteStats"; - tdRobot.style.height = "50px"; - tdRobot.style.width = "50px"; - - const img: HTMLImageElement = this.robotImages[robot][inGameID]; - img.style.width = "100%"; - img.style.height = "100%"; + let tdRobot: HTMLTableCellElement = document.createElement("td") + tdRobot.className = "robotSpriteStats" + tdRobot.style.height = "50px" + tdRobot.style.width = "50px" + + const img: HTMLImageElement = this.robotImages[robot][inGameID] + img.style.width = "100%" + img.style.height = "100%" // TODO: images - tdRobot.appendChild(img); - robotImages.appendChild(tdRobot); + tdRobot.appendChild(img) + robotImages.appendChild(tdRobot) for (let value in this.robotTds[teamID]) { - let tdCount: HTMLTableCellElement = this.robotTds[teamID][value][robot]; - robotCounts[value].appendChild(tdCount); + let tdCount: HTMLTableCellElement = this.robotTds[teamID][value][robot] + robotCounts[value].appendChild(tdCount) // TODO: figure out what's going on here // if (robot === schema.BodyType.ENLIGHTENMENT_CENTER && value === "count") { // tdCount.style.fontWeight = "bold"; @@ -171,239 +171,252 @@ export default class Stats { // } } } - table.appendChild(robotImages); + table.appendChild(robotImages) for (let value in this.robotTds[teamID]) { - table.appendChild(robotCounts[value]); + table.appendChild(robotCounts[value]) } - return table; + return table + } + + private initIslandCount(islands: number) { + let wrapper = document.createElement("div") + wrapper.innerHTML = `${islands} islands (${Math.ceil(islands * .75)} to win): ` + wrapper.style.display = 'flex' + wrapper.style.justifyContent = 'center' + wrapper.style.gap = '5px' + let display = document.createElement("div") + display.innerHTML = `
${0}
${0}
` + display.style.display = 'flex' + display.style.gap = '5px' + display.style.fontWeight = 'bold' + wrapper.appendChild(display) + return [wrapper, display] } - private initIslandCount(islands: number){ - let wrapper = document.createElement("div"); - wrapper.innerHTML = `${islands} islands (${Math.ceil(islands * .75)} to win)` - return wrapper; + setIslandCount(t1: number, t2: number) { + this.islandCountDisplay.innerHTML = `
${t1}
${t2}
` } private initRelativeBars(teamIDs: Array) { - let metalIDs = [0, 1, 2]; - let colors = ["#963749", "#25b5bc", "#f413b1"]; - const relativeBars: HTMLDivElement[] = []; + let metalIDs = [0, 1, 2] + let colors = ["#963749", "#25b5bc", "#f413b1"] + const relativeBars: HTMLDivElement[] = [] teamIDs.forEach((teamID: number) => metalIDs.forEach((id: number) => { - const bar = document.createElement("div"); + const bar = document.createElement("div") // bar.style.backgroundColor = colors[id]; - bar.style.border = "5px solid " + ((teamID === teamIDs[0]) ? "var(--red)" : "var(--blue)"); - bar.style.width = `90%`; - bar.className = "influence-bar"; - bar.innerText = "0%"; - bar.id = teamID.toString(); - relativeBars[2*id + ((teamIDs[0] === teamID)?0:1)] = bar; - })); - return relativeBars; + bar.style.border = "5px solid " + ((teamID === teamIDs[0]) ? "var(--red)" : "var(--blue)") + bar.style.width = `90%` + bar.className = "influence-bar" + bar.innerText = "0%" + bar.id = teamID.toString() + relativeBars[2 * id + ((teamIDs[0] === teamID) ? 0 : 1)] = bar + })) + return relativeBars } - private createRelativeBarsRow(statName: string, rowIndex: number){ - const tr = document.createElement("tr"); - tr.style.width = "100%"; + private createRelativeBarsRow(statName: string, rowIndex: number) { + const tr = document.createElement("tr") + tr.style.width = "100%" + + const label = document.createElement('td') + label.className = "stats-header" + label.innerText = statName - const label = document.createElement('td'); - label.className = "stats-header"; - label.innerText = statName; + const cell1 = document.createElement("td") + cell1.style.width = "50%" + cell1.appendChild(this.relativeBars[rowIndex * 2]) - const cell1 = document.createElement("td"); - cell1.style.width = "50%"; - cell1.appendChild(this.relativeBars[rowIndex * 2]); - - const cell2 = document.createElement("td"); - cell2.style.width = "50%"; - cell2.appendChild(this.relativeBars[rowIndex * 2 + 1]); + const cell2 = document.createElement("td") + cell2.style.width = "50%" + cell2.appendChild(this.relativeBars[rowIndex * 2 + 1]) - tr.appendChild(label); - tr.appendChild(cell1); - tr.appendChild(cell2); + tr.appendChild(label) + tr.appendChild(cell1) + tr.appendChild(cell2) - return tr; + return tr } - private updateRelBars(teamAdamantium: Array, teamMana: Array, teamElixir: Array){ - for(var a = 0; a < teamAdamantium.length; a++){ - this.relativeBars[a].innerHTML = teamAdamantium[a].toString(); - this.relativeBars[a].style.width = (Math.max(teamAdamantium[0], teamAdamantium[1]) === 0 ? 90:(90.0*teamAdamantium[a]/Math.max(teamAdamantium[0], teamAdamantium[1]))).toString() + "%"; + private updateRelBars(teamAdamantium: Array, teamMana: Array, teamElixir: Array) { + for (var a = 0; a < teamAdamantium.length; a++) { + this.relativeBars[a].innerHTML = teamAdamantium[a].toString() + this.relativeBars[a].style.width = (Math.max(teamAdamantium[0], teamAdamantium[1]) === 0 ? 90 : (90.0 * teamAdamantium[a] / Math.max(teamAdamantium[0], teamAdamantium[1]))).toString() + "%" } - for(var a = 0; a < teamMana.length; a++){ - this.relativeBars[a+2].innerHTML = teamMana[a].toString(); - this.relativeBars[a+2].style.width = (Math.max(teamMana[0], teamMana[1]) === 0 ? 90:(90.0*teamMana[a]/Math.max(teamMana[0], teamMana[1]))).toString() + "%"; + for (var a = 0; a < teamMana.length; a++) { + this.relativeBars[a + 2].innerHTML = teamMana[a].toString() + this.relativeBars[a + 2].style.width = (Math.max(teamMana[0], teamMana[1]) === 0 ? 90 : (90.0 * teamMana[a] / Math.max(teamMana[0], teamMana[1]))).toString() + "%" } - for(var a = 0; a < teamElixir.length; a++){ - this.relativeBars[a+4].innerHTML = teamElixir[a].toString(); - this.relativeBars[a+4].style.width = (Math.max(teamElixir[0], teamElixir[1]) === 0 ? 90:(90.0*teamElixir[a]/Math.max(teamElixir[0], teamElixir[1]))).toString() + "%"; + for (var a = 0; a < teamElixir.length; a++) { + this.relativeBars[a + 4].innerHTML = teamElixir[a].toString() + this.relativeBars[a + 4].style.width = (Math.max(teamElixir[0], teamElixir[1]) === 0 ? 90 : (90.0 * teamElixir[a] / Math.max(teamElixir[0], teamElixir[1]))).toString() + "%" } } private initIncomeDisplays(teamIDs: Array) { - const incomeDisplays: IncomeDisplay[] = []; + const incomeDisplays: IncomeDisplay[] = [] teamIDs.forEach((id: number) => { - const adamantiumIncome = document.createElement("div"); - const manaIncome = document.createElement("div"); - const elixirIncome = document.createElement("div"); - adamantiumIncome.style.color = hex[id]; - adamantiumIncome.style.fontWeight = "bold"; - adamantiumIncome.textContent = "Ad: 0"; - adamantiumIncome.style.padding = "10px"; - manaIncome.style.color = hex[id]; - manaIncome.style.fontWeight = "bold"; - manaIncome.textContent = "MN: 0"; - manaIncome.style.padding = "10px"; - elixirIncome.style.color = hex[id]; - elixirIncome.style.fontWeight = "bold"; - elixirIncome.textContent = "EL: 0"; - elixirIncome.style.padding = "10px"; - incomeDisplays[id] = {adamantiumIncome: adamantiumIncome, manaIncome: manaIncome, elixirIncome: elixirIncome}; - }); - return incomeDisplays; + const adamantiumIncome = document.createElement("div") + const manaIncome = document.createElement("div") + const elixirIncome = document.createElement("div") + adamantiumIncome.style.color = hex[id] + adamantiumIncome.style.fontWeight = "bold" + adamantiumIncome.textContent = "Ad: 0" + adamantiumIncome.style.padding = "10px" + manaIncome.style.color = hex[id] + manaIncome.style.fontWeight = "bold" + manaIncome.textContent = "MN: 0" + manaIncome.style.padding = "10px" + elixirIncome.style.color = hex[id] + elixirIncome.style.fontWeight = "bold" + elixirIncome.textContent = "EL: 0" + elixirIncome.style.padding = "10px" + incomeDisplays[id] = { adamantiumIncome: adamantiumIncome, manaIncome: manaIncome, elixirIncome: elixirIncome } + }) + return incomeDisplays } private getIncomeDisplaysElement(teamIDs: Array): HTMLElement { - const table = document.createElement("table"); - table.id = "income-table"; - table.style.width = "100%"; + const table = document.createElement("table") + table.id = "income-table" + table.style.width = "100%" - const title = document.createElement('td'); - title.colSpan = 4; - const label = document.createElement('div'); - label.className = "stats-header"; - label.innerText = 'Total Resource Income Per Turn'; + const title = document.createElement('td') + title.colSpan = 4 + const label = document.createElement('div') + label.className = "stats-header" + label.innerText = 'Total Resource Income Per Turn' - const row = document.createElement("tr"); + const row = document.createElement("tr") - const cellAdamantium = document.createElement("td"); + const cellAdamantium = document.createElement("td") teamIDs.forEach((id: number) => { - + // cell.appendChild(document.createTextNode("1.001")); // cell.appendChild(this.buffDisplays[id].numBuffs); // cell.appendChild(document.createTextNode(" = ")); - cellAdamantium.appendChild(this.incomeDisplays[id].adamantiumIncome); - row.appendChild(cellAdamantium); - }); + cellAdamantium.appendChild(this.incomeDisplays[id].adamantiumIncome) + row.appendChild(cellAdamantium) + }) - - const cellMana = document.createElement("td"); + + const cellMana = document.createElement("td") teamIDs.forEach((id: number) => { - + // cell.appendChild(document.createTextNode("1.001")); // cell.appendChild(this.buffDisplays[id].numBuffs); // cell.appendChild(document.createTextNode(" = ")); - cellMana.appendChild(this.incomeDisplays[id].manaIncome); - row.appendChild(cellMana); - }); - const cellElixir = document.createElement("td"); + cellMana.appendChild(this.incomeDisplays[id].manaIncome) + row.appendChild(cellMana) + }) + const cellElixir = document.createElement("td") teamIDs.forEach((id: number) => { - + // cell.appendChild(document.createTextNode("1.001")); // cell.appendChild(this.buffDisplays[id].numBuffs); // cell.appendChild(document.createTextNode(" = ")); - cellElixir.appendChild(this.incomeDisplays[id].elixirIncome); - row.appendChild(cellElixir); - }); - title.appendChild(label); - table.appendChild(title); - table.appendChild(row); - - return table; + cellElixir.appendChild(this.incomeDisplays[id].elixirIncome) + row.appendChild(cellElixir) + }) + title.appendChild(label) + table.appendChild(title) + table.appendChild(row) + + return table } private getIncomeManaGraph() { - const canvas = document.createElement("canvas"); - canvas.id = "manaGraph"; - canvas.className = "graph"; - return canvas; + const canvas = document.createElement("canvas") + canvas.id = "manaGraph" + canvas.className = "graph" + return canvas } private getIncomeAdamantiumGraph() { - const canvas = document.createElement("canvas"); - canvas.id = "adamantiumGraph"; - canvas.className = "graph"; - return canvas; + const canvas = document.createElement("canvas") + canvas.id = "adamantiumGraph" + canvas.className = "graph" + return canvas } private getIncomeElixirGraph() { - const canvas = document.createElement("canvas"); - canvas.id = "elixirGraph"; - canvas.className = "graph"; - return canvas; + const canvas = document.createElement("canvas") + canvas.id = "elixirGraph" + canvas.className = "graph" + return canvas } private getDistribElixirGraph() { - const canvas = document.createElement("canvas"); - canvas.id = "elixirDistirbGraph"; - canvas.className = "graph"; - return canvas; + const canvas = document.createElement("canvas") + canvas.id = "elixirDistirbGraph" + canvas.className = "graph" + return canvas } private getDistribAdamantiumGraph() { - const canvas = document.createElement("canvas"); - canvas.id = "adamantiumDistirbGraph"; - canvas.className = "graph"; - return canvas; + const canvas = document.createElement("canvas") + canvas.id = "adamantiumDistirbGraph" + canvas.className = "graph" + return canvas } private getDistribManaGraph() { - const canvas = document.createElement("canvas"); - canvas.id = "manaDistirbGraph"; - canvas.className = "graph"; - return canvas; + const canvas = document.createElement("canvas") + canvas.id = "manaDistirbGraph" + canvas.className = "graph" + return canvas } private getECDivElement() { - const div = document.createElement('div'); - const label = document.createElement('div'); - label.className = "stats-header"; - label.innerText = 'HeadQuarter Status'; - div.appendChild(label); - div.appendChild(this.ECs); - return div; + const div = document.createElement('div') + const label = document.createElement('div') + label.className = "stats-header" + label.innerText = 'HeadQuarter Status' + div.appendChild(label) + div.appendChild(this.ECs) + return div } private initIslandDisplays(teamIDs: Array) { - const islandDisplay: HTMLSpanElement[] = []; + const islandDisplay: HTMLSpanElement[] = [] teamIDs.forEach((id: number) => { - const adamantiumIncome = document.createElement("span"); - adamantiumIncome.style.color = hex[id]; - adamantiumIncome.style.fontWeight = "bold"; - adamantiumIncome.textContent = "0"; - adamantiumIncome.style.padding = "10px"; + const adamantiumIncome = document.createElement("span") + adamantiumIncome.style.color = hex[id] + adamantiumIncome.style.fontWeight = "bold" + adamantiumIncome.textContent = "0" + adamantiumIncome.style.padding = "10px" islandDisplay[id] = adamantiumIncome - }); - return islandDisplay; + }) + return islandDisplay } private getIslandDisplaysElement(teamIDs: Array): HTMLElement { - const table = document.createElement("table"); - table.id = "islands-table"; - table.style.width = "100%"; + const table = document.createElement("table") + table.id = "islands-table" + table.style.width = "100%" - const title = document.createElement('td'); - title.colSpan = 4; - const label = document.createElement('div'); - label.className = "stats-header"; - label.innerText = 'Islands owned by each team'; + const title = document.createElement('td') + title.colSpan = 4 + const label = document.createElement('div') + label.className = "stats-header" + label.innerText = 'Islands owned by each team' - const row = document.createElement("tr"); + const row = document.createElement("tr") - const cellIsland = document.createElement("td"); + const cellIsland = document.createElement("td") teamIDs.forEach((id: number) => { - cellIsland.appendChild(this.islandDisplays[id]); - row.appendChild(cellIsland); - }); + cellIsland.appendChild(this.islandDisplays[id]) + row.appendChild(cellIsland) + }) - title.appendChild(label); - table.appendChild(title); - table.appendChild(row); + title.appendChild(label) + table.appendChild(title) + table.appendChild(row) - return table; + return table } - + // private drawBuffsGraph(ctx: CanvasRenderingContext2D, upto: number) { // ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // // draw axes @@ -457,16 +470,16 @@ export default class Stats { initializeGame(teamNames: Array, teamIDs: Array, islands: number) { // Remove the previous match info while (this.div.firstChild) { - this.div.removeChild(this.div.firstChild); + this.div.removeChild(this.div.firstChild) } - this.relativeBars = []; - this.maxVotes = 750; + this.relativeBars = [] + this.maxVotes = 750 - this.div.appendChild(document.createElement("br")); + this.div.appendChild(document.createElement("br")) // if (this.conf.tournamentMode) { // // FOR TOURNAMENT // this.tourneyUpload = document.createElement('div'); - + // let uploadButton = this.runner.getUploadButton(); // let tempdiv = document.createElement("div"); // tempdiv.className = "upload-button-div"; @@ -482,44 +495,46 @@ export default class Stats { // this.div.appendChild(this.tourneyUpload); // } - this.extraInfo = document.createElement('div'); - this.extraInfo.className = "extra-info"; - this.div.appendChild(this.extraInfo); + this.extraInfo = document.createElement('div') + this.extraInfo.className = "extra-info" + this.div.appendChild(this.extraInfo) // Populate with new info // Add a section to the stats bar for each team in the match for (var index = 0; index < teamIDs.length; index++) { // Collect identifying information - let teamID = teamIDs[index]; - let teamName = teamNames[index]; - let inGameID = index + 1; // teams start at index 1 - this.robotTds[teamID] = new Map(); + let teamID = teamIDs[index] + let teamName = teamNames[index] + let inGameID = index + 1 // teams start at index 1 + this.robotTds[teamID] = new Map() // A div element containing all stats information about this team - let teamDiv = document.createElement("div"); + let teamDiv = document.createElement("div") // Create td elements for the robot counts and store them in robotTds // so we can update these robot counts later; maps robot type to count for (let value of ["count", "hp"]) { - this.robotTds[teamID][value] = new Map(); + this.robotTds[teamID][value] = new Map() for (let robot of this.robots) { - let td: HTMLTableCellElement = document.createElement("td"); - td.innerHTML = "0"; - this.robotTds[teamID][value][robot] = td; + let td: HTMLTableCellElement = document.createElement("td") + td.innerHTML = "0" + this.robotTds[teamID][value][robot] = td } } // Add the team name banner and the robot count table - teamDiv.appendChild(this.teamHeaderNode(teamName, inGameID)); - teamDiv.appendChild(this.robotTable(teamID, inGameID)); + teamDiv.appendChild(this.teamHeaderNode(teamName, inGameID)) + teamDiv.appendChild(this.robotTable(teamID, inGameID)) - this.div.appendChild(teamDiv); + this.div.appendChild(teamDiv) } - - this.div.appendChild(document.createElement("hr")); - this.div.append(this.initIslandCount(islands)) - this.div.appendChild(document.createElement("hr")); + + this.div.appendChild(document.createElement("hr")) + let [wrapper, display] = this.initIslandCount(islands) + this.div.append(wrapper) + this.islandCountDisplay = display + this.div.appendChild(document.createElement("hr")) // Add stats table /*let archonnums: Array = [1, 2]; @@ -528,169 +543,169 @@ export default class Stats { console.log(archonnums[id]); });*/ // Create table structure - const relativeBarsTable = document.createElement("table"); - relativeBarsTable.style.margin = "1rem 0 1rem 0"; - const relativeBarsHeader = document.createElement("thead"); - relativeBarsTable.appendChild(relativeBarsHeader); - const relativeBarsHeaderRow = document.createElement("tr"); - relativeBarsHeader.appendChild(relativeBarsHeaderRow); + const relativeBarsTable = document.createElement("table") + relativeBarsTable.style.margin = "1rem 0 1rem 0" + const relativeBarsHeader = document.createElement("thead") + relativeBarsTable.appendChild(relativeBarsHeader) + const relativeBarsHeaderRow = document.createElement("tr") + relativeBarsHeader.appendChild(relativeBarsHeaderRow) // Create blue/red team header - relativeBarsHeaderRow.appendChild(document.createElement("td")); // Empty cell - const redTeamHeader = document.createElement("td"); - redTeamHeader.className = "stats-header"; - redTeamHeader.innerText = "Red"; - const blueTeamHeader = document.createElement("td"); - blueTeamHeader.className = "stats-header"; - blueTeamHeader.innerText = "Blue"; - relativeBarsHeaderRow.appendChild(redTeamHeader); - relativeBarsHeaderRow.appendChild(blueTeamHeader); + relativeBarsHeaderRow.appendChild(document.createElement("td")) // Empty cell + const redTeamHeader = document.createElement("td") + redTeamHeader.className = "stats-header" + redTeamHeader.innerText = "Red" + const blueTeamHeader = document.createElement("td") + blueTeamHeader.className = "stats-header" + blueTeamHeader.innerText = "Blue" + relativeBarsHeaderRow.appendChild(redTeamHeader) + relativeBarsHeaderRow.appendChild(blueTeamHeader) // Create resource rows - const relativeBarsParent = document.createElement("tbody"); - relativeBarsParent.style.width = "100%"; - relativeBarsTable.appendChild(relativeBarsParent); - this.div.appendChild(relativeBarsTable); + const relativeBarsParent = document.createElement("tbody") + relativeBarsParent.style.width = "100%" + relativeBarsTable.appendChild(relativeBarsParent) + this.div.appendChild(relativeBarsTable) - this.relativeBars = this.initRelativeBars(teamIDs); + this.relativeBars = this.initRelativeBars(teamIDs) const relativeBarsElements = [ this.createRelativeBarsRow("Adamantium", 0), this.createRelativeBarsRow("Mana", 1), this.createRelativeBarsRow("Elixir", 2) - ]; - relativeBarsElements.forEach((relBar: HTMLDivElement) => { relativeBarsParent.appendChild(relBar);}); - - this.incomeDisplays = this.initIncomeDisplays(teamIDs); - const incomeElement = this.getIncomeDisplaysElement(teamIDs); - this.div.appendChild(incomeElement); - - const graphs = document.createElement("div"); - graphs.style.display = 'flex'; - graphs.style.flexDirection = "column"; - - const row1= document.createElement("div"); - row1.style.display = 'flex'; - row1.style.flexDirection = "row"; + ] + relativeBarsElements.forEach((relBar: HTMLDivElement) => { relativeBarsParent.appendChild(relBar) }) + + this.incomeDisplays = this.initIncomeDisplays(teamIDs) + const incomeElement = this.getIncomeDisplaysElement(teamIDs) + this.div.appendChild(incomeElement) + + const graphs = document.createElement("div") + graphs.style.display = 'flex' + graphs.style.flexDirection = "column" + + const row1 = document.createElement("div") + row1.style.display = 'flex' + row1.style.flexDirection = "row" // Adamantium - const adamantiumWrapper = document.createElement("div"); - adamantiumWrapper.style.width = "50%"; - const canvasElementAdamantium = this.getIncomeAdamantiumGraph(); - adamantiumWrapper.appendChild(canvasElementAdamantium); - row1.appendChild(adamantiumWrapper); + const adamantiumWrapper = document.createElement("div") + adamantiumWrapper.style.width = "50%" + const canvasElementAdamantium = this.getIncomeAdamantiumGraph() + adamantiumWrapper.appendChild(canvasElementAdamantium) + row1.appendChild(adamantiumWrapper) // Mana - const manaWrapper = document.createElement("div"); - manaWrapper.style.width = "50%"; - const canvasElementMana = this.getIncomeManaGraph(); - manaWrapper.appendChild(canvasElementMana); - row1.appendChild(manaWrapper); + const manaWrapper = document.createElement("div") + manaWrapper.style.width = "50%" + const canvasElementMana = this.getIncomeManaGraph() + manaWrapper.appendChild(canvasElementMana) + row1.appendChild(manaWrapper) - graphs.append(row1); + graphs.append(row1) - const row2= document.createElement("div") - row2.style.display = 'flex'; - row2.style.flexDirection = "row"; - row2.style.justifyContent = "center"; + const row2 = document.createElement("div") + row2.style.display = 'flex' + row2.style.flexDirection = "row" + row2.style.justifyContent = "center" // Elixir - const elixirWrapper = document.createElement("div"); - elixirWrapper.style.width = "50%"; - const canvasElementElixir = this.getIncomeElixirGraph(); - elixirWrapper.appendChild(canvasElementElixir); + const elixirWrapper = document.createElement("div") + elixirWrapper.style.width = "50%" + const canvasElementElixir = this.getIncomeElixirGraph() + elixirWrapper.appendChild(canvasElementElixir) row2.append(elixirWrapper) - graphs.append(row2); + graphs.append(row2) + + const row3 = document.createElement("div") + row3.style.display = 'flex' + row3.style.flexDirection = "row" + row3.style.justifyContent = "center" - const row3= document.createElement("div") - row3.style.display = 'flex'; - row3.style.flexDirection = "row"; - row3.style.justifyContent = "center"; - - const adamantiumDistribWrapper = document.createElement("div"); - adamantiumDistribWrapper.style.width = "50%"; - const canvasElementDstirbAdamantium = this.getDistribAdamantiumGraph(); - adamantiumDistribWrapper.appendChild(canvasElementDstirbAdamantium); + const adamantiumDistribWrapper = document.createElement("div") + adamantiumDistribWrapper.style.width = "50%" + const canvasElementDstirbAdamantium = this.getDistribAdamantiumGraph() + adamantiumDistribWrapper.appendChild(canvasElementDstirbAdamantium) row3.append(adamantiumDistribWrapper) - const manaDistribWrapper = document.createElement("div"); - manaDistribWrapper.style.width = "50%"; - const canvasElementDstirbMana = this.getDistribManaGraph(); - manaDistribWrapper.appendChild(canvasElementDstirbMana); + const manaDistribWrapper = document.createElement("div") + manaDistribWrapper.style.width = "50%" + const canvasElementDstirbMana = this.getDistribManaGraph() + manaDistribWrapper.appendChild(canvasElementDstirbMana) row3.append(manaDistribWrapper) - graphs.append(row3); + graphs.append(row3) - const row4= document.createElement("div") - row4.style.display = 'flex'; - row4.style.flexDirection = "row"; - row4.style.justifyContent = "center"; + const row4 = document.createElement("div") + row4.style.display = 'flex' + row4.style.flexDirection = "row" + row4.style.justifyContent = "center" - const elixirDistribWrapper = document.createElement("div"); - elixirDistribWrapper.style.width = "50%"; - const canvasElementDstirbElixir = this.getDistribElixirGraph(); - elixirDistribWrapper.appendChild(canvasElementDstirbElixir); + const elixirDistribWrapper = document.createElement("div") + elixirDistribWrapper.style.width = "50%" + const canvasElementDstirbElixir = this.getDistribElixirGraph() + elixirDistribWrapper.appendChild(canvasElementDstirbElixir) row4.append(elixirDistribWrapper) - - graphs.append(row4); - this.div.appendChild(graphs); - + + graphs.append(row4) + this.div.appendChild(graphs) + this.incomeChartAdamantium = new Chart(canvasElementAdamantium, { type: 'line', data: { - datasets: [{ - label: 'Red Adamantium', - lineTension: 0, - data: [], - backgroundColor: red_background_chart_rgb, - borderColor: red_border_chart_rgb, - pointRadius: 0, - }, - { - label: 'Blue Adamantium', - lineTension: 0, - data: [], - backgroundColor: blue_background_chart_rgb, - borderColor: blue_border_chart_rgb, - pointRadius: 0, - }] + datasets: [{ + label: 'Red Adamantium', + lineTension: 0, + data: [], + backgroundColor: red_background_chart_rgb, + borderColor: red_border_chart_rgb, + pointRadius: 0, + }, + { + label: 'Blue Adamantium', + lineTension: 0, + data: [], + backgroundColor: blue_background_chart_rgb, + borderColor: blue_border_chart_rgb, + pointRadius: 0, + }] }, options: { - aspectRatio: 0.75, - animation: { - duration: 0 - }, - scales: { - xAxes: [{ - type: 'linear', - ticks: { - beginAtZero: true + aspectRatio: 0.75, + animation: { + duration: 0 + }, + scales: { + xAxes: [{ + type: 'linear', + ticks: { + beginAtZero: true }, - scaleLabel: { - display: true, - labelString: "Turn" - } - }], - yAxes: [{ - type: 'linear', - ticks: { - beginAtZero: true - } - }] - } + scaleLabel: { + display: true, + labelString: "Turn" + } + }], + yAxes: [{ + type: 'linear', + ticks: { + beginAtZero: true + } + }] + } } - }); + }) this.incomeChartMana = new Chart(canvasElementMana, { type: 'line', data: { - datasets: [ + datasets: [ { label: 'Red Mana', lineTension: 0, @@ -709,76 +724,76 @@ export default class Stats { }] }, options: { - aspectRatio: 0.75, - animation: { - duration: 0 - }, - scales: { - xAxes: [{ - type: 'linear', - ticks: { - beginAtZero: true + aspectRatio: 0.75, + animation: { + duration: 0 + }, + scales: { + xAxes: [{ + type: 'linear', + ticks: { + beginAtZero: true }, - scaleLabel: { - display: true, - labelString: "Turn" - } - }], - yAxes: [{ - type: 'linear', - ticks: { - beginAtZero: true - } - }] - } + scaleLabel: { + display: true, + labelString: "Turn" + } + }], + yAxes: [{ + type: 'linear', + ticks: { + beginAtZero: true + } + }] + } } - }); + }) this.incomeChartElixir = new Chart(canvasElementElixir, { type: 'line', data: { - datasets: [{ - label: 'Red Elixir', - lineTension: 0, - data: [], - backgroundColor: red_background_chart_rgb, - borderColor: red_border_chart_rgb, - pointRadius: 0, - }, - { - label: 'Blue Elixir', - lineTension: 0, - data: [], - backgroundColor: blue_background_chart_rgb, - borderColor: blue_border_chart_rgb, - pointRadius: 0, - }] + datasets: [{ + label: 'Red Elixir', + lineTension: 0, + data: [], + backgroundColor: red_background_chart_rgb, + borderColor: red_border_chart_rgb, + pointRadius: 0, + }, + { + label: 'Blue Elixir', + lineTension: 0, + data: [], + backgroundColor: blue_background_chart_rgb, + borderColor: blue_border_chart_rgb, + pointRadius: 0, + }] }, options: { - aspectRatio: 0.75, - animation: { - duration: 0 - }, - scales: { - xAxes: [{ - type: 'linear', - ticks: { - beginAtZero: true + aspectRatio: 0.75, + animation: { + duration: 0 + }, + scales: { + xAxes: [{ + type: 'linear', + ticks: { + beginAtZero: true }, - scaleLabel: { - display: true, - labelString: "Turn" - } - }], - yAxes: [{ - type: 'linear', - ticks: { - beginAtZero: true - } - }] - } + scaleLabel: { + display: true, + labelString: "Turn" + } + }], + yAxes: [{ + type: 'linear', + ticks: { + beginAtZero: true + } + }] + } } - }); + }) this.distribChartElixir = new Chart(canvasElementDstirbElixir, { type: 'bar', @@ -793,25 +808,25 @@ export default class Stats { borderWidth: 1, } ] - - } , - - options: { - aspectRatio: 0.75, - scales: { - yAxes: [{ - ticks: { - beginAtZero: true - } - }] - }, - legend: { display: false }, - title: { - display: true, - text: 'Elixir Distribution' + + }, + + options: { + aspectRatio: 0.75, + scales: { + yAxes: [{ + ticks: { + beginAtZero: true + } + }] + }, + legend: { display: false }, + title: { + display: true, + text: 'Elixir Distribution' + } } - } - + }) this.distribChartMana = new Chart(canvasElementDstirbMana, { @@ -827,28 +842,28 @@ export default class Stats { borderWidth: 1, } ] - - } , - options: { - aspectRatio: 0.75, - - scales: { - yAxes: [{ - ticks: { - beginAtZero: true - } - }] - }, - legend: { display: false }, - title: { - display: true, - text: 'Mana Distribution' + + }, + options: { + aspectRatio: 0.75, + + scales: { + yAxes: [{ + ticks: { + beginAtZero: true + } + }] + }, + legend: { display: false }, + title: { + display: true, + text: 'Mana Distribution' + } } - } - + }) - this. distribChartAdamantium= new Chart(canvasElementDstirbAdamantium, { + this.distribChartAdamantium = new Chart(canvasElementDstirbAdamantium, { type: 'bar', data: { labels: ['HQs', 'HQs', 'robots', 'robots'], @@ -861,45 +876,45 @@ export default class Stats { borderWidth: 1, } ], - } , - - options: { - aspectRatio: 0.75, - - scales: { - yAxes: [{ - ticks: { - beginAtZero: true - } - }] - }, - legend: { display: false }, - title: { - display: true, - text: 'Adamantium Distribution' + }, + + options: { + aspectRatio: 0.75, + + scales: { + yAxes: [{ + ticks: { + beginAtZero: true + } + }] + }, + legend: { display: false }, + title: { + display: true, + text: 'Adamantium Distribution' + } } - } - + }) - this.ECs = document.createElement("div"); - this.ECs.style.height = "100px"; - this.ECs.style.display = "flex"; - this.div.appendChild(this.getECDivElement()); + this.ECs = document.createElement("div") + this.ECs.style.height = "100px" + this.ECs.style.display = "flex" + this.div.appendChild(this.getECDivElement()) + + this.div.appendChild(document.createElement("br")) - this.div.appendChild(document.createElement("br")); - - this.islandDisplays = this.initIslandDisplays(teamIDs); - const islandElement = this.getIslandDisplaysElement(teamIDs); - this.div.appendChild(islandElement); + this.islandDisplays = this.initIslandDisplays(teamIDs) + const islandElement = this.getIslandDisplaysElement(teamIDs) + this.div.appendChild(islandElement) } tourIndexJumpFun(e) { if (e.keyCode === 13) { - var h = +this.tourIndexJump.value.trim().toLowerCase(); - this.runner.seekTournament(h - 1); + var h = +this.tourIndexJump.value.trim().toLowerCase() + this.runner.seekTournament(h - 1) } } @@ -907,22 +922,22 @@ export default class Stats { * Change the robot count on the stats bar */ setRobotCount(teamID: number, robotType: schema.BodyType, count: number) { - let td: HTMLTableCellElement = this.robotTds[teamID]["count"][robotType]; - td.innerHTML = String(count); + let td: HTMLTableCellElement = this.robotTds[teamID]["count"][robotType] + td.innerHTML = String(count) } /** * Change the robot HP (previously conviction) on the stats bar */ setRobotHP(teamID: number, robotType: schema.BodyType, HP: number, totalHP: number) { - let td: HTMLTableCellElement = this.robotTds[teamID]["hp"][robotType]; - td.innerHTML = String(HP); + let td: HTMLTableCellElement = this.robotTds[teamID]["hp"][robotType] + td.innerHTML = String(HP) - let img = this.robotImages[robotType][teamID]; + let img = this.robotImages[robotType][teamID] - const size = (55 + 45 * HP / totalHP); - img.style.width = size + "%"; - img.style.height = size + "%"; + const size = (55 + 45 * HP / totalHP) + img.style.width = size + "%" + img.style.height = size + "%" } /** @@ -938,10 +953,10 @@ export default class Stats { */ setVotes(teamID: number, count: number) { // TODO: figure out if statbars.get(id) can actually be null?? - const statBar: HeadQuarterBar = this.headQuarterBars[teamID]; - statBar.headQuarter.innerText = String(count); - this.maxVotes = Math.max(this.maxVotes, count); - statBar.bar.style.width = `${Math.min(100 * count / this.maxVotes, 100)}%`; + const statBar: HeadQuarterBar = this.headQuarterBars[teamID] + statBar.headQuarter.innerText = String(count) + this.maxVotes = Math.max(this.maxVotes, count) + statBar.bar.style.width = `${Math.min(100 * count / this.maxVotes, 100)}%` // TODO add reactions to relative bars // TODO get total votes to get ratio @@ -962,65 +977,65 @@ export default class Stats { setIncome(teamID: number, teamStats: gameworld.TeamStats, turn: number, forceUpdate: boolean) { // incomes this.incomeDisplays[teamID].adamantiumIncome.textContent = - "Ad: " + String((teamStats.adamantiumIncomeDataset[teamStats.adamantiumIncomeDataset.length - 1] ?? { y: 0 }).y.toFixed(2)); // change incomeDisplays later + "Ad: " + String((teamStats.adamantiumIncomeDataset[teamStats.adamantiumIncomeDataset.length - 1] ?? { y: 0 }).y.toFixed(2)) // change incomeDisplays later this.incomeDisplays[teamID].elixirIncome.textContent = - "El: " + String((teamStats.elixirIncomeDataset[teamStats.elixirIncomeDataset.length - 1] ?? { y: 0 }).y.toFixed(2)); + "El: " + String((teamStats.elixirIncomeDataset[teamStats.elixirIncomeDataset.length - 1] ?? { y: 0 }).y.toFixed(2)) this.incomeDisplays[teamID].manaIncome.textContent = - "Mn: " + String((teamStats.manaIncomeDataset[teamStats.manaIncomeDataset.length - 1] ?? { y: 0 }).y.toFixed(2)); - + "Mn: " + String((teamStats.manaIncomeDataset[teamStats.manaIncomeDataset.length - 1] ?? { y: 0 }).y.toFixed(2)) + // We check (turn - 1) here because the datasets get updated every 10 turns, so they will be visible to the graphs // starting on the 11th turn if (forceUpdate || (turn - 1) % 10 == 0) { //@ts-ignore - this.incomeChartAdamantium.data.datasets![teamID - 1].data = teamStats.adamantiumIncomeDataset; + this.incomeChartAdamantium.data.datasets![teamID - 1].data = teamStats.adamantiumIncomeDataset //@ts-ignore - this.incomeChartMana.data.datasets![teamID - 1].data = teamStats.manaIncomeDataset; + this.incomeChartMana.data.datasets![teamID - 1].data = teamStats.manaIncomeDataset //@ts-ignore - this.incomeChartElixir.data.datasets![teamID - 1].data = teamStats.elixirIncomeDataset; + this.incomeChartElixir.data.datasets![teamID - 1].data = teamStats.elixirIncomeDataset - this.incomeChartAdamantium.update(); - this.incomeChartMana.update(); - this.incomeChartElixir.update(); + this.incomeChartAdamantium.update() + this.incomeChartMana.update() + this.incomeChartElixir.update() } } - updateDistributionBars(resources){ - - var redHQsElixir = resources[1]["El"]["with_HQ"].reduce((partialSum, a) => partialSum + a, 0); - var blueHQsElixir = resources[2]["El"]["with_HQ"].reduce((partialSum, a) => partialSum + a, 0); - var redRobotsElixir = resources[1]["El"]["with_robots"]; - var blueRobotsElixir = resources[2]["El"]["with_robots"]; - - - this.distribChartElixir.data.datasets![0].data = [blueHQsElixir, redHQsElixir, blueRobotsElixir, redRobotsElixir]; - - - var redHQsMana = resources[1]["Mn"]["with_HQ"].reduce((partialSum, a) => partialSum + a, 0); - var blueHQsMana = resources[2]["Mn"]["with_HQ"].reduce((partialSum, a) => partialSum + a, 0); - var redRobotsMana = resources[1]["Mn"]["with_robots"]; - var blueRobotsMana = resources[2]["Mn"]["with_robots"]; - - this.distribChartMana.data.datasets![0].data = [blueHQsMana, redHQsMana, blueRobotsMana, redRobotsMana]; - - var redHQsAd = resources[1]["Ad"]["with_HQ"].reduce((partialSum, a) => partialSum + a, 0); - var blueHQsAd = resources[2]["Ad"]["with_HQ"].reduce((partialSum, a) => partialSum + a, 0); - var redRobotsAd = resources[1]["Ad"]["with_robots"]; - var blueRobotsAd = resources[2]["Ad"]["with_robots"]; - - this.distribChartAdamantium.data.datasets![0].data = [blueHQsAd, redHQsAd, blueRobotsAd, redRobotsAd]; + updateDistributionBars(resources) { + + var redHQsElixir = resources[1]["El"]["with_HQ"].reduce((partialSum, a) => partialSum + a, 0) + var blueHQsElixir = resources[2]["El"]["with_HQ"].reduce((partialSum, a) => partialSum + a, 0) + var redRobotsElixir = resources[1]["El"]["with_robots"] + var blueRobotsElixir = resources[2]["El"]["with_robots"] + + + this.distribChartElixir.data.datasets![0].data = [blueHQsElixir, redHQsElixir, blueRobotsElixir, redRobotsElixir] + + + var redHQsMana = resources[1]["Mn"]["with_HQ"].reduce((partialSum, a) => partialSum + a, 0) + var blueHQsMana = resources[2]["Mn"]["with_HQ"].reduce((partialSum, a) => partialSum + a, 0) + var redRobotsMana = resources[1]["Mn"]["with_robots"] + var blueRobotsMana = resources[2]["Mn"]["with_robots"] + + this.distribChartMana.data.datasets![0].data = [blueHQsMana, redHQsMana, blueRobotsMana, redRobotsMana] + + var redHQsAd = resources[1]["Ad"]["with_HQ"].reduce((partialSum, a) => partialSum + a, 0) + var blueHQsAd = resources[2]["Ad"]["with_HQ"].reduce((partialSum, a) => partialSum + a, 0) + var redRobotsAd = resources[1]["Ad"]["with_robots"] + var blueRobotsAd = resources[2]["Ad"]["with_robots"] + + this.distribChartAdamantium.data.datasets![0].data = [blueHQsAd, redHQsAd, blueRobotsAd, redRobotsAd] this.distribChartAdamantium.update() this.distribChartElixir.update() this.distribChartMana.update() } - - updateBars(teamAdamantium: Array, teamMana: Array, teamElixir: Array){ - this.updateRelBars(teamAdamantium, teamMana, teamElixir); + + updateBars(teamAdamantium: Array, teamMana: Array, teamElixir: Array) { + this.updateRelBars(teamAdamantium, teamMana, teamElixir) } setWinner(teamID: number, teamNames: Array, teamIDs: Array) { - const name = teamNames[teamIDs.indexOf(teamID)]; - this.teamNameNodes[teamID].innerHTML = "" + name + " " + `🌟`; + const name = teamNames[teamIDs.indexOf(teamID)] + this.teamNameNodes[teamID].innerHTML = "" + name + " " + `🌟` } /*setBid(teamID: number, bid: number) { @@ -1038,45 +1053,45 @@ export default class Stats { }*/ setExtraInfo(info: string) { - this.extraInfo.innerHTML = info; + this.extraInfo.innerHTML = info } hideTourneyUpload() { - console.log(this.tourneyUpload); - this.tourneyUpload.style.display = this.tourneyUpload.style.display === "none" ? "" : "none"; + console.log(this.tourneyUpload) + this.tourneyUpload.style.display = this.tourneyUpload.style.display === "none" ? "" : "none" } resetECs() { - while (this.ECs.lastChild) this.ECs.removeChild(this.ECs.lastChild); + while (this.ECs.lastChild) this.ECs.removeChild(this.ECs.lastChild) // console.log(this.ECs); - this.ECs.innerHTML = ""; + this.ECs.innerHTML = "" } addEC(teamID: number, health: number) { - const div = document.createElement("div"); - let size = 1.0/(1 + Math.exp(-(health/100))) + 0.3; - div.style.width = (28*size).toString() + "px"; - div.style.height = (28*size).toString() + "px"; - div.style.position = 'releative'; - div.style.top = '50%'; - div.style.transform = `translateY(-${50*size - 35}%)`; - const img = /* img */this.images.robots_high_quality[cst.HEADQUARTERS][teamID].cloneNode() as HTMLImageElement; - img.style.width = `${56 * size}px`; - img.style.height = `${56 * size}px`; // update dynamically later + const div = document.createElement("div") + let size = 1.0 / (1 + Math.exp(-(health / 100))) + 0.3 + div.style.width = (28 * size).toString() + "px" + div.style.height = (28 * size).toString() + "px" + div.style.position = 'releative' + div.style.top = '50%' + div.style.transform = `translateY(-${50 * size - 35}%)` + const img = /* img */this.images.robots_high_quality[cst.HEADQUARTERS][teamID].cloneNode() as HTMLImageElement + img.style.width = `${56 * size}px` + img.style.height = `${56 * size}px` // update dynamically later // img.style.marginTop = `${28*size}px`; - div.appendChild(img); - this.ECs.appendChild(div); + div.appendChild(img) + this.ECs.appendChild(div) } setIsland(teamID: number, mapStats: gameworld.MapStats) { // island - let ans = 0; + let ans = 0 for (let entry of Array.from(mapStats.island_stats.entries())) { - let key = entry[0]; - let value = entry[1]; - ans += (value.owner == teamID?1:0) - } + let key = entry[0] + let value = entry[1] + ans += (value.owner == teamID ? 1 : 0) + } this.islandDisplays[teamID].textContent = - String(ans); // change islandDisplays later + String(ans) // change islandDisplays later } }