Onan Memory Game<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&display=swap\" rel=\"preload\" as=\"style\" onload=\"this.rel='stylesheet'\" \/>\r\n <meta name=\"description\" content=\"Superveilig, gratis en volledig client-side memoryspel van Onan Coffee & Tea.\" \/>\r\n <style>\r\n :root{ --onan-black:#000; --onan-white:#fff; --onan-turquoise:#00d1b2; --radius:14px; --shadow:0 8px 24px rgba(0,0,0,.12); }\r\n *{ box-sizing:border-box }\r\n html,body{ margin:0; padding:0; background:#f7f7f7; color:#111; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif }\r\n .wrap{ max-width:720px; margin:32px auto; padding:16px }\r\n .top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px }\r\n h1{ margin:0; font: 700 34px\/1 'Bebas Neue', sans-serif; letter-spacing:.5px }\r\n .stats{ text-align:right; font-size:14px; line-height:1.35 }\r\n .stats strong{ font-weight:700 }\r\n\r\n .board{ display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); }\r\n @media (min-width:560px){ .board{ gap:14px } }\r\n\r\n .card{ position:relative; aspect-ratio:1\/1; border:none; cursor:pointer; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#111; padding:0; outline:none; transform:translateZ(0) }\r\n .card:focus-visible{ box-shadow:0 0 0 3px var(--onan-turquoise), var(--shadow) }\r\n\r\n .card__front, .card__back{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center }\r\n .card__front{ background:#000 }\r\n .card__front img{ width:100%; height:100%; object-fit:cover }\r\n\r\n \/* Back fully covered by logo *\/\r\n .card__back{ background:#000; }\r\n .back__logo { width:100%; height:100%; object-fit:cover; }\r\n\r\n .card__inner{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.8,.2,1) }\r\n .card.flipped .card__inner, .card.matched .card__inner{ transform:rotateY(180deg) }\r\n .face{ position:absolute; inset:0; backface-visibility:hidden }\r\n .face.front{ transform:rotateY(180deg) }\r\n\r\n @media (prefers-reduced-motion: reduce){ .card__inner{ transition:none } }\r\n\r\n .controls{ display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap }\r\n .btn{ border:1px solid var(--onan-black); background:var(--onan-white); border-radius:999px; padding:8px 14px; cursor:pointer; box-shadow:var(--shadow) }\r\n .select{ border:1px solid #bbb; border-radius:999px; padding:6px 12px; background:#fff }\r\n .note{ font-size:12px; opacity:.8; margin-top:8px }\r\n\r\n .footer{ margin-top:16px; font-size:12px; opacity:.7 }\r\n\r\n \/* \ud83c\udf89 Win effects *\/\r\n .confetti { position: fixed; top: -12px; width: 8px; height: 14px; opacity: .95; will-change: transform; animation: fall linear forwards; z-index: 1000; }\r\n @keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }\r\n\r\n .overlay { position: fixed; inset:0; background: rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index: 999; }\r\n .overlay.show { display:flex; }\r\n .overlay .msg { background:#fff; padding:24px 28px; border-radius:16px; text-align:center; box-shadow: var(--shadow); }\r\n .overlay .msg h2 { font-family:'Bebas Neue',sans-serif; font-size:28px; margin:0 0 6px; }\r\n .overlay .msg p { margin:0 0 12px; }\r\n .overlay .msg button { padding:10px 16px; border-radius:999px; border:1px solid #000; background:var(--onan-turquoise); color:#fff; cursor:pointer }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"wrap\" aria-labelledby=\"title\">\r\n <header class=\"top\">\r\n <h1 id=\"title\">Onan Memory Game<\/h1>\r\n <div class=\"stats\" aria-live=\"polite\">\r\n <div>Beurten: <strong id=\"moves\">0<\/strong><\/div>\r\n <div>Sets: <strong id=\"matches\">0<\/strong>\/<span id=\"target\">5<\/span><\/div>\r\n <div>Beste: <strong id=\"best\">\u2014<\/strong><\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <section>\r\n <div id=\"board\" class=\"board\" role=\"grid\" aria-label=\"Memorykaarten\"><\/div>\r\n <div class=\"controls\">\r\n <button id=\"restart\" class=\"btn\" type=\"button\">Opnieuw<\/button>\r\n <label for=\"pairs\">Aantal paren:<\/label>\r\n <select id=\"pairs\" class=\"select\" aria-label=\"Aantal paren\">\r\n <option value=\"2\">2<\/option>\r\n <option value=\"3\">3<\/option>\r\n <option value=\"4\">4<\/option>\r\n <option value=\"5\" selected>5<\/option>\r\n <\/select>\r\n <\/div>\r\n <p class=\"note\">Tip: volledig client-side, geen data-tracking. Met toetsenbord te spelen (Tab + Enter\/Space).<\/p>\r\n <\/section>\r\n\r\n <p class=\"footer\">Brand-styling: zwart\/wit\/turquoise \u2022 afgeronde hoeken \u2022 schaduw. Afbeeldingen vullen kaarten volledig (object-fit: cover).<\/p>\r\n <\/main>\r\n\r\n \r\n <div id=\"winOverlay\" class=\"overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"winTitle\">\r\n <div class=\"msg\">\r\n <h2 id=\"winTitle\">You are amazing! \u2728<\/h2>\r\n <p>Enjoy your drink \u2615\ud83c\udf75<\/p>\r\n <button id=\"playAgainBtn\" type=\"button\">Play again<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const IMAGE_URLS = [\r\n \"https:\/\/onan.be\/app\/uploads\/2024\/09\/20240704_123310-scaled.jpg\",\r\n \"https:\/\/onan.be\/app\/uploads\/2024\/09\/20240704_123243-scaled.jpg\",\r\n \"https:\/\/onan.be\/app\/uploads\/2025\/02\/Foto-13-07-2024-14-32-16-scaled.jpg\",\r\n \"https:\/\/onan.be\/app\/uploads\/2025\/02\/Foto-13-07-2024-15-07-11-scaled.jpg\",\r\n \"https:\/\/onan.be\/app\/uploads\/2024\/05\/My-Lights-Lines-Photography_ONAN-165_websize-e1717076847157.jpg\"\r\n ];\r\n\r\n const LOGO_URL = \"https:\/\/onan.be\/app\/uploads\/2025\/02\/a58f0f47.jpeg\";\r\n\r\n IMAGE_URLS.forEach(src=>{ const i=new Image(); i.src=src; });\r\n\r\n const boardEl = document.getElementById('board');\r\n const movesEl = document.getElementById('moves');\r\n const matchesEl = document.getElementById('matches');\r\n const targetEl = document.getElementById('target');\r\n const bestEl = document.getElementById('best');\r\n const pairsSelect = document.getElementById('pairs');\r\n const restartBtn = document.getElementById('restart');\r\n\r\n const overlayEl = document.getElementById('winOverlay');\r\n const playAgainBtn = document.getElementById('playAgainBtn');\r\n\r\n let size = Number(pairsSelect.value);\r\n let deck = [];\r\n let first = null, second = null;\r\n let disabled = false;\r\n let moves = 0, matches = 0;\r\n let best = Number(localStorage.getItem('onan-memory-best-img')) || null;\r\n\r\n function shuffle(a){ const x=a.slice(); for(let i=x.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); [x[i],x[j]]=[x[j],x[i]]; } return x; }\r\n\r\n function init(){\r\n removeConfetti();\r\n overlayEl.classList.remove('show');\r\n\r\n const pool = IMAGE_URLS.slice(0, size);\r\n const sym = shuffle([...pool, ...pool]);\r\n deck = sym.map((src, idx)=>({ id: idx, src, flipped: false, matched: false }));\r\n first = second = null; disabled = false; moves = 0; matches = 0;\r\n targetEl.textContent = String(size);\r\n render();\r\n }\r\n\r\n function render(){\r\n const cols = Math.min(4, Math.ceil((size*2)\/2));\r\n boardEl.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;\r\n\r\n boardEl.innerHTML = deck.map(c => `\r\n <button class=\"card ${c.flipped||c.matched? 'flipped':''} ${c.matched?'matched':''}\" data-id=\"${c.id}\" aria-label=\"kaart\" role=\"gridcell\">\r\n <div class=\"card__inner\">\r\n <div class=\"face front card__front\"><img decoding=\"async\" src=\"${c.src}\" alt=\"Onan afbeelding\"><\/div>\r\n <div class=\"face back card__back\"><img decoding=\"async\" src=\"${LOGO_URL}\" alt=\"Onan logo\" class=\"back__logo\"><\/div>\r\n <\/div>\r\n <\/button>\r\n `).join('');\r\n\r\n movesEl.textContent = String(moves);\r\n matchesEl.textContent = String(matches);\r\n bestEl.textContent = best ? String(best) : '\u2014';\r\n\r\n boardEl.querySelectorAll('.card').forEach(el=>{\r\n el.addEventListener('click', ()=> flip(Number(el.dataset.id)));\r\n el.addEventListener('keydown', (e)=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); flip(Number(el.dataset.id)); } });\r\n });\r\n\r\n pairsSelect.addEventListener('change', (e)=>{ size = Number(e.target.value); init(); });\r\n restartBtn.addEventListener('click', init);\r\n playAgainBtn.addEventListener('click', init);\r\n }\r\n\r\n function flip(id){\r\n if(disabled) return;\r\n const card = deck.find(c=>c.id===id);\r\n if(card.flipped || card.matched) return;\r\n card.flipped = true;\r\n\r\n if(!first){ first = card; }\r\n else if(!second){\r\n second = card; moves++;\r\n if(first.src === second.src){\r\n first.matched = second.matched = true; matches++;\r\n first = second = null;\r\n if(matches === size) finish();\r\n } else {\r\n disabled = true;\r\n setTimeout(()=>{ first.flipped = false; second.flipped = false; first = second = null; disabled = false; render(); }, 650);\r\n }\r\n }\r\n render();\r\n }\r\n\r\n function finish(){\r\n if(!best || moves < best){ best = moves; localStorage.setItem('onan-memory-best-img', String(best)); }\r\n\r\n \/\/ \ud83c\udf89 Confetti in Onan-kleuren\r\n for(let i=0;i<120;i++){\r\n const conf = document.createElement('div');\r\n conf.className = 'confetti';\r\n conf.style.left = Math.random()*100 + 'vw';\r\n conf.style.animationDuration = (2 + Math.random()*3) + 's';\r\n conf.style.backgroundColor = ['#00d1b2','#000','#fff'][Math.floor(Math.random()*3)];\r\n conf.style.transform = `rotate(${Math.random()*360}deg)`;\r\n document.body.appendChild(conf);\r\n setTimeout(()=> conf.remove(), 5200);\r\n }\r\n\r\n \/\/ \u2728 Overlay boodschap\r\n overlayEl.classList.add('show');\r\n }\r\n\r\n function removeConfetti(){\r\n document.querySelectorAll('.confetti').forEach(el=>el.remove());\r\n }\r\n\r\n \/\/ Start\r\n init();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Onan Memory Spel Onan Memory Spel Beurten: 0 Sets: 0\/5 Beste: - Opnieuw Aantal paren: 2345 Tip: volledig client-side, geen data-tracking. Met toetsenbord te spelen (Tab + Enter\/Space). Merkstyling: zwart\/wit\/turquoise - afgeronde hoeken - schaduw. Afbeeldingen vullen kaarten volledig (object-fit: cover). Je bent geweldig! Geniet van je drankje \u2615\ud83c\udf75 Speel opnieuw<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-89102","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\n<title>Onan Memory Game - Onan Coffee & Tea<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/onan.be\/nl\/onan-geheugenspel\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Onan Memory Game - Onan Coffee & Tea\" \/>\n<meta property=\"og:description\" content=\"Onan Memory Game Onan Memory Game Beurten: 0 Sets: 0\/5 Beste: \u2014 Opnieuw Aantal paren: 2345 Tip: volledig client-side, geen data-tracking. Met toetsenbord te spelen (Tab + Enter\/Space). Brand-styling: zwart\/wit\/turquoise \u2022 afgeronde hoeken \u2022 schaduw. Afbeeldingen vullen kaarten volledig (object-fit: cover). You are amazing! \u2728 Enjoy your drink \u2615\ud83c\udf75 Play again\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onan.be\/nl\/onan-geheugenspel\/\" \/>\n<meta property=\"og:site_name\" content=\"Onan Coffee & Tea\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-23T13:22:41+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/onan.be\\\/onan-memory-game\\\/\",\"url\":\"https:\\\/\\\/onan.be\\\/onan-memory-game\\\/\",\"name\":\"Onan Memory Game - Onan Coffee & Tea\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onan.be\\\/#website\"},\"datePublished\":\"2025-09-23T13:06:25+00:00\",\"dateModified\":\"2025-09-23T13:22:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onan.be\\\/onan-memory-game\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onan.be\\\/onan-memory-game\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onan.be\\\/onan-memory-game\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onan.be\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Onan Memory Game\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/onan.be\\\/#website\",\"url\":\"https:\\\/\\\/onan.be\\\/\",\"name\":\"Onan Coffee & Tea\",\"description\":\"Roasting & Blending\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/onan.be\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"}]}<\/script>\n","yoast_head_json":{"title":"Onan Memory Spel - Onan Koffie & Thee","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/onan.be\/nl\/onan-geheugenspel\/","og_locale":"nl_NL","og_type":"article","og_title":"Onan Memory Game - Onan Coffee & Tea","og_description":"Onan Memory Game Onan Memory Game Beurten: 0 Sets: 0\/5 Beste: \u2014 Opnieuw Aantal paren: 2345 Tip: volledig client-side, geen data-tracking. Met toetsenbord te spelen (Tab + Enter\/Space). Brand-styling: zwart\/wit\/turquoise \u2022 afgeronde hoeken \u2022 schaduw. Afbeeldingen vullen kaarten volledig (object-fit: cover). You are amazing! \u2728 Enjoy your drink \u2615\ud83c\udf75 Play again","og_url":"https:\/\/onan.be\/nl\/onan-geheugenspel\/","og_site_name":"Onan Coffee & Tea","article_modified_time":"2025-09-23T13:22:41+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onan.be\/onan-memory-game\/","url":"https:\/\/onan.be\/onan-memory-game\/","name":"Onan Memory Spel - Onan Koffie & Thee","isPartOf":{"@id":"https:\/\/onan.be\/#website"},"datePublished":"2025-09-23T13:06:25+00:00","dateModified":"2025-09-23T13:22:41+00:00","breadcrumb":{"@id":"https:\/\/onan.be\/onan-memory-game\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onan.be\/onan-memory-game\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onan.be\/onan-memory-game\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onan.be\/"},{"@type":"ListItem","position":2,"name":"Onan Memory Game"}]},{"@type":"WebSite","@id":"https:\/\/onan.be\/#website","url":"https:\/\/onan.be\/","name":"Onan Koffie & Thee","description":"Roosteren en mengen","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/onan.be\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/pages\/89102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/comments?post=89102"}],"version-history":[{"count":4,"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/pages\/89102\/revisions"}],"predecessor-version":[{"id":90103,"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/pages\/89102\/revisions\/90103"}],"wp:attachment":[{"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/media?parent=89102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Onan Memory Game<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&display=swap\" rel=\"preload\" as=\"style\" onload=\"this.rel='stylesheet'\" \/>\r\n <meta name=\"description\" content=\"Superveilig, gratis en volledig client-side memoryspel van Onan Coffee & Tea.\" \/>\r\n <style>\r\n :root{ --onan-black:#000; --onan-white:#fff; --onan-turquoise:#00d1b2; --radius:14px; --shadow:0 8px 24px rgba(0,0,0,.12); }\r\n *{ box-sizing:border-box }\r\n html,body{ margin:0; padding:0; background:#f7f7f7; color:#111; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif }\r\n .wrap{ max-width:720px; margin:32px auto; padding:16px }\r\n .top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px }\r\n h1{ margin:0; font: 700 34px\/1 'Bebas Neue', sans-serif; letter-spacing:.5px }\r\n .stats{ text-align:right; font-size:14px; line-height:1.35 }\r\n .stats strong{ font-weight:700 }\r\n\r\n .board{ display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); }\r\n @media (min-width:560px){ .board{ gap:14px } }\r\n\r\n .card{ position:relative; aspect-ratio:1\/1; border:none; cursor:pointer; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#111; padding:0; outline:none; transform:translateZ(0) }\r\n .card:focus-visible{ box-shadow:0 0 0 3px var(--onan-turquoise), var(--shadow) }\r\n\r\n .card__front, .card__back{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center }\r\n .card__front{ background:#000 }\r\n .card__front img{ width:100%; height:100%; object-fit:cover }\r\n\r\n \/* Back fully covered by logo *\/\r\n .card__back{ background:#000; }\r\n .back__logo { width:100%; height:100%; object-fit:cover; }\r\n\r\n .card__inner{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.8,.2,1) }\r\n .card.flipped .card__inner, .card.matched .card__inner{ transform:rotateY(180deg) }\r\n .face{ position:absolute; inset:0; backface-visibility:hidden }\r\n .face.front{ transform:rotateY(180deg) }\r\n\r\n @media (prefers-reduced-motion: reduce){ .card__inner{ transition:none } }\r\n\r\n .controls{ display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap }\r\n .btn{ border:1px solid var(--onan-black); background:var(--onan-white); border-radius:999px; padding:8px 14px; cursor:pointer; box-shadow:var(--shadow) }\r\n .select{ border:1px solid #bbb; border-radius:999px; padding:6px 12px; background:#fff }\r\n .note{ font-size:12px; opacity:.8; margin-top:8px }\r\n\r\n .footer{ margin-top:16px; font-size:12px; opacity:.7 }\r\n\r\n \/* \ud83c\udf89 Win effects *\/\r\n .confetti { position: fixed; top: -12px; width: 8px; height: 14px; opacity: .95; will-change: transform; animation: fall linear forwards; z-index: 1000; }\r\n @keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }\r\n\r\n .overlay { position: fixed; inset:0; background: rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index: 999; }\r\n .overlay.show { display:flex; }\r\n .overlay .msg { background:#fff; padding:24px 28px; border-radius:16px; text-align:center; box-shadow: var(--shadow); }\r\n .overlay .msg h2 { font-family:'Bebas Neue',sans-serif; font-size:28px; margin:0 0 6px; }\r\n .overlay .msg p { margin:0 0 12px; }\r\n .overlay .msg button { padding:10px 16px; border-radius:999px; border:1px solid #000; background:var(--onan-turquoise); color:#fff; cursor:pointer }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"wrap\" aria-labelledby=\"title\">\r\n <header class=\"top\">\r\n <h1 id=\"title\">Onan Memory Game<\/h1>\r\n <div class=\"stats\" aria-live=\"polite\">\r\n <div>Beurten: <strong id=\"moves\">0<\/strong><\/div>\r\n <div>Sets: <strong id=\"matches\">0<\/strong>\/<span id=\"target\">5<\/span><\/div>\r\n <div>Beste: <strong id=\"best\">\u2014<\/strong><\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <section>\r\n <div id=\"board\" class=\"board\" role=\"grid\" aria-label=\"Memorykaarten\"><\/div>\r\n <div class=\"controls\">\r\n <button id=\"restart\" class=\"btn\" type=\"button\">Opnieuw<\/button>\r\n <label for=\"pairs\">Aantal paren:<\/label>\r\n <select id=\"pairs\" class=\"select\" aria-label=\"Aantal paren\">\r\n <option value=\"2\">2<\/option>\r\n <option value=\"3\">3<\/option>\r\n <option value=\"4\">4<\/option>\r\n <option value=\"5\" selected>5<\/option>\r\n <\/select>\r\n <\/div>\r\n <p class=\"note\">Tip: volledig client-side, geen data-tracking. Met toetsenbord te spelen (Tab + Enter\/Space).<\/p>\r\n <\/section>\r\n\r\n <p class=\"footer\">Brand-styling: zwart\/wit\/turquoise \u2022 afgeronde hoeken \u2022 schaduw. Afbeeldingen vullen kaarten volledig (object-fit: cover).<\/p>\r\n <\/main>\r\n\r\n \r\n <div id=\"winOverlay\" class=\"overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"winTitle\">\r\n <div class=\"msg\">\r\n <h2 id=\"winTitle\">You are amazing! \u2728<\/h2>\r\n <p>Enjoy your drink \u2615\ud83c\udf75<\/p>\r\n <button id=\"playAgainBtn\" type=\"button\">Play again<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const IMAGE_URLS = [\r\n \"https:\/\/onan.be\/app\/uploads\/2024\/09\/20240704_123310-scaled.jpg\",\r\n \"https:\/\/onan.be\/app\/uploads\/2024\/09\/20240704_123243-scaled.jpg\",\r\n \"https:\/\/onan.be\/app\/uploads\/2025\/02\/Foto-13-07-2024-14-32-16-scaled.jpg\",\r\n \"https:\/\/onan.be\/app\/uploads\/2025\/02\/Foto-13-07-2024-15-07-11-scaled.jpg\",\r\n \"https:\/\/onan.be\/app\/uploads\/2024\/05\/My-Lights-Lines-Photography_ONAN-165_websize-e1717076847157.jpg\"\r\n ];\r\n\r\n const LOGO_URL = \"https:\/\/onan.be\/app\/uploads\/2025\/02\/a58f0f47.jpeg\";\r\n\r\n IMAGE_URLS.forEach(src=>{ const i=new Image(); i.src=src; });\r\n\r\n const boardEl = document.getElementById('board');\r\n const movesEl = document.getElementById('moves');\r\n const matchesEl = document.getElementById('matches');\r\n const targetEl = document.getElementById('target');\r\n const bestEl = document.getElementById('best');\r\n const pairsSelect = document.getElementById('pairs');\r\n const restartBtn = document.getElementById('restart');\r\n\r\n const overlayEl = document.getElementById('winOverlay');\r\n const playAgainBtn = document.getElementById('playAgainBtn');\r\n\r\n let size = Number(pairsSelect.value);\r\n let deck = [];\r\n let first = null, second = null;\r\n let disabled = false;\r\n let moves = 0, matches = 0;\r\n let best = Number(localStorage.getItem('onan-memory-best-img')) || null;\r\n\r\n function shuffle(a){ const x=a.slice(); for(let i=x.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); [x[i],x[j]]=[x[j],x[i]]; } return x; }\r\n\r\n function init(){\r\n removeConfetti();\r\n overlayEl.classList.remove('show');\r\n\r\n const pool = IMAGE_URLS.slice(0, size);\r\n const sym = shuffle([...pool, ...pool]);\r\n deck = sym.map((src, idx)=>({ id: idx, src, flipped: false, matched: false }));\r\n first = second = null; disabled = false; moves = 0; matches = 0;\r\n targetEl.textContent = String(size);\r\n render();\r\n }\r\n\r\n function render(){\r\n const cols = Math.min(4, Math.ceil((size*2)\/2));\r\n boardEl.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;\r\n\r\n boardEl.innerHTML = deck.map(c => `\r\n <button class=\"card ${c.flipped||c.matched? 'flipped':''} ${c.matched?'matched':''}\" data-id=\"${c.id}\" aria-label=\"kaart\" role=\"gridcell\">\r\n <div class=\"card__inner\">\r\n <div class=\"face front card__front\"><img decoding=\"async\" src=\"${c.src}\" alt=\"Onan afbeelding\"><\/div>\r\n <div class=\"face back card__back\"><img decoding=\"async\" src=\"${LOGO_URL}\" alt=\"Onan logo\" class=\"back__logo\"><\/div>\r\n <\/div>\r\n <\/button>\r\n `).join('');\r\n\r\n movesEl.textContent = String(moves);\r\n matchesEl.textContent = String(matches);\r\n bestEl.textContent = best ? String(best) : '\u2014';\r\n\r\n boardEl.querySelectorAll('.card').forEach(el=>{\r\n el.addEventListener('click', ()=> flip(Number(el.dataset.id)));\r\n el.addEventListener('keydown', (e)=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); flip(Number(el.dataset.id)); } });\r\n });\r\n\r\n pairsSelect.addEventListener('change', (e)=>{ size = Number(e.target.value); init(); });\r\n restartBtn.addEventListener('click', init);\r\n playAgainBtn.addEventListener('click', init);\r\n }\r\n\r\n function flip(id){\r\n if(disabled) return;\r\n const card = deck.find(c=>c.id===id);\r\n if(card.flipped || card.matched) return;\r\n card.flipped = true;\r\n\r\n if(!first){ first = card; }\r\n else if(!second){\r\n second = card; moves++;\r\n if(first.src === second.src){\r\n first.matched = second.matched = true; matches++;\r\n first = second = null;\r\n if(matches === size) finish();\r\n } else {\r\n disabled = true;\r\n setTimeout(()=>{ first.flipped = false; second.flipped = false; first = second = null; disabled = false; render(); }, 650);\r\n }\r\n }\r\n render();\r\n }\r\n\r\n function finish(){\r\n if(!best || moves < best){ best = moves; localStorage.setItem('onan-memory-best-img', String(best)); }\r\n\r\n \/\/ \ud83c\udf89 Confetti in Onan-kleuren\r\n for(let i=0;i<120;i++){\r\n const conf = document.createElement('div');\r\n conf.className = 'confetti';\r\n conf.style.left = Math.random()*100 + 'vw';\r\n conf.style.animationDuration = (2 + Math.random()*3) + 's';\r\n conf.style.backgroundColor = ['#00d1b2','#000','#fff'][Math.floor(Math.random()*3)];\r\n conf.style.transform = `rotate(${Math.random()*360}deg)`;\r\n document.body.appendChild(conf);\r\n setTimeout(()=> conf.remove(), 5200);\r\n }\r\n\r\n \/\/ \u2728 Overlay boodschap\r\n overlayEl.classList.add('show');\r\n }\r\n\r\n function removeConfetti(){\r\n document.querySelectorAll('.confetti').forEach(el=>el.remove());\r\n }\r\n\r\n \/\/ Start\r\n init();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Onan Memory Spel Onan Memory Spel Beurten: 0 Sets: 0\/5 Beste: - Opnieuw Aantal paren: 2345 Tip: volledig client-side, geen data-tracking. Met toetsenbord te spelen (Tab + Enter\/Space). Merkstyling: zwart\/wit\/turquoise - afgeronde hoeken - schaduw. Afbeeldingen vullen kaarten volledig (object-fit: cover). Je bent geweldig! Geniet van je drankje \u2615\ud83c\udf75 Speel opnieuw<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-89102","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\n<title>Onan Memory Game - Onan Coffee & Tea<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/onan.be\/nl\/onan-geheugenspel\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Onan Memory Game - Onan Coffee & Tea\" \/>\n<meta property=\"og:description\" content=\"Onan Memory Game Onan Memory Game Beurten: 0 Sets: 0\/5 Beste: \u2014 Opnieuw Aantal paren: 2345 Tip: volledig client-side, geen data-tracking. Met toetsenbord te spelen (Tab + Enter\/Space). Brand-styling: zwart\/wit\/turquoise \u2022 afgeronde hoeken \u2022 schaduw. Afbeeldingen vullen kaarten volledig (object-fit: cover). You are amazing! \u2728 Enjoy your drink \u2615\ud83c\udf75 Play again\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onan.be\/nl\/onan-geheugenspel\/\" \/>\n<meta property=\"og:site_name\" content=\"Onan Coffee & Tea\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-23T13:22:41+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/onan.be\\\/onan-memory-game\\\/\",\"url\":\"https:\\\/\\\/onan.be\\\/onan-memory-game\\\/\",\"name\":\"Onan Memory Game - Onan Coffee & Tea\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onan.be\\\/#website\"},\"datePublished\":\"2025-09-23T13:06:25+00:00\",\"dateModified\":\"2025-09-23T13:22:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onan.be\\\/onan-memory-game\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onan.be\\\/onan-memory-game\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onan.be\\\/onan-memory-game\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onan.be\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Onan Memory Game\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/onan.be\\\/#website\",\"url\":\"https:\\\/\\\/onan.be\\\/\",\"name\":\"Onan Coffee & Tea\",\"description\":\"Roasting & Blending\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/onan.be\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"}]}<\/script>\n","yoast_head_json":{"title":"Onan Memory Spel - Onan Koffie & Thee","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/onan.be\/nl\/onan-geheugenspel\/","og_locale":"nl_NL","og_type":"article","og_title":"Onan Memory Game - Onan Coffee & Tea","og_description":"Onan Memory Game Onan Memory Game Beurten: 0 Sets: 0\/5 Beste: \u2014 Opnieuw Aantal paren: 2345 Tip: volledig client-side, geen data-tracking. Met toetsenbord te spelen (Tab + Enter\/Space). Brand-styling: zwart\/wit\/turquoise \u2022 afgeronde hoeken \u2022 schaduw. Afbeeldingen vullen kaarten volledig (object-fit: cover). You are amazing! \u2728 Enjoy your drink \u2615\ud83c\udf75 Play again","og_url":"https:\/\/onan.be\/nl\/onan-geheugenspel\/","og_site_name":"Onan Coffee & Tea","article_modified_time":"2025-09-23T13:22:41+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onan.be\/onan-memory-game\/","url":"https:\/\/onan.be\/onan-memory-game\/","name":"Onan Memory Spel - Onan Koffie & Thee","isPartOf":{"@id":"https:\/\/onan.be\/#website"},"datePublished":"2025-09-23T13:06:25+00:00","dateModified":"2025-09-23T13:22:41+00:00","breadcrumb":{"@id":"https:\/\/onan.be\/onan-memory-game\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onan.be\/onan-memory-game\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onan.be\/onan-memory-game\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onan.be\/"},{"@type":"ListItem","position":2,"name":"Onan Memory Game"}]},{"@type":"WebSite","@id":"https:\/\/onan.be\/#website","url":"https:\/\/onan.be\/","name":"Onan Koffie & Thee","description":"Roosteren en mengen","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/onan.be\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/pages\/89102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/comments?post=89102"}],"version-history":[{"count":4,"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/pages\/89102\/revisions"}],"predecessor-version":[{"id":90103,"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/pages\/89102\/revisions\/90103"}],"wp:attachment":[{"href":"https:\/\/onan.be\/nl\/wp-json\/wp\/v2\/media?parent=89102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}