From ceef02089255bff530caf138d5538256c63e34ca Mon Sep 17 00:00:00 2001 From: PGray <77597544+PGrayCS@users.noreply.github.com> Date: Tue, 17 Jun 2025 09:33:49 +0100 Subject: [PATCH] Enhance Paperfold Studio visuals --- paperfoldstudio/game.js | 34 ++++++++++++++++ paperfoldstudio/index.html | 4 ++ paperfoldstudio/style.css | 81 +++++++++++++++++++++++++++++++++++--- 3 files changed, 113 insertions(+), 6 deletions(-) diff --git a/paperfoldstudio/game.js b/paperfoldstudio/game.js index dd2babe..a1889e8 100644 --- a/paperfoldstudio/game.js +++ b/paperfoldstudio/game.js @@ -13,6 +13,7 @@ const prestigeButton = document.getElementById('prestige-button'); const saveButton = document.getElementById('save-button'); const loadButton = document.getElementById('load-button'); const clearSaveButton = document.getElementById('clear-save-button'); +const progressBar = document.getElementById('progress-bar'); let foldCount = 0; let foldsPerClick = 1; @@ -44,6 +45,20 @@ function foldsPerSecond() { return assistantLevel * baseFoldsPerSecond * (1 + prestigeCount * prestigeBonus); } +function spawnConfetti() { + const confetti = document.createElement('div'); + confetti.className = 'confetti'; + const size = Math.random() * 6 + 4; + confetti.style.backgroundColor = `hsl(${Math.random() * 360},100%,60%)`; + confetti.style.width = `${size}px`; + confetti.style.height = `${size}px`; + const rect = foldButton.getBoundingClientRect(); + confetti.style.left = `${rect.left + rect.width / 2}px`; + confetti.style.top = `${rect.top}px`; + document.body.appendChild(confetti); + setTimeout(() => confetti.remove(), 1000); +} + function updateDisplay() { foldDisplay.textContent = `Folds: ${Math.floor(foldCount)}`; rateDisplay.textContent = `Folds/s: ${foldsPerSecond().toFixed(1)}`; @@ -51,6 +66,16 @@ function updateDisplay() { skillPointsEl.textContent = skillPoints; prestigeInfo.textContent = `Prestige count: ${prestigeCount}`; + const next = origamiSets.find(set => !set.completed); + if (next) { + const percent = Math.min((foldCount / next.cost) * 100, 100); + progressBar.style.width = percent + '%'; + progressBar.textContent = `${Math.floor(percent)}% to ${next.name}`; + } else { + progressBar.style.width = '100%'; + progressBar.textContent = 'All sets completed!'; + } + // Update sets setList.innerHTML = ''; origamiSets.forEach(set => { @@ -99,6 +124,9 @@ function checkSets() { if (!set.completed && foldCount >= set.cost) { set.completed = true; skillPoints += 1; + for (let i = 0; i < 10; i++) { + spawnConfetti(); + } } }); } @@ -122,6 +150,9 @@ function prestige() { origamiSets.forEach(set => set.completed = false); skills.forEach(skill => skill.purchased = false); updateDisplay(); + for (let i = 0; i < 20; i++) { + spawnConfetti(); + } } function resetGame() { @@ -181,6 +212,9 @@ function loadGame() { // Event wiring foldButton.addEventListener('click', () => { addFold(foldsPerClick); + for (let i = 0; i < 5; i++) { + spawnConfetti(); + } }); hireAssistantButton.addEventListener('click', hireAssistant); diff --git a/paperfoldstudio/index.html b/paperfoldstudio/index.html index 6850652..752bde1 100644 --- a/paperfoldstudio/index.html +++ b/paperfoldstudio/index.html @@ -3,12 +3,16 @@ Paperfold Studio Web + + +

Paperfold Studio

Folds: 0
+
Folds/s: 0
diff --git a/paperfoldstudio/style.css b/paperfoldstudio/style.css index b147410..85486ad 100644 --- a/paperfoldstudio/style.css +++ b/paperfoldstudio/style.css @@ -1,26 +1,82 @@ +:root { + --primary: #ff5d8f; + --secondary: #5dc7ff; +} + body { - font-family: Arial, sans-serif; + font-family: 'Roboto', sans-serif; text-align: center; - margin-top: 50px; + background: radial-gradient(circle at top, #222, #111); + color: #fafafa; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + margin: 0; } + #game-container { + position: relative; display: inline-block; - padding: 20px; - border: 2px solid #333; - border-radius: 8px; + padding: 20px 40px; + border-radius: 10px; + background: rgba(0, 0, 0, 0.6); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); +} + +h1 { + font-family: 'Press Start 2P', cursive; + font-size: 32px; + margin-bottom: 20px; + color: var(--primary); + text-shadow: 0 0 10px var(--secondary); } + #fold-display { font-size: 24px; margin: 20px; } + +#fold-progress { + background: #444; + border-radius: 4px; + height: 20px; + margin: 0 20px 10px; + overflow: hidden; +} + +#progress-bar { + height: 100%; + width: 0; + background: linear-gradient(90deg, var(--primary), var(--secondary)); + color: #000; + line-height: 20px; + font-size: 12px; + text-align: center; + transition: width 0.3s ease; +} + button { + font-family: inherit; font-size: 18px; padding: 10px 20px; margin: 5px; cursor: pointer; + border: none; + color: #fff; + background: linear-gradient(90deg, var(--primary), var(--secondary)); + border-radius: 6px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + transition: transform 0.1s ease, box-shadow 0.2s ease; } + button:hover { - background-color: #eee; + transform: scale(1.05); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); +} + +button:active { + transform: scale(0.95); } ul { @@ -41,3 +97,16 @@ li { color: #555; margin-top: 5px; } + +.confetti { + position: absolute; + width: 8px; + height: 8px; + pointer-events: none; + animation: confetti-fall 1s linear forwards; +} + +@keyframes confetti-fall { + 0% { opacity: 1; transform: translateY(0) rotate(0deg); } + 100% { opacity: 0; transform: translateY(200px) rotate(720deg); } +}