Add displays

src/modules/activation/types/Context.ts

@@ -12,6 +12,7 @@ export interface Context {
   printHex: (value: number, length?: number) => string
   setBinary: (index: number, value: number, bits?: number) => void
   getOutputBinary: (index: number) => number
+  displayBinary: (value: number) => void
   invertBinary: (value: number) => number
   color: (color: string) => void
   innerText: (value: string) => void

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

@@ -89,5 +89,8 @@ export const descriptions: Record<string, string> = {
   `,
   constant: `
     Outputs a numeric constant configured (like any other property) by right-clicking the component
+  `,
+  display: `
+    Displays the input value as binary/hexadecimal.
   `
 }

src/modules/saving/constants.ts

@@ -21,6 +21,7 @@ import bitMergerTemplate from './templates/bitMerger'
 import bitSplitterTemplate from './templates/bitSplitter'
 import incrementorTemplate from './templates/incrementor'
 import constantTemplate from './templates/constant'
+import displayTemplate from './templates/display'
 
 export const defaultSimulationName = 'default'
 export const baseTemplates: DeepPartial<GateTemplate>[] = [
@@ -44,7 +45,8 @@ export const baseTemplates: DeepPartial<GateTemplate>[] = [
   bitMergerTemplate,
   bitSplitterTemplate,
   incrementorTemplate,
-  constantTemplate
+  constantTemplate,
+  displayTemplate
 ]
 
 export const baseSave: RendererState = {

src/modules/saving/templates/constant.ts

@@ -19,12 +19,9 @@ const constTemplate: PartialTemplate = {
       const state = context.getProperty('value')
       const bits = context.getProperty('output bits')
       const length = state.toString(2).length
-      const text = length > 10
-        ? "0x" + context.printHex(state, Math.ceil(length/4))
-        : context.printBinary(state, length)
 
+      context.displayBinary(state)
       context.setBinary(0, state, bits === 0 ? length : bits)
-      context.innerText(text)
     `
   },
   pins: {

src/modules/saving/templates/display.ts

@@ -0,0 +1,31 @@
+import { PartialTemplate } from '../types/PartialTemplate'
+import { categories } from '../data/categories'
+
+/**
+ * The template of the display gate
+ */
+const displayTemplate: PartialTemplate = {
+  metadata: {
+    name: 'display'
+  },
+  material: {
+    fill: '#673AB7',
+    stroke: {
+      normal: '#EDC6FB'
+    }
+  },
+  code: {
+    activation: `
+      context.displayBinary(context.getBinary(0))
+    `
+  },
+  pins: {
+    outputs: {
+      count: 0
+    }
+  },
+  info: [],
+  category: categories.io
+}
+
+export default displayTemplate

src/modules/saving/templates/light.ts

@@ -24,9 +24,7 @@ const lightTemplate: PartialTemplate = {
     activation: `
       const { main, active } = context.colors
 
-            const bits = context.get(0)
-
-            context.color(parseInt(context.get(0),2) ? active : main)
+      context.color(context.getBinary(2) ? active : main)
     `
   },
   integration: {

src/modules/simulation/classes/Gate.ts

@@ -439,11 +439,20 @@ export class Gate {
       }
     }
 
-    return {
+    const context: Context = {
       printBinary: (value: number, bits: number = maxLength) =>
         toLength(value.toString(2), bits),
       printHex: (value: number, bits: number = maxLength) =>
         toLength(value.toString(16), bits),
+      displayBinary: (value: number) => {
+        const length = value.toString(2).length
+        const text =
+          length > 10
+            ? '0x' + context.printHex(value, Math.ceil(length / 4))
+            : context.printBinary(value, length)
+
+        context.innerText(text)
+      },
       get: (index: number) => {
         return this._pins.inputs[index].state.value
       },
@@ -504,6 +513,8 @@ export class Gate {
         ...this.template.material.colors
       }
     }
+
+    return context
   }
 
   /**