Adminator/geograsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Abzeichen: thematische Sim-Abzeichen + saubere Icons + Lehreransicht

Browse Source 
- badges.js: 5 Basis-Abzeichen + je Sim 1 thematisches (Vier-Jahreszeiten,
  Sterne-Koch, Alpen-Pilot …), 19 sauber generierte Flat-Emblem-Icons (keine Emojis)
- Erfolge-Tab: Sammlung mit Bild-Icons, gesperrte grau = Ziele; alte Emoji-Badges raus
- Lehrer-Matrix: neue Spalte „Abzeichen" (freigeschaltet von gesamt) pro Schüler:in

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-07-20 14:35:43 +02:00
parent 65ca8692cb
commit 504b0098a6
22 changed files with 85 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/schueler.html
+9 -18
View File
@@ -53,6 +53,8 @@
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem}
.badge{background:#fff;border-radius:10px;padding:.8rem;text-align:center;border:1.5px solid rgba(0,0,0,.04)}
.badge .icon{font-size:2rem;margin-bottom:.3rem}
.badge .icon img{width:48px;height:48px;object-fit:contain;display:block;margin:0 auto}
.badge.locked-b .icon img{filter:grayscale(.9)}
.badge .name{font-size:.72rem;font-weight:700}
.badge .desc{font-size:.6rem;color:#8a8a8a}
.badge.earned{border-color:#4a7c8a;background:linear-gradient(135deg,#f0f8fa,#fff)}
@@ -359,19 +361,6 @@ async function renderAchievements() {
html += '</div>';
}
// Auszeichnungen / Badges
html += '<p style="font-size:.85rem;font-weight:700;color:#4a7c8a;margin-bottom:.5rem">Auszeichnungen</p>';
html += '<div class="badge-grid">';
BADGES.forEach(function(b) {
var isEarned = earned.indexOf(b.id) !== -1;
html += '<div class="badge '+(isEarned ? 'earned' : 'locked-b')+'">';
html += '<div class="icon">'+b.icon+'</div>';
html += '<div class="name">'+b.name+'</div>';
html += '<div class="desc">'+b.desc+'</div>';
html += '</div>';
});
html += '</div>';
// === Abzeichen-Sammlung pro Simulation (gesperrte = sichtbare Ziele) ===
if (typeof GGS_SIMS !== 'undefined') {
var progBySim = {};
@@ -380,18 +369,20 @@ async function renderAchievements() {
html += '<p style="font-size:.68rem;color:#8a8a8a;margin:0 0 .7rem">Jede Simulation hat fünf Abzeichen. Blasse sind noch nicht geschafft — das sind deine Ziele.</p>';
GGS_SIMS.forEach(function(sim){
var p = progBySim[sim.id] || {plays:0, best_stars:0, level:1};
var got = ggsBadgeCount(p);
var list = ggsSimBadges(sim.id);
var got = ggsBadgeCount(p, sim.id);
var st = (p.best_stars||0);
var stars = '★'.repeat(st) + '☆'.repeat(Math.max(0, 5-st));
html += '<div class="sim-coll"><div class="sim-coll-head">'
+ '<span class="sc-ic">'+sim.icon+'</span><span class="sc-t">'+sim.title+'</span>'
+ '<span class="sc-stars" title="Beste Sterne">'+stars+'</span>'
+ '<span class="sc-count">'+got+' / '+GGS_BADGES.length+'</span></div>';
+ '<span class="sc-count">'+got+' / '+list.length+'</span></div>';
html += '<div class="badge-grid">';
GGS_BADGES.forEach(function(b){
list.forEach(function(b){
var e = b.cond(p);
html += '<div class="badge '+(e?'earned':'locked-b')+'" title="'+(e?'Geschafft!':'Ziel: '+b.desc)+'">'
+ '<div class="icon">'+b.icon+'</div><div class="name">'+b.name+'</div>'
html += '<div class="badge '+(e?'earned':'locked-b')+(b.thematic?' thematic':'')+'" title="'+(e?'Geschafft!':'Ziel: '+b.desc)+'">'
+ '<div class="icon"><img src="'+b.icon+'" alt="" loading="lazy"></div>'
+ '<div class="name">'+b.name+'</div>'
+ '<div class="desc">'+b.desc+'</div></div>';
});
html += '</div></div>';