Add support for constants

build.js

@@ -43,7 +43,11 @@ const ctx = await esbuild.context({
 })
 
 if (serve) {
-  const { port, host } = await ctx.serve({ servedir: 'dist' })
+  await ctx.watch()
+  const { port, host } = await ctx.serve({
+    servedir: 'dist',
+    fallback: 'dist/index.html'
+  })
   console.log(`Serving on ${host}:${port}`)
 } else {
   await ctx.rebuild()

package.json

@@ -3,6 +3,7 @@
     "version": "1.0.0",
     "type": "module",
     "scripts": {
+        "dev": "ESBUILD_SERVE=1 node ./build.js",
         "build": "node ./build.js",
         "check": "tsc"
     },

src/index.ts

@@ -4,37 +4,39 @@ import { Splash } from './modules/splash/classes/Splash'
  * The function wich is run when the app is loaded
  */
 async function main() {
-    // Create splash screen variable
-    let splash: Splash | undefined = undefined
-
-    try {
-        // instantiate splash screen
-        splash = new Splash()
-    } catch {}
-
-    try {
-        // import main app
-        const app = await import('./main')
-
-        // wait for app to start
-        await app.start()
-    } catch (error) {
-        // show the error to the client
-        if (splash) splash.setError(error)
-
-        // log the error to the console
-        console.error(error.stack || error)
-        return
-    }
-
-    // hide splash screen if it exists
-    if (splash) {
-        splash.fade()
-    }
+  // Create splash screen variable
+  let splash: Splash | undefined = undefined
+
+  try {
+    // instantiate splash screen
+    splash = new Splash()
+  } catch {}
+
+  try {
+    // import main app
+    const app = await import('./main')
+
+    // wait for app to start
+    await app.start()
+  } catch (error) {
+    // show the error to the client
+    if (splash) splash.setError(error)
+
+    // log the error to the console
+    console.error(error.stack || error)
+    return
+  }
+
+  // hide splash screen if it exists
+  if (splash) {
+    splash.fade()
+  }
 }
 
+new EventSource('/esbuild').addEventListener('change', () => location.reload())
+
 // Call entry
-main().catch(error => {
-    // if the error handling error has an error, log that error
-    console.error('Error loading app', error)
+main().catch((error) => {
+  // if the error handling error has an error, log that error
+  console.error('Error loading app', error)
 })

src/modules/activation/types/Context.ts

@@ -1,24 +1,28 @@
-import { Simulation, SimulationEnv } from '../../simulation/classes/Simulation'
+import { SimulationEnv } from '../../simulation/classes/Simulation'
 import { PinState } from '../../simulation/classes/Pin'
 
 export interface Context {
-    getProperty: (name: string) => unknown
-    setProperty: (name: string, value: unknown) => void
-    get: (index: number) => PinState
-    set: (index: number, state: PinState) => void
-    getBinary: (index: number) => number
-    setBinary: (index: number, value: number, bits: number) => void
-    invertBinary: (value: number) => number
-    color: (color: string) => void
-    innerText: (value: string) => void
-    update: () => void
-    toLength: (value: number | PinState, length: number) => string
-    maxLength: number
-    enviroment: SimulationEnv
-    colors: Record<string, string>
-    memory: Record<string, unknown>
+  getProperty: (name: string) => unknown
+  setProperty: (name: string, value: unknown) => void
+  get: (index: number) => PinState
+  set: (index: number, state: PinState) => void
+  getOutput: (index: number) => PinState
+  getBinary: (index: number) => number
+  printBinary: (value: number, bits?: number) => string
+  printHex: (value: number, length?: number) => string
+  setBinary: (index: number, value: number, bits?: number) => void
+  getOutputBinary: (index: number) => number
+  invertBinary: (value: number) => number
+  color: (color: string) => void
+  innerText: (value: string) => void
+  update: () => void
+  toLength: (value: number | PinState, length: number) => string
+  maxLength: number
+  enviroment: SimulationEnv
+  colors: Record<string, string>
+  memory: Record<string, unknown>
 }
 
 export interface InitialisationContext {
-    memory: Record<string, unknown>
+  memory: Record<string, unknown>
 }

src/modules/logic-gates/components/GateProperties.scss

@@ -7,60 +7,64 @@
 $gate-props-margin: 1rem;
 
 #gate-properties-modal {
-    @include modal-container();
+  @include modal-container();
 
-    justify-content: center;
+  justify-content: center;
 }
 
 .visible#gate-properties-modal {
-    @include visible();
+  @include visible();
 }
 
 div #gate-properties-container {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    background-color: $grey;
-    border-radius: 1em;
+  background-color: $grey;
+  border-radius: 1em;
 
-    padding: $gate-props-margin * 4;
-    box-sizing: border-box;
+  padding: $gate-props-margin * 4;
+  box-sizing: border-box;
 
-    max-height: 80vh;
-    overflow: auto;
+  max-height: 80vh;
+  overflow: auto;
 }
 
 div #gate-props-title {
-    color: white;
-    font-size: 3em;
+  color: white;
+  font-size: 3em;
 
-    margin-bottom: 2 * $gate-props-margin;
+  margin-bottom: 2 * $gate-props-margin;
 }
 
 div .gate-prop-container {
-    @include flex();
+  @include flex();
 
-    flex-direction: row;
-    justify-content: start;
+  flex-direction: row;
+  justify-content: start;
 
-    &.visible {
-        margin: 1rem;
-    }
+  &.visible {
+    margin: 1rem;
+  }
+
+  &>* {
+    width: 100%;
+  }
 }
 
 div .gate-prop-group-container {
-    @include flex;
+  @include flex;
 
-    margin-left: 1rem;
+  margin-left: 1rem;
 }
 
 div #save-props {
-    width: 50%;
-    margin: $gate-props-margin * 2;
-    margin-bottom: 0;
+  width: 50%;
+  margin: $gate-props-margin * 2;
+  margin-bottom: 0;
 }
 
 .checkbox-label {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }