added incrementor

.prettierrc.js

@@ -1,7 +1,7 @@
 module.exports = {
-	semi: false,
-	trailingComma: 'none',
-	singleQuote: true,
-	printWidth: 80,
-	tabWidth: 4
+    semi: false,
+    trailingComma: 'none',
+    singleQuote: true,
+    printWidth: 80,
+    tabWidth: 4
 }

src/assets/incrementor.svg

@@ -0,0 +1,9 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M800 0H0V800H800V0Z" fill="#00B512"/>
+<circle cx="400" cy="400" r="100" fill="white"/>
+<path d="M289 300H397V500H289L322.48 399.497L289 300Z" fill="white"/>
+<path d="M370.643 370H358.571V395.714H330V407.669H358.571V430H370.643V407.669H397V395.714H370.643V370Z" fill="#00B512" stroke="white" stroke-width="5"/>
+<path d="M449.643 370H437.571V395.714H409V407.669H437.571V430H449.643V407.669H476V395.714H449.643V370Z" fill="#00B512" stroke="white" stroke-width="5"/>
+<path d="M500 400H576" stroke="white" stroke-width="10"/>
+<path d="M225 400H300" stroke="white" stroke-width="10"/>
+</svg>

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

@@ -83,5 +83,8 @@ export const descriptions: Record<string, string> = {
     `,
     'rgb light': `
         ${output} The color is a based on the 3 inputs. The first input means red, the second green and the third blue.
+    `,
+    incrementor: `
+        Outputs the input + 1
     `
 }

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

@@ -120,5 +120,14 @@ export const ioTables: Record<
                 fromChunks(combination.map(value => (value ? 255 : 0)))
             ]
         })
+    },
+    incrementor: {
+        columns: ['x', 'x + 1'],
+        data: recursiveCombinations([0, 1], 2).map(combination => {
+            const input = combination.join('')
+            const output = (parseInt(input, 2) + 1).toString(2)
+
+            return [input, output]
+        })
     }
 }

src/modules/saving/constants.ts

@@ -19,6 +19,7 @@ import _4bitDecoderTemplate from './templates/4bitDecoder'
 import comparatorTemplate from './templates/comparator'
 import bitMergerTemplate from './templates/bitMerger'
 import bitSplitterTemplate from './templates/bitSplitter'
+import incrementorTemplate from './templates/incrementor'
 
 export const defaultSimulationName = 'default'
 export const baseTemplates: DeepPartial<GateTemplate>[] = [
@@ -40,8 +41,8 @@ export const baseTemplates: DeepPartial<GateTemplate>[] = [
     _4bitDecoderTemplate,
     comparatorTemplate,
     bitMergerTemplate,
-    bitSplitterTemplate
-    // commentTemplate
+    bitSplitterTemplate,
+    incrementorTemplate
 ]
 
 export const baseSave: RendererState = {

src/modules/saving/templates/incrementor.ts

@@ -0,0 +1,27 @@
+import { PartialTemplate } from '../types/PartialTemplate'
+import { categories } from '../data/categories'
+
+/**
+ * The template of the increment gate
+ */
+const incrementorTemplate: PartialTemplate = {
+    metadata: {
+        name: 'incrementor'
+    },
+    material: {
+        type: 'image',
+        fill: require('../../../assets/incrementor')
+    },
+    code: {
+        activation: `
+            const a = context.getBinary(0)
+
+            context.setBinary(0, a + 1)`
+    },
+    info: [
+        'https://algassert.com/circuits/2015/06/12/Constructing-Large-Increment-Gates.html'
+    ],
+    category: categories.math
+}
+
+export default incrementorTemplate

src/modules/simulationRenderer/helpers/aabb.ts

@@ -14,3 +14,16 @@ export const aabbCollisionDetection = (rect1: Transform, rect2: Transform) => {
         rect1.minY > rect2.maxY
     )
 }
+
+export const collision = (rect1: Transform, rect2: Transform) => {
+    const { minX, maxX } = rect1
+
+    if (
+        (minX > rect2.minX && minX < rect2.maxX) ||
+        (maxX > rect2.minX && minX < rect2.maxX)
+    ) {
+        return true
+    }
+
+    return false
+}

src/modules/simulationRenderer/helpers/renderWires.ts

@@ -3,7 +3,6 @@ import { pinFill } from './pinFill'
 import { getPinPosition } from './pinPosition'
 import { Wire } from '../../simulation/classes/Wire'
 import { wireRadius } from './wireRadius'
-import { clamp } from '../../simulation/helpers/clamp'
 
 export const renderWires = (
     ctx: CanvasRenderingContext2D,
@@ -56,7 +55,6 @@ export const renderWires = (
                     endPosition[1]) /
                     2
             )
-            // radiuses[0] =
         }
 
         const centerPosition = [