wip: color-coded production breakdown - each resource gets distinct label and bar color
This commit is contained in:
12
game.js
12
game.js
@@ -2251,11 +2251,11 @@ function renderProductionBreakdown() {
|
||||
// Map resource key to its actual rate field on G
|
||||
const resources = [
|
||||
{ key: 'code', label: 'Code', color: '#4a9eff', rateField: 'codeRate' },
|
||||
{ key: 'compute', label: 'Compute', color: '#4a9eff', rateField: 'computeRate' },
|
||||
{ key: 'knowledge', label: 'Knowledge', color: '#4a9eff', rateField: 'knowledgeRate' },
|
||||
{ key: 'user', label: 'Users', color: '#4a9eff', rateField: 'userRate' },
|
||||
{ key: 'impact', label: 'Impact', color: '#4a9eff', rateField: 'impactRate' },
|
||||
{ key: 'rescues', label: 'Rescues', color: '#4a9eff', rateField: 'rescuesRate' },
|
||||
{ key: 'compute', label: 'Compute', color: '#00bcd4', rateField: 'computeRate' },
|
||||
{ key: 'knowledge', label: 'Knowledge', color: '#9c27b0', rateField: 'knowledgeRate' },
|
||||
{ key: 'user', label: 'Users', color: '#26a69a', rateField: 'userRate' },
|
||||
{ key: 'impact', label: 'Impact', color: '#ff7043', rateField: 'impactRate' },
|
||||
{ key: 'rescues', label: 'Rescues', color: '#66bb6a', rateField: 'rescuesRate' },
|
||||
{ key: 'ops', label: 'Ops', color: '#b388ff', rateField: 'opsRate' },
|
||||
{ key: 'trust', label: 'Trust', color: '#4caf50', rateField: 'trustRate' },
|
||||
{ key: 'creativity', label: 'Creativity', color: '#ffd700', rateField: 'creativityRate' }
|
||||
@@ -2332,7 +2332,7 @@ function renderProductionBreakdown() {
|
||||
const absTotal = contributions.reduce((s, c) => s + Math.abs(c.rate), 0);
|
||||
for (const c of contributions.sort((a, b) => Math.abs(b.rate) - Math.abs(a.rate))) {
|
||||
const pct = absTotal > 0 ? Math.abs(c.rate / absTotal * 100) : 0;
|
||||
const barColor = c.rate < 0 ? '#f44336' : '#1a3a5a';
|
||||
const barColor = c.rate < 0 ? '#f44336' : res.color;
|
||||
html += `<div style="display:flex;align-items:center;font-size:9px;color:#888;margin-left:8px;margin-bottom:1px">`;
|
||||
html += `<span style="width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${c.name}${c.count > 1 ? ' x' + c.count : ''}</span>`;
|
||||
html += `<span style="flex:1;height:3px;background:#111;border-radius:1px;margin:0 6px"><span style="display:block;height:100%;width:${Math.min(100, pct)}%;background:${barColor};border-radius:1px"></span></span>`;
|
||||
|
||||
Reference in New Issue
Block a user