Make modals static. Hide some settings. Minor optimizations. Switch from NPM bach to CDN.

.idea/InfantrySkillCalculator.iml

@@ -5,9 +5,11 @@
     <content url="file://$MODULE_DIR$" />
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="bootstrap" level="application" />
-    <orderEntry type="library" name="bootstrap-icons" level="application" />
     <orderEntry type="library" name="sweetalert2" level="application" />
     <orderEntry type="library" name="@sweetalert2/theme-dark" level="application" />
+    <orderEntry type="library" name="htmx.org" level="application" />
+    <orderEntry type="library" name="bootstrap" level="application" />
+    <orderEntry type="library" name="bootstrap-icons" level="application" />
+    <orderEntry type="library" name="html2canvas" level="application" />
   </component>
 </module>

.idea/jsLibraryMappings.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <file url="PROJECT" libraries="{@sweetalert2/theme-dark, bootstrap, bootstrap-icons, sweetalert2}" />
-  </component>
-</project>

Dockerfile

@@ -4,7 +4,7 @@ WORKDIR /app
 
 COPY . .
 
-RUN CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="-w -s" -o isc ./cmd
+RUN CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags="-w -s" -o isc .
 
 FROM alpine:latest
 

static/dialogs.js

@@ -2,10 +2,11 @@ const swalClasses = {
     container: 'text-center',
     confirmButton: 'btn btn-lg btn-primary',
     cancelButton: 'btn btn-lg btn-secondary ms-3',
+    denyButton: 'btn btn-lg btn-secondary ms-3',
     popup: 'border p-5',
     title: 'fs-2',
-    inputLabel: 'fs-5',
+    inputLabel: 'fs-5 text-secondary-emphasis',
-    htmlContainer: 'fs-5'
+    htmlContainer: 'fs-5 text-center text-secondary-emphasis',
 };
 
 function showSingleCalcDialog(btn) {
@@ -21,7 +22,7 @@ function showSingleCalcDialog(btn) {
         buttonsStyling: false
     }).then((result) => {
         if (result.isConfirmed) {
-            htmx.ajax('POST', '/score/' + result.value, {target: '#' + btn.id, swap: 'none'})
+            let promise = htmx.ajax('POST', '/score/' + result.value, {target: '#' + btn.id, swap: 'none'});
         }
     });
 }
@@ -72,7 +73,7 @@ function confirmAndTrigger(btn) {
         buttonsStyling: false
     }).then((result) => {
         if (result.isConfirmed) {
-            htmx.trigger(btn, 'confirmed');
+            htmx.trigger(btn, 'confirmed', null);
         }
     });
 }
@@ -94,7 +95,7 @@ function createCodeDialog(btn) {
     }).then((result) => {
         if (result.isConfirmed) {
             btn.setAttribute('hx-vals', '{"user_role": "' + result.value + '"}');
-            htmx.trigger(btn, 'confirmed');
+            htmx.trigger(btn, 'confirmed', null);
         }
     });
 }

static/index.js

@@ -1,5 +1,5 @@
 document.addEventListener('DOMContentLoaded', function() {
-    const tooltipTriggerList = document.querySelectorAll('[config-bs-toggle="tooltip"]');
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
     tooltipTriggerList.forEach((elem) => {
         new bootstrap.Tooltip(elem);
     });
@@ -111,7 +111,7 @@ function loadClans() {
 }
 
 function updateSelectedPlayers(sender) {
-    const playerList = sender.parentElement.parentElement.parentElement;
+    const playerList = sender.parentElement.parentElement.parentElement.parentElement;
     const checkCounter = playerList.parentElement.parentElement.querySelector('span.badge');
     let counter = 0;
 

templates/components/header.html

@@ -1,17 +1,17 @@
 {{ define "header" }}
 
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Infantry Skill Calculator</title>
-<script src="https://unpkg.com/htmx.org@1.9.10"></script>
 <script src="../static/index.js"></script>
 <script src="../static/dialogs.js"></script>
-<!-- Bootstrap 5 CSS -->
+<script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
 <link rel="stylesheet" href="../static/index.css">
 
 {{ end }}

templates/components/home_player_list.html

@@ -2,7 +2,7 @@
 
 <div class="row">
     <div class="col">
-        <div id="home-player-list" class="border rounded p-1 overflow-auto" style="height: 47vh;" oninput="updateTooltips(this)">
+        <div id="home-player-list" class="border rounded p-1 overflow-auto" style="height: 47vh;">
 
         </div>
     </div>
@@ -22,7 +22,7 @@
             </button>
         {{ end }}
         <br>
-        <div class="vstack text-center border border-secondary rounded mt-2" data-bs-toggle="tooltip" data-bs-title="Ausgwählte Spieler">
+        <div class="vstack text-center border border-secondary rounded mt-2" data-bs-toggle="tooltip" data-bs-title="Ausgewählte Spieler">
             <i class="bi bi-ui-checks fs-4 mt-2 mb-1"></i>
             <span class="badge fs-5 mb-2" id="home-player-selected">0</span>
         </div>

templates/components/opp_player_list.html

@@ -22,7 +22,7 @@
                 </button>
             {{ end }}
             <br>
-            <div class="vstack text-center border border-secondary rounded mt-2" data-bs-toggle="tooltip" data-bs-title="Spieler hinzufügen">
+            <div class="vstack text-center border border-secondary rounded mt-2" data-bs-toggle="tooltip" data-bs-title="Ausgewählte Spieler">
                 <i class="bi bi-ui-checks fs-4 mt-2 mb-1"></i>
                 <span class="badge fs-5 mb-2" id="opponent-player-selected">0</span>
             </div>

templates/modals/add_clan.html

@@ -1,7 +1,7 @@
 {{ define "add_clan" }}
 
 
-<div class="modal fade" id="addClanModal" tabindex="-1">
+<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="addClanModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">

templates/modals/add_player.html

@@ -1,6 +1,6 @@
 {{ define "add_player" }}
 
-<div class="modal fade" id="addPlayerModal" tabindex="-1">
+<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="addPlayerModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">

templates/modals/delete_clan.html

@@ -1,6 +1,6 @@
 {{ define "delete_clan" }}
 
-<div class="modal fade" id="deleteClanModal" tabindex="-1">
+<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="deleteClanModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">

templates/modals/delete_player.html

@@ -1,6 +1,6 @@
 {{ define "delete_player" }}
 
-<div class="modal fade" id="deletePlayerModal" tabindex="-1">
+<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="deletePlayerModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">

templates/modals/edit_clan.html

@@ -1,6 +1,6 @@
 {{ define "edit_clan" }}
 
-<div class="modal fade" id="editClanModal" tabindex="-1">
+<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="editClanModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">

templates/modals/edit_player.html

@@ -1,6 +1,6 @@
 {{ define "edit_player" }}
 
-<div class="modal fade" id="editPlayerModal" tabindex="-1">
+<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="editPlayerModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
@@ -47,7 +47,7 @@
         }
 
         function createSubmitPlayerHandler(modalEvent) {
-            return function submitPlayerHandler(e) {
+            return function submitPlayerHandler(_) {
                 if (!validateInput())
                     return;
 

templates/modals/settings.html

@@ -1,6 +1,6 @@
 {{ define "settings" }}
 
-<div class="modal fade" id="settingsModal" tabindex="-1">
+<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="settingsModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
@@ -18,15 +18,15 @@
                         </select>
                     </div>
                 </div>
-                <div class="form-check form-check-inline mt-3 fs-5">
+                <div class="form-check form-check-inline mt-3 fs-5 visually-hidden">
                     <input class="form-check-input" type="checkbox" id="settingsSquadColors" value="squadColors" checked>
                     <label class="form-check-label" for="settingsSquadColors">Squad-Farben aktivieren</label>
                 </div>
-                <div class="form-check form-check-inline mt-3 fs-5">
+                <div class="form-check form-check-inline mt-3 fs-5 visually-hidden" data-bs-toggle="tooltip" data-bs-title="Median zusätzlich berechnen">
                     <input class="form-check-input" type="checkbox" id="settingsCalcMedian" value="calcMedian">
                     <label class="form-check-label" for="settingsCalcMedian">Median aktivieren</label>
                 </div>
-                <div class="form-check form-check-inline mt-3 fs-5">
+                <div class="form-check form-check-inline mt-3 fs-5 visually-hidden">
                     <input class="form-check-input" type="checkbox" id="settingsUseCache" value="useCache" checked>
                     <label class="form-check-label" for="settingsUseCache">Infantryskill-Cache benutzen (empfohlen)</label>
                 </div>
@@ -102,7 +102,6 @@
                         return response.json();
                     })
                     .then((result) => {
-                        console.log(result);
                         games.selectedIndex = games.querySelector(`option[value="${result['active_game_id']}"]`).index;
                         squadColors.checked = result['squad_colors'];
                         calcMedian.value = result['calc_median'];

templates/shards/player_list_item.html

@@ -1,5 +1,5 @@
 {{ range . }}
-    <div class="input-group input-group-lg mb-1">
+    <div class="input-group input-group-lg mb-1" data-id="{{ .PlayerID }}">
         <div class="input-group-text py-1 px-2">
             <label>
                 <input class="form-check-input fs-4 border-secondary mt-0" type="checkbox" value="" onchange="updateSelectedPlayers(this)">