diff --git a/src/modules/logic-gate-info/components/LogicGateInfoPage.tsx b/src/modules/logic-gate-info/components/LogicGateInfoPage.tsx index 2619bf9..d0b10fa 100644 --- a/src/modules/logic-gate-info/components/LogicGateInfoPage.tsx +++ b/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 (
@@ -26,19 +28,23 @@ export default withRouter(props => {
-
- Read more:
- {template.info.map((url, index) => { - return ( - - - {url} - -
- - ) - })} -
+ {template.info.length ? ( +
+ Read more:
+ {template.info.map((url, index) => { + return ( + + + {url} + +
+ + ) + })} +
+ ) : ( + '' + )}
) } catch { diff --git a/src/modules/logic-gate-info/data/descriptions.ts b/src/modules/logic-gate-info/data/descriptions.ts index 9d7544c..904c737 100644 --- a/src/modules/logic-gate-info/data/descriptions.ts +++ b/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 = { not: ` The not gate is one of the most basic logic gates. @@ -47,5 +52,36 @@ export const descriptions: Record = { 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. ` } diff --git a/src/modules/logic-gate-info/data/tables.ts b/src/modules/logic-gate-info/data/tables.ts index 9b8b355..402b959 100644 --- a/src/modules/logic-gate-info/data/tables.ts +++ b/src/modules/logic-gate-info/data/tables.ts @@ -1,9 +1,8 @@ -import { - allCombinations, - recursiveCombinations -} from '../../simulation/helpers/allCombinations' +import { recursiveCombinations } from '../../simulation/helpers/allCombinations' +import { fromChunks } from '../../colors/helpers/fromHex' 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))) + ] + }) } } diff --git a/src/modules/saving/templates/parallelDelayer.ts b/src/modules/saving/templates/parallelDelayer.ts index cf4c87c..0a1638c 100644 --- a/src/modules/saving/templates/parallelDelayer.ts +++ b/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', diff --git a/src/modules/saving/templates/sequentialDelayer.ts b/src/modules/saving/templates/sequentialDelayer.ts index 7626cd2..018987f 100644 --- a/src/modules/saving/templates/sequentialDelayer.ts +++ b/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',