// Pretence Games — DESKTOP-FIRST hi-fi prototype // 3 theme presets (Pretence / Telenet / SCK CEN), inside browser window (SuccessFactors LMS context) const { useState, useEffect, useMemo } = React; /* ──────────── THEME PRESETS ──────────── 4-token white-label system: --dark · --bright · --soft · --cream + supporting --bright-2 (hover) and --pager (faded bright). */ const THEMES = { pretence: { label: "Pretence Games", "--dark": "#2A0066", "--bright": "#B934E6", "--bright-2": "#9C25C4", "--soft": "#F0E5FA", "--cream": "#F6F1EC", "--pager": "#E3C8F1", }, telenet: { label: "Telenet", "--dark": "#3A1F1F", "--bright": "#F5C42B", "--bright-2": "#D6A823", "--soft": "#FEF6D8", "--cream": "#FFF9EE", "--pager": "#E0A88D", }, sckcen: { label: "SCK CEN", "--dark": "#3F2073", /* aubergine — from sckcen.be footer */ "--bright": "#C745CC", /* violet-magenta — search/lang dots */ "--bright-2": "#A734AE", "--soft": "#EBE0F4", "--cream": "#F4EEF8", "--pager": "#C7B0DA", }, }; /* ──────────── CONTENT PER SKIN ──────────── */ const CONTENT = { pretence: { appName: "Hupsakee Game", moduleName: "Middelkerke · stadsspel", url: "pretencify.be/hupsakee/middelkerke", welcomeTitle: "Welkom bij de Hupsakee Game!", welcomeBody: <>Dit spel leidt je rond in de straffe gemeente Middelkerke langs 5 belangrijke locaties. Voltooi alle opdrachten en kom meer te weten over de wondere geschiedenis van Middelkerke., eyebrow: "Stadsspel · 5 locaties", overviewTitle: "Vijf locaties, één spel.", modules: [ { title: "Zoek de code in het stadhuis", meta: "Locatie 1 · puzzel · ± 5 min" }, { title: "Tijdlijn aan het strand", meta: "Locatie 2 · video + vraag · ± 4 min" }, { title: "De legende van het Casino", meta: "Locatie 3 · verhaal · ± 3 min" }, { title: "Naam de bekende inwoners", meta: "Locatie 4 · match-spel · ± 5 min" }, { title: "Eindopdracht aan de pier", meta: "Locatie 5 · finale · ± 6 min" }, ], videoTitle: "Introfilm", videoBody: "Bekijk eerst het instructiefilmpje en ontdek wie je gaat gidsen.", quizQ: "Wat was Middelkerke ooit in oorsprong?", quizOptions: ["Een vissersdorp", "Een kuuroord", "Een militaire basis", "Een havenstad"], quizCorrect: 0, quizExplain: "Middelkerke begon als kleine vissersgemeenschap voordat het in de 19de eeuw uitgroeide tot kuuroord.", rewardTitle: "Geweldig!", rewardSub: "Locatie 1 voltooid. Je gids wijst je naar de volgende plek op de kaart.", rewardScore: 36, rewardDelta: 9, modalH: "Hoe werkt deze game?", modalBody: "Vijf locaties, vijf opdrachten. Elke locatie heeft een korte uitleg, een opdracht en een belonging. Tussen de locaties krijg je tips van je gids.", }, telenet: { appName: "Telenet Onboarding", moduleName: "Welcome to the team", url: "performance.successfactors.eu/learning/telenet/onboarding", welcomeTitle: "Welkom bij de Telenet Game!", welcomeBody: <>Dit spel leidt je doorheen je eerste weken bij Telenet langs 5 belangrijke ankerpunten. Voltooi alle opdrachten en ontdek meteen wie wat doet binnen het bedrijf., eyebrow: "Onboarding · 5 modules", overviewTitle: "Vijf modules, één team.", modules: [ { title: "Wie is Telenet?", meta: "Module 1 · video + quiz · ± 4 min" }, { title: "Match de tools", meta: "Module 2 · match-spel · ± 5 min" }, { title: "Klantcase oplossen", meta: "Module 3 · scenario · ± 6 min" }, { title: "Teamspirit-poll", meta: "Module 4 · anoniem · ± 3 min" }, { title: "Finale: ken jij Telenet?", meta: "Module 5 · finale · ± 5 min" }, ], videoTitle: "Introfilm", videoBody: "Bekijk eerst het instructiefilmpje en maak kennis met je buddy.", quizQ: "In welk jaar werd Telenet opgericht?", quizOptions: ["1985", "1996", "2002", "2008"], quizCorrect: 1, quizExplain: "Telenet werd opgericht in 1996 als spin-off van de Vlaamse kabeldistributie.", rewardTitle: "Geweldig!", rewardSub: "Module 1 voltooid. Je buddy stuurt je nu de volgende opdracht door.", rewardScore: 36, rewardDelta: 9, modalH: "Hoe werkt deze onboarding?", modalBody: "Vijf korte modules. Elke module bevat een filmpje, één vraag en een korte oefening. Je voortgang stroomt door naar HR.", }, sckcen: { appName: "SCK CEN Academy", moduleName: "AI-geletterdheid · Module 1", url: "performance.successfactors.eu/learning/sckcen/ai-geletterdheid", welcomeTitle: "Welkom bij de AI-module van SCK CEN.", welcomeBody: <>Vijf korte modules over AI op de werkvloer. Wat het is, wat mag, welke tool waarvoor, en wie je verder helpt. Onder een kwartier ben je rond., eyebrow: "SCK CEN Academy · AI Geletterdheid", overviewTitle: "Vijf modules, één pad.", modules: [ { title: "Wat is AI?", meta: "Module 1 · 1:50 · video + vraag" }, { title: "Hoe sta jij erin?", meta: "Module 2 · 1:30 · anonieme rondvraag" }, { title: "Welke info mag erin?", meta: "Module 3 · 2:00 · video + vraag" }, { title: "Welke tool wanneer?", meta: "Module 4 · 1:50 · video + vraag" }, { title: "Wie helpt jou verder?", meta: "Module 5 · 1:40 · video + vraag" }, ], videoTitle: "Wat is AI?", videoBody: "Bekijk de korte uitleg over hoe taalmodellen werken en waarom ze soms hallucineren.", quizQ: "Een collega vraagt aan ChatGPT om een interne SCK CEN-procedure samen te vatten. Wat doe je?", quizOptions: [ "Plak gewoon de procedure — het is enkel een samenvatting.", "Gebruik CoPilot — die blijft binnen de SCK-omgeving.", "Vraag eerst toestemming aan je manager.", "Anonimiseer eerst alle namen en projecten.", ], quizCorrect: 1, quizExplain: "Zodra er SCK-info in je vraag zit, gebruik je CoPilot. Die blijft binnen de SCK-omgeving en valt onder onze ISO-afspraken.", rewardTitle: "Goed gedaan.", rewardSub: "Eerste Spark verdiend. Module 1 voltooid — door naar Hoe sta jij erin?", rewardScore: 1, rewardDelta: 1, modalH: "Hoe werkt deze module?", modalBody: "Je doorloopt vijf korte modules. Elke module heeft één filmpje en één vraag. Je antwoorden bepalen mee het AI-beleid van SCK CEN, en je Sparks stromen door naar SuccessFactors.", }, }; const TIP_ITEMS = { pretence: [ { icon: "map", title: "Bekijk de kaart", desc: "Zie waar je heen moet en welke locaties je al deed." }, { icon: "rank", title: "Vergelijk je score met andere deelnemers", desc: "Ranking-tab toont hoe jouw team scoort tegen de rest." }, { icon: "tip", title: "Vraag om een tip", desc: "Vast aan een opdracht? Een tip kost punten maar zet je weer op weg." }, { icon: "book", title: "Leer de geschiedenis", desc: "Naast elke locatie staat een korte achtergrond — handig voor de quiz." }, ], telenet: [ { icon: "map", title: "Bekijk het overzicht", desc: "Zie welke modules je teamgenoten al hebben gedaan." }, { icon: "rank", title: "Vergelijk je score met andere teams", desc: "Live leaderboard tijdens het event." }, { icon: "tip", title: "Vraag om een hint", desc: "Vast aan een vraag? Een hint kost punten maar helpt je verder." }, { icon: "book", title: "Leer Telenet kennen", desc: "Naast elke module staat een korte intro — handig voor de finale." }, ], sckcen: [ { icon: "map", title: "Bekijk je leerpad", desc: "Vijf korte modules. Je voortgang bewaart automatisch in SuccessFactors." }, { icon: "rank", title: "Verzamel Sparks", desc: "Elk juist antwoord levert een Spark op. Je manager ziet ze terug in je rapport." }, { icon: "tip", title: "Vraag om een toelichting", desc: "Een korte uitleg na elke vraag — geen goed of fout in de rondvraag." }, ], }; /* ──────────── PIXEL MASCOT ──────────── */ const MASCOT_CELLS = [ [3,0], [2,1],[3,1],[4,1],[0,1],[7,1], [1,2],[2,2],[4,2],[5,2], [0,3],[1,3],[6,3],[7,3], [0,4],[1,4],[6,4],[7,4], [1,5],[2,5],[4,5],[5,5], [2,6],[3,6],[4,6],[0,6],[7,6], [3,7], ]; function Mascot({ size = 120 }) { const grid = 8; const cell = size / grid; return ( ); } /* ──────────── ICONS ──────────── */ const I = { flag: , arrowUp: , arrowLeft: , arrowRight: , check: , play: , info: , infoBig: , x: , chev: , // tip icons iMap: , iRank: , iTip: , iBook: , }; const TIP_ICONS = { map: I.iMap, rank: I.iRank, tip: I.iTip, book: I.iBook }; /* ──────────── TOP BAR ──────────── */ function TopBar({ content, progress = 0, score = null, scoreDelta = 0, flash = false }) { return (
{content.appName}
{content.moduleName}
{flash && progress > 0 && (
)}
{I.flag}
{score !== null && (
{flash && scoreDelta > 0 && {I.arrowUp}} {score}
)}
JD J. Dubois
); } /* ──────────── SCREENS ──────────── */ function ScreenWelkom({ content, onNext }) { return ( <>

{content.welcomeTitle}

{content.welcomeBody}

1 / 3
SuccessFactors-module · ~ 15 min
); } function ScreenTips({ content, tips, onNext, onBack }) { return ( <>
Ontdek hier alle knoppen in het spel!
{tips.map((t, i) => (
{TIP_ICONS[t.icon]}
{t.title}
{t.desc}
))}
); } function ScreenOverview({ content, modules, doneCount, onPick, onNext }) { return ( <>
{content.eyebrow}

{content.overviewTitle}

{doneCount}/{modules.length}
{modules.map((m, i) => { const status = i < doneCount ? "done" : i === doneCount ? "active" : "todo"; return (
onPick(i)}>
{i + 1}
{m.title}
{m.meta}
{I.chev}
); })}
{doneCount} van {modules.length} voltooid
); } function ScreenVideo({ content, onNext, onBack }) { const [played, setPlayed] = useState(false); return ( <>
setPlayed(true)}>
{I.play}

{content.videoTitle} {I.info}

{content.videoBody}

); } function ScreenQuiz({ content, picked, onPick, onNext, onBack }) { const answered = picked != null; const isCorrect = picked === content.quizCorrect; return ( <>
{content.quizQ} {I.info}
{content.quizOptions.map((opt, i) => { let state = ""; if (answered) { if (i === content.quizCorrect) state = "is-correct"; else if (i === picked) state = "is-wrong"; else state = "is-dim"; } return ( ); })}
{answered && (
{isCorrect ? "Juist." : "Niet helemaal."} {content.quizExplain}
)}
); } function ScreenReward({ content, onNext, onBack }) { const sparks = useMemo(() => Array.from({ length: 10 }, (_, i) => ({ dx: (Math.random() - 0.5) * 320, dy: -80 - Math.random() * 120, delay: i * 0.1, })), []); return ( <>
{I.check}

{content.rewardTitle}

{content.rewardSub}

+{content.rewardDelta} {content.rewardDelta === 1 ? "Spark verdiend" : "punten"} · ⚡
{sparks.map((s, i) => (
))}
); } function ScreenModal({ content, onClose }) { return ( <>
{I.infoBig}
{content.modalH}

{content.modalBody}

); } /* ──────────── APP ──────────── */ const SCREENS = ["welkom", "tips", "overview", "video", "quiz", "reward", "modal"]; const SCREEN_LABELS = { welkom: "Welkom", tips: "Onboarding tips", overview: "Module-overzicht", video: "Introfilm", quiz: "Quiz", reward: "Reward", modal: "Info-modal", }; function App() { const [theme, setTheme] = useState("sckcen"); const [screen, setScreen] = useState("welkom"); const [picked, setPicked] = useState(null); // apply theme tokens useEffect(() => { const root = document.documentElement; const tokens = THEMES[theme]; Object.entries(tokens).forEach(([k, v]) => { if (k.startsWith("--")) root.style.setProperty(k, v); }); root.dataset.theme = theme; }, [theme]); const content = CONTENT[theme]; const tips = TIP_ITEMS[theme]; const progress = { welkom: 0, tips: 0, overview: 6, video: 18, quiz: 28, reward: 42, modal: 6 }[screen]; const showScore = ["overview", "video", "quiz", "reward"].includes(screen); const score = showScore ? (screen === "reward" ? content.rewardScore : Math.max(0, content.rewardScore - content.rewardDelta)) : null; const goNext = () => { const order = ["welkom","tips","overview","video","quiz","reward"]; const idx = order.indexOf(screen); if (idx >= 0 && idx < order.length - 1) setScreen(order[idx + 1]); else if (screen === "modal") setScreen("welkom"); }; const goBack = () => { const order = ["welkom","tips","overview","video","quiz","reward"]; const idx = order.indexOf(screen); if (idx > 0) setScreen(order[idx - 1]); }; const renderScreen = () => { switch (screen) { case "welkom": return ; case "tips": return ; case "overview": return setScreen("video")} onNext={() => setScreen("video")}/>; case "video": return { setPicked(null); setScreen("quiz"); }} onBack={goBack}/>; case "quiz": return setScreen("reward")} onBack={goBack}/>; case "reward": return setScreen("overview")} onBack={goBack}/>; case "modal": return setScreen("welkom")}/>; default: return null; } }; const appClass = "desktop-app" + (screen === "reward" ? " reward-bg" : "") + (screen === "modal" ? " modal-bg" : ""); return (
{renderScreen()}
); } ReactDOM.createRoot(document.getElementById("root")).render();