diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..dff1d1e --- /dev/null +++ b/src/index.html @@ -0,0 +1,24 @@ + + + + + + Mystery Spinner + + + + +
+

The Mystery Spinner!

+

Try to spin a "1" - but beware, ye evil pirate matey is out to get ya!

+

I've painted ye spinner here with white paint. Ye won't know what ye will get!

+ + +
+
+ + + \ No newline at end of file diff --git a/src/script.js b/src/script.js new file mode 100644 index 0000000..9ca3ff6 --- /dev/null +++ b/src/script.js @@ -0,0 +1,57 @@ +const spinner = document.getElementById("spinner"); +const resultdiv = document.getElementById("result"); +const spinButton = document.getElementById("spinButton"); + +const emojis = ["🤑", "🥶", "🤢", "😈"]; +const evilMessages = ["Oop, try again matey!", "Ho ho ho!"]; + +function generateSegments() { + spinner.innerHTML = ""; + const numSegments = Math.floor(Math.random() * 5) + 6; + for (let i = 0; i < numSegments; i++) { + const segment = document.createElement("div"); + segment.className = "spinner-segment"; + const randomValue = Math.random(); + segment.textContent = + randomValue < 0.2 + ? emojis[Math.floor(Math.random() * emojis.length)] + : randomValue < 0.25 + ? "1" + : Math.floor(Math.random() * 10) + 2; + + segment.style.transform = `rotate(${(360 / numSegments) * i}deg)`; + segment.style.transform += ` translateY(-50%)` + //segment.innerHTML = `${value}`; + spinner.appendChild(segment) + } +} + +function spinWheel() { + const spinDegrees = Math.floor(Math.random() * 5000) + 2000; + const selectedSegmentIndex = Math.floor(Math.random() * spinner.children.length); + const selectedSegment = spinner.children[selectedSegmentIndex]; + + spinner.style.transition = "transform 4s cubic-bezier(0.25, 0.1, 0.25, 1)"; + spinner.style.transform = `rotate(${spinDegrees}deg)`; + setTimeout(() => { + const value = selectedSegment.textContent; + if (value === "1") { + resultdiv.innerHTML = `

You Win!

`; + } else if (emojis.includes(value)) { + resultdiv.innerHTML = `

You got "${value}"! (Still not 1 though >:) )

` + } else { + resultdiv.innerHTML = `

${evilMessages[Math.floor(Math.random() * evilMessages.length)]}

` + } + spinButton.disabled = false; + }, 4000); +} + +spinButton.addEventListener("click", () => { + resultdiv.innerHTML = ""; + spinButton.disabled = true; + generateSegments(); + spinWheel(); +}); + +// init +generateSegments(); \ No newline at end of file diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..ba7bd9f --- /dev/null +++ b/src/styles.css @@ -0,0 +1,81 @@ +body { + font-family: Arial, Helvetica, sans-serif; + background-image: url(wood.avif); +} + +h1 { + padding: 10px; + color: black; + background-color: whitesmoke; + border-radius: 10px; +} + +p { + padding: 5px; + color: black; + background-color: whitesmoke; + border-radius: 10px; +} + +#result { + padding: 10px; + color: black; + background-color: whitesmoke; + border-radius: 10px; +} + +.spinner-container { + position: relative; + width: 300px; + height: 300px; + margin: 0 auto; +} + +.spinner { + width: 300px; + height: 300px; + border-radius: 50%; + border: 10px solid #ccc; + position: relative; + overflow: hidden; + transform: rotate(-90deg); +} + +.spinner-segment { + position: absolute; + width: 100%; + height: 100%; + clip-path: polygon(50% 50%, 100% 0%, 100% 100%); + transform-origin: 50% 50%; + background-color: white; + display: flex; + border: 1px solid #ddd; + text-align: center; + line-height: 150px; + font-size: 14px; + transition: transform 4s ease; + color: black; +} +.spinner-segment span { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(-50deg); + text-align: center; + font-weight: bold; + color: black; +} + +.pointer { + width: 10px; + height: 60px; + background: red; + position: absolute; + top: 120px; + left: 145px; + z-index: 10; +} + +#spinButton { + margin-top: 20px; +} \ No newline at end of file diff --git a/src/wood.avif b/src/wood.avif new file mode 100644 index 0000000..039ca0d Binary files /dev/null and b/src/wood.avif differ