Merge branch 'prescientmoon:master' into patch-1

.github/workflows/build.yaml

@@ -0,0 +1,41 @@
+name: Build and deploy
+
+on:
+  push:
+  pull_request:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: DeterminateSystems/nix-installer-action@main
+      - uses: DeterminateSystems/magic-nix-cache-action@main
+
+      - name: Build project
+        run: nix build .#erratic-gate-github-pages
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./result/www
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.event_name == 'push' && github.ref == 'refs/heads/master'
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -1,4 +1,7 @@
 node_modules
 dist
 coverege
-idea
+idea
+.direnv
+result
+.envrc

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "semi": false,
+    "trailingComma": "none",
+    "singleQuote": true,
+    "printWidth": 80,
+    "tabWidth": 2
+}

README.md

@@ -4,10 +4,8 @@ This is a logic gate simulator made for infoeducatie 2019.
 
 ## Getting started
 
-Check out the [demo](https://logic-gate-simulator.herokuapp.com/)
-Or read the [docs](./docs/main.md)
-
-I've also made a [trello board](https://trello.com/b/LW3XSnGN/logic-gate-simulator) .
+Check out the [demo](https://mateiadrielrafael.github.io/erratic-gate/)
+Or read the [docs](./docs/main.md).
 
 ## Credits
 
@@ -21,30 +19,10 @@ Many thanks to:
 
 -   Simple & intuitive UI
 -   Multiple simulations support
--   Integrated circuits
+-   (Configurable) integrated circuits
 -   Multiple bits per pin
 -   Multiple language support: Romanian, English, Dutch, Turkish, Chinese & more in the future
 
 ## Playing with the source
 
-To run locally clone this repo, and then install all dependencies by rrunning:
-
-```sh
-npm install
-```
-
-Start the development server by running:
-
-```sh
-npm run dev
-```
-
-Or bundle the source with:
-
-```sh
-npm run build
-```
-
-## Assets & code wich i didn't make myself:
-
-You can read a full list with what i don't own [here](./docs/assets-i-dont-own.md)
+This repo provides a nix flake for deployment.

build.js

@@ -0,0 +1,53 @@
+import * as esbuild from 'esbuild'
+import { htmlPlugin } from '@craftamap/esbuild-plugin-html'
+import { sassPlugin } from 'esbuild-sass-plugin'
+import * as fs from 'fs'
+
+const serve = process.env.ESBUILD_SERVE === '1'
+const baseurl = process.env.ESBUILD_BASEURL || ''
+
+console.log(`Building with baseurl ${baseurl}`)
+
+const ctx = await esbuild.context({
+  entryPoints: ['src/index.ts'],
+  minify: true,
+  bundle: true,
+  metafile: true,
+  splitting: true,
+  outdir: 'dist',
+  format: 'esm',
+  target: ['es2020'],
+  assetNames: 'assets/[name]',
+  chunkNames: 'chunks/[name]',
+  loader: {
+    '.svg': 'file'
+  },
+  define: {
+    'process.env.BASEURL': JSON.stringify(baseurl)
+  },
+  plugins: [
+    htmlPlugin({
+      files: [
+        {
+          filename: 'index.html',
+          entryPoints: ['src/index.ts'],
+          favicon: 'public/favicon.ico',
+          htmlTemplate: 'public/index.html',
+          scriptLoading: 'module'
+        }
+      ]
+    }),
+    sassPlugin({})
+  ],
+  publicPath: baseurl
+})
+
+if (serve) {
+  const { port, host } = await ctx.serve({ servedir: 'dist' })
+  console.log(`Serving on ${host}:${port}`)
+} else {
+  await ctx.rebuild()
+  await ctx.dispose()
+  fs.cpSync('./dist/index.html', './dist/404.html') // Needed to please github pages
+  console.log(`Project bundled successfully`)
+}

docs/tutorials/basic-operations.md

@@ -0,0 +1,33 @@
+# Basic opeartions
+
+To demonstrate the basic usage of the simulator we will construct one of the simplest logic gates: the `buffer` gate.
+
+First of all we need to create something called an `integrated circuit`. You can think of integrated circuits like a box containing some components. You only put the components there once and can then reuse that box as many times as you want.
+
+To create an integrated circuit, click on `Create simulation`, then on `integrated circuit` and type in the name of the circuit - in this case `buffer`.
+
+You should see something like this:
+
+![empty IC](../assets/empty.png)
+
+Now we need to actually add some logic gates. To do that you need to:
+
+1. click on `Logic gates`, which should bring up a screen which looks similar to this:
+
+    ![gates](../assets/gates.png)
+
+2. Click on the logic gates you want to add to your integrated circuit! In our case we need to add a `button` and a `light bulb`
+
+    > After you add any logic gate you should get a confirmation message which looks something like this: ![notification](../assets/notification.png)
+
+3. To go back to the simulation view click the `Back to simulation` button. Now you should see something like this:
+
+    ![components](../assets/components.png)
+
+4. As you probably noticed, the components are on top of eachother. You can use your right mouse button to drag them around!
+
+    > Note 1: while your mouse is outside of gate you can start a selection. After you selected some gates you can use your mouse to drag all of them.
+
+    > Note 2: this isn't limited to movement. In the future you'll learn about many actions you can perform which also work on multiple gates :D
+
+    > Note 3: While we're on the topic of selection: You can use `ctrl + a` (or `command + a` on macs) to select everything

flake.nix

@@ -0,0 +1,60 @@
+{
+  description = "Logic gate simulator";
+  inputs.flake-utils.url = "github:numtide/flake-utils";
+
+  outputs = { nixpkgs, flake-utils, ... }:
+    flake-utils.lib.eachDefaultSystem (system:
+      let pkgs = nixpkgs.legacyPackages.${system};
+      in
+      rec {
+        packages.erratic-gate = pkgs.buildNpmPackage {
+          name = "erratic-gate";
+
+          buildInputs = [ pkgs.nodejs_18 ];
+
+          src = pkgs.lib.cleanSource ./.;
+          npmDepsHash = "sha256-f5mw6IjkhZgsIuzCz9d7DvoAdceY1y+yWXn1BOonsVI=";
+
+          ESBUILD_BASEURL = "";
+
+          installPhase = ''
+            mkdir $out
+            cp -r dist $out/www
+          '';
+        };
+
+        packages.erratic-gate-github-pages = packages.erratic-gate;
+        packages.default = packages.erratic-gate;
+
+        devShells.default =
+          pkgs.mkShell {
+            buildInputs = with pkgs;
+              with nodePackages_latest; [
+                nodejs
+              ];
+          };
+
+        apps.compute-npm-dep-hash = {
+          type = "app";
+          program = pkgs.lib.getExe (pkgs.writeShellApplication {
+            name = "generate-layout-previes";
+            runtimeInputs = [ pkgs.prefetch-npm-deps ];
+            text = "prefetch-npm-deps ./package-lock.json";
+          });
+        };
+      }
+    );
+
+  # {{{ Caching and whatnot
+  nixConfig = {
+    # extra-substituters = [
+    #   "erratic-gate.cachix.org-1:Ijiu/v//aVpKO4xBqV+2AM2s2uQYOnGCfoj9fYRXxtk" # I think I need this for neovim-nightly?
+    # ];
+    #
+    # extra-trusted-public-keys = [
+    #   "nix-community.cachix.org-1:mB9FSh9qf2dCimDSUo8Zy7bkq5CX+/rkCWyvRCYg3Fs="
+    # ];
+  };
+  # }}}
+}
+