From e42b3dc726ad421f8c4e987c3ecedb1c99d6c441 Mon Sep 17 00:00:00 2001 From: Florian Kinder Date: Wed, 21 Jul 2021 00:19:04 +0200 Subject: [PATCH 1/2] Count team kills --- static/index.html | 9 +++ static/scripts/ocap.event.js | 4 +- static/scripts/ocap.js | 26 ++++++--- static/scripts/ocap.ui.js | 102 ++++++++++++++++++++++++++------- static/scripts/ocap.unit.js | 1 + static/style/index.css | 106 +++++++++++++++++++++++++++-------- 6 files changed, 194 insertions(+), 54 deletions(-) diff --git a/static/index.html b/static/index.html index f4f5b8f4..63c47615 100644 --- a/static/index.html +++ b/static/index.html @@ -31,6 +31,7 @@
i
+
S
@@ -110,6 +111,14 @@
+
+
+
Statistics
+
Body
+
+
+
+
Test popup
diff --git a/static/scripts/ocap.event.js b/static/scripts/ocap.event.js index 2f681008..bfa5d87b 100644 --- a/static/scripts/ocap.event.js +++ b/static/scripts/ocap.event.js @@ -125,10 +125,10 @@ class HitKilledEvent extends GameEvent { causedBySpan.className = this.causedBy.getSideClass() switch (this.type) { case "killed": - causedBySpan.textContent = this.causedBy.getName() + " (" + (causedBy.killCount + 1) + " kills)"; + causedBySpan.textContent = `${this.causedBy.getName()} (${causedBy.killCount - (causedBy.teamKillCount*2)} kills)`; break; case "hit": - causedBySpan.textContent = this.causedBy.getName() + " (" + (causedBy.killCount) + " kills)"; + causedBySpan.textContent = `${this.causedBy.getName()} (${causedBy.killCount - (causedBy.teamKillCount*2)} kills)`; break; } } else { diff --git a/static/scripts/ocap.js b/static/scripts/ocap.js index 330b8b1c..99b61a3d 100644 --- a/static/scripts/ocap.js +++ b/static/scripts/ocap.js @@ -675,35 +675,43 @@ function processOp (filepath) { var gameEvent = null; switch (true) { case (type == "killed" || type == "hit"): - var causedByInfo = eventJSON[3]; - var victim = entities.getById(eventJSON[2]); - var causedBy = entities.getById(causedByInfo[0]); // In older captures, this will return null - var distance = eventJSON[4]; + const causedByInfo = eventJSON[3]; + const victim = entities.getById(eventJSON[2]); + const causedBy = entities.getById(causedByInfo[0]); // In older captures, this will return null + const distance = eventJSON[4]; //console.log(eventJSON[2]); //if (victim == null) {return}; // Temp fix until vehicles are handled (victim is null if reference is a vehicle) // Create event object - var weapon; + let weapon; if (causedBy instanceof Unit) { weapon = causedByInfo[1]; } else { weapon = "N/A"; } - gameEvent = new HitKilledEvent(frameNum, type, causedBy, victim, distance, weapon); // TODO: Find out why victim/causedBy can sometimes be null - if (causedBy == null || (victim == null)) { + if (causedBy == null || victim == null) { console.warn("unknown victim/causedBy", victim, causedBy); } // Incrememt kill/death count for killer/victim - if (type == "killed" && (causedBy != null)) { - if (causedBy != victim) { + if (type === "killed" && (causedBy != null)) { + + if (causedBy._name === "BlackPixxel") { + console.log(causedBy.killCount, causedBy.teamKillCount); + } + if (causedBy !== victim && causedBy._side === victim._side) { + console.log("teamkill", causedBy); + causedBy.teamKillCount++; + } + if (causedBy !== victim) { causedBy.killCount++; } victim.deathCount++; } + gameEvent = new HitKilledEvent(frameNum, type, causedBy, victim, distance, weapon); // Add tick to timeline ui.addTickToTimeline(frameNum); diff --git a/static/scripts/ocap.ui.js b/static/scripts/ocap.ui.js index b8450312..f2ad2ab2 100644 --- a/static/scripts/ocap.ui.js +++ b/static/scripts/ocap.ui.js @@ -20,6 +20,8 @@ class UI { this.modalFilter = null; this.modalBody = null; this.modalButtons = null; + this.statsDialog = null; + this.statsDialogBody = null; this.missionName = null; //this.loadOpButton = null; this.playPauseButton = null; @@ -27,6 +29,8 @@ class UI { this.playbackSpeedSlider = null; this.playbackSpeedVal = null; this.aboutButton = null; + this.shareButton = null; + this.statsButton = null; this.toggleFirelinesButton = null; this.toggleMarkersButton = null; this.hint = null; @@ -71,17 +75,19 @@ class UI { }); this.loadOpButton = loadOpButton; */ - // About button - var aboutButton = document.getElementById("aboutButton"); - aboutButton.addEventListener("click", () => { + // Buttons + this.aboutButton = document.getElementById("aboutButton"); + this.aboutButton.addEventListener("click", () => { this.showModalAbout(); }); - this.aboutButton = aboutButton; - this.shareButton = document.getElementById("shareButton"); this.shareButton.addEventListener("click", () => { this.showModalShare(); }); + this.statsButton = document.getElementById("statsButton"); + this.statsButton.addEventListener("click", () => { + this.showModalStats(); + }); // Nickname show/hide vehicle && player this.toggleNicknameButton = document.getElementById("toggleNickname"); @@ -253,15 +259,19 @@ class UI { // Modal - this.setModal( - document.getElementById("modal"), - document.getElementById("modalHeader"), - document.getElementById("modalFilter"), - document.getElementById("modalBody"), - document.getElementById("modalButtons") - ); + this.modal = document.getElementById("modal"); + this.modalHeader = document.getElementById("modalHeader"); + this.modalFilter = document.getElementById("modalFilter"); + this.modalBody = document.getElementById("modalBody"); + this.modalButtons = document.getElementById("modalButtons"); this.showModalOpSelection(); + // Stats + this.statsDialog = document.getElementById("stats"); + this.statsDialogHeader = document.getElementById("statsHeader"); + this.statsDialogBody = document.getElementById("statsBody"); + this.statsDialogFooter = document.getElementById("statsFooter"); + // Small popup this.hint = document.getElementById("hint"); @@ -453,14 +463,6 @@ class UI { } }; - setModal(modal, modalHeader, modalFilter, modalBody, modalButtons) { - this.modal = modal; - this.modalHeader = modalHeader; - this.modalFilter = modalFilter; - this.modalBody = modalBody; - this.modalButtons = modalButtons; - }; - showModalOpSelection() { // Set header/body localizable(this.modalHeader, "select_mission"); @@ -573,6 +575,62 @@ class UI { return button; }; + showModalStats() { + // localizable(this.statsDialogHeader, "info"); + + const units = []; + for (const entity of entities.getAll()) { + if (entity instanceof Unit) { + const unit = units.find((unit) => unit.name === entity._name); + if (unit) { + unit.killCount += entity.killCount; + unit.teamKillCount += entity.teamKillCount; + unit.deathCount += entity.deathCount; + } else { + units.push({ + name: entity._name, + killCount: entity.killCount, + teamKillCount: entity.teamKillCount, + deathCount: entity.deathCount, + }); + } + } + } + units.sort((a,b) => { + if (a.name < b.name) return -1; + if (a.name > b.name) return 1; + return 0; + }); + + let content = ` + + + + + + + + `; + for (const unit of units) { + content += ` + + + + + + + `; + } + content += `
NameKillsTKillsDeaths
${unit.name}${unit.killCount}${unit.teamKillCount}${unit.deathCount}
`; + + this.statsDialogBody.innerHTML = content; + + this.statsDialogFooter.appendChild(this.makeModalButton("Close", () => { + this.statsDialog.classList.add("closed"); + })); + this.statsDialog.classList.remove("closed"); + }; + showModalAbout() { localizable(this.modalHeader, "info"); @@ -773,5 +831,9 @@ class UI { } }); } + + showExperimental() { + this.statsButton.classList.remove("hiddenExperimental"); + } } diff --git a/static/scripts/ocap.unit.js b/static/scripts/ocap.unit.js index 22fad580..644376c5 100644 --- a/static/scripts/ocap.unit.js +++ b/static/scripts/ocap.unit.js @@ -13,6 +13,7 @@ class Unit extends Entity { } } this.killCount = 0; + this.teamKillCount = 0; this.deathCount = 0; this._sideClass = ""; this._sideColour = "#FFFFFF"; diff --git a/static/style/index.css b/static/style/index.css index 1301627a..01803ca4 100644 --- a/static/style/index.css +++ b/static/style/index.css @@ -41,6 +41,12 @@ html, body, #map { background-repeat: no-repeat; } +#shareButton { + background-image: url("../images/share.svg"); + background-size: 25px 25px; + background-repeat: no-repeat; + float: right; +} #aboutButton { font-size: 30px; position: relative; @@ -50,6 +56,15 @@ html, body, #map { float: right; margin: 12px; } +#statsButton { + font-size: 30px; + position: relative; + top: -5px; + text-align: center; + display: inline-block; + float: right; + margin: 12px; +} #missionName { float: left; @@ -471,9 +486,8 @@ input[type=range]::-webkit-slider-runnable-track { } .modalContent { background: none; - margin: auto; - margin-top: 10%; -/* border: 1px solid black;*/ + margin: 10% auto auto; + /* border: 1px solid black;*/ width: 800px; height: 65%; } @@ -483,11 +497,19 @@ input[type=range]::-webkit-slider-runnable-track { background-color: rgba(155,0,0,0.9); width: 100%; margin-bottom: 3px; - padding: 5px; - padding-left: 10px; - padding-right: 10px; + padding: 5px 10px; font-weight: 500; } +.modalFilter { + box-sizing: border-box; + background-color: rgba(0,0,0,0.6); + width: 100%; + height: 50px; + padding: 3px 10px 10px 16px; + margin-bottom: 3px; + overflow-y: auto; + overflow-x: auto; +} .modalBody { box-sizing: border-box; background-color: rgba(0,0,0,0.6); @@ -500,17 +522,52 @@ input[type=range]::-webkit-slider-runnable-track { overflow-x: auto; } -.modalFilter { - box-sizing: border-box; - background-color: rgba(0,0,0,0.6); - width: 100%; - height: 50px; - padding: 10px; - padding-top: 3px; - padding-left: 16px; +.modalDialog { + z-index: 600; + position: absolute; + left: 0; + top: 0; + height: 100vh; + width: 100vw; + background-color: rgba(0,0,0,0.4); + display: flex; + justify-content: center; + align-items: center; +} +.modalDialog.closed { + display: none; +} +.modalDialog .dialogBase { + position: relative; + z-index: 601; + display: flex; + flex-direction: column +} +.modalDialog .dialogHeader { + background-color: rgba(155,0,0,0.9); margin-bottom: 3px; - overflow-y: auto; - overflow-x: auto; + color: white; + border-bottom: 1px solid black; + box-sizing: border-box; + padding: 5px 10px; + font-weight: 500; + font-size: 16px; +} +.modalDialog .dialogBody { + background-color: #000000ed; + overflow-y: scroll; + min-width: 1300px; + min-height: 700px; /* title bar is 50 so we need the extra 70 here */ + max-height: calc(75vh - 50px); /* compensate for title bar */ + max-width: 75vw; + flex:1; + padding: 5px; +} +.modalDialog .dialogFooter { + margin-top: 3px; +} +.modalDialog .dialogFooter .modalButton { + float: right; } #ShareLink { @@ -696,13 +753,16 @@ input[type=range]::-webkit-slider-runnable-track { .leaflet-div-icon { background: none; border: none; - margin: none; - padding: none; } -#shareButton { - background-image: url("../images/share.svg"); - background-size: 25px 25px; - background-repeat: no-repeat; - float: right; +.stats .name { + width: 200px; +} +.stats .kills, .stats .tkills, .stats .deaths { + width: 70px; + text-align: right; +} + +.hiddenExperimental { + display: none !important; } From 02b6ba41419c8e51f7ecf547790dd3037eab52a8 Mon Sep 17 00:00:00 2001 From: Florian Kinder Date: Wed, 21 Jul 2021 10:04:45 +0200 Subject: [PATCH 2/2] Removed debug --- static/scripts/ocap.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/static/scripts/ocap.js b/static/scripts/ocap.js index 99b61a3d..832a3f75 100644 --- a/static/scripts/ocap.js +++ b/static/scripts/ocap.js @@ -698,12 +698,7 @@ function processOp (filepath) { // Incrememt kill/death count for killer/victim if (type === "killed" && (causedBy != null)) { - - if (causedBy._name === "BlackPixxel") { - console.log(causedBy.killCount, causedBy.teamKillCount); - } if (causedBy !== victim && causedBy._side === victim._side) { - console.log("teamkill", causedBy); causedBy.teamKillCount++; } if (causedBy !== victim) {