commit 53465744a2c1ded8a7615bf66981a9ae30ceff58
Author: root <root@hub.scroll.pub>
Date: 2025-01-14 01:58:29 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..c5637de
--- /dev/null
+++ b/body.html
@@ -0,0 +1,25 @@
+<header>
+ <h1>SimCity Scroll</h1>
+ <p>Build your dream city in the browser!</p>
+</header>
+
+<main>
+ <div class="game-container">
+ <div class="grid"></div>
+ <div class="controls">
+ <button id="residential">🏠 Residential</button>
+ <button id="commercial">🏬 Commercial</button>
+ <button id="industrial">🏭 Industrial</button>
+ <button id="road">🛣️ Road</button>
+ <button id="demolish">💥 Demolish</button>
+ </div>
+ <div class="stats">
+ <p>Population: <span id="population">0</span></p>
+ <p>Funds: $<span id="funds">10000</span></p>
+ </div>
+ </div>
+</main>
+
+<footer>
+ <p>Built with ❤️ using Scroll</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..01098be
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://simcity.scroll.pub
+metaTags
+editButton /edit.html
+title SimCity Scroll - Build Your Dream City
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..84f668f
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "d319eb58-9ea4-4fe7-95da-50422a97c4c6",
+ "object": "chat.completion",
+ "created": 1736819886,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nsimcity.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://simcity.scroll.pub\nmetaTags\neditButton /edit.html\ntitle SimCity Scroll - Build Your Dream City\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>SimCity Scroll</h1>\n <p>Build your dream city in the browser!</p>\n</header>\n\n<main>\n <div class=\"game-container\">\n <div class=\"grid\"></div>\n <div class=\"controls\">\n <button id=\"residential\">🏠 Residential</button>\n <button id=\"commercial\">🏬 Commercial</button>\n <button id=\"industrial\">🏭 Industrial</button>\n <button id=\"road\">🛣️ Road</button>\n <button id=\"demolish\">💥 Demolish</button>\n </div>\n <div class=\"stats\">\n <p>Population: <span id=\"population\">0</span></p>\n <p>Funds: $<span id=\"funds\">10000</span></p>\n </div>\n </div>\n</main>\n\n<footer>\n <p>Built with ❤️ using Scroll</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #1a73e8;\n --secondary-color: #fbbc04;\n --background-color: #f5f5f5;\n --grid-color: #e0e0e0;\n --text-color: #202124;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nheader h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\n.game-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 2rem;\n gap: 2rem;\n}\n\n.grid {\n display: grid;\n grid-template-columns: repeat(20, 20px);\n grid-template-rows: repeat(20, 20px);\n gap: 1px;\n background-color: var(--grid-color);\n border: 2px solid var(--text-color);\n}\n\n.grid div {\n width: 20px;\n height: 20px;\n background-color: white;\n cursor: pointer;\n}\n\n.controls {\n display: flex;\n gap: 1rem;\n flex-wrap: wrap;\n justify-content: center;\n}\n\nbutton {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 4px;\n background-color: var(--primary-color);\n color: white;\n font-size: 1rem;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #1557b0;\n}\n\n.stats {\n text-align: center;\n font-size: 1.2rem;\n}\n\nfooter {\n background-color: var(--primary-color);\n color: white;\n text-align: center;\n padding: 1rem;\n}\n\n@media (max-width: 768px) {\n .grid {\n grid-template-columns: repeat(10, 20px);\n grid-template-rows: repeat(10, 20px);\n }\n}\n\n---script.js---\nconst grid = document.querySelector('.grid');\nconst populationDisplay = document.getElementById('population');\nconst fundsDisplay = document.getElementById('funds');\nconst buttons = document.querySelectorAll('.controls button');\n\nlet selectedTool = null;\nlet population = 0;\nlet funds = 10000;\n\n// Create grid\nfor (let i = 0; i < 400; i++) {\n const cell = document.createElement('div');\n cell.addEventListener('click', () => placeBuilding(cell));\n grid.appendChild(cell);\n}\n\n// Set up tools\nbuttons.forEach(button => {\n button.addEventListener('click', () => {\n selectedTool = button.id;\n buttons.forEach(btn => btn.classList.remove('active'));\n button.classList.add('active');\n });\n});\n\nfunction placeBuilding(cell) {\n if (selectedTool === 'demolish') {\n cell.className = '';\n return;\n }\n\n if (cell.classList.length > 0) return;\n\n const cost = {\n residential: 500,\n commercial: 1000,\n industrial: 1500,\n road: 100\n }[selectedTool];\n\n if (funds < cost) {\n alert('Not enough funds!');\n return;\n }\n\n funds -= cost;\n fundsDisplay.textContent = funds;\n\n cell.classList.add(selectedTool);\n\n if (selectedTool === 'residential') {\n population += 10;\n populationDisplay.textContent = population;\n }\n}\n\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 242,
+ "completion_tokens": 1128,
+ "total_tokens": 1370,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 242
+ },
+ "system_fingerprint": "fp_3a5770e1b4"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..a6cbc18
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# simcity.scroll.pub
+
+website generated by DeepSeek from prompt: a simcity game that works in browser
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..add1fb2
--- /dev/null
+++ b/script.js
@@ -0,0 +1,55 @@
+const grid = document.querySelector('.grid');
+const populationDisplay = document.getElementById('population');
+const fundsDisplay = document.getElementById('funds');
+const buttons = document.querySelectorAll('.controls button');
+
+let selectedTool = null;
+let population = 0;
+let funds = 10000;
+
+// Create grid
+for (let i = 0; i < 400; i++) {
+ const cell = document.createElement('div');
+ cell.addEventListener('click', () => placeBuilding(cell));
+ grid.appendChild(cell);
+}
+
+// Set up tools
+buttons.forEach(button => {
+ button.addEventListener('click', () => {
+ selectedTool = button.id;
+ buttons.forEach(btn => btn.classList.remove('active'));
+ button.classList.add('active');
+ });
+});
+
+function placeBuilding(cell) {
+ if (selectedTool === 'demolish') {
+ cell.className = '';
+ return;
+ }
+
+ if (cell.classList.length > 0) return;
+
+ const cost = {
+ residential: 500,
+ commercial: 1000,
+ industrial: 1500,
+ road: 100
+ }[selectedTool];
+
+ if (funds < cost) {
+ alert('Not enough funds!');
+ return;
+ }
+
+ funds -= cost;
+ fundsDisplay.textContent = funds;
+
+ cell.classList.add(selectedTool);
+
+ if (selectedTool === 'residential') {
+ population += 10;
+ populationDisplay.textContent = population;
+ }
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..75a1f2d
--- /dev/null
+++ b/style.css
@@ -0,0 +1,101 @@
+:root {
+ --primary-color: #1a73e8;
+ --secondary-color: #fbbc04;
+ --background-color: #f5f5f5;
+ --grid-color: #e0e0e0;
+ --text-color: #202124;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ background-color: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+}
+
+header h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.game-container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 2rem;
+ gap: 2rem;
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: repeat(20, 20px);
+ grid-template-rows: repeat(20, 20px);
+ gap: 1px;
+ background-color: var(--grid-color);
+ border: 2px solid var(--text-color);
+}
+
+.grid div {
+ width: 20px;
+ height: 20px;
+ background-color: white;
+ cursor: pointer;
+}
+
+.controls {
+ display: flex;
+ gap: 1rem;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+button {
+ padding: 0.75rem 1.5rem;
+ border: none;
+ border-radius: 4px;
+ background-color: var(--primary-color);
+ color: white;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+button:hover {
+ background-color: #1557b0;
+}
+
+.stats {
+ text-align: center;
+ font-size: 1.2rem;
+}
+
+footer {
+ background-color: var(--primary-color);
+ color: white;
+ text-align: center;
+ padding: 1rem;
+}
+
+@media (max-width: 768px) {
+ .grid {
+ grid-template-columns: repeat(10, 20px);
+ grid-template-rows: repeat(10, 20px);
+ }
+}