commit eb76f4ffa753d021ba082419acac1acd68c03e76
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 19:55:59 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..1d32528
--- /dev/null
+++ b/body.html
@@ -0,0 +1,52 @@
+<header>
+ <nav>
+ <div class="nav-container">
+ <a href="#" class="logo">Life<span>Sim</span></a>
+ <div class="nav-links">
+ <a href="#about" class="active">About</a>
+ <a href="#background">Background</a>
+ <a href="#team">Team</a>
+ <a href="#careers">Careers</a>
+ </div>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="simulation">
+ <div class="controls">
+ <button id="startBtn">Start</button>
+ <button id="clearBtn">Clear</button>
+ <button id="randomBtn">Random</button>
+ <div class="speed-control">
+ <label for="speed">Speed:</label>
+ <input type="range" id="speed" min="1" max="10" value="5">
+ </div>
+ </div>
+ <canvas id="gameCanvas"></canvas>
+ </section>
+
+ <section id="about" class="content-section">
+ <h2>About</h2>
+ <p>Experience Conway's Game of Life - a fascinating cellular automaton that demonstrates how complex patterns can emerge from simple rules. Click cells to create life, then watch as generations evolve.</p>
+ </section>
+
+ <section id="background" class="content-section">
+ <h2>Background</h2>
+ <p>Developed by mathematician John Conway in 1970, this zero-player game explores mathematical beauty through cellular evolution. Each cell lives or dies based on its neighbors, creating mesmerizing patterns.</p>
+ </section>
+
+ <section id="team" class="content-section">
+ <h2>Team</h2>
+ <p>Our team of mathematicians and developers are passionate about bringing cellular automata to life through interactive simulations.</p>
+ </section>
+
+ <section id="careers" class="content-section">
+ <h2>Careers</h2>
+ <p>Join us in exploring the intersection of mathematics and interactive visualization. We're always looking for creative minds to expand our horizons.</p>
+ </section>
+</main>
+
+<footer>
+ <p>Created with passion by the LifeSim Team</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..d07b55b
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://conway.scroll.pub
+metaTags
+editButton /edit.html
+title Conway's Game of Life - Interactive Simulation
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..c6c784c
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01TkY2Y257zVka6cRKKfZ4oj",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a website implementing Conway's Game of Life with a modern, elegant design:\n\n---domain---\nconway.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://conway.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Conway's Game of Life - Interactive Simulation\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"nav-container\">\n <a href=\"#\" class=\"logo\">Life<span>Sim</span></a>\n <div class=\"nav-links\">\n <a href=\"#about\" class=\"active\">About</a>\n <a href=\"#background\">Background</a>\n <a href=\"#team\">Team</a>\n <a href=\"#careers\">Careers</a>\n </div>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"simulation\">\n <div class=\"controls\">\n <button id=\"startBtn\">Start</button>\n <button id=\"clearBtn\">Clear</button>\n <button id=\"randomBtn\">Random</button>\n <div class=\"speed-control\">\n <label for=\"speed\">Speed:</label>\n <input type=\"range\" id=\"speed\" min=\"1\" max=\"10\" value=\"5\">\n </div>\n </div>\n <canvas id=\"gameCanvas\"></canvas>\n </section>\n\n <section id=\"about\" class=\"content-section\">\n <h2>About</h2>\n <p>Experience Conway's Game of Life - a fascinating cellular automaton that demonstrates how complex patterns can emerge from simple rules. Click cells to create life, then watch as generations evolve.</p>\n </section>\n\n <section id=\"background\" class=\"content-section\">\n <h2>Background</h2>\n <p>Developed by mathematician John Conway in 1970, this zero-player game explores mathematical beauty through cellular evolution. Each cell lives or dies based on its neighbors, creating mesmerizing patterns.</p>\n </section>\n\n <section id=\"team\" class=\"content-section\">\n <h2>Team</h2>\n <p>Our team of mathematicians and developers are passionate about bringing cellular automata to life through interactive simulations.</p>\n </section>\n\n <section id=\"careers\" class=\"content-section\">\n <h2>Careers</h2>\n <p>Join us in exploring the intersection of mathematics and interactive visualization. We're always looking for creative minds to expand our horizons.</p>\n </section>\n</main>\n\n<footer>\n <p>Created with passion by the LifeSim Team</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #3498db;\n --bg-color: #f9f9f9;\n --text-color: #333;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--bg-color);\n}\n\nheader {\n background: var(--primary-color);\n padding: 1rem 0;\n position: sticky;\n top: 0;\n z-index: 100;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n.nav-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n color: white;\n text-decoration: none;\n font-weight: bold;\n}\n\n.logo span {\n color: var(--accent-color);\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n margin-left: 2rem;\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n.simulation {\n max-width: 800px;\n margin: 2rem auto;\n padding: 1rem;\n}\n\ncanvas {\n width: 100%;\n height: 60vh;\n background: white;\n border-radius: 8px;\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n}\n\n.controls {\n margin-bottom: 1rem;\n display: flex;\n gap: 1rem;\n align-items: center;\n flex-wrap: wrap;\n}\n\nbutton {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 4px;\n background: var(--accent-color);\n color: white;\n cursor: pointer;\n transition: transform 0.2s, background 0.2s;\n}\n\nbutton:hover {\n transform: translateY(-2px);\n background: #2980b9;\n}\n\n.speed-control {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.content-section {\n max-width: 800px;\n margin: 4rem auto;\n padding: 0 1rem;\n}\n\nh2 {\n color: var(--primary-color);\n margin-bottom: 1rem;\n}\n\nfooter {\n background: var(--primary-color);\n color: white;\n text-align: center;\n padding: 2rem;\n margin-top: 4rem;\n}\n\n@media (max-width: 768px) {\n .nav-container {\n flex-direction: column;\n gap: 1rem;\n }\n \n .nav-links {\n display: flex;\n gap: 1rem;\n }\n \n .nav-links a {\n margin-left: 0;\n }\n \n .simulation {\n padding: 0.5rem;\n }\n \n canvas {\n height: 50vh;\n }\n}\n\n---script.js---\nclass GameOfLife {\n constructor(canvas) {\n this.canvas = canvas;\n this.ctx = canvas.getContext('2d');\n this.cellSize = 10;\n this.running = false;\n this.speed = 5;\n \n this.resizeCanvas();\n this.initGrid();\n this.addEventListeners();\n \n window.addEventListener('resize', () => this.resizeCanvas());\n }\n\n resizeCanvas() {\n this.canvas.width = this.canvas.offsetWidth;\n this.canvas.height = this.canvas.offsetHeight;\n this.cols = Math.floor(this.canvas.width / this.cellSize);\n this.rows = Math.floor(this.canvas.height / this.cellSize);\n this.initGrid();\n this.draw();\n }\n\n initGrid() {\n this.grid = Array(this.rows).fill().map(() => \n Array(this.cols).fill(false)\n );\n }\n\n addEventListeners() {\n this.canvas.addEventListener('click', (e) => {\n const rect = this.canvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n const col = Math.floor(x / this.cellSize);\n const row = Math.floor(y / this.cellSize);\n this.grid[row][col] = !this.grid[row][col];\n this.draw();\n });\n\n document.getElementById('startBtn').addEventListener('click', () => {\n this.running = !this.running;\n document.getElementById('startBtn').textContent = this.running ? 'Stop' : 'Start';\n if (this.running) this.animate();\n });\n\n document.getElementById('clearBtn').addEventListener('click', () => {\n this.initGrid();\n this.draw();\n });\n\n document.getElementById('randomBtn').addEventListener('click', () => {\n this.grid = this.grid.map(row => \n row.map(() => Math.random() > 0.8)\n );\n this.draw();\n });\n\n document.getElementById('speed').addEventListener('input', (e) => {\n this.speed = e.target.value;\n });\n }\n\n countNeighbors(row, col) {\n let count = 0;\n for (let i = -1; i <= 1; i++) {\n for (let j = -1; j <= 1; j++) {\n if (i === 0 && j === 0) continue;\n const r = (row + i + this.rows) % this.rows;\n const c = (col + j + this.cols) % this.cols;\n if (this.grid[r][c]) count++;\n }\n }\n return count;\n }\n\n nextGeneration() {\n const newGrid = Array(this.rows).fill().map(() => \n Array(this.cols).fill(false)\n );\n\n for (let row = 0; row < this.rows; row++) {\n for (let col = 0; col < this.cols; col++) {\n const neighbors = this.countNeighbors(row, col);\n if (this.grid[row][col]) {\n newGrid[row][col] = neighbors === 2 || neighbors === 3;\n } else {\n newGrid[row][col] = neighbors === 3;\n }\n }\n }\n\n this.grid = newGrid;\n }\n\n draw() {\n this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n \n for (let row = 0; row < this.rows; row++) {\n for (let col = 0; col < this.cols; col++) {\n if (this.grid[row][col]) {\n this.ctx.fillStyle = '#3498db';\n this.ctx.fillRect(\n col * this.cellSize,\n row * this.cellSize,\n this.cellSize - 1,\n this.cellSize - 1\n );\n }\n }\n }\n }\n\n animate() {\n if (!this.running) return;\n this.nextGeneration();\n this.draw();\n setTimeout(() => requestAnimationFrame(() => this.animate()), 1000 / this.speed);\n }\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const canvas = document.getElementById('gameCanvas');\n new GameOfLife(canvas);\n});\n\n---end---\n\nThis implementation features:\n- A smooth, modern interface with pleasing animations\n- Responsive design that works on all devices\n- Interactive canvas with click-to-toggle cells\n- Controls for starting/stopping, clearing, randomizing, and speed adjustment\n- Clean, semantic HTML structure\n- Beautiful color scheme and visual effects\n- Smooth animations and transitions\n- Accessible navigation and controls\n- Optimized performance\n- Clear section organization\n\nThe Game of Life simulation runs smoothly and allows users to create patterns by clicking cells. The speed control allows for adjustment of the simulation rate, and the random button generates interesting starting patterns."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 311,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2845
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..1c1d2aa
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# conway.scroll.pub
+Website generated by Claude from prompt: make me a website with an interactive simulation of conways game of life. make the graphics really pleasing. give it 4 tabs to click on (about, background, team, and careers)
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..a97a1da
--- /dev/null
+++ b/script.js
@@ -0,0 +1,126 @@
+class GameOfLife {
+ constructor(canvas) {
+ this.canvas = canvas;
+ this.ctx = canvas.getContext('2d');
+ this.cellSize = 10;
+ this.running = false;
+ this.speed = 5;
+
+ this.resizeCanvas();
+ this.initGrid();
+ this.addEventListeners();
+
+ window.addEventListener('resize', () => this.resizeCanvas());
+ }
+
+ resizeCanvas() {
+ this.canvas.width = this.canvas.offsetWidth;
+ this.canvas.height = this.canvas.offsetHeight;
+ this.cols = Math.floor(this.canvas.width / this.cellSize);
+ this.rows = Math.floor(this.canvas.height / this.cellSize);
+ this.initGrid();
+ this.draw();
+ }
+
+ initGrid() {
+ this.grid = Array(this.rows).fill().map(() =>
+ Array(this.cols).fill(false)
+ );
+ }
+
+ addEventListeners() {
+ this.canvas.addEventListener('click', (e) => {
+ const rect = this.canvas.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+ const col = Math.floor(x / this.cellSize);
+ const row = Math.floor(y / this.cellSize);
+ this.grid[row][col] = !this.grid[row][col];
+ this.draw();
+ });
+
+ document.getElementById('startBtn').addEventListener('click', () => {
+ this.running = !this.running;
+ document.getElementById('startBtn').textContent = this.running ? 'Stop' : 'Start';
+ if (this.running) this.animate();
+ });
+
+ document.getElementById('clearBtn').addEventListener('click', () => {
+ this.initGrid();
+ this.draw();
+ });
+
+ document.getElementById('randomBtn').addEventListener('click', () => {
+ this.grid = this.grid.map(row =>
+ row.map(() => Math.random() > 0.8)
+ );
+ this.draw();
+ });
+
+ document.getElementById('speed').addEventListener('input', (e) => {
+ this.speed = e.target.value;
+ });
+ }
+
+ countNeighbors(row, col) {
+ let count = 0;
+ for (let i = -1; i <= 1; i++) {
+ for (let j = -1; j <= 1; j++) {
+ if (i === 0 && j === 0) continue;
+ const r = (row + i + this.rows) % this.rows;
+ const c = (col + j + this.cols) % this.cols;
+ if (this.grid[r][c]) count++;
+ }
+ }
+ return count;
+ }
+
+ nextGeneration() {
+ const newGrid = Array(this.rows).fill().map(() =>
+ Array(this.cols).fill(false)
+ );
+
+ for (let row = 0; row < this.rows; row++) {
+ for (let col = 0; col < this.cols; col++) {
+ const neighbors = this.countNeighbors(row, col);
+ if (this.grid[row][col]) {
+ newGrid[row][col] = neighbors === 2 || neighbors === 3;
+ } else {
+ newGrid[row][col] = neighbors === 3;
+ }
+ }
+ }
+
+ this.grid = newGrid;
+ }
+
+ draw() {
+ this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+ for (let row = 0; row < this.rows; row++) {
+ for (let col = 0; col < this.cols; col++) {
+ if (this.grid[row][col]) {
+ this.ctx.fillStyle = '#3498db';
+ this.ctx.fillRect(
+ col * this.cellSize,
+ row * this.cellSize,
+ this.cellSize - 1,
+ this.cellSize - 1
+ );
+ }
+ }
+ }
+ }
+
+ animate() {
+ if (!this.running) return;
+ this.nextGeneration();
+ this.draw();
+ setTimeout(() => requestAnimationFrame(() => this.animate()), 1000 / this.speed);
+ }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ const canvas = document.getElementById('gameCanvas');
+ new GameOfLife(canvas);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..74d0dc5
--- /dev/null
+++ b/style.css
@@ -0,0 +1,145 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #3498db;
+ --bg-color: #f9f9f9;
+ --text-color: #333;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--bg-color);
+}
+
+header {
+ background: var(--primary-color);
+ padding: 1rem 0;
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.nav-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+
+.logo span {
+ color: var(--accent-color);
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: color 0.3s;
+}
+
+.nav-links a:hover {
+ color: var(--accent-color);
+}
+
+.simulation {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 1rem;
+}
+
+canvas {
+ width: 100%;
+ height: 60vh;
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+}
+
+.controls {
+ margin-bottom: 1rem;
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+button {
+ padding: 0.5rem 1rem;
+ border: none;
+ border-radius: 4px;
+ background: var(--accent-color);
+ color: white;
+ cursor: pointer;
+ transition: transform 0.2s, background 0.2s;
+}
+
+button:hover {
+ transform: translateY(-2px);
+ background: #2980b9;
+}
+
+.speed-control {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.content-section {
+ max-width: 800px;
+ margin: 4rem auto;
+ padding: 0 1rem;
+}
+
+h2 {
+ color: var(--primary-color);
+ margin-bottom: 1rem;
+}
+
+footer {
+ background: var(--primary-color);
+ color: white;
+ text-align: center;
+ padding: 2rem;
+ margin-top: 4rem;
+}
+
+@media (max-width: 768px) {
+ .nav-container {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 1rem;
+ }
+
+ .nav-links a {
+ margin-left: 0;
+ }
+
+ .simulation {
+ padding: 0.5rem;
+ }
+
+ canvas {
+ height: 50vh;
+ }
+}