Mae's website :3 maemoon.me
personal website svelte sveltekit
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Improved clicker logic and formatting

+140 -127
+27 -127
src/routes/experiments/click/+page.svelte
··· 1 1 <script> 2 - let score = $state(0); 3 - let clickPower = $state(1); 4 - let upgradePrice = $state(50); 5 - let featuresUnlocked = $state([]); 6 - let autoclickPower = $state(0); 7 - let autoUpgradePrice = $state(500); 8 - 9 - let code = $derived.by(() => { 10 - if (featuresUnlocked.includes(1)) { 11 - return `// click v0.1 12 - // by Mae Moon 13 - // TODO: add saving 2 + import Codedisplay from "./lib/codedisplay.svelte"; 14 3 15 - function click() { 16 - score += ${clickPower}; 17 - // TODO: add new stuff 18 - } 19 - 20 - function upgrade() { 21 - if (score >= ${upgradePrice}) { 22 - score -= ${upgradePrice}; 23 - clickPower += 1; 24 - upgradePrice *= 2; 25 - } 26 - } 27 - 28 - function upgradeAuto() { 29 - if (score >= ${autoUpgradePrice}) { 30 - score -= ${autoUpgradePrice}; 31 - autoclickPower += 1; 32 - autoUpgradePrice *= 3; 33 - } 34 - } 35 - 36 - function autoclick() { 37 - score += ${autoclickPower}; 38 - } 39 - 40 - setInterval(autoclick, 1000);`; 41 - } 42 - if (featuresUnlocked.includes(0)) { 43 - return `// click v0.1 44 - // by Mae Moon 45 - // TODO: add saving 46 - 47 - function click() { 48 - score += ${clickPower}; 49 - if (score >= 300) { 50 - unlockNewFeature(); 51 - } 52 - } 53 - 54 - function upgrade() { 55 - if (score >= ${upgradePrice}) { 56 - score -= ${upgradePrice}; 57 - clickPower += 1; 58 - upgradePrice *= 2; 59 - } 60 - }`; 61 - } 62 - return `// click v0.1 63 - // by Mae Moon 64 - // TODO: add saving 65 - 66 - function click() { 67 - score += 1; 68 - if (score >= 25) { 69 - unlockNewFeature(); 70 - } 71 - }`; 72 - }); 4 + let game = $state({ 5 + score: 0, 6 + clickPower: 1, 7 + upgradePrice: 50, 8 + featuresUnlocked: [], 9 + autoclickPower: 0, 10 + autoUpgradePrice: 500 11 + }) 73 12 74 13 function click() { 75 - score += clickPower; 76 - if (score >= 25 && !featuresUnlocked.includes(0)) { 77 - featuresUnlocked = [...featuresUnlocked, 0]; 14 + game.score += game.clickPower; 15 + if (game.score >= 25 && !game.featuresUnlocked.includes(0)) { 16 + game.featuresUnlocked = [...game.featuresUnlocked, 0]; 78 17 } 79 - if (score >= 300 && !featuresUnlocked.includes[1]) { 80 - featuresUnlocked = [...featuresUnlocked, 1]; 18 + if (game.score >= 300 && !game.featuresUnlocked.includes[1]) { 19 + game.featuresUnlocked = [...game.featuresUnlocked, 1]; 81 20 } 82 21 } 83 22 84 23 function upgrade() { 85 - if (score >= upgradePrice) { 86 - score -= upgradePrice; 87 - clickPower += 1; 88 - upgradePrice *= 2; 24 + if (game.score >= game.upgradePrice) { 25 + game.score -= game.upgradePrice; 26 + game.clickPower += 1; 27 + game.upgradePrice *= 2; 89 28 } 90 29 } 91 30 92 31 function upgradeAuto() { 93 - if (score >= autoUpgradePrice) { 94 - score -= autoUpgradePrice; 95 - autoclickPower += 1; 96 - autoUpgradePrice *= 3; 32 + if (game.score >= game.autoUpgradePrice) { 33 + game.score -= game.autoUpgradePrice; 34 + game.autoclickPower += 1; 35 + game.autoUpgradePrice *= 3; 97 36 } 98 37 } 99 38 100 39 function autoclick() { 101 - score += autoclickPower; 40 + game.score += game.autoclickPower; 102 41 } 103 42 104 43 setInterval(autoclick, 1000); 105 44 </script> 106 45 107 - <h1>{score == 0 ? 'Click' : score}</h1> 46 + <h1>{game.score == 0 ? 'Click' : game.score}</h1> 108 47 109 48 <div class="buttons"> 110 49 <button class="button" onclick={click}>click();</button> 111 - {#if featuresUnlocked.includes(0)} 50 + {#if game.featuresUnlocked.includes(0)} 112 51 <button class="button" onclick={upgrade}>upgrade();</button> 113 52 {/if} 114 - {#if featuresUnlocked.includes(1)} 53 + {#if game.featuresUnlocked.includes(1)} 115 54 <button class="button" onclick={upgradeAuto}>upgradeAuto();</button> 116 55 {/if} 117 56 </div> 118 - <div class="code-block"> 119 - <div class="code-header"> 120 - <span class="file-name">game.js</span> 121 - </div> 122 - <code>{code}</code> 123 - </div> 57 + <Codedisplay {game}></Codedisplay> 124 58 125 59 <style> 126 60 .buttons { ··· 128 62 gap: 1rem; 129 63 align-items: flex-start; 130 64 margin: 1em 0; 131 - } 132 - 133 - .code-block { 134 - background-color: var(--color-fg-1); 135 - border-radius: 8px; 136 - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 137 - overflow: hidden; 138 - margin: 0; 139 - padding: 0; 140 - color: var(--color-bg); 141 - font-family: monospace; 142 - font-size: 1rem; 143 - line-height: 1.5; 144 - overflow-x: auto; 145 - } 146 - 147 - .code-header { 148 - display: flex; 149 - justify-content: space-between; 150 - align-items: center; 151 - padding: 0.5rem 1rem; 152 - background-color: rgba(0, 0, 0, 0.1); 153 - border-bottom: 1px solid rgba(0, 0, 0, 0.1); 154 - } 155 - 156 - .file-name { 157 - font-size: 0.9rem; 158 - opacity: 0.8; 159 - } 160 - 161 - code { 162 - display: block; 163 - padding: 1.5rem; 164 - white-space: pre; 165 65 } 166 66 167 67 .button {
+105
src/routes/experiments/click/lib/codedisplay.svelte
··· 1 + <script> 2 + let { game } = $props(); 3 + 4 + let code = $derived.by(() => { 5 + // Header 6 + let codeString = `// click v0.1 7 + // by Mae Moon 8 + // TODO: add saving\n\n`; 9 + // Click 10 + if (game.featuresUnlocked.includes(1)) { 11 + codeString += `function click() { 12 + score += ${game.clickPower}; 13 + // TODO: add new stuff 14 + }` 15 + } else if (game.featuresUnlocked.includes(0)) { 16 + codeString += `function click() { 17 + score += ${game.clickPower}; 18 + if (score >= 300) { 19 + unlockNewFeature(); 20 + } 21 + }` 22 + } else { 23 + codeString += `function click() { 24 + score += ${game.clickPower}; 25 + if (score >= 25) { 26 + unlockNewFeature(); 27 + } 28 + }` 29 + } 30 + 31 + // Click Upgrade 32 + if (game.featuresUnlocked.includes(0)) { 33 + codeString += ` 34 + function upgrade() { 35 + if (score >= ${game.upgradePrice}) { 36 + score -= ${game.upgradePrice}; 37 + clickPower += 1; 38 + upgradePrice *= 2; 39 + } 40 + }` 41 + } 42 + 43 + // Autoclicker 44 + if (game.featuresUnlocked.includes(1)) { 45 + codeString += ` 46 + function upgradeAuto() { 47 + if (score >= ${game.autoUpgradePrice}) { 48 + score -= ${game.autoUpgradePrice}; 49 + autoclickPower += 1; 50 + autoUpgradePrice *= 3; 51 + } 52 + } 53 + 54 + function autoclick() { 55 + score += ${game.autoclickPower}; 56 + } 57 + 58 + setInterval(autoclick, 1000);` 59 + } 60 + return codeString; 61 + }); 62 + </script> 63 + 64 + <div class="code-block"> 65 + <div class="code-header"> 66 + <span class="file-name">game.js</span> 67 + </div> 68 + <code>{code}</code> 69 + </div> 70 + 71 + <style> 72 + .code-block { 73 + background-color: var(--color-fg-1); 74 + border-radius: 8px; 75 + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 76 + overflow: hidden; 77 + margin: 0; 78 + padding: 0; 79 + color: var(--color-bg); 80 + font-family: monospace; 81 + font-size: 1rem; 82 + line-height: 1.5; 83 + overflow-x: auto; 84 + } 85 + 86 + .code-header { 87 + display: flex; 88 + justify-content: space-between; 89 + align-items: center; 90 + padding: 0.5rem 1rem; 91 + background-color: rgba(0, 0, 0, 0.1); 92 + border-bottom: 1px solid rgba(0, 0, 0, 0.1); 93 + } 94 + 95 + .file-name { 96 + font-size: 0.9rem; 97 + opacity: 0.8; 98 + } 99 + 100 + code { 101 + display: block; 102 + padding: 1.5rem; 103 + white-space: pre; 104 + } 105 + </style>
+8
src/routes/experiments/click/unlocks.json
··· 1 + { 2 + "click_upgrade": { 3 + "requirement": 25 4 + }, 5 + "autoclicker": { 6 + "requirement": 300 7 + } 8 + }