// cozy-shapes.jsx — Decorative SVG primitives for the cozy-rift theme. // // All shapes are ORIGINAL designs (not derived from any branded IP): // - HexFrame : generic hexagonal clip used for avatars / colour swatches. // - PawMascot : hooded summoner emblem (front-facing silhouette w/ glowing eyes). // - PawPrint : three-slash claw mark sigil. // - CrystalSparkle: faceted 4-point gem star. // - LaurelCrest : sword-and-shield "owned by" crest. // - WyrmSilhouette: fanged, winged dragon, decorative only. // - RuneGlyph : carved-stone angular runes. // - RoleSilhouette: stylised fantasy archetypes (Vanguard/Stalker/Mage/Marksman/Warden). // // Naming kept from the previous "cozy critter" pass for back-compat with screens // that already import window.PawMascot / window.PawPrint, but the artwork is now // a more mature/RPG aesthetic. const hexClip = 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)'; // ----------------------------------------------------------------------------- // HexFrame — geometric hex container for avatars, swatches, lobby badges // ----------------------------------------------------------------------------- function HexFrame({ size = 56, color = '#F7DFA0', borderColor = '#C4845A', borderWidth = 2.5, children, glow = false, style = {} }) { return (
{/* outer border hex */}
{/* inner fill hex */}
{/* content */}
{children}
); } // ----------------------------------------------------------------------------- // PawMascot — hooded summoner emblem (front-on silhouette, glowing crystal eyes) // Original design; reads as a mysterious RPG-guild avatar. // ----------------------------------------------------------------------------- function PawMascot({ size = 32, color = '#C4845A', accent = '#F7DFA0', gem = '#C5B4E3', style = {} }) { return ( {/* cloak shoulders */} {/* hood outer */} {/* hood point */} {/* face shadow */} {/* hood inner rim shadow */} {/* glowing crystal eyes */} {/* forehead gem */} {/* clasp at neck */} ); } // ----------------------------------------------------------------------------- // PawPrint — three-slash claw mark sigil (was: cute paw print) // ----------------------------------------------------------------------------- function PawPrint({ size = 18, color = '#C4845A', style = {} }) { return ( ); } // ----------------------------------------------------------------------------- // CrystalSparkle — 4-point gem with facet highlight // ----------------------------------------------------------------------------- function CrystalSparkle({ size = 14, color = '#C4845A', style = {} }) { return ( {/* inner facet */} ); } // ----------------------------------------------------------------------------- // LaurelCrest — sword-and-shield crest (was: laurel/star). // Keeps the same export name; reads more knightly / RPG-guild. // ----------------------------------------------------------------------------- function LaurelCrest({ size = 22, color = '#7CBF8E', style = {} }) { return ( {/* shield silhouette */} {/* shield highlight */} {/* sword blade */} {/* sword point */} {/* crossguard */} {/* pommel */} ); } // ----------------------------------------------------------------------------- // WyrmSilhouette — fanged winged dragon, decorative background only // ----------------------------------------------------------------------------- function WyrmSilhouette({ size = 220, color = '#C4845A', opacity = 0.08, style = {} }) { return ( {/* body / curl */} {/* large wing */} {/* back spines */} {/* head: pointed jaw + horn */} {/* fangs */} {/* eye */} {/* tail */} ); } // ----------------------------------------------------------------------------- // RuneGlyph — angular carved-stone runes (4 variants) // ----------------------------------------------------------------------------- function RuneGlyph({ variant = 0, size = 24, color = '#C4845A', style = {} }) { const paths = [ // 0: anchored trinity — triangle with anchor stem , // 1: zigzag bolt rune (lightning sigil) , // 2: framed diamond — gem rune , // 3: forked rune (algiz-style) , ]; return ( {paths[variant % paths.length]} ); } // ----------------------------------------------------------------------------- // RoleSilhouette — stylised fantasy archetype emblems (refined, more game-art) // ----------------------------------------------------------------------------- function RoleSilhouette({ archetype, size = 28, color = '#4A3728', style = {} }) { const s = { width: size, height: size, display: 'inline-block', flexShrink: 0, ...style }; switch (archetype) { case 'vanguard': // Plated knight w/ horned helm = TOP return ( {/* horned helm */} {/* horns */} {/* visor slit */} {/* breastplate */} {/* center crest */} ); case 'stalker': // Hooded ranger w/ blades = JUNGLE return ( {/* hood */} {/* face shadow */} {/* glowing eyes */} {/* body */} {/* crossed daggers */} ); case 'mage': // Robed mage with staff + sigil = MID return ( {/* pointed hat */} {/* hat band */} {/* hat star */} {/* robed body */} {/* robe collar */} {/* staff */} ); case 'marksman': // Archer drawing a bow = ADC return ( {/* head w/ hair tie */} {/* body */} {/* drawn bow */} {/* arrow */} {/* fletching */} ); case 'warden': // Caped warden with lantern + glaive = SUPPORT return ( {/* cape */} {/* head + circlet */} {/* body */} {/* lantern hanging */} ); default: return null; } } const ARCHETYPE_BY_POSITION = { TOP: 'vanguard', JUNGLE: 'stalker', MID: 'mage', ADC: 'marksman', SUPPORT: 'warden', }; Object.assign(window, { HexFrame, PawMascot, PawPrint, CrystalSparkle, LaurelCrest, WyrmSilhouette, RuneGlyph, RoleSilhouette, ARCHETYPE_BY_POSITION, hexClip, });