blobinaticuber · blobinaticuber · Dec 18, 2025 · Dec 15, 2025 · Dec 15, 2025 · Dec 15, 2025
diff --git a/.github/workflows/jekyll.yml b/.github/workflows/jekyll.yml
@@ -1,6 +1,6 @@
 name: Jekyll with GitHub Pages CI
 
-on: 
+on:
   pull_request:
     branches: ["main"]
   workflow_dispatch:
@@ -28,7 +28,7 @@ jobs:
           source: ./
           destination: ./_site
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v4
 
   # deploy:
   #   environment:

diff --git a/cubieclicker.css b/cubieclicker.css
@@ -0,0 +1,112 @@
+body {
+  font: 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  margin: auto;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #0d1117;
+    }
+
+    h1 {
+        color: white;
+    }
+
+    p {
+        color: white;
+    }
+
+    .frosted {
+        transition: 0.1s;
+        background: rgba(0, 0, 0, 0.09);
+    }
+    .frosted:hover {
+        transition: 0.1s;
+        background: rgba(0, 0, 0, 0.49);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    body {
+        background: #ffffff;
+    }
+
+    h1 {
+        color: black;
+    }
+
+    p {
+        color: black;
+    }
+
+    .frosted {
+        transition: 0.1s;
+        background: rgba(255, 255, 255, 0.49);
+    }
+    .frosted:hover {
+        transition: 0.1s;
+        background: rgba(255, 255, 255, 0.09);
+    }
+}
+
+#subbody {
+    max-width: 1000px;
+    margin: auto;
+}
+
+#cubeimg {
+    transition: 0.1s;
+    width: 400px;
+    height: 300px;
+}
+
+/* #cubeimg:hover {
+    transition: 0.1s;
+    box-shadow: 0 4px 30px rgb(183, 50, 50);
+} */
+
+.flexbox {
+    display: flex;
+}
+
+.center {
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+
+.frosted {
+    padding: 15px;
+    /* From https://css.glass */
+    background: rgba(0, 0, 0, 0.09);
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(6.8px);
+    -webkit-backdrop-filter: blur(6.8px);
+    border: 1px solid rgba(255, 255, 255, 1);
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+
+button {
+    padding: 15px 32px;
+    font-size: large;
+}
+
+#stickers {
+  z-index: -1;
+  position: relative;
+  width: 50px;
+  height: 50px;
+  background: transparent;
+  /* animation: animStar 150s linear infinite; */
+  border-radius: 10%;
+}
+
+@keyframes animStar {
+  100% {
+    transform: translate3d(0, 0, 1px) rotate(360deg);
+  }
+}
diff --git a/cubieclicker.html b/cubieclicker.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <link rel="stylesheet" href="cubieclicker.css">
+    <title>Cubie Clicker</title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
+</head>
+
+<script type="module" src="https://cdn.jsdelivr.net/npm/cubicdb-module/dist/index.umd.js"></script>
+
+<div id='stickers'></div>
+<script type="module" src="cubieclicker.js"></script>
+
+<body>
+    <div id="subbody">
+        <div id="intro-text" class="frosted">
+            <div class="flexbox center">
+                <h1>Cubie Clicker</h1>
+                <p><code>v0.0.1</code></p>
+            </div>
+            <p>One day, a magical package shows up at your house containing all <code>43,252,003,274,489,856,000</code> (that's over 43 quintillion) differently scrambled Rubik's Cubes. Unfortunately, you have no experience solving puzzles. Do you have what it takes to conquer every cube?</p>
+            <button id="start-game-btn">Start game</button>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/cubieclicker.js b/cubieclicker.js
@@ -0,0 +1,133 @@
+import { getScrambles, genImages, setSeed, getSeed } from 'https://esm.sh/cubicdb-module';
+
+
+
+// -------------------------------------------------------------------------------------------
+// CODE FOR THE BACKGROUND EFFECT SET UP
+
+
+
+const stickers1 = document.getElementById("stickers");
+
+const cubeColours = ["#f1f1f1ff", "#ffff00", "#FF0000", "#00FF00", "#0000FF", "#FFA500"];
+
+var stickersColours = [];
+var stickerX = [];
+var stickerY = [];
+var stickerXvelocity = [];
+var stickerYvelocity = [];
+
+function initializeBG() {
+    stickers1.style.boxShadow = "";
+    var stickerstring = "";
+    for (var i = 0; i < 30; i++) {
+        stickerX[i] = Math.trunc(Math.random()*(window.innerWidth-200))+100;
+        stickerY[i] = Math.trunc(Math.random()*(window.innerHeight-200))+100;
+        stickerXvelocity[i] = Math.random()-0.5;
+        stickerYvelocity[i] = Math.random()-0.5;
+        stickersColours[i] = cubeColours[Math.trunc(Math.random()*cubeColours.length)];
+        stickerstring += `${stickerX[i]}px ${stickerY[i]}px ${stickersColours[i]} , `;
+    }
+    stickerstring = stickerstring.slice(0,-2);
+    stickers1.style.boxShadow = stickerstring;
+}
+
+function updateStickers() {
+    stickers1.style.boxShadow = "";
+    var stickerstring = "";
+    for (var i = 0; i < 30; i++) {
+        // invert velocity if goes off screen
+        if (stickerX[i] + stickerXvelocity[i] > window.innerWidth-50 || stickerX[i] + stickerXvelocity[i] < 0) {
+            stickerXvelocity[i] = -stickerXvelocity[i];
+        }
+        if (stickerY[i] + stickerYvelocity[i] > window.innerHeight-50 || stickerY[i] + stickerYvelocity[i] < 0) {
+            stickerYvelocity[i] = -stickerYvelocity[i];
+        }
+        stickerX[i] += stickerXvelocity[i];
+        stickerY[i] += stickerYvelocity[i];
+        stickerstring += `${stickerX[i]}px ${stickerY[i]}px ${stickersColours[i]} , `;
+    }
+    stickerstring = stickerstring.slice(0,-2);
+    stickers1.style.boxShadow = stickerstring;
+}
+
+initializeBG();
+setInterval(updateStickers, 33);
+
+
+
+// -------------------------------------------------------------------------------------------
+// CODE FOR THE GAME LOGIC
+
+
+
+const totalCubes = 43252003274489856000n;
+var cubesSolved = 0n;
+
+const btn = document.getElementById('start-game-btn');
+btn.addEventListener('click', startGame);
+
+function startGame() {
+    document.getElementById("intro-text").remove();
+
+    var subbody = document.getElementById("subbody");
+    subbody.appendChild(cubeCountDisplay());
+    subbody.appendChild(cubeButton());
+}
+
+// convert bigInt into readable number with commas
+function bigIntFormat(bi) {
+    var str = bi.toString();
+    str = str.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return str;
+}
+
+// HTML element that displays the cube count
+function cubeCountDisplay() {
+    var d = document.createElement("div");
+    d.classList = "flexbox center frosted";
+    var num = document.createElement("h1");
+    num.id = "cubeCount";
+    num.innerText = (`${bigIntFormat(cubesSolved)}`);
+    var text = document.createElement("p");
+    text.innerText = `/ ${bigIntFormat(totalCubes)} Rubik's Cubes solved`;
+    d.appendChild(num);
+    d.appendChild(text);
+    return d;
+}
+
+function updateCubeCount() {
+    var v = document.getElementById("cubeCount");
+    v.innerText = (`${bigIntFormat(cubesSolved)}`);
+}
+
+function cubeButton() {
+    var d = document.createElement("div");
+    d.classList = "flexbox center frosted";
+    var cubeimg = document.createElement("div");
+    cubeimg.id = "cubeimg";
+    cubeimg.onclick = cubeClicked;
+    cubeimg.onclick = cubeClicked;
+    cubeimg.appendChild(newScrambled333Image());
+    d.appendChild(cubeimg);
+    return d;
+}
+
+function newScrambled333Image() {
+    var scrambles = getScrambles([
+        { scrambler: "333", image: true},
+    ]);
+    var svgString = scrambles[0].image;
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
+    const svgElement = svgDoc.documentElement;
+    return svgElement;
+}
+
+
+function cubeClicked() {
+    cubesSolved = cubesSolved + 1n;
+    updateCubeCount();
+    document.getElementById("cubeimg").replaceChildren();
+    document.getElementById("cubeimg").appendChild(newScrambled333Image());
+}