Release v0.1.1 (#1)

Release v0.1.1

.env

@@ -0,0 +1 @@
+VERSION=v0.1.1

.gitignore

@@ -15,6 +15,7 @@ tmp/
 *.js
 
 !/.editorconfig
+!/.env
 !/.gitignore
 !/.now.json
 !/.prettier*

CHANGELOG.md

@@ -0,0 +1,32 @@
+# Cellexp Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [v0.1.0] - 2020-01-05
+
+### Added
+
+- Suggested rules
+- Different numerical bases to input a rule's number: 10, 2, 4, 16
+- Indicate the rules that are symmetric to the current rule
+  - Indicate if the rule is symmetric itself (self-symmetric)
+  - Rules indicators are clickable
+- Computing any cellular automaton
+- Rule display
+  - Color theme for cells
+- Autoscrolling
+
+  - Play / Pause button
+  - Speed field
+  - Reset button
+  - Generation time indicator
+
+- Setting the cellular automaton's size (computational width)
+- Foldable pannels
+- Reroll button: Change the random initialisation of the rule
+- Setting the canvas height

contribute/commit-word-list.md

@@ -40,6 +40,7 @@ This files lists domain and verbs to use in commits. See the [commit format desc
 - change -- replace something by something else
 - delete
 - update -- add / change / delete
+- bump -- increase a counter
 
 ### progress verbs
 

package.json

@@ -1,6 +1,6 @@
 {
    "name": "cellular-automaton-explorer-1d",
-   "version": "1.0.0",
+   "version": "0.1.1",
    "description": "Unidimensional cellular automaton explorer to highlight their unique properties",
    "repository": "git@github.com:mathieucaroff/cellular-automaton-explorer-1d.git",
    "author": "Mathieu CAROFF <mathieu.caroff@free.fr>",

src/display/display.ts

@@ -36,7 +36,10 @@ export let createDisplay = (store: Store, computer: Computer, hub: Hub) => {
             { name: 'display canvas.width&height' },
          )
 
-         h2.textContent = 'Display'
+         autorun(() => {
+            h2.textContent = `Display (rule ${store.rule})`
+         })
+
          h2.style.marginLeft = '10px'
          root.appendChild(h2)
          root.appendChild(canvas)

src/ui/components/OxTable.tsx

@@ -43,11 +43,16 @@ export let OxTable = (prop: SymmetricTableProp) => {
 
    return (
       <TableContainer className={classes.tableContainer} component={Paper}>
-         <Table className={classes.table} size="small">
+         <Table className={classes.table}>
+            {/* size="small" -- has no effect in production :c */}
             <TableHead>
                <TableRow>
                   {tableHead.map(([content, align], k) => (
-                     <TC align={align} key={k}>
+                     <TC
+                        className={'MuiTableCell-sizeSmall'}
+                        align={align}
+                        key={k}
+                     >
                         <strong>{content}</strong>
                      </TC>
                   ))}
@@ -57,7 +62,11 @@ export let OxTable = (prop: SymmetricTableProp) => {
                {tableData.map((line, j) => (
                   <TableRow key={j}>
                      {line.map((content, k) => (
-                        <TC align={(tableHead[k] || [])[1]} key={k}>
+                        <TC
+                           className={'MuiTableCell-sizeSmall'}
+                           align={(tableHead[k] || [])[1]}
+                           key={k}
+                        >
                            {content}
                         </TC>
                      ))}

src/ui/components/SlowTextField.tsx

@@ -13,6 +13,8 @@ export interface SlowTextFieldProp {
 }
 
 export let SlowTextField = (prop: SlowTextFieldProp) => {
+   let mayBeDirty = prop.slowValue !== prop.fastValue ? 'dirty' : ''
+
    return (
       <form
          onSubmit={(ev: React.FormEvent) => {
@@ -24,6 +26,7 @@ export let SlowTextField = (prop: SlowTextFieldProp) => {
       >
          <TextField
             label={prop.label + ` (${prop.slowValue})`}
+            className={mayBeDirty}
             value={prop.fastValue}
             error={prop.error}
             helperText={prop.helperText}

src/ui/control/control.tsx

@@ -25,6 +25,9 @@ import { ResetTime } from './components/ResetTime'
 import { ThemeSelector } from './components/ThemeSelector'
 import { RerollButton } from './components/RerollButton'
 import { PlayPauseButton } from './components/PlayPauseButton'
+import { observer } from 'mobx-react-lite'
+import { useStore } from '../util/useStore'
+import { Rule } from '../editor/components/Rule'
 
 let noVeritcalMargins = {
    marginTop: 0,
@@ -33,7 +36,7 @@ let noVeritcalMargins = {
 
 export let useLocalStyle = makeStyles((theme: Theme) =>
    createStyles({
-      ruleSelection: {
+      block: {
          display: 'block',
       },
       noPaddingTop: {
@@ -44,6 +47,9 @@ export let useLocalStyle = makeStyles((theme: Theme) =>
          height: 20,
       },
       panel: {
+         '&': {
+            backgroundColor: '#F6F6F6',
+         },
          '& .Mui-expanded': {
             minHeight: 0,
             ...noVeritcalMargins,
@@ -57,38 +63,73 @@ export let useLocalStyle = makeStyles((theme: Theme) =>
    }),
 )
 
-let Controller = () => {
+let Controller = observer(() => {
    let common = useStyle()
    let classes = useLocalStyle()
+   let store = useStore()
 
    let EP = ExpansionPanel
    let EPSm = ExpansionPanelSummary
    let EPDt = ExpansionPanelDetails
 
-   return (
+   let simulationController = (
+      <EP className={classes.panel} elevation={2}>
+         <EPSm expandIcon={<ExpandMoreIcon />}>
+            <h3 className={classes.noVeritcalMargins}>
+               Simulation Controller <Rule rule={store.rule} />
+            </h3>
+         </EPSm>
+         <EPDt
+            className={clx(
+               classes.inputSizing,
+               classes.noPaddingTop,
+               classes.block,
+            )}
+         >
+            <div className={common.inputList}>
+               <CaSizeSelector />
+               <RerollButton />
+            </div>
+         </EPDt>
+      </EP>
+   )
+
+   let displayController = (
       <EP className={classes.panel} defaultExpanded>
          <EPSm expandIcon={<ExpandMoreIcon />}>
-            <h2 className={classes.noVeritcalMargins}>Simulation Controller</h2>
+            <h3 className={classes.noVeritcalMargins}>
+               Display Controller <Rule rule={store.rule} />
+            </h3>
          </EPSm>
          <EPDt
             className={clx(
                classes.inputSizing,
                classes.noPaddingTop,
-               common.inputList,
+               classes.block,
             )}
          >
-            <CaSizeSelector />
-            <SpeedSelector />
-            <CanvasHeight />
-            <FieldPosT />
-            <ResetTime />
-            <ThemeSelector />
-            <RerollButton />
-            <PlayPauseButton />
+            <div className={common.inputList}>
+               <SpeedSelector />
+               <FieldPosT />
+               <ResetTime />
+               <PlayPauseButton />
+            </div>
+            <div className={common.inputList}>
+               <CanvasHeight />
+               <ThemeSelector />
+            </div>
          </EPDt>
       </EP>
    )
-}
+
+   return (
+      <div className={common.ui}>
+         <h2>Controllers</h2>
+         {simulationController}
+         {displayController}
+      </div>
+   )
+})
 
 export let renderController = (
    rootElement: HTMLElement,

src/ui/editor/components/InterestingRuleList.tsx

@@ -4,16 +4,13 @@ import { makeStyles, Theme, createStyles } from '@material-ui/core'
 
 import { Rule } from './Rule'
 import { OxTable } from '../../components/OxTable'
-let noVeritcalMargins = {
-   marginTop: 0,
-   marginBottom: 0,
-}
+import { clx } from '../../util/clx'
 
 export let useStyle = makeStyles((theme: Theme) =>
    createStyles({
       inlineBlock: { display: 'inline-block' },
       spacer: {
-         marginLeft: '2em',
+         marginRight: '2em',
       },
    }),
 )
@@ -30,7 +27,7 @@ export let InterestingRuleList = () => {
 
    return (
       <>
-         <div className={classes.inlineBlock}>
+         <div className={clx(classes.inlineBlock, classes.spacer)}>
             <OxTable
                tableHead={[['Description'], ['Rules']]}
                tableData={[
@@ -41,7 +38,6 @@ export let InterestingRuleList = () => {
                ]}
             />
          </div>
-         <span className={classes.spacer}></span>
          <div className={classes.inlineBlock}>
             <OxTable
                tableHead={[['Description'], ['Rules']]}

src/ui/editor/components/PropertyList.tsx

@@ -8,8 +8,8 @@ import { SymmetricTable } from './SymmetricTable'
 
 let useStyle = makeStyles((theme: Theme) => {
    return createStyles({
-      spacer: {
-         marginLeft: '2em',
+      spacerRight: {
+         marginRight: '2em',
       },
    })
 })
@@ -22,19 +22,22 @@ export let PropertyList = observer(() => {
 
    return (
       <>
-         <SymmetricTable
-            label="Symmetrics of current rule"
-            rule={rule}
-            symmetricReferenceRule={rule}
-            symmetricMessage="self-symmetric"
-         />
-         <span className={classes.spacer}></span>
-         <SymmetricTable
-            label="Symmetrics of color output complement rule"
-            rule={255 - rule}
-            symmetricReferenceRule={rule}
-            symmetricMessage="remote-self-symmetric"
-         />
+         <div className={classes.spacerRight}>
+            <SymmetricTable
+               label="Symmetrics of current rule"
+               rule={rule}
+               symmetricReferenceRule={rule}
+               symmetricMessage="self-symmetric"
+            />
+         </div>
+         <div>
+            <SymmetricTable
+               label="Symmetrics of color output complement rule"
+               rule={255 - rule}
+               symmetricReferenceRule={rule}
+               symmetricMessage="remote-self-symmetric"
+            />
+         </div>
       </>
    )
 })