Game of Life Explanation

\n Conway's Game of Life is a cellular automaton simulation where cells on a grid evolve over time based on\n simple rules:\n

Any live cell with fewer than two live neighbors dies (underpopulation)
Any live cell with two or three live neighbors lives on to the next generation
Any live cell with more than three live neighbors dies (overpopulation)
Any dead cell with exactly three live neighbors becomes a live cell (reproduction)

Common Patterns:

\n Glider: A small pattern that moves diagonally across the grid\n
\n Blinker: A simple oscillator that alternates between vertical and horizontal lines\n
\n Toad: Another oscillator that appears to move back and forth\n
\n Beacon: An oscillator where two corners flash on and off\n
\n Gosper Glider Gun: A pattern that continuously produces gliders\n
\n Pulsar: A larger, more complex oscillator with a period of 3\n

\n Experiment with different patterns and see how they interact and evolve over time!\n

\n \n

\n );\n }, [showExplanation]);\n\n return (\n

Game of Life

\n {\n setRunning(!running);\n if (!running) {\n runningRef.current = true;\n runSimulation();\n }\n }}\n >\n {running ? \"⏹ Stop\" : \"▶ Start\"}\n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n

\n Conway's Game of Life is a cellular automaton where cells live or die based on simple rules:
\n Click cells to toggle their state. Use buttons to add patterns or fill the grid. Press Start to see the Game of\n Life in action!\n

\n \n

\n View on Val Town\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n window.addEventListener(\"DOMContentLoaded\", (event) => {\n client();\n });\n}\n\nasync function server(request: Request): Promise {\n return new Response(\n `\n \n \n Game of Life\n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: #f0f0f0;\n padding: 4px;\n}\nh1 {\n margin-bottom: 10px;\n padding: 8px;\n}\nbutton {\n margin: 5px;\n padding: 5px 10px;\n font-size: 16px;\n cursor: pointer;\n white-space: nowrap;\n}\ncanvas {\n border: 1px solid #000;\n margin-top: 10px;\n}\np {\n margin-top: 10px;\n text-align: center;\n}\n.heading {\n padding: 8px;\n}\n.control-button {\n font-weight: bold;\n padding: 8px 16px;\n margin: 5px;\n border-radius: 5px;\n border: none;\n cursor: pointer;\n}\n.start-stop {\n background-color: #4CAF50;\n color: white;\n}\n.clear {\n background-color: #f44336;\n color: white;\n}\n.pattern-button {\n background-color: #2196F3;\n color: white;\n padding: 6px 12px;\n margin: 3px;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n}\n.info-button {\n background-color: #FFC107;\n color: black;\n padding: 6px 12px;\n margin: 3px;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n font-weight: bold;\n}\n.dialog-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.dialog {\n background-color: white;\n padding: 20px;\n border-radius: 5px;\n max-width: 80%;\n max-height: 80%;\n overflow-y: auto;\n}\n.dialog h2 {\n margin-top: 0;\n}\n.dialog button {\n margin-top: 10px;\n}\n.dialog ul, .dialog ol {\n text-align: left;\n}\n.dialog li {\n margin-bottom: 5px;\n}\na {\n color: #2196F3;\n}\n`;\n\nexport default server;","deleted","label",[99],"permalink","https://www.val.town/x/dthyresson/gameOfLifeSite/code/main.tsx","extension","actionData","errors"]