91 lines
4.0 KiB
JavaScript
91 lines
4.0 KiB
JavaScript
/* scense 游戏列表入口页渲染（bricks 页面内 Html 脚本区调用） */
|
||
window.scenseGameList = (function () {
|
||
function api(url, params) {
|
||
return fetch(url, {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify(params || {})
|
||
}).then(function (r) { return r.json(); });
|
||
}
|
||
|
||
function base() {
|
||
// 嵌入主页面时 location.pathname 是主页面路径，推导失败；
|
||
// 改为从本 js 的 <script src> 反推模块前缀（/scense_game/game_list.js -> /scense_game）
|
||
var scripts = document.querySelectorAll('script[src]');
|
||
for (var i = 0; i < scripts.length; i++) {
|
||
var m = (scripts[i].src || '').match(/^(.*\/)game_list\.js/);
|
||
if (m) return m[1].replace(/\/+$/, '');
|
||
}
|
||
var p = window.location.pathname.replace(/\/game\/.*$/, '');
|
||
return p.replace(/\/+$/, '');
|
||
}
|
||
|
||
function statusText(s) {
|
||
var map = {created: '已创建', playing: '进行中', paused: '已暂停', ended: '已结束'};
|
||
return map[s] || s;
|
||
}
|
||
|
||
function renderSessions(sessions) {
|
||
var box = document.getElementById('scense_session_list');
|
||
if (!box) return;
|
||
if (!sessions || !sessions.length) { box.innerHTML = '<div style="color:#9CA3AF;">暂无历史会话</div>'; return; }
|
||
var html = '';
|
||
sessions.forEach(function (s) {
|
||
html += '<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 12px;' +
|
||
'background:#FFF;border-radius:6px;margin-bottom:8px;border:1px solid #E5E7EB;">' +
|
||
'<div><b>' + s.game_name + '</b> <span style="color:#6B7280;font-size:12px;">' +
|
||
(s.score || 0) + ' 分 / Lv.' + (s.level || 1) + '</span></div>' +
|
||
'<div><span style="color:' + (s.status === 'playing' ? '#16A34A' : '#6B7280') + ';margin-right:10px;">' +
|
||
statusText(s.status) + '</span>' +
|
||
'<button onclick="scenseGameList.startGame(\'' + s.game_id + '\',\'' + s.session_id + '\')" ' +
|
||
'style="padding:4px 12px;background:#2563EB;color:#FFF;border:none;border-radius:4px;cursor:pointer;">继续</button></div></div>';
|
||
});
|
||
box.innerHTML = html;
|
||
}
|
||
|
||
function renderResults(results) {
|
||
var box = document.getElementById('scense_result_list');
|
||
if (!box) return;
|
||
if (!results || !results.length) { box.innerHTML = '<div style="color:#9CA3AF;">暂无结算记录</div>'; return; }
|
||
var html = '';
|
||
results.forEach(function (r) {
|
||
html += '<div style="display:flex;justify-content:space-between;padding:8px 12px;background:#FFF;' +
|
||
'border-radius:6px;margin-bottom:6px;border:1px solid #E5E7EB;">' +
|
||
'<span><b>' + r.game_id + '</b> <span style="color:#6B7280;font-size:12px;">' + r.created_at + '</span></span>' +
|
||
'<span style="color:#2563EB;"><b>' + r.score + '</b> 分 · Lv.' + r.level + ' · ' +
|
||
Math.round(r.duration_ms / 1000) + 's</span></div>';
|
||
});
|
||
box.innerHTML = html;
|
||
}
|
||
|
||
function load() {
|
||
api(base() + '/game/api/game_list.dspy', {}).then(function (res) {
|
||
if (res && res.success && res.data) {
|
||
renderSessions(res.data.sessions);
|
||
renderResults(res.data.results);
|
||
}
|
||
});
|
||
}
|
||
|
||
function startGame(gameId, sessionId) {
|
||
var url = base() + '/game/game_play.html?game_id=' + encodeURIComponent(gameId || '');
|
||
if (sessionId) url += '&session_id=' + encodeURIComponent(sessionId);
|
||
window.open(url, '_blank');
|
||
}
|
||
|
||
return {api: api, load: load, startGame: startGame, renderSessions: renderSessions, renderResults: renderResults};
|
||
})();
|
||
|
||
(function () {
|
||
// hub 内 urlwidget 懒构建：容器元素在 tab 激活后才存在；
|
||
// 且本脚本注入时 bricks.app 可能尚未就绪——无条件轮询等容器出现再渲染
|
||
function tryLoad(retries) {
|
||
if (window.scenseGameList) {
|
||
var box = document.getElementById('scense_session_list');
|
||
if (box) { window.scenseGameList.load(); return; }
|
||
}
|
||
if (retries > 0) setTimeout(function () { tryLoad(retries - 1); }, 500);
|
||
}
|
||
setTimeout(function () { tryLoad(240); }, 300);
|
||
})();
|