From 9e02bea93c1f6c2a283275662bd1be06eabd0940 Mon Sep 17 00:00:00 2001
From: Jan Grewe <jan@faked.org>
Date: Tue, 6 Jun 2023 02:42:48 +0200
Subject: [PATCH] initialize score display nicely move reboot/reset to debug
(ToDo: reset)
---
data_src/index.html | 42 ++++++++++++++++++++++++++++++++++++------
data_src/main.js | 40 ++++++++++++++++++++++++++++------------
2 files changed, 64 insertions(+), 18 deletions(-)
diff --git a/data_src/index.html b/data_src/index.html
index 654eaf5..17baff6 100644
--- a/data_src/index.html
+++ b/data_src/index.html
@@ -55,8 +55,6 @@
<div class="col-6 text-end">
<button type="button" class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="collapse"
data-bs-target="#debug">Debug</button>
- <button type="button" class="btn btn-sm btn-danger btnAction" data-action="reboot"
- disabled>Reboot</button>
</div>
</div>
</div>
@@ -80,7 +78,7 @@
<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" role="progressbar" style="width: 0%" id="hsGames">
<div class="progress-bar bg-primary"></div>
</div>
</div>
@@ -94,7 +92,7 @@
<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" role="progressbar" style="width: 0%" id="hsTicks">
<div class="progress-bar bg-primary"></div>
</div>
</div>
@@ -108,7 +106,7 @@
<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" role="progressbar" style="width: 0%" id="hsCells">
<div class="progress-bar bg-primary"></div>
</div>
</div>
@@ -132,18 +130,50 @@
<div id="input_div">
<div class="input-group">
<span class="input-group-text">➡️</span>
- <input type="text" id="prompt" class="form-control form-control-sm fs-6 font-monospace">
+ <input type="text" id="prompt" class="form-control form-control-sm font-monospace">
</div>
</div>
</div>
+
+ <div class="card-footer text-body-secondary py-3">
+ <div class="row">
+ <div class="col-6">
+ <button type="button" class="btn btn-sm btn-warning btnConfirm" data-action="reboot" data-title="Reboot"
+ data-text="reboot?" disabled>Reboot</button>
+ </div>
+ <div class="col-6 text-end">
+ <button type="button" class="btn btn-sm btn-danger btnConfirm" data-action="reset"
+ data-title="Factory Reset" data-text="erase all highscores and settings?" disabled>Factory
+ Reset</button>
+ </div>
+ </div>
+ </div>
+
</div>
</div> <!-- debug -->
</div>
+ <div class="modal fade" id="modalConfirm" tabindex="-1">
+ <div class="modal-dialog modal-dialog-centered">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h1 class="modal-title fs-5"></h1>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body"></div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-success" data-bs-dismiss="modal">Cancel</button>
+ <button type="button" class="btn btn-danger btnAction" data-action="">Confirm</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
diff --git a/data_src/main.js b/data_src/main.js
index 57a89e9..a365b41 100644
--- a/data_src/main.js
+++ b/data_src/main.js
@@ -11,12 +11,13 @@ var settings = {
};
var highscores = {};
+var initHighscores = true;
var uiEnabled = false;
-$(document).ready(function() {
+$(document).ready(function () {
enabledUI(false);
- $("#wsMessages, #prompt").val("");
+ $("#wsMessages, #prompt").val("");
});
$(window).on('load', function () {
@@ -44,7 +45,7 @@ var colorPicker = new iro.ColorPicker('#colorpicker', {
component: iro.ui.Wheel,
}
]
-});
+});
colorPicker.on('input:end', function (color) {
settings.color = color.rgb;
@@ -54,6 +55,16 @@ colorPicker.on('input:end', function (color) {
$('.btnAction').on('click', function () {
var action = $(this).data('action');
sendAction(action);
+ if(modalConfirm._isShown) {
+ modalConfirm.hide();
+ }
+});
+
+$('.btnConfirm').on('click', function () {
+ $('#modalConfirm').find('.modal-title').text($(this).data('title'));
+ $('#modalConfirm').find('.modal-body').text('Do your really want to ' + $(this).data('text') + ' (NFG)');
+ $('#modalConfirm').find('.btnAction').data('action', $(this).data('action'));
+ modalConfirm.show();
});
$("#prompt").on('keydown', function (e) {
@@ -67,12 +78,11 @@ $("#prompt").on('keydown', function (e) {
function enabledUI(enable) {
if (enable) {
$('#spinner').addClass('invisible');
- $('.btnAction').prop('disabled', false);
- $('.rangeSetting').prop('disabled', false);
+ $('.btnAction, .btnConfirm, .rangeSetting').prop('disabled', false);
uiEnabled = true;
} else {
$('#spinner').removeClass('invisible');
- $('.btnAction').prop('disabled', true);
+ $('.btnAction, .btnConfirm, .rangeSetting').prop('disabled', true);
$('.rangeSetting').prop('disabled', true);
uiEnabled = false;
}
@@ -157,6 +167,10 @@ function loadSettings(data) {
}
function updateHighscore(hs) {
+ if (initHighscores) {
+ $('#hsGames, #hsTicks, #hsCells').css('width', '100%');
+ initHighscores = false;
+ }
highscores = hs;
$('#hsGames').find('.progress-bar').text(hs.games);
$('#hsTicks').find('.progress-bar').text(hs.ticks);
@@ -170,17 +184,19 @@ function updateStats(lg) {
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+'%');
+ $('#hsGames').css('width', hsGamesWidth + '%');
+ $('#lastGame').css('width', lastGameWidth + '%');
$('#lastGame').find('.progress-bar').text(lg.game);
- $('#hsTicks').css('width', hsTicksWidth+'%');
- $('#lastTicks').css('width', lastTicksWidth+'%');
+ $('#hsTicks').css('width', hsTicksWidth + '%');
+ $('#lastTicks').css('width', lastTicksWidth + '%');
$('#lastTicks').find('.progress-bar').text(lg.ticks);
- $('#hsCells').css('width', hsCellsWidth+'%');
- $('#lastCells').css('width', lastCellsWidth+'%');
+ $('#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);
}
+
+const modalConfirm = new bootstrap.Modal('#modalConfirm', {});
--
GitLab