226 lines
9.4 KiB
JavaScript
226 lines
9.4 KiB
JavaScript
// Filename: web/static/js/status-grid.js (V6.0 - 健壮初始化最终版)
|
|
// export default function initializeStatusGrid() {
|
|
class StatusGrid {
|
|
constructor(canvasId) {
|
|
this.canvas = document.getElementById(canvasId);
|
|
if (!this.canvas) { return; }
|
|
this.ctx = this.canvas.getContext('2d');
|
|
|
|
this.config = {
|
|
cols: 100, rows: 4, gap: 2, cornerRadius: 2,
|
|
colors: {
|
|
'ACTIVE': '#22C55E', 'ACTIVE_BLINK': '#A7F3D0',
|
|
'PENDING': '#9CA3AF', 'COOLDOWN': '#EAB308',
|
|
'DISABLED': '#F97316', 'BANNED': '#EF4444',
|
|
'EMPTY': '#F3F4F6',
|
|
},
|
|
blinkInterval: 100, blinksPerInterval: 2, blinkDuration: 200,
|
|
statusOrder: ['ACTIVE', 'COOLDOWN', 'DISABLED', 'BANNED', 'PENDING']
|
|
};
|
|
this.state = {
|
|
squares: [], squareSize: 0,
|
|
devicePixelRatio: window.devicePixelRatio || 1,
|
|
animationFrameId: null, blinkIntervalId: null,
|
|
blinkingSquares: new Set()
|
|
};
|
|
|
|
this.debouncedResize = this.debounce(this.resize.bind(this), 250);
|
|
}
|
|
init() {
|
|
this.setupCanvas();
|
|
// 初始化时，绘制一个完全为空的网格
|
|
this.state.squares = Array(this.config.rows * this.config.cols).fill({ status: 'EMPTY' });
|
|
this.drawFullGrid();
|
|
window.addEventListener('resize', this.debouncedResize);
|
|
}
|
|
|
|
/**
|
|
* [灵魂重塑] 这是被彻底重写的核心函数
|
|
* @param {object} keyStatusCounts - 例如 { "BANNED": 1, "DISABLED": 4, ... }
|
|
*/
|
|
updateData(keyStatusCounts) {
|
|
if (!keyStatusCounts) return;
|
|
|
|
this.destroyAnimation();
|
|
this.state.squares = [];
|
|
this._activeIndices = null;
|
|
this.state.blinkingSquares.clear();
|
|
const totalKeys = Object.values(keyStatusCounts).reduce((s, c) => s + c, 0);
|
|
const totalSquares = this.config.rows * this.config.cols;
|
|
// 如果没有密钥，则显示为空白的网格
|
|
if (totalKeys === 0) {
|
|
this.init();
|
|
return;
|
|
}
|
|
let statusMap = [];
|
|
let calculatedSquares = 0;
|
|
// 1. 严格按照比例，计算每个状态应该占据多少个“像素”
|
|
for (const status of this.config.statusOrder) {
|
|
const count = keyStatusCounts[status] || 0;
|
|
if (count > 0) {
|
|
const proportion = count / totalKeys;
|
|
const squaresForStatus = Math.floor(proportion * totalSquares);
|
|
for (let i = 0; i < squaresForStatus; i++) {
|
|
statusMap.push(status);
|
|
}
|
|
calculatedSquares += squaresForStatus;
|
|
}
|
|
}
|
|
|
|
// 2. [关键] 修正四舍五入的误差，将剩余的方块填满
|
|
const remainingSquares = totalSquares - calculatedSquares;
|
|
if (remainingSquares > 0) {
|
|
// 将剩余方块，全部分配给数量最多的那个状态，以使其最不失真
|
|
let largestStatus = this.config.statusOrder[0]; // 默认给第一个
|
|
let maxCount = -1;
|
|
for (const status in keyStatusCounts) {
|
|
if (keyStatusCounts[status] > maxCount) {
|
|
maxCount = keyStatusCounts[status];
|
|
largestStatus = status;
|
|
}
|
|
}
|
|
for (let i = 0; i < remainingSquares; i++) {
|
|
statusMap.push(largestStatus);
|
|
}
|
|
}
|
|
|
|
// 3. 将最终的、按比例填充的地图，转化为内部的 square 对象
|
|
this.state.squares = statusMap.map(status => ({
|
|
status: status,
|
|
isBlinking: false,
|
|
blinkUntil: 0
|
|
}));
|
|
|
|
// 4. [渲染修正] 直接、完整地重绘整个网格，然后启动动画
|
|
this.drawFullGrid();
|
|
this.startAnimationSystem();
|
|
}
|
|
// [渲染修正] 一个简单、直接、一次性绘制所有方块的函数
|
|
drawFullGrid() {
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
this.ctx.clearRect(0, 0, rect.width, rect.height);
|
|
|
|
// offsetX 和 offsetY 是在 setupCanvas 中计算的
|
|
const offsetX = this.state.offsetX;
|
|
const offsetY = this.state.offsetY;
|
|
this.state.squares.forEach((square, i) => {
|
|
const c = i % this.config.cols;
|
|
const r = Math.floor(i / this.config.cols);
|
|
|
|
const x = offsetX + c * (this.state.squareSize + this.config.gap);
|
|
const y = offsetY + r * (this.state.squareSize + this.config.gap);
|
|
const color = this.config.colors[square.status];
|
|
this.drawRoundedRect(x, y, this.state.squareSize, this.config.cornerRadius, color);
|
|
});
|
|
}
|
|
|
|
startAnimationSystem() {
|
|
if(this.state.blinkIntervalId) clearInterval(this.state.blinkIntervalId);
|
|
if(this.state.animationFrameId) cancelAnimationFrame(this.state.animationFrameId);
|
|
|
|
this.state.blinkIntervalId = setInterval(() => {
|
|
const activeSquareIndices = this.getActiveSquareIndices();
|
|
if (activeSquareIndices.length === 0) return;
|
|
|
|
for(let i = 0; i < this.config.blinksPerInterval; i++) {
|
|
const randomIndex = activeSquareIndices[Math.floor(Math.random() * activeSquareIndices.length)];
|
|
const square = this.state.squares[randomIndex];
|
|
|
|
if (square && !square.isBlinking) {
|
|
square.isBlinking = true;
|
|
square.blinkUntil = performance.now() + this.config.blinkDuration;
|
|
this.state.blinkingSquares.add(randomIndex);
|
|
}
|
|
}
|
|
}, this.config.blinkInterval);
|
|
|
|
const animationLoop = (timestamp) => {
|
|
if (this.state.blinkingSquares.size > 0) {
|
|
this.state.blinkingSquares.forEach(index => {
|
|
const square = this.state.squares[index];
|
|
if(!square) { // 防御性检查
|
|
this.state.blinkingSquares.delete(index);
|
|
return;
|
|
}
|
|
const c = index % this.config.cols;
|
|
const r = Math.floor(index / this.config.cols);
|
|
|
|
this.drawSquare(square, c, r);
|
|
|
|
if (timestamp > square.blinkUntil) {
|
|
square.isBlinking = false;
|
|
this.state.blinkingSquares.delete(index);
|
|
this.drawSquare(square, c, r);
|
|
}
|
|
});
|
|
}
|
|
this.state.animationFrameId = requestAnimationFrame(animationLoop);
|
|
};
|
|
animationLoop();
|
|
}
|
|
|
|
setupCanvas() {
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
this.canvas.width = rect.width * this.state.devicePixelRatio;
|
|
this.canvas.height = rect.height * this.state.devicePixelRatio;
|
|
this.ctx.scale(this.state.devicePixelRatio, this.state.devicePixelRatio);
|
|
const calculatedWidth = (rect.width - (this.config.cols - 1) * this.config.gap) / this.config.cols;
|
|
const calculatedHeight = (rect.height - (this.config.rows - 1) * this.config.gap) / this.config.rows;
|
|
this.state.squareSize = Math.max(1, Math.floor(Math.min(calculatedWidth, calculatedHeight)));
|
|
const totalGridWidth = this.config.cols * this.state.squareSize + (this.config.cols - 1) * this.config.gap;
|
|
const totalGridHeight = this.config.rows * this.state.squareSize + (this.config.rows - 1) * this.config.gap;
|
|
this.state.offsetX = Math.floor((rect.width - totalGridWidth) / 2);
|
|
this.state.offsetY = Math.floor((rect.height - totalGridHeight) / 2);
|
|
}
|
|
|
|
getActiveSquareIndices() {
|
|
if (!this._activeIndices) {
|
|
this._activeIndices = [];
|
|
this.state.squares.forEach((s, i) => {
|
|
if (s.status === 'ACTIVE') this._activeIndices.push(i);
|
|
});
|
|
}
|
|
return this._activeIndices;
|
|
}
|
|
|
|
drawRoundedRect(x, y, size, radius, color) {
|
|
this.ctx.fillStyle = color;
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(x + radius, y);
|
|
this.ctx.arcTo(x + size, y, x + size, y + size, radius);
|
|
this.ctx.arcTo(x + size, y + size, x, y + size, radius);
|
|
this.ctx.arcTo(x, y + size, x, y, radius);
|
|
this.ctx.arcTo(x, y, x + size, y, radius);
|
|
this.ctx.closePath();
|
|
this.ctx.fill();
|
|
}
|
|
|
|
drawSquare(square, c, r) {
|
|
const x = this.state.offsetX + c * (this.state.squareSize + this.config.gap);
|
|
const y = this.state.offsetY + r * (this.state.squareSize + this.config.gap);
|
|
const color = square.isBlinking ? this.config.colors.ACTIVE_BLINK : this.config.colors[square.status];
|
|
this.drawRoundedRect(x, y, this.state.squareSize, this.config.cornerRadius, color);
|
|
}
|
|
|
|
destroyAnimation() {
|
|
if(this.state.animationFrameId) cancelAnimationFrame(this.state.animationFrameId);
|
|
if(this.state.blinkIntervalId) clearInterval(this.state.blinkIntervalId);
|
|
this.state.animationFrameId = null;
|
|
this.state.blinkIntervalId = null;
|
|
}
|
|
|
|
resize() {
|
|
this.destroyAnimation();
|
|
this.init(); // 重新绘制空网格
|
|
// 这里依赖dashboard.js在resize后重新获取并传入数据
|
|
}
|
|
|
|
debounce(func, delay) {
|
|
let timeout;
|
|
return (...args) => {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => func.apply(this, args), delay);
|
|
};
|
|
}
|
|
}
|