/* match-ui.jsx — shared primitives + icon set for Deman Match */
const { useState, useEffect, useRef, useMemo } = React;
const D = window.DM;
/* ---------------- icons ---------------- */
const I = {
search: ,
filter: ,
bell: ,
plus: ,
mic: ,
micOff: ,
crown: ,
arrow: ,
check: ,
x: ,
users: ,
bolt: ,
radar: ,
globe: ,
sun: ,
moon: ,
fire: ,
link: ,
spark: ,
pad: ,
chevron: ,
back: ,
clock: ,
shield: ,
trophy: ,
msg: ,
cards: ,
rows: ,
lanes:
};
function Ic({ k, w=18, sw=2, style }){
return ;
}
const Discord = ({ w=18 }) => (
);
/* ---------------- avatar ---------------- */
function Av({ name, size=40, round=false, dot, ring }){
return (
{D.initials(name)}
{dot && }
);
}
/* ---------------- rank tag ---------------- */
function RankTag({ game, rank, sm }){
const o = D.rankObj(game, rank);
return {D.rankName(game,rank)};
}
/* ---------------- game pill / glyph ---------------- */
function GameGlyph({ game, size=40, r }){
const g = D.GAMES[game];
return (
{g.short}
);
}
/* ---------------- party member slots row ----------------
Renders filled member avatars + empty "want" slots. Core reusable bit. */
function SlotRow({ party, size=38, showLane=true, en }){
const g = D.GAMES[party.game];
const filled = party.members;
const totalNeed = (party.needLanes||[]).length;
const open = Math.max(0, (g.size||5) - filled.length);
const slots = [];
filled.forEach((m,i)=> slots.push(
{showLane && m.lane &&
{D.laneName(party.game, m.lane)}}
));
(party.needLanes||[]).forEach((lane,i)=>{
const urgent = party.urgent || (totalNeed===1);
slots.push(
{showLane && {lane==='fill'?(en?'Any':'补位'):D.laneName(party.game, lane)}}
);
});
// padding empty (non-need) slots up to size for context, faint
const ghosts = open - (party.needLanes||[]).length;
for(let i=0;i
);
return {slots}
;
}
/* count of open need slots */
function needCount(party){ return (party.needLanes||[]).length; }
function teamLabel(party){ const g=D.GAMES[party.game]; return `${party.members.length}/${g.size||5}`; }
/* ---------------- "X=Y" need badge ---------------- */
function NeedBadge({ party, en }){
const g = D.GAMES[party.game];
const have = party.members.length, need = needCount(party);
const urgent = party.urgent || need===1;
return (
{have}
=
{need}
{en?`need ${need}`:`缺 ${need}`}
);
}
/* ---------------- "time ago" ---------------- */
function ago(min, en){
if(min<=0) return en?'just now':'刚刚';
if(min<60) return en?`${min}m ago`:`${min} 分钟前`;
return en?`${Math.floor(min/60)}h ago`:`${Math.floor(min/60)} 小时前`;
}
/* ---------------- vibe tag ---------------- */
function VibeTag({ vibe, en }){
const comp = vibe==='comp';
return
{comp?(en?'Ranked':'认真上分'):(en?'For fun':'娱乐局')};
}
Object.assign(window, { Ic, Discord, Av, RankTag, GameGlyph, SlotRow, NeedBadge, VibeTag, needCount, teamLabel, ago, I });