// Pixel-art game icons. Each is a small inline SVG using rect "pixels" on a 16x16 grid.
// Exported globally as window.GameIcon({id, size}).

const GAME_ICON_DEFS = {
  // Each def is an array of [x, y, w, h, color]
  water: [
    // cup outline + water level
    [3,2,10,1,'#cfd8dc'],[3,3,1,11,'#cfd8dc'],[12,3,1,11,'#cfd8dc'],
    [4,14,9,1,'#cfd8dc'],
    [4,7,8,7,'#3aa0ff'],[4,6,8,1,'#67b9ff'],
    [5,4,2,1,'#ffffff66'],
  ],
  taste: [
    // spoon with blindfold
    [6,2,4,8,'#cfd8dc'],[7,3,2,6,'#9aa3a8'],
    [4,10,8,1,'#cfd8dc'],[7,11,2,4,'#cfd8dc'],
    // blindfold band
    [2,12,12,2,'#e85d2f'],[2,12,12,1,'#ff7a4a'],
  ],
  pict: [
    // pencil + speech tail
    [10,2,3,1,'#ffd24a'],[9,3,4,1,'#ffd24a'],
    [3,9,8,1,'#ffd24a'],[4,10,8,1,'#e0a82a'],
    [2,10,1,1,'#cfd8dc'],[3,11,1,1,'#cfd8dc'],
    [11,4,2,4,'#ffd24a'],
    [2,2,5,4,'#ffffff'],[3,3,3,1,'#000'],[3,4,3,1,'#000'],
  ],
  kadima: [
    // paddle + ball
    [4,3,5,1,'#c9772a'],[3,4,7,1,'#c9772a'],[3,5,7,1,'#a85c14'],
    [3,6,7,1,'#c9772a'],[4,7,5,1,'#c9772a'],
    [6,8,1,7,'#8b5a2b'],[5,14,3,1,'#8b5a2b'],
    [11,10,2,2,'#ffd24a'],
  ],
  balloon: [
    // balloon + string knot
    [5,2,6,1,'#ff5e8a'],[4,3,8,1,'#ff5e8a'],[3,4,10,4,'#ff5e8a'],
    [4,8,8,1,'#ff5e8a'],[5,9,6,1,'#ff5e8a'],[7,10,2,1,'#ff5e8a'],
    [7,4,2,2,'#ffffff66'],
    [7,11,2,1,'#ffd24a'],[7,12,2,3,'#cfd8dc'],
  ],
  cotton: [
    // plate with cotton balls
    [2,11,12,1,'#cfd8dc'],[1,12,14,2,'#9aa3a8'],
    [4,8,2,2,'#ffffff'],[7,7,2,2,'#ffffff'],[10,8,2,2,'#ffffff'],
    [5,9,2,2,'#ffffff'],[8,9,2,2,'#ffffff'],
  ],
  leg: [
    // crossed legs
    [3,3,2,8,'#3ec46a'],[5,11,3,1,'#3ec46a'],
    [11,3,2,8,'#e85d2f'],[8,11,3,1,'#e85d2f'],
    [4,12,8,2,'#cfd8dc'],
  ],
  rps: [
    // three pixel hands: rock fist, paper, scissors
    [2,3,4,4,'#f5c518'],[1,5,1,2,'#f5c518'],[6,4,1,2,'#f5c518'],
    [10,2,4,5,'#3aa0ff'],[9,3,1,3,'#3aa0ff'],[14,3,1,3,'#3aa0ff'],
    [4,10,2,5,'#3ec46a'],[5,9,1,1,'#3ec46a'],
    [10,10,2,5,'#3ec46a'],[10,9,1,1,'#3ec46a'],
    [6,12,4,1,'#cfd8dc'],
  ],
  pyramid: [
    // 3-2-1 pyramid of squares
    [3,11,2,2,'#ff7a2a'],[6,11,2,2,'#3ec46a'],[9,11,2,2,'#3aa0ff'],[12,11,2,2,'#f5c518'],
    [5,8,2,2,'#3ec46a'],[8,8,2,2,'#3aa0ff'],[11,8,2,2,'#ff7a2a'],
    [7,5,2,2,'#f5c518'],[10,5,2,2,'#ff7a2a'],
    [9,2,2,2,'#3ec46a'],
  ],
  lol: [
    // smiley with big mouth
    [4,1,8,1,'#ffd24a'],[3,2,10,1,'#ffd24a'],[2,3,12,10,'#ffd24a'],
    [3,13,10,1,'#ffd24a'],[4,14,8,1,'#ffd24a'],
    // eyes
    [5,5,2,2,'#1a1310'],[9,5,2,2,'#1a1310'],
    // mouth
    [4,9,8,3,'#1a1310'],[5,12,6,1,'#1a1310'],
    [6,10,4,2,'#ff6e6e'],
  ],
  dance: [
    // music notes + speaker
    [2,4,4,8,'#cfd8dc'],[6,2,2,12,'#cfd8dc'],[8,4,3,8,'#cfd8dc'],
    [11,1,1,9,'#ffd24a'],[12,1,2,1,'#ffd24a'],
    [10,8,1,2,'#ffd24a'],[9,9,1,1,'#ffd24a'],
  ],
};

function GameIcon({ id, size = 56 }) {
  const def = GAME_ICON_DEFS[id] || [];
  return (
    <svg viewBox="0 0 16 16" width={size} height={size} shapeRendering="crispEdges" style={{ imageRendering: 'pixelated' }}>
      {def.map(([x, y, w, h, c], i) => (
        <rect key={i} x={x} y={y} width={w} height={h} fill={c} />
      ))}
    </svg>
  );
}

window.GameIcon = GameIcon;