Initial Release

pancakz-v2-crossroads/public/secret/picross/award.css

@@ -0,0 +1,73 @@
+body {
+    margin: 32px;
+    padding: 0;
+}
+
+/* Layout */
+
+div.layout-buttons {
+    margin: 32px 0;
+}
+
+div.layout-document {
+    position: relative;
+    width: 11in;
+    height: 8.5in;
+    border: 2px solid black;
+}
+
+img.page-background {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: -1;
+}
+
+/* Certificate */
+
+span {
+    position: absolute;
+    background-color: white;
+    color: red;
+}
+
+span#name {
+    left: 3.75in;
+    top: 3in;
+    font-size: 2em;
+    width: 3.5in;
+    text-align: center;
+}
+
+span#cheat {
+    left: 3.95in;
+    top: 1in;
+    font-size: 3em;
+}
+
+span#time {
+    left: 6in;
+    top: 4in;
+}
+
+span#date {
+    left: 4.8in;
+    top: 3.67in;
+    padding: 0 32px;
+}
+
+/* Printing Fixup */
+@media print {
+    @page {
+        size: letter landscape;
+        margin: 0;
+    }
+
+    body {
+        margin: 0;
+    }
+
+    .no-print {
+        display: none !important;
+    }
+}

pancakz-v2-crossroads/public/secret/picross/award.js

@@ -0,0 +1,26 @@
+(() => {
+
+    // SUPER SOPHISTICATED ANTICHEAT //
+    const search = new URLSearchParams(document.location.search)
+    let field_name, field_time, field_cheat
+
+    if (localStorage.getItem("secret_picross_complete")) {
+        // Normal Ending :3
+        field_name = search.get("name")
+        field_time = search.get("time")
+
+    } else {
+        // Cheater Ending...
+        alert("i know what you are...")
+        field_name = "cheater mccheater pants"
+        field_time = "whatever"
+        field_cheat = "CHEATED"
+    }
+
+    document.querySelector("span#date").textContent = new Date().toDateString()
+    document.querySelector("span#time").textContent =field_time 
+    document.querySelector("span#name").textContent = field_name
+    document.querySelector("span#cheat").textContent = field_cheat
+    document.querySelector("div.layout-document").style.opacity = '1'
+
+})()

pancakz-v2-crossroads/public/secret/picross/board.css

@@ -0,0 +1,110 @@
+:root {
+    --transition-time: 200ms;
+    --animation-time: 200ms;
+    --color-background: #1d1e2e;
+    --color-text-default: #f0f0f0;
+    --color-text-hint: #d0d0d0;
+    --color-disabled: #212335;
+    --color-inactive: #2d2f47;
+    --color-active: #a1a8ff;
+}
+
+body {
+    background-color: var(--color-background);
+    padding: 0;
+    margin: 0;
+}
+
+p,
+a {
+    display: inline-block;
+    color: var(--color-text-default);
+    font-family: 'Poppins', sans-serif;
+    font-size: 1em;
+    font-weight: normal;
+    padding: 0;
+    margin: 0;
+}
+
+a {
+    border-radius: 8px;
+    border: 2px solid var(--color-inactive);
+    padding: 4px 8px;
+    min-width: 120px;
+    cursor: pointer;
+    margin: 0 8px;
+}
+
+a:hover,
+a:focus-visible {
+    border-color: var(--color-active);
+}
+
+.text-tip {
+    font-size: small;
+}
+
+.text-hidden {
+    color: var(--color-text-hint);
+}
+
+/* Layout */
+
+div.layout-container {
+    margin: auto;
+    width: fit-content;
+    padding: 32px 16px;
+    box-sizing: border-box;
+}
+
+div.layout-header {
+    display: grid;
+    text-align: center;
+    gap: 8px;
+}
+
+div.picross-row {
+    display: flex;
+    gap: 4px;
+}
+
+div.layout-content {
+    display: grid;
+    gap: 4px;
+    padding: 32px 0;
+    justify-content: center;
+    /* visually centered */
+    margin-left: -32px;
+}
+
+p.picross-hint {
+    color: var(--color-text-hint);
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+}
+
+button.picross-button {
+    transition: var(--animation-time) ease-in-out background-color;
+    background-color: var(--color-inactive);
+    width: 24px;
+    height: 24px;
+    border: none;
+}
+
+button.state-active {
+    background-color: var(--color-active) !important;
+}
+
+button.state-ignore {
+    background-color: var(--color-disabled) !important;
+}
+
+div.layout-footer {
+    text-align: center;
+}
+
+p.layout-timer {
+    padding: 16px 0;
+}

pancakz-v2-crossroads/public/secret/picross/board.js

@@ -0,0 +1,74 @@
+(() => {
+    const correctAnswer = 2560660350
+    const soundSet = document.querySelector("audio#audio-set"); soundSet.volume = 0.5
+    const soundDel = document.querySelector("audio#audio-del"); soundDel.volume = 0.5
+    document.
+        querySelector("div.layout-content")
+        .addEventListener(
+            // Prevent annoying context menu popup whenever you miss a grid tile by 1 pixel
+            "contextmenu",
+            e => e.preventDefault()
+        )
+
+    // Setup Board //
+    document.querySelectorAll("button.picross-button").forEach(e => {
+        e.addEventListener("click", () => {
+            e.classList.remove("state-ignore")
+            e.classList.toggle("state-active")
+                ? soundSet.play()
+                : soundDel.play()
+        })
+        e.addEventListener("contextmenu", ev => {
+            ev.preventDefault()
+            e.classList.remove("state-active")
+            e.classList.toggle("state-ignore")
+            soundDel.play()
+        })
+    })
+
+    // Setup Timer //
+    function getTime() {
+        const f = s => s.toString().padStart(2, "0")
+        const h = Math.floor(t / 3600)
+        const m = Math.floor(t % 3600 / 60)
+        const s = Math.floor(t % 60)
+        return `Time Spent: ${f(h)}:${f(m)}:${f(s)}`
+    }
+    let t = 0
+    const timerElement = document.querySelector("p.layout-timer")
+    setInterval(() => {
+        t++
+        timerElement.textContent = getTime()
+    }, 1000)
+
+    // Action: Submit //
+    document.querySelector("a#action-send").addEventListener("click", () => {
+
+        // Check Answer
+        let givenAnswer = 0
+        document.querySelectorAll('div.picross-row').forEach((childRow, rowIndex) => {
+            let childIndex = 0
+            for (const child of childRow.children) {
+                if (child.nodeName === 'BUTTON') {
+                    if (child.classList.contains('state-active')) {
+                        givenAnswer += 1 << ((rowIndex - 3) * 9) + childIndex
+                    }
+                    childIndex++
+                }
+            }
+        })
+        if (correctAnswer !== givenAnswer) {
+            alert("Nope! Try Again")
+            return
+        }
+
+        // Redirect to Certificate
+        localStorage.setItem("secret_picross_complete", "true")
+        const time = getTime()
+        const name = prompt("Congratulations you win! Please enter your name for your certificate:", "Anon")
+        window.location.assign(
+            `/secret/picross/award?name=${encodeURIComponent(name)}&time=${encodeURIComponent(time)}`
+        )
+    })
+
+})()