diff --git a/package.json b/package.json index 6929cd3..d7b7312 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "author": "Damjan Košir", "license": "AGPL-3.0-only", "scripts": { - "build": "bun install && bun scripts/update-reward-count.ts && mkdir -p dist/rpg && cp src/*.html dist && cp src/favicon-32x32.png dist && cp -r src/rewardImages dist && cp src/rpg/*.html dist/rpg && cp -r src/rpg/assets dist/rpg && bun build ./src/app.ts ./src/index.ts ./src/practice.ts ./src/rpg/rpg.ts ./src/rpg/rpgIndex.ts ./src/rpg/actors.ts --outdir dist", + "build": "bun install && bun scripts/update-reward-count.ts && mkdir -p dist/rpg && cp src/*.html dist && cp src/favicon-32x32.png dist && cp -r src/rewardImages dist && cp src/rpg/*.html dist/rpg && cp -r src/rpg/assets dist/rpg && bun build ./src/app.ts ./src/index.ts ./src/practice.ts ./src/progress.ts ./src/rpg/rpg.ts ./src/rpg/rpgIndex.ts ./src/rpg/actors.ts --outdir dist", "dev": "bun run build --watch", "caddy": "mkdir -p dist/rpg && cd dist && caddy file-server --listen :3000", "debug": "chromium --remote-debugging-port=9222 --user-data-dir=remote-debug-profile http://localhost:3000/rpg/rpg.html", diff --git a/src/index.html b/src/index.html index abe4e6f..3ae2ca3 100644 --- a/src/index.html +++ b/src/index.html @@ -466,6 +466,22 @@ outline-offset: 2px; } + .view-progress-btn { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); + font-size: 0.85em; + padding: 10px 24px; + } + + .view-progress-btn:hover { + transform: translateY(-2px); + box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4); + } + + .view-progress-btn:active { + transform: translateY(0); + } + .footer { margin-top: 30px; padding-top: 20px; @@ -529,6 +545,17 @@

+
+ +
+
+ + + + + + + + Cat Math + + + + + + + +
+

+ Cat Math 🐈‍⬛ +

+ + + +
+

Your Progress

+
+
+ 0 + Problems Solved +
+
+ 0 + Total Problems +
+
+ 0% + Complete +
+
+ 0 + Mastered +
+
+
+ +
+ +
+ Damjan Košir + • + + + +
+
+ + + + diff --git a/src/progress.ts b/src/progress.ts new file mode 100644 index 0000000..627fb6a --- /dev/null +++ b/src/progress.ts @@ -0,0 +1,169 @@ +import { + getCurrentLanguage, + setLanguage, + t, + getCategoryDisplayName, + Language, +} from "./i18n.ts"; +import { Category, categoryGroups } from "./common.ts"; +import * as addition from "./addition.ts"; +import * as subtraction from "./subtraction.ts"; +import * as multiplication from "./multiplication.ts"; +import * as division from "./division.ts"; +import * as comparison from "./comparison.ts"; + +const generateFnPerGroup: Record number> = { + Addition: (category) => addition.generate(category).length, + Subtraction: (category) => subtraction.generate(category).length, + Multiplication: (category) => multiplication.generate(category).length, + Division: (category) => division.generate(category).length, + Comparison: (category) => comparison.generate(category).length, +}; + +function getTotalProblems(category: Category, group: string): number { + const fn = generateFnPerGroup[group]; + if (!fn) return 0; + return fn(category); +} + +function getSolvedCount(category: Category): number { + const solved = JSON.parse(localStorage.getItem(category) || "[]"); + return (solved as string[]).length; +} + +document.addEventListener("DOMContentLoaded", () => { + const currentLang = getCurrentLanguage(); + document.documentElement.lang = currentLang; + + // Translate static elements + document.querySelectorAll("[data-i18n]").forEach((el) => { + const key = el.getAttribute("data-i18n"); + if (!key) return; + + if (key === "title") { + el.innerHTML = `${t(key)} 🐈‍⬛`; + } else { + el.textContent = t(key); + } + }); + document.title = t("title"); + + // Back button + const backBtn = document.getElementById("back-btn"); + if (backBtn) { + backBtn.addEventListener("click", () => { + window.location.href = "index.html"; + }); + } + + // Build progress data + const progressGroupsEl = document.getElementById("progress-groups"); + if (!progressGroupsEl) return; + + let grandTotalSolved = 0; + let grandTotalAvailable = 0; + let categoriesMastered = 0; + + for (const [groupName, categories] of Object.entries(categoryGroups)) { + if (groupName === "Test") continue; + + const groupDetails = document.createElement("details"); + groupDetails.className = "progress-group"; + groupDetails.open = true; + + const groupSummary = document.createElement("summary"); + + let groupSolved = 0; + let groupTotal = 0; + + const itemsContainer = document.createElement("div"); + itemsContainer.className = "progress-items"; + + for (const category of categories) { + const total = getTotalProblems(category, groupName); + const solved = getSolvedCount(category); + + groupSolved += solved; + groupTotal += total; + + if (total > 0 && solved >= total) { + categoriesMastered++; + } + + const item = document.createElement("div"); + item.className = "progress-item"; + + const label = document.createElement("div"); + label.className = "progress-label"; + + const nameSpan = document.createElement("span"); + nameSpan.className = "category-name"; + nameSpan.textContent = getCategoryDisplayName(category); + + const countSpan = document.createElement("span"); + countSpan.className = "progress-count"; + countSpan.textContent = `${solved} / ${total}`; + + label.appendChild(nameSpan); + label.appendChild(countSpan); + + const barBg = document.createElement("div"); + barBg.className = "progress-bar-bg"; + + const barFill = document.createElement("div"); + barFill.className = "progress-bar-fill"; + + const percent = total > 0 ? (solved / total) * 100 : 0; + barFill.style.width = `${Math.min(percent, 100)}%`; + + if (percent >= 100) { + barFill.classList.add("complete"); + } else if (percent >= 60) { + barFill.classList.add("high"); + } else if (percent >= 30) { + barFill.classList.add("medium"); + } else { + barFill.classList.add("low"); + } + + barBg.appendChild(barFill); + item.appendChild(label); + item.appendChild(barBg); + itemsContainer.appendChild(item); + } + + grandTotalSolved += groupSolved; + grandTotalAvailable += groupTotal; + + const groupSummarySpan = document.createElement("span"); + groupSummarySpan.className = "group-summary"; + groupSummarySpan.textContent = `${groupSolved} / ${groupTotal}`; + + const groupNameSpan = document.createTextNode(t(`group_${groupName}`)); + groupSummary.appendChild(groupNameSpan); + groupSummary.appendChild(groupSummarySpan); + + groupDetails.appendChild(groupSummary); + groupDetails.appendChild(itemsContainer); + progressGroupsEl.appendChild(groupDetails); + } + + // Update overall summary + const totalSolvedEl = document.getElementById("total-solved"); + const totalAvailableEl = document.getElementById("total-available"); + const overallPercentEl = document.getElementById("overall-percent"); + const categoriesMasteredEl = document.getElementById("categories-mastered"); + + if (totalSolvedEl) totalSolvedEl.textContent = grandTotalSolved.toString(); + if (totalAvailableEl) + totalAvailableEl.textContent = grandTotalAvailable.toString(); + if (overallPercentEl) { + const pct = + grandTotalAvailable > 0 + ? ((grandTotalSolved / grandTotalAvailable) * 100).toFixed(1) + : "0.0"; + overallPercentEl.textContent = `${pct}%`; + } + if (categoriesMasteredEl) + categoriesMasteredEl.textContent = categoriesMastered.toString(); +}); diff --git a/src/translations.ts b/src/translations.ts index 41caff0..f0e3f5e 100644 --- a/src/translations.ts +++ b/src/translations.ts @@ -87,6 +87,14 @@ export const translations = { grouping_by_type: "By Type", grouping_by_year: "By Year", + // Progress Page + progress_title: "Your Progress", + progress_solved: "Problems Solved", + progress_total: "Total Problems", + progress_complete: "Complete", + progress_mastered: "Mastered", + view_progress: "View Progress", + // RPG Index Page rpg_title: "Choose Your Spells", rpg_subtitle: "Select the math spells you wish to master", @@ -182,6 +190,14 @@ export const translations = { grouping_by_type: "Po vrsti", grouping_by_year: "Po razredu", + // Progress Page + progress_title: "Tvoj Napredek", + progress_solved: "Rešene naloge", + progress_total: "Vse naloge", + progress_complete: "Dokončano", + progress_mastered: "Obvladano", + view_progress: "Poglej Napredek", + // RPG Index Page rpg_title: "Izberi Uroke", rpg_subtitle: "Izberi matematične uroke za vadbo",