info everywhere

src/modules/logic-gate-info/components/LogicGateInfoPage.tsx

@@ -14,6 +14,8 @@ export default withRouter(props => {
         const template = getTemplateSafely(name)
         const description = descriptions[name] || ''
 
+        console.log({ name, template })
+
         return (
             <div className="page" id="logic-gate-info-page">
                 <div className="gate-preview">
@@ -26,19 +28,23 @@ export default withRouter(props => {
                 <div id="gate-info-io-table">
                     <LogicGateIoTable name={name} />
                 </div>
-                <div id="gate-info-read-more">
+                {template.info.length ? (
-                    Read more: <br />
+                    <div id="gate-info-read-more">
-                    {template.info.map((url, index) => {
+                        Read more: <br />
-                        return (
+                        {template.info.map((url, index) => {
-                            <Fragment key={index}>
+                            return (
-                                <a target="_blank" href={url}>
+                                <Fragment key={index}>
-                                    {url}
+                                    <a target="_blank" href={url}>
-                                </a>
+                                        {url}
-                                <br />
+                                    </a>
-                            </Fragment>
+                                    <br />
-                        )
+                                </Fragment>
-                    })}
+                            )
-                </div>
+                        })}
+                    </div>
+                ) : (
+                    ''
+                )}
             </div>
         )
     } catch {

src/modules/logic-gate-info/data/descriptions.ts

@@ -5,6 +5,11 @@ const carryExplanation = (half = true) => `
     } beeing 1 << (n + 1) - ${half ? 2 : 1})
 `
 
+const output = `General purpouse output component.`
+const delay = `
+    The delay is a property of the gate and can be modified by left clicking on the gate in the simulation view.
+`
+
 export const descriptions: Record<string, string> = {
     not: `
         The not gate is one of the most basic logic gates. 
@@ -47,5 +52,36 @@ export const descriptions: Record<string, string> = {
             x + y + z + 4 * x * y * z - 2 * (x * y + y * z + z * x), 
             x * y + y * z + z * x - 2 * x * y * z
         }
+    `,
+    comparator: `
+        Compares the 2 inputs. The first input is only true if a > b, the second input is 
+        only true if a === b and the 3rd input is only true if a < b.
+    `,
+    'parallel delayer': `
+        Delays the inputs by a certain delay. ${delay}
+    `,
+    'sequential delayer': `
+        Delays the input by a certain amount of time relative to the last change. ${delay}
+    `,
+    '4 bit encoder': `
+        Encodes the 4 inputs into a single output
+    `,
+    '4 bit decoder': `
+        Splits the input into 4 outputs
+    `,
+    'bit merger': `
+        Merges the bits of both inputs into 1 output
+    `,
+    'bit splitter': `
+        Splits the bits from the input into 2 chunks of the same length
+    `,
+    button: `
+        Outputs either 0 or 1. Has no inputs. You can change its value by left clicking on it.
+    `,
+    'light bulb': `
+        ${output} The color changes based on the input.
+    `,
+    'rgb light': `
+        ${output} The color is a based on the 3 inputs. The first input means red, the second green and the third blue.
     `
 }

src/modules/logic-gate-info/data/tables.ts

@@ -1,9 +1,8 @@
-import {
+import { recursiveCombinations } from '../../simulation/helpers/allCombinations'
-    allCombinations,
+import { fromChunks } from '../../colors/helpers/fromHex'
-    recursiveCombinations
-} from '../../simulation/helpers/allCombinations'
 
 const _2i1oColumns = ['Input A', 'Input B', 'Output']
+const delayerCols = ['Time', 'Input', 'Output']
 
 const adderData = (half = true) => {
     return recursiveCombinations([0, 1], half ? 2 : 3).map(combination => {
@@ -13,11 +12,23 @@ const adderData = (half = true) => {
     })
 }
 
+const coderData = (encode = true, depth = 4) => {
+    return recursiveCombinations([0, 1], depth).map(combination => {
+        const final = combination.join('')
+
+        if (encode) {
+            return [...combination, final]
+        } else {
+            return [final, ...combination]
+        }
+    })
+}
+
 export const ioTables: Record<
     string,
     {
         columns: string[]
-        data: number[][]
+        data: (string | number)[][]
     }
 > = {
     not: {
@@ -55,5 +66,59 @@ export const ioTables: Record<
     'full adder': {
         columns: ['carry in', 'x', 'y', 'sum', 'carry out'],
         data: adderData(false)
+    },
+    comparator: {
+        columns: ['Input A', `Input B`, `A > b`, `A = b`, `A < B`],
+        data: recursiveCombinations([0, 1], 2).map(combination => {
+            const [a, b] = combination
+
+            return [
+                ...combination,
+                Number(a > b),
+                Number(a === b),
+                Number(a < b)
+            ]
+        })
+    },
+    'parallel delayer': {
+        columns: delayerCols,
+        data: [[0, 1, 0], [500, 0, 0], [1000, 0, 1], [1500, 0, 0]]
+    },
+    'sequential delayer': {
+        columns: delayerCols,
+        data: [[0, 1, 0], [500, 0, 0], [1000, 0, 1], [1500, 0, 1], [2000, 0, 0]]
+    },
+    '4 bit encoder': {
+        columns: ['Input A', 'Input B', 'Input C', 'Input D', `Output`],
+        data: coderData()
+    },
+    '4 bit decoder': {
+        columns: ['Input', 'Output A', 'Output B', 'Output C', `Output D`],
+        data: coderData(false)
+    },
+    'bit merger': {
+        columns: _2i1oColumns,
+        data: coderData(true, 2)
+    },
+    'bit splitter': {
+        columns: ['Input', 'Output A', 'Output B'],
+        data: coderData(false, 2)
+    },
+    button: {
+        columns: ['Previous', 'Output'],
+        data: [0, 1].map(x => [x, Number(!x)])
+    },
+    'light bulb': {
+        columns: ['Input', 'State'],
+        data: [0, 1].map(x => [x, x ? 'on' : 'off'])
+    },
+    'rgb light': {
+        columns: ['Red', 'Green', 'Blue', 'Color'],
+        data: recursiveCombinations([0, 1], 3).map(combination => {
+            return [
+                ...combination,
+                fromChunks(combination.map(value => (value ? 255 : 0)))
+            ]
+        })
     }
 }

src/modules/saving/templates/parallelDelayer.ts

@@ -7,7 +7,7 @@ import { categories } from '../data/categories'
  */
 const parallelDelayerTemplate: PartialTemplate = {
     metadata: {
-        name: 'Parallel delayer'
+        name: 'parallel delayer'
     },
     material: {
         type: 'image',

src/modules/saving/templates/sequentialDelayer.ts

@@ -7,7 +7,7 @@ import { categories } from '../data/categories'
  */
 const sequentialDelayerTemplate: PartialTemplate = {
     metadata: {
-        name: 'Sequential delayer'
+        name: 'sequential delayer'
     },
     material: {
         type: 'image',