//
// Welcome to the CSS encoding of the Elementary Cellular Automaton Rule 110!
//

// Here is a blog post explaining most of the concepts at play here:
// https://notlaura.com/is-css-turing-complete/

// Rule 110 is known to be Turing complete, so, this CodePen shows
// that CSS + user input + HTML are Turing complete!
// The holy trifecta of UI development we love dearly.

// A challenge! Can you fork this pen and encode Rule 126?
// http://mathworld.wolfram.com/ElementaryCellularAutomaton.html

// A more complex challenge! Can you figure out how to update the
// state of the cell without user input?
// Could we use the animation API and play states, perhaps?
// Or some completely different solution using CSS Grid?

// Okay, on to the code itself.

// First, some setup / Sass shortcut stuff that made it
// easier to work on this:

// Store custom property definitions in mixins for easier updating.
// (we'll be able to do this in CSS soon enough!)
@mixin zero {
	--cell-bg-color: white;
	--cell-num-color: black;
	--cell-content: "0";
}

@mixin one {
	--cell-bg-color: hotpink;
	--cell-num-color: white;
	--cell-content: "X";
	--cell-cursor: pointer;
}

// Number of *s should be: var( --cells-per-row ) - 1.
// This means go to one cell before the one right below the current target.
// Using a Sass loop so we can update the cells per row in one place.
$CELLS_PER_ROW: 23;
$selector: "* ";

@for $i from 1 through ($CELLS_PER_ROW - 2) {
	$selector: $selector "+ *";
}

//
// Rule 110 Encoding:
// 111 110 101 100 011 010 001 000
//  0   1   1   0   1   1   1   0
//

// $selector = 17 *s to target the cell directly below the targeted one

// 111
input:checked + input:checked + input:checked + #{$selector} {
	@include zero;
}

// 110
input:checked + input:checked + input:not(:checked) + #{$selector} {
	@include one;
}

// 101
input:checked + input:not(:checked) + input:checked + #{$selector} {
	@include one;
}

// 100
input:checked + input:not(:checked) + input:not(:checked) + #{$selector} {
	@include zero;
}

// 011
input:not(:checked) + input:checked + input:checked + #{$selector} {
	@include one;
}

// 010
input:not(:checked) + input:checked + input:not(:checked) + #{$selector} {
	@include one;
}

// 001
input:not(:checked) + input:not(:checked) + input:checked + #{$selector} {
	@include one;
}

// 000
input:not(:checked) + input:not(:checked) + input:not(:checked) + #{$selector} {
	@include zero;
}

//
// UI setup - not relevant to the automaton logic.
//

body {
	font-family: Helvetica;
}

// Set up the custom properties
:root {
	--cell-content: "";
	--cell-bg-color: white;
	--cell-num-color: black;
	--cell-cursor: initial;
	--cell-size: 30px;

	--cells-per-row: #{$CELLS_PER_ROW};
}

// Configuration previous row checked items.
input:checked::before {
	--cell-bg-color: black;
	--cell-cursor: initial;
	--cell-num-color: white;
	--cell-content: "1";
}

input:not(:checked) {
	@include zero;
}

// Scaffold number indicator pattern
input::before {
	width: 100%;
	height: 100%;
	position: absolute;
	display: grid;
	place-content: center;
	background-color: var(--cell-bg-color);
	color: var(--cell-num-color);
	content: var(--cell-content);
	cursor: var(--cell-cursor);
}

.a-machine {
	display: flex;
	flex-wrap: wrap;
	width: calc(var(--cell-size) * var(--cells-per-row));

	// Cutting this off so it looks nice :)
	height: calc(var(--cell-size) * 21);
	overflow: hidden;
}

input {
	-webkit-appearance: none;
	border: 1px solid black;
	height: var(--cell-size);
	width: var(--cell-size);
	font-size: 1rem;
	margin: 0;
	position: relative;
}

// Utilities

.u-margin-top {
	margin-top: 1rem;
}