// SVG illustration set — mahjong tile compositions used as hero/card art.
const TileFace = ({ symbol, color = "#0F6E3D", small }) => (
{symbol === "1man" && (
一
萬
)}
{symbol === "9man" && (
九
萬
)}
{symbol === "chun" && (
中
)}
{symbol === "haku" && (
)}
{symbol === "hatsu" && (
發
)}
{symbol === "ton" && (
東
)}
{symbol === "nan" && (
南
)}
{symbol === "sha" && (
西
)}
{symbol === "pei" && (
北
)}
{symbol?.endsWith("pin") && (
{(() => {
const n = parseInt(symbol);
const dots = [];
const cfg = {
1: [[30,42]],
5: [[16,22],[44,22],[30,42],[16,62],[44,62]],
9: Array.from({length:9},(_,i)=>[16+(i%3)*14,22+Math.floor(i/3)*20])
}[n] || [];
cfg.forEach(([cx,cy],i)=>dots.push(
));
return dots;
})()}
)}
{symbol?.endsWith("sou") && (
{(() => {
const n = parseInt(symbol);
const items = [];
for(let i=0;i
);
}
return items;
})()}
)}
);
// Hero illustration: a sweeping arrangement of stacked tiles
const HeroTilesArt = ({ variant = "a" }) => {
if (variant === "a") {
// East-style — terminal & honor showcase
return (
);
}
if (variant === "b") {
// pinzu cascade with green flat backdrop tile shapes
return (
);
}
// c — dramatic single big tile
return (
);
};
// Background field — for news cards & pickups
const TileField = ({ palette = "green", pattern = "scatter" }) => {
const bg = palette === "green" ? "#0F6E3D"
: palette === "red" ? "#7a1424"
: palette === "gold" ? "#B8893A"
: palette === "ink" ? "#1f2937"
: palette === "navy" ? "#1e3a5f"
: palette === "cream" ? "#e8dcb8"
: "#0F6E3D";
const fg = palette === "cream" ? "#0F6E3D" : "#fff";
return (
);
};
// Icons for service tiles & quicklinks
const Icon = ({ name }) => {
const props = { fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
switch (name) {
case "trophy": return ;
case "school": return ;
case "tile": return ;
case "play": return ;
case "shop": return ;
case "calendar": return ;
case "users": return ;
case "globe": return ;
case "ranking": return ;
case "doc": return ;
case "card": return ;
case "phone": return ;
case "search": return ;
case "alert": return ;
case "arrow": return ;
case "x": return ;
case "yt": return ;
case "ig": return ;
default: return null;
}
};
Object.assign(window, { TileFace, HeroTilesArt, TileField, Icon });