Sysnaptik/mindflux
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make progress data-driven and build Knowledge Core
mindflux-ci / build (push) Successful in 23s
Details

Browse Source
This commit is contained in:
AliceDarkest
2026-07-13 22:31:57 +02:00
parent b0d8dd48db
commit d718a09561
15 changed files with 205 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/progress.html
+12 -13
View File
@@ -49,28 +49,27 @@
<p class="mf-percentage" th:text="${xpPercentage + '%'}">78%</p>
</div>
<div class="mf-progress-info">
<p><strong>Korrekte Antworten:</strong> <span th:text="${correctAnswers}">432</span></p>
<p><strong>Level:</strong> <span th:text="${userLevel}">5</span></p>
<p><strong>Erfasste Spielaktionen:</strong> <span th:text="${correctAnswers}">432</span></p>
<p><strong>Level (XP):</strong> <span th:text="${userLevel}">5</span></p>
<div class="mf-bar" style="margin:.6rem 0 .4rem;"><i th:style="'width:' + ${xpPercentage} + '%'"></i></div>
<p><span th:text="${currentXp}">2400</span> / <span th:text="${xpForNextLevel}">3000</span> XP</p>
</div>
</div>
</section>
<!-- Lernzeit pro Woche -->
<!-- Tatsächlich gemessene Spielzeit pro Woche -->
<section class="mf-panel" style="margin-bottom:1.2rem;">
<h2 class="mf-section-title">Lernzeit – Diese Woche</h2>
<h2 class="mf-section-title">Spielzeit – Diese Woche</h2>
<p style="color:var(--muted);font-size:.82rem;margin:-.35rem 0 .9rem;">Nur die Dauer abgeschlossener, zeitgemessener Runden.</p>
<canvas id="learnTimeChart" width="600" height="180"></canvas>
</section>
<!-- Fortschritt pro Spiel -->
<!-- Echte Spielstatistiken -->
<section class="mf-panel" th:if="${gameProgress != null}" style="margin-bottom:1.2rem;">
<h2 class="mf-section-title">Spiel-Fortschritte</h2>
<h2 class="mf-section-title">Spiel-Statistiken</h2>
<div class="mf-game-grid">
<div class="mf-game-card" th:each="game : ${gameProgress}">
<h3 th:text="${game.name}">Hangman</h3>
<p>Fortschritt: <span th:text="${game.progressPercent}">65</span>%</p>
<div class="mf-bar" style="margin:.4rem 0;"><i th:style="'width:' + ${game.progressPercent} + '%'"></i></div>
<p>Beste Punktzahl: <span th:text="${game.highscore}">1200</span></p>
<p>Gespielt: <span th:text="${game.plays}">15</span>×</p>
<p>Letzter Zugriff: <span th:text="${game.lastPlayed}">14.04.2025</span></p>
@@ -81,7 +80,7 @@
</div>
<!-- Diagramme -->
<script th:inline="none">
<script th:inline="javascript">
// Theme-Tokens auslesen, damit die Charts in Dark (Grün) & Light (Magenta) passen
const css = getComputedStyle(document.documentElement);
const accent = css.getPropertyValue('--accent').trim() || '#2bd96a';
@@ -95,7 +94,7 @@
type: 'doughnut',
data: {
datasets: [{
data: [78, 22], // Achtung: Dummywerte, kannst du später dynamisch machen
data: [/*[[${xpPercentage}]]*/ 0, 100 - /*[[${xpPercentage}]]*/ 0],
backgroundColor: [accent, track],
borderWidth: 0
}]
@@ -108,15 +107,15 @@
}
});
// Lernzeit-Balkendiagramm
// Spielzeit-Balkendiagramm
const learnCtx = document.getElementById('learnTimeChart').getContext('2d');
new Chart(learnCtx, {
type: 'bar',
data: {
labels: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
datasets: [{
label: 'Lernzeit (Minuten)',
data: [30, 45, 20, 60, 50, 0, 10], // Beispielwerte
label: 'Spielzeit (Minuten)',
data: /*[[${weekly.minutes}]]*/ [0, 0, 0, 0, 0, 0, 0],
backgroundColor: accent,
borderRadius: 6
}]