Lehrer-Live: Avatar-Slug (avatar:xxx) wird als Bild gerendert statt als Rohtext (Reflexionen + Session-Detail)

Gemeinsamer _avatarHtml-Helper: erkennt Slug in avatar_slug ODER als "avatar:<slug>" im emoji-Feld.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-08-22 23:21:32 +02:00
parent 2160a99896
commit 0c4fb84606
+14 -4
View File
@@ -1225,7 +1225,7 @@ async function _loadCockpitReflections() {
var when = it.recordedAt ? new Date(it.recordedAt).toLocaleString('de-AT', {day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'}) : '';
html += '<div style="background:#fbfaf6;border:1px solid rgba(0,0,0,.06);border-left:4px solid #c9913a;border-radius:8px;padding:.55rem .8rem">'
+ '<div style="display:flex;justify-content:space-between;font-size:.7rem;color:#6a6a6a;margin-bottom:.2rem">'
+ '<span><b style="color:#3a3a3a">' + esc(it.emoji + ' ' + (it.displayName||'—')) + '</b>'
+ '<span><b style="color:#3a3a3a">' + _avatarHtml(it.avatarSlug, it.emoji, 1.2) + ' ' + esc(it.displayName||'—') + '</b>'
+ ' · <span style="background:#f0ede5;padding:.05rem .35rem;border-radius:99px">' + esc(it.simId) + '</span>'
+ (it.level ? ' · Stufe ' + esc(it.level) : '') + '</span>'
+ '<span>' + esc(when) + '</span>'
@@ -1366,6 +1366,18 @@ function _liveIsActive(ls) {
// Uhrzeit HH:MM aus ms-Epoch.
function _hhmm(ms){ if(!ms) return '—'; var d=new Date(ms); return ('0'+d.getHours()).slice(-2)+':'+('0'+d.getMinutes()).slice(-2); }
// Avatar als Bild rendern — egal ob der Slug in avatar_slug ODER als
// „avatar:<slug>" im emoji_avatar-Feld steckt (Daten sind uneinheitlich).
// Sonst wird sonst der rohe String „avatar:kartografin" als Text angezeigt.
function _avatarHtml(slug, emoji, sizeEm){
sizeEm = sizeEm || 1.4;
var st = 'width:'+sizeEm+'em;height:'+sizeEm+'em;border-radius:50%;object-fit:cover;vertical-align:middle';
if (slug) return '<img src="assets/img/avatars/thumbs/avatar-'+slug+'.webp" alt="" style="'+st+'">';
if (typeof emoji === 'string' && emoji.indexOf('avatar:') === 0)
return '<img src="assets/img/avatars/thumbs/avatar-'+emoji.substring(7)+'.webp" alt="" style="'+st+'">';
return '<span style="font-size:'+(sizeEm*0.8).toFixed(2)+'rem">'+(emoji||'🧑‍🎓')+'</span>';
}
// „Heute nicht mehr aktiv" — Schüler:innen, die HEUTE gespielt haben, gerade aber
// offline sind: zuletzt aktiv (Uhrzeit) + letzte Aktivität + deren Leistung.
// Wiederverwendet in „Aktuell" und „Fortschritt". activeSet = {studentId:true}
@@ -2268,9 +2280,7 @@ async function openLiveSessionDetail(sessionKey) {
document.getElementById('sessdet-title').textContent =
(sess.simIcon||'📚') + ' ' + (sess.simTitle||sess.simId) + (sess.lessonLabel?' · '+sess.lessonLabel:'');
var body = document.getElementById('sessdet-body');
var avatarHtml = sess.studentAvatarSlug
? '<img src="assets/img/avatars/thumbs/avatar-'+sess.studentAvatarSlug+'.webp" alt="" style="width:2em;height:2em;border-radius:50%;object-fit:cover;vertical-align:middle">'
: '<span style="font-size:1.3rem">'+(sess.studentEmoji||'🧑‍🎓')+'</span>';
var avatarHtml = _avatarHtml(sess.studentAvatarSlug, sess.studentEmoji, 2);
var startTime = new Date(sess.startMs).toLocaleString('de-AT',{hour:'2-digit',minute:'2-digit',day:'2-digit',month:'2-digit'});
var endTime = new Date(sess.endMs).toLocaleString('de-AT',{hour:'2-digit',minute:'2-digit'});
var dur = _liveFmtMin(sess.durationSec||0);