cellular/index.html at master · remotehack/cellular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<html>
  <head>
    <meta charset="utf-8">
    <title>Cellular</title>
    <script src="./scripts/index.js" type="module"></script>
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/typography.css">
    <link rel="stylesheet" href="./style/main.css">
    <link rel="stylesheet" href="./style/form.css">
  </head>
  <body>

    <template id="example-ruleset-button">
      <button type="button" class="button--selection" name="example-ruleset">Load example</button>
    </template>

    <template id="rule-manager">
      <link rel="stylesheet" href="./style/reset.css">
      <link rel="stylesheet" href="./style/typography.css">
      <link rel="stylesheet" href="./style/form.css">
      <link rel="stylesheet" href="./style/rules-manager.css">

      <form id="rule">
        <div class="rule-input-group">
          <input
            aria-label="Type"
            type="text"
            class="input--single-character"
            name="applicable-cells"
            id="applicable-cells--input" maxlength="2" />

          <span>: </span>

          <input
            aria-label="Condition"
            type="text"
            name="condition"
            id="condition--input" />

          <span class="js--rule-context--simple"> → </span>

          <input
            aria-label="Result"
            type="text"
            class="input--single-character"
            name="result"
            id="result--input" maxlength="2"/>
        </div>

        <button class="js--rule-type--modify" type="button" id="delete-rule--button">Delete rule</button>
      </form>
    </template>

    <h1>Cellular</h1>

    <details open class="sidebar">
      <summary class="sidebar-summary"><strong>Settings</strong></summary>

      <form id="controls" class="controls">
        <h2>Simulation settings</h2>
        <label for="grid-size--input">Cell Size</label>
        <input type="range" min="0" max="1" step="0.1" value="0.5" name="grid-size" id="grid-size--input" />
        <output class="js-value-output" name="grid-size--output" data-attach-to-input="grid-size--input"></output>

        <label for="generation-time--input">Generation time (ms)</label>
        <input type="range" min="0" max="10000" step="100" value="1000" name="generation-time" id="generation-time--input" />
        <output class="js-value-output" name="generation-time--output" data-attach-to-input="generation-time--input"></output>

        <h2>Example rulesets</h2>
        <div id="example-rulesets"></div>

        <h2>Rules</h2>

        <details>
          <summary>Help</summary>
          <h3>Rule definition</h3>
          <p id="rules--description">
            <dfn title="The cells that the rule applies to.">Type</dfn> :
            <dfn title="A JavaScript expression that evaluates to a boolean, determining the result.">Condition</dfn> →
            <dfn title="The result if the condition is true.">Result</dfn>
          </p>
          <h3>Condition</h3>
          <p>
            Conditions are JavaScript expressions that evaluate to a boolean. If
            true, the cell's value will be changed to become the result next generation.
          </p>
          <h4>Functions</h4>
          <ul>
            <li>
              <p><strong><code>this.countNeighbours(cellType)</code></strong>: which counts the number of directly neighbouring cells of the given type
            </li>
            <li>
              <p><strong><code>this.chance(probability)</code></strong>: where chance is 0–1, 0 always <code>false</code>,
              and 1 always <code>true</code>
            </li>
          </ul>
          <h4>Properites</h4>
          <ul>
            <li>
              <p><strong><code>this.status</code></strong>: returns the current cell's status</p>
            </li>
          </ul>
          <h3>Supplier</h3>
          <p>A JavaScript expression that evaluates to the initial value. It is ran on each cell.
             This has access to the same functions and properties as the conditions.
        </details>


        <h3>Add rule</h3>
        <div class="new-rule">
          <div id="new-rule-wrapper"></div>
          <button type="button" id="add-rule--button" class="button">Add rule</button>
        </div>

        <h3>Existing rules</h3>
        <div class="rules" id="rules" aria-describedby="rules--description">
          <p id="no-rules">You haven't created any rules yet.</p>
        </div>

        <h3>Initial generation</h3>
        <label for="init-supplier--input">Supplier</label>
        <input id="init-supplier--input" name="init-supplier" type="text" />

        <button class="button--float button--main-action" type="submit" id="start-automaton">Start automaton</button>

      </form>
    </details>

    <canvas id="canvas" class="canvas"></canvas>

  </body>
</html>