// plan-admin-variants.jsx — 4 admin layouts for configuring a Plan
// (N stages; each stage: length + probability distribution over
// a subset of 2048 values + stone). All variants operate on the
// same seed data for direct comparison.
const SAMPLE_PLAN = {
name: 'planA',
note: '',
stages: [
{ id: 's1', name: 'Stage 1 · 暖场', length: 30, weights: { 2: 18.1, 4: 18.3, 8: 23.9, 16: 24.9, 32: 14.8 } },
{ id: 's2', name: 'Stage 2 · 合成练习', length: 30, weights: { 64: 64.6, 128: 30.0, 256: 5.4 } },
{ id: 's3', name: 'Stage 3 · 中期', length: 30, weights: { 64: 20, 128: 20, 256: 20, 512: 20, 1024: 20 } },
{ id: 's4', name: 'Stage 4 · 终盘', length: 28, weights: { 512: 25, 1024: 25, 2048: 25, 4096: 15, 8192: 10 } },
],
};
// ─────────────────────────────────────────────────────────────
// Shared small bits used across variants
// ─────────────────────────────────────────────────────────────
// Picker popover body — click a chip to add it to the stage.
function ChipPicker({ current, onAdd, includeStone = true }) {
const existing = new Set(Object.keys(current).map(Number));
const allowed = [...ALL_VALUES, ...(includeStone ? [STONE_VALUE] : [])];
return (
{allowed.filter((v) => !existing.has(v)).map((v) => (
))}
);
}
// Expected-value pill + difficulty indicator
function DifficultyBadge({ weights, dense = false }) {
const ev = expectedValue(weights);
// Map expected-block log2 to rough "difficulty" bucket
const log = ev > 0 ? Math.log2(ev) : 0;
const bucket = log < 5 ? ['easy', '#4ecd7a'] : log < 8 ? ['medium', '#ffb93c'] : log < 11 ? ['hard', '#ff6a3c'] : ['extreme', '#c14dff'];
return (
EV
{ev < 10 ? ev.toFixed(1) : Math.round(ev).toLocaleString()}
{bucket[0]}
);
}
// Probability bar: colored segments sized by weight %, drag dividers.
// Each divider only redistributes between its two neighbors.
function ProbBar({ weights, onChange, height = 36, showPercent = true }) {
const keys = Object.keys(weights).map(Number);
const total = keys.reduce((a, k) => a + weights[k], 0) || 1;
const trackRef = React.useRef(null);
const MIN = 2;
const startDrag = (i) => (e) => {
e.preventDefault();
e.stopPropagation();
const r = trackRef.current.getBoundingClientRect();
const kL = keys[i], kR = keys[i + 1];
const startX = e.clientX;
const sL = weights[kL], sR = weights[kR];
const sum = sL + sR;
const move = (ev) => {
const dx = ev.clientX - startX;
const dPct = (dx / r.width) * 100;
let newL = sL + dPct, newR = sR - dPct;
if (newL < MIN) { newL = MIN; newR = sum - MIN; }
if (newR < MIN) { newR = MIN; newL = sum - MIN; }
onChange({ ...weights, [kL]: newL, [kR]: newR });
};
const up = () => {
document.removeEventListener('pointermove', move);
document.removeEventListener('pointerup', up);
};
document.addEventListener('pointermove', move);
document.addEventListener('pointerup', up);
};
return (
{keys.map((k, i) => {
const c = COLOR_MAP[k];
const pct = (weights[k] / total) * 100;
const isFirst = i === 0, isLast = i === keys.length - 1;
return (
{/* gloss */}
{pct >= 6 && showPercent && (
{pct.toFixed(1)}%
)}
{!isLast && (
)}
);
})}
{/* modal header */}
新增 Plan
总长度 {totalLength}
setPlan((p) => ({ ...p, name: v }))} />
setPlan((p) => ({ ...p, note: v }))} />
{plan.stages.map((s, i) => (
patchStage(s.id, { name: v })}
onLength={(v) => patchStage(s.id, { length: v })}
onWeights={(w) => patchStage(s.id, { weights: w })}
onAdd={(v) => addNumber(s.id, v)}
onRemove={(v) => removeNumber(s.id, v)}
onDelete={() => setPlan((p) => ({ ...p, stages: p.stages.filter((x) => x.id !== s.id) }))}
canDelete={plan.stages.length > 1}
/>
))}
#{idx + 1}
onName(e.target.value)} style={{
flex: 1, border: '1px solid #e6e6ec', borderRadius: 6, padding: '6px 10px',
fontSize: '0.8125rem', background: '#fff', outline: 'none', fontFamily: 'inherit',
}} />
onLength(Number(e.target.value))} style={{
width: 64, border: '1px solid #e6e6ec', borderRadius: 6, padding: '6px 8px',
fontSize: '0.8125rem', textAlign: 'center', background: '#fff', outline: 'none', fontFamily: 'inherit',
}} />
{/* active chips + add picker */}
{keys.map((v) => (
))}
{picker && (
{ onAdd(v); setPicker(false); }} />
)}
);
}
function LabeledInput({ label, value, onChange, placeholder }) {
return (
);
}
function IconBtn({ children, danger, disabled, onClick, title }) {
return (
);
}
const primaryBtn = {
padding: '9px 20px', background: '#2a2a33', color: '#fff', border: 'none',
borderRadius: 8, fontSize: '0.8125rem', fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
};
const secondaryBtn = {
padding: '9px 20px', background: '#fff', color: '#5a5a66', border: '1px solid #e6e6ec',
borderRadius: 8, fontSize: '0.8125rem', fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
};
Object.assign(window, {
SAMPLE_PLAN, ChipPicker, DifficultyBadge, ProbBar, StageCard,
AdminV1_Refined, primaryBtn, secondaryBtn,
});