diff --git a/www/html/Game/public/TryChangeCSS/js/room-lobby.js b/www/html/Game/public/TryChangeCSS/js/room-lobby.js index 75e495d..b0ef81d 100644 --- a/www/html/Game/public/TryChangeCSS/js/room-lobby.js +++ b/www/html/Game/public/TryChangeCSS/js/room-lobby.js @@ -30,6 +30,8 @@ /** Lobby หลังคดี — ต้องตรงกับ server POST_CASE_LOBBY_SPACE_ID */ const POST_CASE_LOBBY_SPACE_ID = 'mn8nx46h'; const PLAYER_KEY = 'jdPlayerKey'; + /** ตรงกับ character.js / Main-Lobby — composite idle ทิศ down */ + const LOBBY_IDLE_DOWN_LS = 'jdCharLobbyIdleDown:'; const LOBBY_EVIDENCE_ASSET_BASE = typeof appPath === 'function' ? appPath('/Main-Lobby/IMAGE/See%20evidence') : '/Main-Lobby/IMAGE/See%20evidence'; const LOBBY_EVIDENCE_RARITY = { common: 'Common', rare: 'Rare', legendary: 'Legendary' }; @@ -144,6 +146,21 @@ return { ...p, x: nx, y: ny, tx: nx, ty: ny }; } const characterImages = {}; + + /** ลำดับโหลดรูปยืนเฉย/เดิน ต่อทิศ — idle ก่อน (ตรงกับเซิร์ฟ upload) */ + function characterSpriteUrlCandidates(id, dir) { + const d = dir || 'down'; + const enc = encodeURIComponent(id); + const q = '?ch=' + enc; + const base = SERVER + '/img/characters/' + enc + '_' + d; + return [ + base + '_idle.png' + q, + base + '_idle_0.png' + q, + base + '.png' + q, + base + '_0.png' + q, + ]; + } + function createDefaultAvatarImg() { const c = document.createElement('canvas'); c.width = 64; c.height = 64; @@ -187,10 +204,21 @@ function getCharacterImg(id, direction) { if (!id) return null; - const key = id + '_' + (direction || 'down'); + const dir = direction || 'down'; + const key = id + '_' + dir; if (characterImages[key]) return characterImages[key]; const img = new Image(); - img.src = SERVER + '/img/characters/' + encodeURIComponent(id) + '_' + (direction || 'down') + '.png'; + const urls = characterSpriteUrlCandidates(id, dir); + let uidx = 0; + img.onerror = function () { + uidx += 1; + if (uidx >= urls.length) { + img.onerror = null; + return; + } + img.src = urls[uidx]; + }; + img.src = urls[0]; characterImages[key] = img; return img; } @@ -204,17 +232,27 @@ anim = { frames: [], fallback: null }; characterAnimations[key] = anim; anim.fallback = getCharacterImg(id, dir); + var q = '?ch=' + encodeURIComponent(id); + var tryIdleWalk = characterSpriteUrlCandidates(id, dir); var frame0 = new Image(); frame0.onload = function () { for (var i = 1; i < CHARACTER_ANIM_FRAMES; i++) { var img = new Image(); - img.src = SERVER + '/img/characters/' + encodeURIComponent(id) + '_' + dir + '_' + i + '.png'; + img.src = SERVER + '/img/characters/' + encodeURIComponent(id) + '_' + dir + '_' + i + '.png' + q; anim.frames.push(img); } if (mapData && canvas) drawLobbyMap(); }; - frame0.onerror = function () { if (mapData && canvas) drawLobbyMap(); }; - frame0.src = SERVER + '/img/characters/' + encodeURIComponent(id) + '_' + dir + '_0.png'; + var tix = 0; + frame0.onerror = function () { + tix += 1; + if (tix >= tryIdleWalk.length) { + if (mapData && canvas) drawLobbyMap(); + return; + } + frame0.src = tryIdleWalk[tix]; + }; + frame0.src = tryIdleWalk[0]; anim.frames.push(frame0); } var phase = walkAnimPhaseIndex(now, isWalking); @@ -1154,17 +1192,50 @@ if (quizModeActive) renderQuizScoreboard(lastQuizScores); } - const DEFAULT_CHARACTER_ID = 'Chatest'; function getStoredCharacterId() { - try { return localStorage.getItem('gameCharacterId') || DEFAULT_CHARACTER_ID; } catch (e) { return DEFAULT_CHARACTER_ID; } + try { + const v = (localStorage.getItem('gameCharacterId') || '').trim(); + return v; + } catch (e) { + return ''; + } } function updateLobbyProfileAvatar() { const img = document.getElementById('room-lobby-profile-avatar'); if (!img) return; const id = getStoredCharacterId(); - img.src = SERVER + '/img/characters/' + encodeURIComponent(id) + '_down.png?ch=' + encodeURIComponent(id); + if (!id) { + img.removeAttribute('src'); + img.alt = (profileDisplayName || nick || 'ผู้เล่น'); + return; + } + try { + const du = localStorage.getItem(LOBBY_IDLE_DOWN_LS + id); + if (du && typeof du === 'string' && du.indexOf('data:image/') === 0) { + img.onload = null; + img.onerror = null; + img.src = du; + img.alt = (profileDisplayName || nick || 'ผู้เล่น') + ' — ตัวละคร'; + return; + } + } catch (e) { /* ignore */ } + const urls = characterSpriteUrlCandidates(id, 'down'); + let uidx = 0; img.alt = (profileDisplayName || nick || 'ผู้เล่น') + ' — ตัวละคร'; + img.onerror = function () { + uidx += 1; + if (uidx >= urls.length) { + img.onerror = null; + img.removeAttribute('src'); + return; + } + img.src = urls[uidx]; + }; + img.onload = function () { + img.onerror = null; + }; + img.src = urls[0]; } function loadProfileDisplayName() { @@ -1760,7 +1831,26 @@ av.className = 'quiz-sb-avatar'; if (row.characterId) { av.alt = ''; - av.src = SERVER + '/img/characters/' + encodeURIComponent(row.characterId) + '_down.png'; + var duSb = ''; + try { + duSb = localStorage.getItem(LOBBY_IDLE_DOWN_LS + row.characterId) || ''; + } catch (eDu) { duSb = ''; } + if (duSb && duSb.indexOf('data:image/') === 0) { + av.src = duSb; + } else { + var urlsSb = characterSpriteUrlCandidates(row.characterId, 'down'); + var qi = 0; + av.onerror = function () { + qi += 1; + if (qi >= urlsSb.length) { + av.onerror = null; + av.removeAttribute('src'); + return; + } + av.src = urlsSb[qi]; + }; + av.src = urlsSb[0]; + } } var meta = document.createElement('div'); meta.className = 'quiz-sb-meta'; diff --git a/www/html/Game/public/TryChangeCSS/room-lobby.html b/www/html/Game/public/TryChangeCSS/room-lobby.html index 8b8f3c3..ee26105 100644 --- a/www/html/Game/public/TryChangeCSS/room-lobby.html +++ b/www/html/Game/public/TryChangeCSS/room-lobby.html @@ -1255,7 +1255,7 @@

- + My Coins 150

@@ -1520,7 +1520,7 @@ - +
v —
diff --git a/www/html/Game/public/js/room-lobby.js b/www/html/Game/public/js/room-lobby.js index 75e495d..b0ef81d 100644 --- a/www/html/Game/public/js/room-lobby.js +++ b/www/html/Game/public/js/room-lobby.js @@ -30,6 +30,8 @@ /** Lobby หลังคดี — ต้องตรงกับ server POST_CASE_LOBBY_SPACE_ID */ const POST_CASE_LOBBY_SPACE_ID = 'mn8nx46h'; const PLAYER_KEY = 'jdPlayerKey'; + /** ตรงกับ character.js / Main-Lobby — composite idle ทิศ down */ + const LOBBY_IDLE_DOWN_LS = 'jdCharLobbyIdleDown:'; const LOBBY_EVIDENCE_ASSET_BASE = typeof appPath === 'function' ? appPath('/Main-Lobby/IMAGE/See%20evidence') : '/Main-Lobby/IMAGE/See%20evidence'; const LOBBY_EVIDENCE_RARITY = { common: 'Common', rare: 'Rare', legendary: 'Legendary' }; @@ -144,6 +146,21 @@ return { ...p, x: nx, y: ny, tx: nx, ty: ny }; } const characterImages = {}; + + /** ลำดับโหลดรูปยืนเฉย/เดิน ต่อทิศ — idle ก่อน (ตรงกับเซิร์ฟ upload) */ + function characterSpriteUrlCandidates(id, dir) { + const d = dir || 'down'; + const enc = encodeURIComponent(id); + const q = '?ch=' + enc; + const base = SERVER + '/img/characters/' + enc + '_' + d; + return [ + base + '_idle.png' + q, + base + '_idle_0.png' + q, + base + '.png' + q, + base + '_0.png' + q, + ]; + } + function createDefaultAvatarImg() { const c = document.createElement('canvas'); c.width = 64; c.height = 64; @@ -187,10 +204,21 @@ function getCharacterImg(id, direction) { if (!id) return null; - const key = id + '_' + (direction || 'down'); + const dir = direction || 'down'; + const key = id + '_' + dir; if (characterImages[key]) return characterImages[key]; const img = new Image(); - img.src = SERVER + '/img/characters/' + encodeURIComponent(id) + '_' + (direction || 'down') + '.png'; + const urls = characterSpriteUrlCandidates(id, dir); + let uidx = 0; + img.onerror = function () { + uidx += 1; + if (uidx >= urls.length) { + img.onerror = null; + return; + } + img.src = urls[uidx]; + }; + img.src = urls[0]; characterImages[key] = img; return img; } @@ -204,17 +232,27 @@ anim = { frames: [], fallback: null }; characterAnimations[key] = anim; anim.fallback = getCharacterImg(id, dir); + var q = '?ch=' + encodeURIComponent(id); + var tryIdleWalk = characterSpriteUrlCandidates(id, dir); var frame0 = new Image(); frame0.onload = function () { for (var i = 1; i < CHARACTER_ANIM_FRAMES; i++) { var img = new Image(); - img.src = SERVER + '/img/characters/' + encodeURIComponent(id) + '_' + dir + '_' + i + '.png'; + img.src = SERVER + '/img/characters/' + encodeURIComponent(id) + '_' + dir + '_' + i + '.png' + q; anim.frames.push(img); } if (mapData && canvas) drawLobbyMap(); }; - frame0.onerror = function () { if (mapData && canvas) drawLobbyMap(); }; - frame0.src = SERVER + '/img/characters/' + encodeURIComponent(id) + '_' + dir + '_0.png'; + var tix = 0; + frame0.onerror = function () { + tix += 1; + if (tix >= tryIdleWalk.length) { + if (mapData && canvas) drawLobbyMap(); + return; + } + frame0.src = tryIdleWalk[tix]; + }; + frame0.src = tryIdleWalk[0]; anim.frames.push(frame0); } var phase = walkAnimPhaseIndex(now, isWalking); @@ -1154,17 +1192,50 @@ if (quizModeActive) renderQuizScoreboard(lastQuizScores); } - const DEFAULT_CHARACTER_ID = 'Chatest'; function getStoredCharacterId() { - try { return localStorage.getItem('gameCharacterId') || DEFAULT_CHARACTER_ID; } catch (e) { return DEFAULT_CHARACTER_ID; } + try { + const v = (localStorage.getItem('gameCharacterId') || '').trim(); + return v; + } catch (e) { + return ''; + } } function updateLobbyProfileAvatar() { const img = document.getElementById('room-lobby-profile-avatar'); if (!img) return; const id = getStoredCharacterId(); - img.src = SERVER + '/img/characters/' + encodeURIComponent(id) + '_down.png?ch=' + encodeURIComponent(id); + if (!id) { + img.removeAttribute('src'); + img.alt = (profileDisplayName || nick || 'ผู้เล่น'); + return; + } + try { + const du = localStorage.getItem(LOBBY_IDLE_DOWN_LS + id); + if (du && typeof du === 'string' && du.indexOf('data:image/') === 0) { + img.onload = null; + img.onerror = null; + img.src = du; + img.alt = (profileDisplayName || nick || 'ผู้เล่น') + ' — ตัวละคร'; + return; + } + } catch (e) { /* ignore */ } + const urls = characterSpriteUrlCandidates(id, 'down'); + let uidx = 0; img.alt = (profileDisplayName || nick || 'ผู้เล่น') + ' — ตัวละคร'; + img.onerror = function () { + uidx += 1; + if (uidx >= urls.length) { + img.onerror = null; + img.removeAttribute('src'); + return; + } + img.src = urls[uidx]; + }; + img.onload = function () { + img.onerror = null; + }; + img.src = urls[0]; } function loadProfileDisplayName() { @@ -1760,7 +1831,26 @@ av.className = 'quiz-sb-avatar'; if (row.characterId) { av.alt = ''; - av.src = SERVER + '/img/characters/' + encodeURIComponent(row.characterId) + '_down.png'; + var duSb = ''; + try { + duSb = localStorage.getItem(LOBBY_IDLE_DOWN_LS + row.characterId) || ''; + } catch (eDu) { duSb = ''; } + if (duSb && duSb.indexOf('data:image/') === 0) { + av.src = duSb; + } else { + var urlsSb = characterSpriteUrlCandidates(row.characterId, 'down'); + var qi = 0; + av.onerror = function () { + qi += 1; + if (qi >= urlsSb.length) { + av.onerror = null; + av.removeAttribute('src'); + return; + } + av.src = urlsSb[qi]; + }; + av.src = urlsSb[0]; + } } var meta = document.createElement('div'); meta.className = 'quiz-sb-meta'; diff --git a/www/html/Game/public/room-lobby.html b/www/html/Game/public/room-lobby.html index 446bbfa..c69a699 100644 --- a/www/html/Game/public/room-lobby.html +++ b/www/html/Game/public/room-lobby.html @@ -1258,7 +1258,7 @@

- + My Coins 150

@@ -1523,7 +1523,7 @@ - +
v —