diff --git a/.github/workflows/jekyll.yml b/.github/workflows/jekyll.yml index 45196a7..f1222e9 100644 --- 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 new file mode 100644 index 0000000..0d8a667 --- /dev/null +++ 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 new file mode 100644 index 0000000..634d385 --- /dev/null +++ b/cubieclicker.html @@ -0,0 +1,27 @@ + + + + + + Cubie Clicker + + + + + +
+ + + +
+
+
+

Cubie Clicker

+

v0.0.1

+
+

One day, a magical package shows up at your house containing all 43,252,003,274,489,856,000 (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?

+ +
+
+ + diff --git a/cubieclicker.js b/cubieclicker.js new file mode 100644 index 0000000..b4b5509 --- /dev/null +++ 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()); +}