mirror of
https://github.com/Coldsmiles/infstarweb.git
synced 2026-04-23 02:30:41 +08:00
feat: Redesign player details modal with improved layout and accordion for detailed stats
This commit is contained in:
zhangyuheng
45
.github/copilot-instructions.md
vendored
Normal file
45
.github/copilot-instructions.md
vendored
Normal file
@@ -0,0 +1,45 @@
|
||||
# Project Guidelines
|
||||
|
||||
## Code Style
|
||||
- This repo is framework-free: plain HTML + CSS + vanilla JavaScript (`index.html`, `stats.html`, `script.js`, `stats_script.js`).
|
||||
- Keep existing naming style: `camelCase` for JS functions/variables and descriptive DOM ids/classes (for example `fetchCrowdfunding`, `setupMobileMenu`, `#players-grid`).
|
||||
- Preserve current formatting patterns: 4-space indentation in HTML/CSS, simple function-based JS (no classes/modules/build tooling).
|
||||
- Reuse shared tokens in `style.css` (`:root` variables such as `--bg-color`, `--accent-color`) instead of introducing new ad-hoc styles.
|
||||
- Keep user-facing copy in Chinese unless the surrounding section is already English.
|
||||
|
||||
## Architecture
|
||||
- Public pages are static entry points:
|
||||
- `index.html` + `script.js`: landing page, sponsors, fundraising progress, live server status.
|
||||
- `stats.html` + `stats_script.js`: player leaderboard + searchable player cards + modal details.
|
||||
- Shared visual system lives in `style.css`; `stats.html` adds page-specific inline `<style>` overrides.
|
||||
- Data flow for stats:
|
||||
1. `statsprocess.py` fetches raw player JSON files and writes normalized outputs to `stats/`.
|
||||
2. It generates `stats/summary.json` consumed by `stats_script.js` via `fetch('stats/summary.json')`.
|
||||
|
||||
## Build and Test
|
||||
- No package manager/build step exists in this workspace.
|
||||
- Local static preview:
|
||||
- `python3 -m http.server 8000`
|
||||
- open `http://localhost:8000/`
|
||||
- Regenerate player summary data:
|
||||
- `python3 statsprocess.py`
|
||||
- Python script dependencies are runtime imports in `statsprocess.py` (not pinned): `requests`, `tqdm`.
|
||||
|
||||
## Project Conventions
|
||||
- Prefer progressive enhancement with `DOMContentLoaded` initializers (see both JS entry files).
|
||||
- Keep network fetch paths relative for local assets (`fund_progress.txt`, `sponsors.txt`, `stats/summary.json`).
|
||||
- For unavailable remote APIs, follow existing behavior: log errors and render fallback text instead of throwing.
|
||||
- Do not introduce bundlers/framework migrations unless explicitly requested.
|
||||
|
||||
## Integration Points
|
||||
- External APIs/services currently used:
|
||||
- Server status: `https://api.mcstatus.io/v2/status/java/mcpure.lunadeer.cn`
|
||||
- Avatars: `https://minotar.net/...` and `https://crafatar.com/...`
|
||||
- Player name resolution in pipeline: Ashcon + Mojang Session APIs (`statsprocess.py`).
|
||||
- Source stats endpoint: `http://x2.sjcmc.cn:15960/stats/`.
|
||||
- External assets are loaded directly from CDNs (Google Fonts, Font Awesome) and image hosts.
|
||||
|
||||
## Security
|
||||
- Treat player UUID/name datasets in `stats/` as production content; avoid destructive bulk edits.
|
||||
- Preserve SEO/verification metadata in page `<head>` blocks unless a task explicitly targets SEO.
|
||||
- Avoid adding secrets/tokens to repository files; keep any future credentials out of static HTML/JS.
|
||||
191
stats.html
191
stats.html
@@ -267,6 +267,167 @@
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Modal Redesign */
|
||||
.modal-content.expanded-modal {
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 90vh; /* Scrollable if too tall */
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-top-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.modal-identity {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-identity img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#modal-name {
|
||||
margin: 5px 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#modal-uuid {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
font-family: monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.stats-list-container.compact-stats {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: #f9f9f9;
|
||||
padding: 15px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.modal-divider {
|
||||
border: 0;
|
||||
border-top: 1px solid #eee;
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
|
||||
/* Accordion Styles */
|
||||
.accordion {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
background: #fdfdfd;
|
||||
padding: 12px 15px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.accordion-header:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.accordion-header .icon {
|
||||
margin-right: 8px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.accordion-header .arrow {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.accordion-header.active .arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.accordion-header.active {
|
||||
background: #f0f0f0;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
display: none; /* Hidden by default */
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.accordion-content.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Grid for stats inside accordion */
|
||||
.detail-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.detail-stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px dashed #f5f5f5;
|
||||
}
|
||||
|
||||
.detail-stat-label {
|
||||
color: #666;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-stat-value {
|
||||
font-weight: 600;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Mobile Adjustments */
|
||||
@media (max-width: 600px) {
|
||||
.modal-top-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
.modal-identity, .stats-list-container.compact-stats {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -411,14 +572,20 @@
|
||||
|
||||
<!-- Player Details Modal -->
|
||||
<div id="player-modal" class="modal">
|
||||
<div class="modal-content" style="max-width: 400px;">
|
||||
<div class="modal-content expanded-modal">
|
||||
<span class="close-modal">×</span>
|
||||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
<img id="modal-avatar" src="" alt="Avatar" style="width: 100px; height: 100px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
|
||||
<h2 id="modal-name" style="margin-top: 10px;">Player Name</h2>
|
||||
<p id="modal-uuid" style="font-size: 12px; color: #999; font-family: monospace;">UUID</p>
|
||||
|
||||
<!-- Top Section: Header Info + Summary Stats -->
|
||||
<div class="modal-top-section">
|
||||
<!-- Left: Identity -->
|
||||
<div class="modal-identity">
|
||||
<img id="modal-avatar" src="" alt="Avatar">
|
||||
<h2 id="modal-name">Player Name</h2>
|
||||
<p id="modal-uuid">UUID</p>
|
||||
</div>
|
||||
<div class="stats-list-container">
|
||||
|
||||
<!-- Right: Summary Stats -->
|
||||
<div class="stats-list-container compact-stats">
|
||||
<div class="stat-row">
|
||||
<span class="stat-label"><i class="fas fa-walking"></i> 行走距离</span>
|
||||
<span class="stat-value" id="modal-walk">0 m</span>
|
||||
@@ -444,6 +611,18 @@
|
||||
<span class="stat-value" id="modal-playtime">0 秒</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bottom Section: Detailed Stats Accordion -->
|
||||
<div class="modal-details-section">
|
||||
<hr class="modal-divider">
|
||||
<div id="loading-details" style="text-align:center; padding:20px; color:#888;">正在加载详细数据...</div>
|
||||
<div id="stats-accordion" class="accordion">
|
||||
<!-- Dynamic Content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
155
stats_script.js
155
stats_script.js
@@ -222,12 +222,17 @@ function setupModal() {
|
||||
}
|
||||
|
||||
function openModal(player) {
|
||||
const modal = document.getElementById("player-modal");
|
||||
|
||||
// Top Section: Identity
|
||||
document.getElementById('modal-name').innerText = player.name;
|
||||
document.getElementById('modal-uuid').innerText = player.uuid;
|
||||
const avatar = document.getElementById('modal-avatar');
|
||||
avatar.src = player.avatar;
|
||||
avatar.onerror = () => { avatar.src = `https://crafatar.com/avatars/${player.uuid}?size=64&overlay`; };
|
||||
|
||||
// Top Section: Summary Stats
|
||||
// These are from summary.json which is already formatted
|
||||
document.getElementById('modal-walk').innerText = player.stats.walk_fmt;
|
||||
document.getElementById('modal-placed').innerText = player.stats.placed.toLocaleString();
|
||||
document.getElementById('modal-mined').innerText = player.stats.mined.toLocaleString();
|
||||
@@ -235,5 +240,155 @@ function openModal(player) {
|
||||
document.getElementById('modal-kills').innerText = player.stats.kills;
|
||||
document.getElementById('modal-playtime').innerText = player.stats.play_time_fmt;
|
||||
|
||||
// Bottom Section: Reset and Load Details
|
||||
const accordion = document.getElementById('stats-accordion');
|
||||
accordion.innerHTML = '';
|
||||
document.getElementById('loading-details').style.display = 'block';
|
||||
document.getElementById('loading-details').innerText = '正在加载详细数据...';
|
||||
|
||||
modal.style.display = "flex";
|
||||
|
||||
// Load existing details
|
||||
loadPlayerDetails(player.uuid);
|
||||
}
|
||||
|
||||
async function loadPlayerDetails(uuid) {
|
||||
const accordion = document.getElementById('stats-accordion');
|
||||
const loading = document.getElementById('loading-details');
|
||||
|
||||
try {
|
||||
const response = await fetch(`stats/${uuid}.json`);
|
||||
if (!response.ok) throw new Error('Stats file not found');
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.stats) {
|
||||
loading.innerText = '暂无详细统计数据。';
|
||||
return;
|
||||
}
|
||||
|
||||
loading.style.display = 'none';
|
||||
renderDetailsAccordion(data.stats);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading details:', error);
|
||||
loading.innerText = '无法加载详细数据。';
|
||||
}
|
||||
}
|
||||
|
||||
function renderDetailsAccordion(statsObj) {
|
||||
const accordion = document.getElementById('stats-accordion');
|
||||
|
||||
// Define category mappings for better display names
|
||||
const categoryMap = {
|
||||
'minecraft:custom': { name: '通用统计', icon: 'fa-chart-bar' },
|
||||
'minecraft:mined': { name: '挖掘统计', icon: 'fa-hammer' },
|
||||
'minecraft:used': { name: '使用统计', icon: 'fa-hand-paper' },
|
||||
'minecraft:crafted': { name: '合成统计', icon: 'fa-tools' },
|
||||
'minecraft:broken': { name: '破坏统计', icon: 'fa-heart-broken' },
|
||||
'minecraft:picked_up': { name: '拾取统计', icon: 'fa-box-open' },
|
||||
'minecraft:dropped': { name: '丢弃统计', icon: 'fa-trash' },
|
||||
'minecraft:killed': { name: '击杀统计', icon: 'fa-crosshairs' },
|
||||
'minecraft:killed_by': { name: '死亡统计', icon: 'fa-skull' }
|
||||
};
|
||||
|
||||
// Helper to format keys (minecraft:stone -> Stone)
|
||||
const formatKey = (key) => {
|
||||
if (key.includes(':')) key = key.split(':')[1];
|
||||
return key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
|
||||
};
|
||||
|
||||
// Sort categories to put 'custom' first, then others alphabetically
|
||||
const sortedKeys = Object.keys(statsObj).sort((a, b) => {
|
||||
if (a === 'minecraft:custom') return -1;
|
||||
if (b === 'minecraft:custom') return 1;
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
|
||||
sortedKeys.forEach(catKey => {
|
||||
const subStats = statsObj[catKey];
|
||||
if (Object.keys(subStats).length === 0) return;
|
||||
|
||||
const catInfo = categoryMap[catKey] || { name: formatKey(catKey), icon: 'fa-folder' };
|
||||
|
||||
// Create Accordion Item
|
||||
const item = document.createElement('div');
|
||||
item.className = 'accordion-item';
|
||||
|
||||
// Header
|
||||
const header = document.createElement('div');
|
||||
header.className = 'accordion-header';
|
||||
header.innerHTML = `
|
||||
<span><i class="fas ${catInfo.icon} icon"></i> ${catInfo.name}</span>
|
||||
<i class="fas fa-chevron-down arrow"></i>
|
||||
`;
|
||||
|
||||
// Content
|
||||
const content = document.createElement('div');
|
||||
content.className = 'accordion-content';
|
||||
|
||||
// Grid for stats
|
||||
const grid = document.createElement('div');
|
||||
grid.className = 'detail-stats-grid';
|
||||
|
||||
// Sort sub-items by value descending
|
||||
const subItems = Object.entries(subStats).sort((a, b) => b[1] - a[1]);
|
||||
|
||||
subItems.forEach(([k, v]) => {
|
||||
let label = formatKey(k);
|
||||
let val = v.toLocaleString();
|
||||
|
||||
// Special formatting for time/distance in 'custom'
|
||||
if (catKey === 'minecraft:custom') {
|
||||
if (k.includes('time') || k.includes('minute')) {
|
||||
// ticks to hours/min?
|
||||
// Assuming 'play_time' is ticks (1/20s)
|
||||
if (k.includes('play_time') || k.includes('time_since')) {
|
||||
const sec = v / 20;
|
||||
if (sec > 3600) val = (sec/3600).toFixed(1) + ' h';
|
||||
else if (sec > 60) val = (sec/60).toFixed(1) + ' m';
|
||||
else val = sec.toFixed(0) + ' s';
|
||||
}
|
||||
}
|
||||
if (k.includes('cmt') || k.includes('one_cm')) { // one_cm
|
||||
const m = v / 100;
|
||||
if (m > 1000) val = (m/1000).toFixed(2) + ' km';
|
||||
else val = m.toFixed(1) + ' m';
|
||||
}
|
||||
}
|
||||
|
||||
const statDiv = document.createElement('div');
|
||||
statDiv.className = 'detail-stat-item';
|
||||
statDiv.innerHTML = `
|
||||
<span class="detail-stat-label" title="${label}">${label}</span>
|
||||
<span class="detail-stat-value">${val}</span>
|
||||
`;
|
||||
grid.appendChild(statDiv);
|
||||
});
|
||||
|
||||
content.appendChild(grid);
|
||||
item.appendChild(header);
|
||||
item.appendChild(content);
|
||||
accordion.appendChild(item);
|
||||
|
||||
// Click Event
|
||||
header.addEventListener('click', () => {
|
||||
const isActive = header.classList.contains('active');
|
||||
|
||||
// Close all others? Optional. Let's keep multiple openable.
|
||||
// But if we want accordion behavior:
|
||||
// document.querySelectorAll('.accordion-header').forEach(h => {
|
||||
// h.classList.remove('active');
|
||||
// h.nextElementSibling.classList.remove('show');
|
||||
// });
|
||||
|
||||
if (!isActive) {
|
||||
header.classList.add('active');
|
||||
content.classList.add('show');
|
||||
} else {
|
||||
header.classList.remove('active');
|
||||
content.classList.remove('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user