From 75ec938ae3198c47a648d1ed5f5e99d329362f84 Mon Sep 17 00:00:00 2001
From: Jan Grewe <jan@faked.org>
Date: Tue, 6 Jun 2023 01:17:18 +0200
Subject: [PATCH] display last game scores and highscores
---
data_src/index.html | 55 +++++++++++++++++++++++++++++++++++++++++++++
data_src/main.js | 32 ++++++++++++++++++++++++++
src/gameoflife.cpp | 2 +-
3 files changed, 88 insertions(+), 1 deletion(-)
diff --git a/data_src/index.html b/data_src/index.html
index 55930d2..654eaf5 100644
--- a/data_src/index.html
+++ b/data_src/index.html
@@ -65,6 +65,61 @@
</div> <!-- main -->
+ <div class="col-lg-4 offset-lg-4 mt-3" id="scores">
+
+ <div class="card">
+ <h5 class="card-header">
+ Last Game / Highscores
+ </h5>
+ <div class="card-body">
+
+ <div class="row mb-1">
+ <div class="col col-lg-3 text-end">Games</div>
+ <div class="col col-lg-8 pt-1">
+ <div class="progress-stacked">
+ <div class="progress" role="progressbar" style="width: 0%" id="lastGame">
+ <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+ </div>
+ <div class="progress" role="progressbar" style="width: 100%" id="hsGames">
+ <div class="progress-bar bg-primary"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row mb-1">
+ <div class="col col-lg-3 text-end">Ticks</div>
+ <div class="col col-lg-8 pt-1">
+ <div class="progress-stacked">
+ <div class="progress" role="progressbar" style="width: 0%" id="lastTicks">
+ <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+ </div>
+ <div class="progress" role="progressbar" style="width: 100%" id="hsTicks">
+ <div class="progress-bar bg-primary"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col col-lg-3 text-end">Cells</div>
+ <div class="col col-lg-8 pt-1">
+ <div class="progress-stacked">
+ <div class="progress" role="progressbar" style="width: 0%" id="lastCells">
+ <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+ </div>
+ <div class="progress" role="progressbar" style="width: 100%" id="hsCells">
+ <div class="progress-bar bg-primary"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+ </div> <!-- scores -->
+
<div class="col-lg-4 offset-lg-4 mt-3 collapse" id="debug">
<div class="card">
diff --git a/data_src/main.js b/data_src/main.js
index 58eaac2..57a89e9 100644
--- a/data_src/main.js
+++ b/data_src/main.js
@@ -10,6 +10,8 @@ var settings = {
}
};
+var highscores = {};
+
var uiEnabled = false;
$(document).ready(function() {
@@ -128,7 +130,12 @@ function startSocket() {
addMessage("⬅️ " + JSON.stringify(data));
if (data.settings) {
loadSettings(data.settings);
+ } else if (data.highscores) {
+ updateHighscore(data.highscores);
+ } else if (data.stats) {
+ updateStats(data.stats);
}
+
});
}
@@ -149,6 +156,31 @@ function loadSettings(data) {
sendAction('getHighscores');
}
+function updateHighscore(hs) {
+ highscores = hs;
+ $('#hsGames').find('.progress-bar').text(hs.games);
+ $('#hsTicks').find('.progress-bar').text(hs.ticks);
+ $('#hsCells').find('.progress-bar').text(hs.cells);
+}
+
+function updateStats(lg) {
+ var lastGameWidth = 100 / (highscores.games / lg.game);
+ var lastTicksWidth = 100 / (highscores.ticks / lg.ticks);
+ var lastCellsWidth = 100 / (highscores.cells / lg.cells);
+ var hsGamesWidth = (1 - (lg.game / highscores.games)) * 100;
+ var hsTicksWidth = (1 - (lg.ticks / highscores.ticks)) * 100;
+ var hsCellsWidth = (1 - (lg.cells / highscores.cells)) * 100;
+ $('#hsGames').css('width', hsGamesWidth+'%');
+ $('#lastGame').css('width', lastGameWidth+'%');
+ $('#lastGame').find('.progress-bar').text(lg.game);
+ $('#hsTicks').css('width', hsTicksWidth+'%');
+ $('#lastTicks').css('width', lastTicksWidth+'%');
+ $('#lastTicks').find('.progress-bar').text(lg.ticks);
+ $('#hsCells').css('width', hsCellsWidth+'%');
+ $('#lastCells').css('width', lastCellsWidth+'%');
+ $('#lastCells').find('.progress-bar').text(lg.cells);
+}
+
function mapRange(number, inMin, inMax, outMin, outMax) {
return Math.round((number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin);
}
diff --git a/src/gameoflife.cpp b/src/gameoflife.cpp
index f268749..b15ea13 100644
--- a/src/gameoflife.cpp
+++ b/src/gameoflife.cpp
@@ -163,10 +163,10 @@ void gameLoop()
finalTicks = currentTick - noEvolutionTicksLimit;
currentMillis = millis();
showEndScreen(finalTicks);
- sendGameStats(gameEra, finalTicks, cellsAliveNow);
if(updateHighscores(gameEra, finalTicks, cellsAliveNow)) {
sendHighscores();
}
+ sendGameStats(gameEra, finalTicks, cellsAliveNow);
gameOver = true;
}
}
--
GitLab