lukas/mathquest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add diffent lessions

Browse Source
This commit is contained in:
Lukas Cremer
2026-05-13 22:49:40 +02:00
parent 79612c348a
commit f3fa43d452
10 changed files with 868 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
public/app.js
View File

@@ -1,4 +1,3 @@
// ─── Supabase config (injected by server from .env via /config.js) ───────────
const supabaseClient = supabase.createClient(window.SUPABASE_URL, window.SUPABASE_ANON_KEY);
// ─── App state ───────────────────────────────────────────────────────────────
@@ -7,6 +6,7 @@ let tasks = [];
let chapters = [];
let chapterDescriptions = {};
let activeChapter = null;
let activeClassData = null;
// ─── Auth ────────────────────────────────────────────────────────────────────
@@ -22,7 +22,6 @@ async function login() {
const password = document.getElementById('loginPassword').value;
const errorEl = document.getElementById('loginError');
errorEl.textContent = '';
const { error } = await supabaseClient.auth.signInWithPassword({ email, password });
if (error) errorEl.textContent = error.message;
}
@@ -43,11 +42,9 @@ async function register() {
if (error) {
errorEl.textContent = error.message;
} else if (!session) {
// Email confirmation is enabled — user must confirm before logging in
errorEl.style.color = '#27ae60';
errorEl.textContent = 'Konto erstellt! Bitte E-Mail bestätigen, dann anmelden.';
}
// If session exists, onAuthStateChange fires and opens the app automatically
}
async function logout() {
@@ -78,34 +75,140 @@ async function apiFetch(url, options = {}) {
return res;
}
// ─── Theme ───────────────────────────────────────────────────────────────────
function applyTheme(theme) {
const root = document.documentElement;
Object.entries(theme).forEach(([prop, value]) => {
root.style.setProperty(prop, value);
});
}
// ─── Screen management ───────────────────────────────────────────────────────
function showScreen(screen) {
document.getElementById('authOverlay').style.display = 'none';
document.getElementById('classPickerOverlay').style.display = 'none';
document.getElementById('classCompletionOverlay').style.display = 'none';
document.getElementById('appWrapper').style.display = 'none';
if (screen === 'auth') {
document.getElementById('authOverlay').style.display = 'flex';
} else if (screen === 'class-picker') {
document.getElementById('classPickerOverlay').style.display = 'flex';
} else if (screen === 'class-completion') {
document.getElementById('classCompletionOverlay').style.display = 'flex';
} else if (screen === 'app') {
document.getElementById('appWrapper').style.display = 'flex';
}
}
// ─── Class picker ────────────────────────────────────────────────────────────
async function showClassPicker() {
showScreen('class-picker');
const listEl = document.getElementById('classList');
listEl.innerHTML = '<p style="color: var(--theme-muted)">Laden...</p>';
const res = await apiFetch('/api/classes');
if (!res) return;
const { classes } = await res.json();
listEl.innerHTML = '';
if (classes.length === 0) {
listEl.innerHTML = '<p style="color: var(--theme-muted)">Keine Klassen verfügbar.</p>';
return;
}
classes.forEach(cls => {
const card = document.createElement('div');
card.className = 'class-card';
card.style.setProperty('--card-accent', cls.theme['--theme-accent'] || 'var(--theme-accent)');
card.innerHTML = `
<div class="class-card-icon">${cls.icon || '📚'}</div>
<div class="class-card-info">
<div class="class-card-name">${cls.name}</div>
<div class="class-card-desc">${cls.description || ''}</div>
</div>
`;
card.onclick = () => selectClass(cls.id);
listEl.appendChild(card);
});
}
async function selectClass(classId) {
const res = await apiFetch('/api/set-class', {
method: 'POST',
body: JSON.stringify({ classId }),
});
if (!res || !res.ok) return;
const data = await res.json();
activeClassData = data.class;
applyTheme(activeClassData.theme);
const h1 = document.querySelector('header h1');
if (h1) h1.textContent = activeClassData.name;
activeChapter = null;
showScreen('app');
await loadAndRenderApp();
}
async function completeAndPickClass() {
await apiFetch('/api/complete-class', { method: 'POST' });
activeClassData = null;
activeChapter = null;
tasks = [];
await showClassPicker();
}
// ─── App init ────────────────────────────────────────────────────────────────
async function initApp(user) {
const displayName = user.user_metadata?.display_name || user.email;
document.getElementById('userDisplayName').textContent = displayName;
document.getElementById('authOverlay').style.display = 'none';
document.getElementById('appWrapper').style.display = 'flex';
const meRes = await apiFetch('/api/me');
if (!meRes) return;
const meta = await meRes.json();
if (!meta.activeClass) {
await showClassPicker();
return;
}
const classesRes = await apiFetch('/api/classes');
if (classesRes) {
const { classes } = await classesRes.json();
activeClassData = classes.find(c => c.id === meta.activeClass) || null;
if (activeClassData) {
applyTheme(activeClassData.theme);
const h1 = document.querySelector('header h1');
if (h1) h1.textContent = activeClassData.name;
}
}
showScreen('app');
await loadAndRenderApp();
}
async function loadAndRenderApp() {
await loadTasks();
extractChapters();
calculateTotalPoints();
renderSidebar();
renderTasks();
updateProgress();
checkClassCompletion();
}
function showAuthScreen() {
document.getElementById('authOverlay').style.display = 'flex';
document.getElementById('appWrapper').style.display = 'none';
}
// React to login/logout events
supabaseClient.auth.onAuthStateChange((_event, session) => {
if (session?.user) {
initApp(session.user);
} else {
showAuthScreen();
showScreen('auth');
}
});
@@ -151,6 +254,42 @@ function isChapterCompleted(chapter) {
return chapterTasks.length > 0 && chapterTasks.every(task => task.isCorrect === true);
}
function checkClassCompletion() {
if (tasks.length > 0 && tasks.every(t => t.isCorrect === true)) {
const maxPoints = tasks.reduce((sum, task) => sum + (task.points || 0), 0);
document.getElementById('completionPoints').textContent = maxPoints;
showScreen('class-completion');
}
}
async function resetClassProgress(btn) {
if (!btn.dataset.confirmed) {
btn.dataset.confirmed = '1';
btn.textContent = 'Wirklich löschen? Nochmal klicken.';
btn.style.background = '#7f3030';
btn.style.color = '#fff';
setTimeout(() => {
delete btn.dataset.confirmed;
btn.textContent = 'Fortschritt zurücksetzen';
btn.style.background = '';
btn.style.color = '';
}, 3000);
return;
}
const res = await apiFetch('/api/reset-class-progress', { method: 'POST' });
if (!res || !res.ok) return;
activeChapter = null;
await loadTasks();
extractChapters();
calculateTotalPoints();
showScreen('app');
renderSidebar();
renderTasks();
updateProgress();
}
function renderSidebar() {
const sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
@@ -163,7 +302,7 @@ function renderSidebar() {
const header = document.createElement('div');
header.className = 'sidebar-header';
header.innerHTML = '<h2>Aktenübersicht</h2>';
header.innerHTML = '<h2>Lektionen</h2>';
sidebar.appendChild(header);
chapters.forEach(chapter => {
@@ -174,6 +313,7 @@ function renderSidebar() {
item.innerHTML = `<div class="sidebar-item-title">${isCompleted ? '✓ ' : ''}${chapter}</div>`;
sidebar.appendChild(item);
});
}
function switchChapter(chapter) {
@@ -204,8 +344,8 @@ function renderTasks() {
card.id = `task-${task.id}`;
card.innerHTML = `
<div class="task-header">
<div class="task-title">Ermittlungsaufgabe</div>
<div class="task-points">${task.points} EP</div>
<div class="task-title">Aufgabe</div>
<div class="task-points">${task.points} Punkte</div>
</div>
<div class="task-question">${task.question}</div>
<div class="task-input-group">
@@ -214,7 +354,7 @@ function renderTasks() {
<button class="task-button" onclick="checkAnswer('${task.id}')">Prüfen</button>
</div>
<div class="task-status ${hasAnswer && !task.isCorrect ? 'error' : ''}" id="status-${task.id}">
${hasAnswer && !task.isCorrect ? '✗ Berechnung fehlerhaft. Bitte erneut prüfen.' : ''}
${hasAnswer && !task.isCorrect ? '✗ Falsche Antwort. Bitte erneut versuchen.' : ''}
</div>
`;
container.appendChild(card);
@@ -248,18 +388,23 @@ async function checkAnswer(taskId) {
calculateTotalPoints();
if (data.correct) {
status.textContent = '✓ Berechnung korrekt. Fall weiter bearbeiten.';
status.textContent = '✓ Richtig!';
status.className = 'task-status success';
showMessage(`✓ ${data.points} Ermittlungspunkte erhalten`, 'success');
showMessage(`✓ ${data.points} Punkte erhalten`, 'success');
const taskCard = document.getElementById(`task-${taskId}`);
if (taskCard) {
createConfetti(taskCard);
taskCard.classList.add('confetti-animation');
setTimeout(() => { renderSidebar(); renderTasks(); updateProgress(); }, 1500);
setTimeout(() => {
renderSidebar();
renderTasks();
updateProgress();
checkClassCompletion();
}, 1500);
}
} else {
status.textContent = '✗ Berechnung fehlerhaft. Bitte erneut prüfen.';
status.textContent = '✗ Falsche Antwort. Bitte erneut versuchen.';
status.className = 'task-status error';
input.focus();
renderSidebar();
@@ -268,7 +413,7 @@ async function checkAnswer(taskId) {
}
}
// ─── UI helpers ───────────────────────────────────────────────────────────────
// ─── UI helpers ──────────────────────────────────────────────────────────────
function updatePointsDisplay() {
document.getElementById('totalPoints').textContent = totalPoints;