Conway.js 1.0 - ready to publish pt 1.

frontend/src/app.css

@@ -40,6 +40,15 @@
             @apply invert drop-shadow-2xl transition-all duration-300 ease-in
         }
     }
+    .button {
+        @apply border-black border rounded bg-surface0 font-semibold transition-all ease-in-out duration-300
+    }
+    .button:hover {
+        @apply bg-overlay0 text-white drop-shadow-lg
+    }
+    .button:active {
+        @apply drop-shadow-md bg-overlay2
+    }
 }
 
 @layer components {

frontend/src/blogposts/conway.md

@@ -13,53 +13,60 @@ import Note from '../routes/components/Note.svelte'
 import Grid from '../routes/components/Grid.svelte'
 import { Models } from '../routes/components/Grid.svelte'
 import { NoteType } from '../routes/components/Note.svelte'
+
+const firstSeed = 'MCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMSwwLDAsMCwwLDAsMCwwLDAsMCwwLDEsMCwwLDAsMCwwLDAsMCwwLDAsMSwxLDAsMCwwLDAsMCwwLDAsMCwxLDAsMCwwLDAsMCwwLDAsMCwxLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMA=='
+
+const secondSeed = 'MCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMSwxLDEsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDA'
 </script>
 
-# What is cellular automata?
+# What is Conway's Game of Life?
+
+Conway's game of life is one of many cellular automaton.
+James Horton Conway, a British mathematician, devised the rules for his game of Life in 1970.
 
-According to Wikipedia:
-
+## What is a cellular automaton?
 
-<Quote source="https://en.wikipedia.org/wiki/Cellular_automaton">
-    A cellular automaton (pl. cellular automata, abbrev. CA) is a discrete model of computation 
-    studied in automata theory.
+A cellular automaton is defined as:
+
+<Quote source='https://en.wikipedia.org/wiki/Cellular_automaton'>
+    ... a discrete model of computation studied in automata theory.
 </Quote>
 
 What does that mean though?
 
 ## Grids
 
-Cellular automata are like grids, existing in any number of dimensions. For our example imagine a two-dimensional sheet of graph paper where each square is a cell.   
+Cellular automata are often represented as grids, arrays, or matrices in any number of dimensions. In our example, the grid below represents a system of cellular automata. Each square in this grid is a cell.
 
 <br/>
 
-<Grid size={5} resizable={false}/>
+<Grid size={5} isResizable={false}/>
 
 <br/>
 
-Cells have a finite number of states, usually on or off; "dead" or "alive". Cellular automata may have one or more transitional states. 
-In the basic cellular automata, cells will be either alive or dead. In more complex automata there are many transitional states.   
-In the example below, gray squares (state 0) are "dead" and sapphire-blue squares (state 1) are "alive". 
-You may experiment in toggling between these states by left-clicking on the cells. 
+## Cells
+
+Cells have a finite number of states. For now, we will describe cells as 'dead' or 'alive', though more complex cellular automata may have more than two states.
+<br/>
+We can represent living cells with a value of 1, and dead cells with a value of 0. In the example below, gray squares are 'dead' (state 0) and sapphire-blue squares are 'alive' (state 1). In more complex systems, we might represent the numerous transitional states with a sequence of colors, names, and/or numbers. In example below, you may experiment with toggling cell states by left-clicking any cell.
 
+<Grid size={7} isResizable={false} isStateVisible={false} isToggleable={true} isRandom={true} model={Models.CONWAY}/>
 <Note type={NoteType.NOTE}>
-I have included a toggle below for visualizing the numeric state of each cell.
+    Click the checkbox above to view the numeric state of the automata.
 </Note>
 
 
-<br/>
-
-<Grid size={8} resizable={true} showState={false} toggleable={true} randomFill={true} model={Models.CONWAY}/>
+## Generations
 
+A system of cellular automata will change states in discrete steps. The state at a given step is referred to as a generation. The rules that govern an automata define the transition from one generation to the next. These transitions between generations are pure functions. We won't discuss what that means here, but if you're curious you can <a href='https://en.wikipedia.org/wiki/Pure_function'>read more here</a>.
 <br/>
+You may already be familiar with this concept if you've ever studied state machines. To determine the state of the system at the next step, we can make observations about the current state of each cell and the cell's neighbors. For our purposes, the neighbors of a cell are the four spaces adjacent on the x or y axis and the four spaces adjacent on the diagonals between them. This neighborhood model is called a <a href='https://en.wikipedia.org/wiki/Moore_neighborhood'>Moore neighborhood.</a>
 
-A grid of cellular automata will change states in steps, sometimes referred to as generations, according to a specific set of rules. You may be familiar with the concept if you've ever studied state machines. The rules that govern a particular automata define its behavior. To determine the state of the system at the next step, we can make observations about the current state of each cell and the cell's neighbors-- the cells immediately surrounding that cell. Then, based on our observations and the system's rules, we can determine if a cell will transition to a different state.  
-
-<br/>
+<br/><br/>
 
-In Conway's game of life, there exist four rules to determine the state of a cell in the next step:
+Based on our observations of each neighbor's state and the system's rules, we can determine if a cell will transition to a different state. In Conway's game of life, there exist only four rules which determine the state of a cell in the next generation:  
 
-<Quote quoted={false} source="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">
+<Quote quoted={false} source='https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life'>
     <ul class='list-decimal ml-8'>
         <li>
             Any live cell with fewer than two live neighbours dies, as if by underpopulation.
@@ -76,6 +83,32 @@ In Conway's game of life, there exist four rules to determine the state of a cel
     </ul>
 </Quote>
 
-<Grid size={10} resizeable={false} showState={true} toggleable={true} model={Models.CONWAY} 
-gridArr={[]}
+Here's an example of Conway's game of Life with a simple seed.
+
+<Grid
+    size={10} isToggleable={false} model={Models.CONWAY} isManual={true} 
+    isLooped={true} isAutoplayed={true} isClearable={false}
+    seed={firstSeed} 
 />
+
+# Your Turn
+Now, try it for yourself! The grid I've placed below follows the rules from Conway's game of life. 
+Feel free to play around with it and see what you can come up with.
+I've enabled all the controls for you as well!
+
+<br/>
+
+<Grid 
+    size={15} isResizable={true} isStateVisible={false} isToggleable={true} isRandomizable={true} 
+    model={Models.CONWAY} isManual={true} isPlayable={true} isLooped={false} seed={secondSeed} intervalSec={0.8}
+/>
+
+<br/>
+
+Pressing the "Start" button will automatically transition generations at the given interval (in seconds), and "Stop" will stop it again. The "Next Gen" button will manually step you through the generations. Pressing the reset button will bring you back to generation 1. If the grid ends up empty, the simulation will stop itself automatically.
+If the simulation feels slow, try lowering the interval between generations using the slider.
+
+<br/>
+
+If you're looking for some interesting things to build, the Conway's Game of Life entry on Wikipedia has a section full of <a href="https://en.wikipedia.org/wiki/Conway's_Game_of_Life#Examples_of_patterns">interesting patterns</a>.  
+