/* global React */ const { useState, useEffect, useRef, useMemo } = React; /* ------------------------------------------------------------- MONGOLIE — shared components + data + icons ------------------------------------------------------------- */ // ================= ICONS (inline SVG, minimal) ================= const Icon = { menu: (p) => , close: (p) => , chev: (p) => , chevD: (p) => , arrow: (p) => , sword: (p) => , pick: (p) => , axe: (p) => , wheat: (p) => , bow: (p) => , home: (p) => , gear: (p) => , star: (p) => , trophy: (p) => , users: (p) => , map: (p) => , book: (p) => , calendar: (p) => , flame: (p) => , plus: (p) => , edit: (p) => , trash: (p) => , search: (p) => , bell: (p) => , coin: (p) => , check: (p) => , shield: (p) => , diamond:(p) => , cube: (p) => , discord:(p) => , mail: (p) => , // ── NG essentials (outils, armes, défense, ressources, tech) ── shovel: (p) => , hammer: (p) => , armor: (p) => , potion: (p) => , scroll: (p) => , food: (p) => , wood: (p) => , rocket: (p) => , missile: (p) => , // ── Theme toggle ────────────────────────────────────────── sun: (p) => , moon: (p) => , }; // ── Liste d'icônes "items NG" — utilisée par les pickers dans Admin/Economy ── // Regroupée par catégorie pour faciliter le choix. Pas une liste fourre-tout. window.ITEM_ICONS = [ // Ressources 'cube', 'diamond', 'wood', 'wheat', 'food', // Outils 'pick', 'axe', 'shovel', 'hammer', // Armes 'sword', 'bow', // Défense 'shield', 'armor', // Tech NG (fusée, missile, machine) 'gear', 'rocket', 'missile', // RP / événementiel 'potion', 'scroll', 'book', 'flame', // Méta / monnaie / récompense 'coin', 'trophy', 'star', ]; // ================= MOTIFS ================= function GankylMark({ size = 28, color = 'currentColor' }) { // Stylized Mongol "Soyombo"-inspired original mark (sun+moon+flame trio abstracted as nested chevrons) return ( ); } function MongolBorder({ height = 14, color, style }) { const c = color || 'var(--mg-gold-600)'; return ( ); } function CornerOrnament({ size = 40, color, corner = 'tl' }) { const c = color || 'var(--mg-gold-600)'; const transforms = { tl: '', tr: 'scaleX(-1)', bl: 'scaleY(-1)', br: 'scale(-1,-1)' }; return ( ); } // ================= MINECRAFT AVATAR ================= // Style simplifié pixel-art (forme standard à la Steve) peint avec les VRAIES // couleurs du skin du joueur, extraites par pixel-sampling du texture NG. // // Processus (aucune IA, aucun traitement d'image complexe) : // 1. Load `/api/skin/{pseudo}` (proxy serveur qui sert skins.nationsglory.fr) // 2. Canvas.getImageData() pour sampler 4 pixels connus du format .mcskin : // - cheveux : (10, 1) → top du head // - peau : (12, 12) → face/joue // - shirt : (24, 24) → torse front // - pantalon : (6, 24) → jambe front // 3. Redessine la forme simplifiée SVG avec ces couleurs // // Fallback : si le skin n'est pas chargeable → palette générée depuis le hash // du pseudo (style original du prototype Claude Design). // Petit helper : assombrit / éclaircit une couleur rgb() ou #hex. function shadeRgb(color, pct) { // pct : -1 (full black) à +1 (full white) let r, g, b; const m1 = /^rgb$(\d+),\s*(\d+),\s*(\d+)$$/i.exec(color || ''); if (m1) { r = +m1[1]; g = +m1[2]; b = +m1[3]; } else { const hex = String(color || '').replace('#', ''); if (hex.length === 6) { r = parseInt(hex.slice(0,2), 16); g = parseInt(hex.slice(2,4), 16); b = parseInt(hex.slice(4,6), 16); } else return color; } const fn = pct < 0 ? (c) => Math.round(c * (1 + pct)) : (c) => Math.round(c + (255 - c) * pct); const clamp = x => Math.max(0, Math.min(255, fn(x))); return `rgb(${clamp(r)},${clamp(g)},${clamp(b)})`; } function MCAvatar({ name = 'Batukhan', size = 80, seed, style3d = true, armor = null }) { const [extracted, setExtracted] = useState(null); useEffect(() => { if (!name) return; let cancelled = false; const img = new Image(); img.crossOrigin = 'anonymous'; img.onload = () => { if (cancelled) return; try { const canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext('2d', { willReadFrequently: true }); ctx.drawImage(img, 0, 0); const at = (x, y, fallback) => { try { const d = ctx.getImageData(x, y, 1, 1).data; if (d[3] < 128) return fallback; // pixel transparent return `rgb(${d[0]},${d[1]},${d[2]})`; } catch { return fallback; } }; setExtracted({ hair: at(10, 1, '#3a2b1f'), skin: at(12, 12, '#e0b79b'), shirt: at(24, 24, '#4682B4'), pants: at(6, 24, '#3a3f52'), }); } catch (e) { // CORS tainted canvas → on laisse le fallback procédural s'appliquer console.warn('[MCAvatar] skin extraction failed:', e.message); } }; img.onerror = () => { /* skin introuvable → fallback */ }; img.src = `/api/skin/${encodeURIComponent(name)}`; return () => { cancelled = true; }; }, [name]); // Couleurs : extraites du vrai skin si dispo, sinon dérivées du hash. let hair, skin, shirt, pants, accent; if (extracted) { hair = extracted.hair; skin = extracted.skin; shirt = extracted.shirt; pants = extracted.pants; accent = extracted.shirt; } else { const hash = (seed || name || 'x').split('').reduce((a, c) => a + c.charCodeAt(0), 0); const hues = [200, 28, 170, 260, 10, 120, 340, 55]; const h = hues[hash % hues.length]; skin = `oklch(0.74 0.08 ${(h + 30) % 360})`; hair = `oklch(0.28 0.06 ${(h + 220) % 360})`; shirt = `oklch(0.55 0.12 ${h})`; pants = `oklch(0.35 0.08 ${(h + 40) % 360})`; accent = `oklch(0.75 0.12 ${(h + 50) % 360})`; } const pixel = (px, py, fill, w = 1, hh = 1) => ; // Palette de l'armure équipée (si présente) const armorMid = armor?.theme || null; const armorDark = armorMid ? shadeRgb(armorMid, -0.25) : null; const armorLight = armorMid ? shadeRgb(armorMid, +0.20) : null; return ( ); } // ================= THEME TOGGLE (light/dark) ================= // Helpers exposés globalement pour que tous les composants puissent toggle // et se synchroniser via window event 'mg:theme'. function getTheme() { try { const t = JSON.parse(localStorage.getItem('mg:tweaks') || '{}'); return t.theme === 'dark' ? 'dark' : 'light'; } catch { return 'light'; } } function applyTheme(theme) { document.documentElement.setAttribute('data-theme', theme); let t = {}; try { t = JSON.parse(localStorage.getItem('mg:tweaks') || '{}') || {}; } catch {} t.theme = theme; localStorage.setItem('mg:tweaks', JSON.stringify(t)); window.dispatchEvent(new CustomEvent('mg:theme', { detail: theme })); } function useTheme() { const [theme, setTheme] = useState(getTheme); useEffect(() => { const handler = (e) => setTheme(e.detail); window.addEventListener('mg:theme', handler); return () => window.removeEventListener('mg:theme', handler); }, []); const toggle = () => applyTheme(theme === 'dark' ? 'light' : 'dark'); return [theme, toggle]; } // Bouton toggle réutilisable partout function ThemeToggle({ compact }) { const [theme, toggle] = useTheme(); const isDark = theme === 'dark'; return ( ); } // Variante "mg-side-link" (utilisée dans l'AppShell sidebar) function ThemeSideButton() { const [theme, toggle] = useTheme(); const isDark = theme === 'dark'; return ( ); } // ================= THEME / TWEAKS state ================= const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "light", "fontPairing": "syne-inter", "accentHue": 38, "motifDensity": 0.9, "radiusScale": 1.0, "goldIntensity": "balanced" }/*EDITMODE-END*/; function useTweaks() { const [tweaks, setTweaks] = useState(() => { try { const saved = JSON.parse(localStorage.getItem('mg:tweaks')); return { ...TWEAK_DEFAULTS, ...(saved || {}) }; } catch { return TWEAK_DEFAULTS; } }); useEffect(() => { localStorage.setItem('mg:tweaks', JSON.stringify(tweaks)); const root = document.documentElement; root.setAttribute('data-theme', tweaks.theme); root.style.setProperty('--motif-opacity', tweaks.motifDensity); root.style.setProperty('--radius-scale', tweaks.radiusScale); const pairings = { 'syne-inter': ["'Syne'", "'Inter'"], 'fraunces-dmsans': ["'Fraunces'", "'DM Sans'"], 'unifraktur-inter': ["'Cormorant Garamond'", "'Inter'"], }; const [disp, sans] = pairings[tweaks.fontPairing] || pairings['syne-inter']; root.style.setProperty('--font-display', `${disp}, Georgia, serif`); root.style.setProperty('--font-sans', `${sans}, ui-sans-serif, system-ui, sans-serif`); // gold intensity tuning if (tweaks.goldIntensity === 'rare') { root.style.setProperty('--accent', 'var(--mg-gold-700)'); } else if (tweaks.goldIntensity === 'bold') { root.style.setProperty('--accent', 'var(--mg-gold-500)'); } else { root.style.setProperty('--accent', 'var(--mg-gold-600)'); } }, [tweaks]); return [tweaks, setTweaks]; } // ================= ROUTER (hash-based) ================= function useRoute() { const [route, setRoute] = useState(() => (location.hash || '#/').slice(2) || ''); useEffect(() => { const onChange = () => setRoute((location.hash || '#/').slice(2) || ''); window.addEventListener('hashchange', onChange); return () => window.removeEventListener('hashchange', onChange); }, []); return [route, (r) => { location.hash = '#/' + r; }]; } function Link({ to, children, className, style, onClick }) { return {children}; } // ================= NAV ================= function TopNav({ current, user, onSignOut, onSignIn, onSwitchAccount }) { const items = [ { to: '', label: 'Accueil' }, { to: 'about', label: 'À propos' }, { to: 'gallery', label: 'Galerie' }, { to: 'rules', label: 'Règles' }, { to: 'join', label: 'Rejoindre' }, ]; const loggedInItems = [ { to: 'dashboard', label: 'Tableau de bord' }, { to: 'quests', label: 'Quêtes' }, { to: 'projects', label: 'Shop pays' }, { to: 'leaderboard', label: 'Classement' }, { to: 'profile/' + (user?.slug || 'me'), label: 'Profil' }, ]; const adminItems = [ { to: 'admin/quests', label: 'Admin · Quêtes' }, ]; // Seul un membre de Mongolie voit la nav "app". // Un user loggé mais dans un autre pays (ou aucun) reste sur la nav publique. const isMongolieMember = user && user.nation === 'Mongolie'; const navItems = isMongolieMember ? [...loggedInItems, ...(user.role === 'admin' ? adminItems : [])] : items; const isActive = (to) => current === to || (to && current.startsWith(to + '/')) || (to === '' && current === ''); return (

MONGOLIE

ᠮᠣᠩᠭᠣᠯ · NG Blue

{user ? ( isMongolieMember ? ( <>

{user.name} {user.rankLabel || (user.role === 'admin' ? '◆ Officier' : 'Membre')}

) : ( // Loggé mais pas dans Mongolie → identité + déco + switch de compte <>

{user.name} {user.nation ? 'Pays : ' + user.nation : 'Sans pays'}

) ) : ( <> Rejoindre )}

); } // ================= MEMBER SIDEBAR (dashboard / app shell) ================= function AppShell({ user, route, children, onSignOut, onSwitchAccount }) { const memberNav = [ { to: 'dashboard', label: 'Tableau de bord', icon: Icon.home }, { to: 'arene', label: 'Arène', icon: Icon.flame }, { to: 'quests', label: 'Quêtes', icon: Icon.sword }, { to: 'projects', label: 'Shop pays', icon: Icon.cube }, { to: 'wallet', label: 'Mon Togrog', icon: Icon.coin }, { to: 'bazar', label: 'Bazar', icon: Icon.diamond }, { to: 'leaderboard',label: 'Classement', icon: Icon.trophy }, { to: 'community', label: 'Communauté', icon: Icon.users }, { to: 'profile/' + user.slug, label: 'Mon profil', icon: Icon.shield }, ]; const adminNav = [ { to: 'admin/quests', label: 'Gestion quêtes', icon: Icon.edit }, { to: 'admin/projects', label: 'Gestion projets', icon: Icon.gear }, { to: 'admin/rewards', label: 'Récompenses', icon: Icon.coin }, { to: 'admin/members', label: 'Membres', icon: Icon.users }, { to: 'admin/reports', label: 'Rapports Staff', icon: Icon.book }, ]; const isActive = (to) => route === to || route.startsWith(to + '/'); return (

{route.replace(/\//g, ' › ') || 'dashboard'}

⌘K

{user.name} {user.rankLabel || (user.role === 'admin' ? '◆ Officier' : 'Membre')}

{children}

); } // ================= DATA ================= const DATA = { quests: [ { id: 'q1', title: 'Le Grand Tumulus de Diamants', cat: 'Mine', diff: 'Épique', progress: 64, xp: 420, reward: '15 diamants · 300 MG', desc: 'Extraire et livrer 100 diamants pour la construction du Hôtel Diplomatique.', deadline: '3j', participants: 8, color:'blue' }, { id: 'q2', title: 'Patrouille de la steppe Est', cat: 'PVP', diff: 'Normal', progress: 20, xp: 150, reward: '80 MG', desc: 'Défendre les frontières contre les incursions. 3 captures requises.', deadline: '1j', participants: 12, color:'red' }, { id: 'q3', title: 'Cérémonie du bois sacré', cat: 'Build', diff: 'Facile', progress: 100, xp: 80, reward: '40 MG · Badge', desc: 'Construire un pavillon traditionnel dans la zone RP.', deadline: '—', participants: 4, color:'green' }, { id: 'q4', title: 'Semis d\'automne', cat: 'Ferme', diff: 'Facile', progress: 55, xp: 90, reward: '120 MG', desc: 'Planter 5 champs de blé pour l\'entreprise agricole.', deadline: '5j', participants: 22, color:'gold' }, { id: 'q5', title: 'Chasse aux loups des steppes', cat: 'Chasse', diff: 'Normal', progress: 10, xp: 200, reward: '2 cuirs · 120 MG', desc: 'Traquer les meutes menaçant les frontières.', deadline: '2j', participants: 6, color:'red' }, { id: 'q6', title: 'Cartographie du Nord', cat: 'Explorer', diff: 'Épique', progress: 0, xp: 500, reward: 'Titre « Voyageur » · 400 MG', desc: 'Explorer et cartographier les 3 régions du Nord glacé.', deadline: '7j', participants: 2, color:'blue' }, ], projects: [ { id: 'p1', title: 'Hôtel Diplomatique · HD', lead: 'Batukhan', deadline: '12 Mai', desc: 'Construction du siège diplomatique. Pierre, verre, diamants, marbre.', needs: [ { item: 'Diamant', have: 64, need: 100, icon: 'diamond' }, { item: 'Pierre taillée', have: 1200, need: 2000, icon: 'cube' }, { item: 'Verre', have: 450, need: 800, icon: 'diamond' }, { item: 'Or', have: 30, need: 60, icon: 'coin' }, ]}, { id: 'p2', title: 'Remparts de la capitale', lead: 'Temüjin', deadline: '28 Avril', desc: 'Fortifications face aux voisins de l\'Est.', needs: [ { item: 'Obsidienne', have: 200, need: 500, icon: 'cube' }, { item: 'Pierre', have: 4200, need: 6000, icon: 'cube' }, ]}, { id: 'p3', title: 'Ferme coopérative Nord', lead: 'Sarantuya', deadline: 'Ouvert', desc: 'Entreprise agricole — revenus redistribués aux recrues.', needs: [ { item: 'Graines', have: 800, need: 1000, icon: 'cube' }, { item: 'Os (farine)', have: 210, need: 400, icon: 'cube' }, ]}, ], leaders: [ { rank: 1, name: 'Batukhan', contrib: 12840, quests: 48, role: 'Chef', badge: '◆' }, { rank: 2, name: 'Temüjin', contrib: 11220, quests: 41, role: 'Officier', badge: '◆' }, { rank: 3, name: 'Sarantuya', contrib: 9870, quests: 52, role: 'Officier', badge: '◆' }, { rank: 4, name: 'Oyuun', contrib: 7640, quests: 36, role: 'Membre', badge: '' }, { rank: 5, name: 'Ganzorig', contrib: 6920, quests: 31, role: 'Membre', badge: '' }, { rank: 6, name: 'Altantsetseg', contrib: 5610, quests: 28, role: 'Membre', badge: '' }, { rank: 7, name: 'Chinggis', contrib: 4830, quests: 22, role: 'Membre', badge: '' }, { rank: 8, name: 'Nomin', contrib: 3740, quests: 19, role: 'Recrue', badge: '' }, { rank: 9, name: 'Erdene', contrib: 3220, quests: 17, role: 'Recrue', badge: '' }, { rank:10, name: 'Tsatsral', contrib: 2410, quests: 12, role: 'Recrue', badge: '' }, ], skills: [ { key: 'mine', label: 'Mineur', level: 34, xp: 68, max: 100, icon: Icon.pick }, { key: 'wood', label: 'Bûcheron', level: 22, xp: 40, max: 100, icon: Icon.axe }, { key: 'farm', label: 'Agriculteur', level: 18, xp: 75, max: 100, icon: Icon.wheat }, { key: 'hunt', label: 'Chasseur', level: 12, xp: 22, max: 100, icon: Icon.bow }, { key: 'build',label: 'Bâtisseur', level: 28, xp: 55, max: 100, icon: Icon.home }, { key: 'eng', label: 'Ingénieur', level: 9, xp: 12, max: 100, icon: Icon.gear }, ], events: [ { date: '26 Avr', title: 'Tournoi PVP inter-pays', kind: 'PVP', icon: Icon.sword }, { date: '29 Avr', title: 'Session ONU', kind: 'Diplo', icon: Icon.shield }, { date: '03 Mai', title: 'Formation Mineur – Niv. 10', kind: 'Form.', icon: Icon.pick }, { date: '07 Mai', title: 'Build Competition · Yourtes',kind: 'Build', icon: Icon.home }, ], }; // ================= REUSABLE ================= function StatTile({ label, value, unit, accent }) { return (

{value}{unit}

{label}

); } function QuestCard({ q, compact, onOpen }) { const color = { blue:'var(--mg-blue-600)', red:'var(--mg-danger)', green:'var(--mg-success)', gold:'var(--mg-gold-600)' }[q.color] || 'var(--mg-blue-600)'; const IconCat = { Mine: Icon.pick, PVP: Icon.sword, Build: Icon.home, Ferme: Icon.wheat, Chasse: Icon.bow, Explorer: Icon.map }[q.cat] || Icon.star; return (

{q.cat} {q.diff}

+{q.xp} XP

{q.title}

{!compact &&

{q.desc}

}

{q.participants} participants Échéance {q.deadline} {q.reward}

); } function ProjectCard({ p, onOpen }) { const total = p.needs.reduce((a,n)=>a+n.need,0); const have = p.needs.reduce((a,n)=>a+n.have,0); const pct = Math.round(have/total*100); return (

Projet pays · Échéance {p.deadline}

{p.title}

{pct}%

{p.desc}

{p.needs.map((n, i) => { const npct = Math.round(n.have/n.need*100); const IconN = Icon[n.icon] || Icon.cube; return (

{n.item} {n.have} / {n.need}

); })}

); } // ================= TWEAKS PANEL ================= function TweaksPanel({ tweaks, setTweaks, open, onClose }) { if (!open) return null; const set = (k, v) => setTweaks(t => ({ ...t, [k]: v })); return (

Tweaks

Thème

{['light','dark'].map(v => ( ))}

Typographie

Intensité or

{[['rare','Rare'],['balanced','Équilibré'],['bold','Généreux']].map(([v,l]) => ( ))}

Densité motifs mongols · {Math.round(tweaks.motifDensity*100)}% set('motifDensity', parseFloat(e.target.value))} className="mg-tw-range"/>

Arrondis · {tweaks.radiusScale.toFixed(1)}× set('radiusScale', parseFloat(e.target.value))} className="mg-tw-range"/>

); } // Export Object.assign(window, { Icon, GankylMark, MongolBorder, CornerOrnament, MCAvatar, useTweaks, useRoute, Link, TopNav, AppShell, DATA, StatTile, QuestCard, ProjectCard, TweaksPanel, TWEAK_DEFAULTS, useTheme, applyTheme, getTheme, ThemeToggle, ThemeSideButton });