{"id":161,"date":"2026-05-31T18:40:13","date_gmt":"2026-05-31T18:40:13","guid":{"rendered":"https:\/\/camp.wiserighteous.org\/?page_id=161"},"modified":"2026-05-31T18:40:13","modified_gmt":"2026-05-31T18:40:13","slug":"righteous-match-flip-learn","status":"publish","type":"page","link":"https:\/\/camp.wiserighteous.org\/index.php\/righteous-match-flip-learn\/","title":{"rendered":"Righteous Match \u2013 Flip &amp; Learn"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">\n    <title>Righteous Match \u2013 Flip &#038; Learn<\/title>\n    <style>\n        * {\n            box-sizing: border-box;\n            user-select: none;\n        }\n        body {\n            font-family: 'Comic Neue', 'Segoe UI', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;\n            background: linear-gradient(145deg, #6ab0de 0%, #4a90b8 100%);\n            min-height: 100vh;\n            margin: 0;\n            padding: 20px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n        .game-board {\n            max-width: 1000px;\n            width: 100%;\n            background: #fff5e6;\n            border-radius: 64px;\n            box-shadow: 0 20px 35px rgba(0,0,0,0.2);\n            padding: 20px 25px 30px;\n            text-align: center;\n        }\n        h1 {\n            font-size: 1.8rem;\n            margin: 0 0 5px;\n            color: #2c5a2e;\n            text-shadow: 2px 2px 0 #d4b87a;\n        }\n        .sub {\n            font-size: 1rem;\n            color: #6b4c2c;\n            margin-bottom: 20px;\n        }\n        .stats {\n            display: flex;\n            justify-content: space-between;\n            background: #ffefc0;\n            padding: 10px 20px;\n            border-radius: 60px;\n            margin-bottom: 20px;\n            font-weight: bold;\n        }\n        .cards-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n            gap: 14px;\n            margin: 20px 0;\n        }\n        .card {\n            aspect-ratio: 1 \/ 0.9;\n            background: #ffe2b5;\n            border-radius: 24px;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            font-size: 0.9rem;\n            font-weight: bold;\n            padding: 10px;\n            transition: all 0.2s;\n            box-shadow: 0 8px 0 #b48b5a;\n            position: relative;\n            transform-style: preserve-3d;\n            transition: transform 0.3s;\n            background: #ffe2b5;\n            color: #5a3e1f;\n        }\n        .card.flipped, .card.matched {\n            background: #c8e6c9;\n            box-shadow: 0 4px 0 #6f9e3f;\n            transform: scale(0.98);\n        }\n        .card.matched {\n            opacity: 0.7;\n            cursor: default;\n            filter: grayscale(0.1);\n            background: #a5d6a7;\n        }\n        .card:hover:not(.matched) {\n            transform: translateY(-3px);\n            box-shadow: 0 10px 0 #b48b5a;\n        }\n        .card-content {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 6px;\n        }\n        .emoji-big {\n            font-size: 2.5rem;\n        }\n        button {\n            background: #f4a261;\n            border: none;\n            color: white;\n            font-size: 1.2rem;\n            padding: 10px 30px;\n            border-radius: 60px;\n            font-weight: bold;\n            cursor: pointer;\n            margin-top: 15px;\n            transition: 0.1s;\n            box-shadow: 0 5px 0 #c46d2b;\n        }\n        button:active {\n            transform: translateY(2px);\n            box-shadow: 0 2px 0 #c46d2b;\n        }\n        .win-message {\n            background: #ffd966;\n            border-radius: 40px;\n            padding: 12px;\n            margin-top: 15px;\n            font-size: 1.2rem;\n            font-weight: bold;\n            color: #2c5a2e;\n        }\n        @media (max-width: 650px) {\n            .cards-grid { grid-template-columns: repeat(2, 1fr); }\n            .card { font-size: 0.75rem; }\n            .emoji-big { font-size: 1.8rem; }\n        }\n    <\/style>\n<\/head>\n<body>\n<div class=\"game-board\">\n    <h1>\ud83e\udde9 Righteous Match<\/h1>\n    <div class=\"sub\">Flip &#038; match unrighteous patterns with their righteous fix!<\/div>\n    <div class=\"stats\">\n        <span>\ud83c\udfaf Moves: <span id=\"moveCount\">0<\/span><\/span>\n        <span>\u23f1\ufe0f Time: <span id=\"timer\">0<\/span> sec<\/span>\n    <\/div>\n    <div id=\"cardsContainer\" class=\"cards-grid\"><\/div>\n    <button id=\"resetBtn\">\ud83d\udd04 New Game<\/button>\n    <div id=\"winMessage\" class=\"win-message\" style=\"display: none;\">\ud83c\udf89\u2728 You did it! All matched! \u2728\ud83c\udf89<\/div>\n<\/div>\n\n<script>\n    \/\/ ----- Card data (6 pairs) -----\n    const pairsData = [\n        { unright: \"\ud83d\ude21 Blaming others\", right: \"\ud83d\ude4f Own your part and say 'I'm sorry'\", unrightEmoji: \"\ud83d\ude21\", rightEmoji: \"\ud83d\ude4f\" },\n        { unright: \"\ud83d\udde3\ufe0f Gossip \/ Spreading secrets\", right: \"\ud83e\udd10 Say something kind or keep silent\", unrightEmoji: \"\ud83d\udde3\ufe0f\", rightEmoji: \"\ud83e\udd10\" },\n        { unright: \"\u26a1 Reacting quickly (yelling)\", right: \"\ud83e\uddd8 Take three deep breaths\", unrightEmoji: \"\u26a1\", rightEmoji: \"\ud83e\uddd8\" },\n        { unright: \"\ud83d\ude48 Avoiding the problem\", right: \"\ud83d\udcac Talk honestly about the issue\", unrightEmoji: \"\ud83d\ude48\", rightEmoji: \"\ud83d\udcac\" },\n        { unright: \"\ud83d\udd75\ufe0f Hiding the truth\", right: \"\ud83d\udee1\ufe0f Tell the truth bravely\", unrightEmoji: \"\ud83d\udd75\ufe0f\", rightEmoji: \"\ud83d\udee1\ufe0f\" },\n        { unright: \"\ud83d\ude45 Broken promises\", right: \"\ud83e\udd1d Keep one small promise today\", unrightEmoji: \"\ud83d\ude45\", rightEmoji: \"\ud83e\udd1d\" }\n    ];\n\n    let cards = [];        \/\/ array of card objects { id, pairId, type, text, emoji, matched, flipped }\n    let moveCount = 0;\n    let timerSeconds = 0;\n    let timerInterval = null;\n    let lockBoard = false;\n    let firstCard = null, secondCard = null;\n    let gameActive = true;\n\n    const cardsContainer = document.getElementById('cardsContainer');\n    const moveSpan = document.getElementById('moveCount');\n    const timerSpan = document.getElementById('timer');\n    const winMessageDiv = document.getElementById('winMessage');\n    const resetBtn = document.getElementById('resetBtn');\n\n    \/\/ Helper: shuffle array (Fisher-Yates)\n    function shuffleArray(arr) {\n        for (let i = arr.length - 1; i > 0; i--) {\n            const j = Math.floor(Math.random() * (i + 1));\n            [arr[i], arr[j]] = [arr[j], arr[i]];\n        }\n        return arr;\n    }\n\n    \/\/ Build card deck (12 cards, 2 per pair)\n    function buildDeck() {\n        const deck = [];\n        pairsData.forEach((pair, idx) => {\n            \/\/ unrighteous card\n            deck.push({\n                id: Math.random(),\n                pairId: idx,\n                type: 'unright',\n                text: pair.unright,\n                emoji: pair.unrightEmoji,\n                matched: false,\n                flipped: false\n            });\n            \/\/ righteous card\n            deck.push({\n                id: Math.random(),\n                pairId: idx,\n                type: 'right',\n                text: pair.right,\n                emoji: pair.rightEmoji,\n                matched: false,\n                flipped: false\n            });\n        });\n        return shuffleArray(deck);\n    }\n\n    function resetGame() {\n        if (timerInterval) clearInterval(timerInterval);\n        lockBoard = false;\n        firstCard = secondCard = null;\n        moveCount = 0;\n        timerSeconds = 0;\n        gameActive = true;\n        moveSpan.innerText = '0';\n        timerSpan.innerText = '0';\n        winMessageDiv.style.display = 'none';\n        cards = buildDeck();\n        renderBoard();\n        startTimer();\n    }\n\n    function startTimer() {\n        if (timerInterval) clearInterval(timerInterval);\n        timerInterval = setInterval(() => {\n            if (!gameActive) return;\n            timerSeconds++;\n            timerSpan.innerText = timerSeconds;\n        }, 1000);\n    }\n\n    function renderBoard() {\n        cardsContainer.innerHTML = '';\n        cards.forEach((card, index) => {\n            const cardDiv = document.createElement('div');\n            cardDiv.className = 'card';\n            if (card.matched) cardDiv.classList.add('matched');\n            else if (card.flipped) cardDiv.classList.add('flipped');\n            \n            cardDiv.setAttribute('data-index', index);\n            \/\/ inner content\n            const contentDiv = document.createElement('div');\n            contentDiv.className = 'card-content';\n            if (card.flipped || card.matched) {\n                contentDiv.innerHTML = `<div class=\"emoji-big\">${card.emoji}<\/div><div>${card.text}<\/div>`;\n            } else {\n                contentDiv.innerHTML = `<div class=\"emoji-big\">\u2753<\/div><div>???<\/div>`;\n            }\n            cardDiv.appendChild(contentDiv);\n            cardDiv.addEventListener('click', () => onCardClick(index));\n            cardsContainer.appendChild(cardDiv);\n        });\n    }\n\n    function onCardClick(clickedIdx) {\n        if (lockBoard) return;\n        if (!gameActive) return;\n        const clickedCard = cards[clickedIdx];\n        if (clickedCard.matched) return;\n        if (clickedCard.flipped) return;\n        if (firstCard && secondCard) return; \/\/ already waiting for reset\n\n        \/\/ Flip current card\n        clickedCard.flipped = true;\n        renderBoard();\n\n        if (firstCard === null) {\n            firstCard = clickedIdx;\n        } else if (secondCard === null && firstCard !== clickedIdx) {\n            secondCard = clickedIdx;\n            moveCount++;\n            moveSpan.innerText = moveCount;\n            checkMatch();\n        }\n    }\n\n    function checkMatch() {\n        const card1 = cards[firstCard];\n        const card2 = cards[secondCard];\n        const isMatch = (card1.pairId === card2.pairId);\n        \n        if (isMatch) {\n            \/\/ matched\n            card1.matched = true;\n            card2.matched = true;\n            \/\/ keep flipped for matched\n            renderBoard();\n            clearSelection();\n            checkWin();\n        } else {\n            \/\/ not match \u2013 flip back after delay\n            lockBoard = true;\n            setTimeout(() => {\n                if (cards[firstCard]) cards[firstCard].flipped = false;\n                if (cards[secondCard]) cards[secondCard].flipped = false;\n                renderBoard();\n                clearSelection();\n                lockBoard = false;\n            }, 800);\n        }\n    }\n\n    function clearSelection() {\n        firstCard = null;\n        secondCard = null;\n    }\n\n    function checkWin() {\n        const allMatched = cards.every(card => card.matched === true);\n        if (allMatched) {\n            gameActive = false;\n            if (timerInterval) clearInterval(timerInterval);\n            winMessageDiv.style.display = 'block';\n        }\n    }\n\n    resetBtn.addEventListener('click', () => {\n        if (timerInterval) clearInterval(timerInterval);\n        resetGame();\n    });\n\n    \/\/ Initialize\n    resetGame();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Righteous Match \u2013 Flip &#038; Learn \ud83e\udde9 Righteous Match Flip &#038; match unrighteous patterns with their righteous fix! \ud83c\udfaf Moves: 0 \u23f1\ufe0f Time: 0 sec \ud83d\udd04 New Game \ud83c\udf89\u2728 You did it! All matched! \u2728\ud83c\udf89<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-161","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/comments?post=161"}],"version-history":[{"count":1,"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/161\/revisions"}],"predecessor-version":[{"id":162,"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/pages\/161\/revisions\/162"}],"wp:attachment":[{"href":"https:\/\/camp.wiserighteous.org\/index.php\/wp-json\/wp\/v2\/media?parent=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}