// ---------- ART SYSTEM ----------
// All visuals for MarketBrawl as inline SVG React components.
// Define globals so app.jsx can use them (since Babel standalone shares scope).
// Shared gradient defs — rendered once per SVG that uses them.
function ChartGradient({ id = "mb-grad" }) {
return (
);
}
// Primary brand mark: shield containing a rising chart line.
function LogoMark({ size = 48 }) {
return (
);
}
// Full horizontal lockup: mark + wordmark. Used in the header and login hero.
function LogoFull({ size = 40 }) {
return (
MARKETBRAWL
Predict · Wager · Win
);
}
// Large decorative hero for the login screen: layered chart lines, floating
// candlesticks, and the logo mark centered on a grid.
function HeroArt() {
const candles = [
{ x: 40, y: 140, w: 10, h: 60, color: "#4ade80" },
{ x: 70, y: 120, w: 10, h: 80, color: "#f87171" },
{ x: 100, y: 100, w: 10, h: 90, color: "#4ade80" },
{ x: 130, y: 130, w: 10, h: 55, color: "#f87171" },
{ x: 250, y: 115, w: 10, h: 75, color: "#4ade80" },
{ x: 280, y: 95, w: 10, h: 95, color: "#4ade80" },
{ x: 310, y: 130, w: 10, h: 60, color: "#f87171" },
{ x: 340, y: 110, w: 10, h: 80, color: "#4ade80" },
];
return (
);
}
// Market category pictograms (24x24)
function MarketIcon({ category, size = 22 }) {
const stroke = "#60a5fa";
if (category === "commodity") {
return (
);
}
if (category === "stock_index") {
return (
);
}
if (category === "crypto") {
return (
);
}
// fallback
return (
);
}
// Direction badges — OVER (green up) / UNDER (red down)
function DirectionBadge({ direction, size = 18 }) {
const up = direction === "over";
const color = up ? "#4ade80" : "#f87171";
return (
);
}
// ---------- BOT PERSONA AVATARS ----------
// Each 48x48 tile, unique geometric identity hinting at the persona's strategy.
function PersonaFrame({ bg, stroke, children }) {
return (
);
}
const PERSONA_ART = {
// Mo Mentum — rocket trending up
momentum: (
),
// Connie Trarian — mirrored / inverted duality
contrarian: (
),
// Goldie Sacks — stack of gold bars
commodity_bull: (
),
// Bear Stearns Jr. — bear face
index_bear: (
),
// Diver Sifty — pie chart / diversification
diversifier: (
),
// YOLO McBetface — flaming dice
yolo: (
),
};
function PersonaAvatar({ persona, size }) {
const art = PERSONA_ART[persona];
if (!art) {
// Human / unknown — generic silhouette
return (
);
}
if (size) {
return React.cloneElement(art, { width: size, height: size });
}
return art;
}