the base logicGates page

package-lock.json

@@ -1956,11 +1956,6 @@
             "integrity": "sha512-8oe72N3WPMjA+2zVG71Ia0nXZ8DpQH+QyyHO+p06jT8eg8FGG3FbcUIi8KziHlAfheJQZeoqbvq1mQSQHXKYLw==",
             "dev": true
         },
-        "add-px-to-style": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/add-px-to-style/-/add-px-to-style-1.0.0.tgz",
-            "integrity": "sha1-0ME1RB+oAUqBN5BFMQlvZ/KPJjo="
-        },
         "ajv": {
             "version": "6.10.0",
             "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",
@@ -3173,6 +3168,48 @@
             "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
             "dev": true
         },
+        "copy-webpack-plugin": {
+            "version": "5.0.4",
+            "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.0.4.tgz",
+            "integrity": "sha512-YBuYGpSzoCHSSDGyHy6VJ7SHojKp6WHT4D7ItcQFNAYx2hrwkMe56e97xfVR0/ovDuMTrMffXUiltvQljtAGeg==",
+            "dev": true,
+            "requires": {
+                "cacache": "^11.3.3",
+                "find-cache-dir": "^2.1.0",
+                "glob-parent": "^3.1.0",
+                "globby": "^7.1.1",
+                "is-glob": "^4.0.1",
+                "loader-utils": "^1.2.3",
+                "minimatch": "^3.0.4",
+                "normalize-path": "^3.0.0",
+                "p-limit": "^2.2.0",
+                "schema-utils": "^1.0.0",
+                "serialize-javascript": "^1.7.0",
+                "webpack-log": "^2.0.0"
+            },
+            "dependencies": {
+                "globby": {
+                    "version": "7.1.1",
+                    "resolved": "https://registry.npmjs.org/globby/-/globby-7.1.1.tgz",
+                    "integrity": "sha1-+yzP+UAfhgCUXfral0QMypcrhoA=",
+                    "dev": true,
+                    "requires": {
+                        "array-union": "^1.0.1",
+                        "dir-glob": "^2.0.0",
+                        "glob": "^7.1.2",
+                        "ignore": "^3.3.5",
+                        "pify": "^3.0.0",
+                        "slash": "^1.0.0"
+                    }
+                },
+                "pify": {
+                    "version": "3.0.0",
+                    "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+                    "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+                    "dev": true
+                }
+            }
+        },
         "core-js": {
             "version": "2.6.9",
             "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
@@ -3739,6 +3776,32 @@
                 "randombytes": "^2.0.0"
             }
         },
+        "dir-glob": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz",
+            "integrity": "sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==",
+            "dev": true,
+            "requires": {
+                "path-type": "^3.0.0"
+            },
+            "dependencies": {
+                "path-type": {
+                    "version": "3.0.0",
+                    "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+                    "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+                    "dev": true,
+                    "requires": {
+                        "pify": "^3.0.0"
+                    }
+                },
+                "pify": {
+                    "version": "3.0.0",
+                    "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+                    "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+                    "dev": true
+                }
+            }
+        },
         "dns-equal": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -3773,16 +3836,6 @@
                 "utila": "~0.4"
             }
         },
-        "dom-css": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/dom-css/-/dom-css-2.1.0.tgz",
-            "integrity": "sha1-/bwtWgFdCj4YcuEUcrvQ57nmogI=",
-            "requires": {
-                "add-px-to-style": "1.0.0",
-                "prefix-style": "2.0.1",
-                "to-camel-case": "1.0.0"
-            }
-        },
         "dom-helpers": {
             "version": "3.4.0",
             "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
@@ -5880,6 +5933,12 @@
             "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
             "dev": true
         },
+        "ignore": {
+            "version": "3.3.10",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
+            "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
+            "dev": true
+        },
         "import-fresh": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
@@ -7722,7 +7781,8 @@
         "performance-now": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-            "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+            "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+            "dev": true
         },
         "pify": {
             "version": "2.3.0",
@@ -8385,11 +8445,6 @@
             "integrity": "sha512-ESPktioptiSUchCKgggAkzdmkgzKfmp0EU8jXH+5kbIUB+unr0Y4CY9SRMvibuvYUBjNh1ACLbxqYNpdTQOteQ==",
             "dev": true
         },
-        "prefix-style": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/prefix-style/-/prefix-style-2.0.1.tgz",
-            "integrity": "sha1-ZrupqHDP2jCKXcIOhekSCTLJWgY="
-        },
         "prepend-http": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
@@ -8560,14 +8615,6 @@
             "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==",
             "dev": true
         },
-        "raf": {
-            "version": "3.4.1",
-            "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
-            "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-            "requires": {
-                "performance-now": "^2.1.0"
-            }
-        },
         "randombytes": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -8621,16 +8668,6 @@
                 "scheduler": "^0.13.6"
             }
         },
-        "react-custom-scrollbars": {
-            "version": "4.2.1",
-            "resolved": "https://registry.npmjs.org/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz",
-            "integrity": "sha1-gw/ZUCkn6X6KeMIIaBOJmyqLZts=",
-            "requires": {
-                "dom-css": "^2.0.0",
-                "prop-types": "^15.5.10",
-                "raf": "^3.1.0"
-            }
-        },
         "react-dom": {
             "version": "16.8.6",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
@@ -10243,25 +10280,12 @@
             "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=",
             "dev": true
         },
-        "to-camel-case": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/to-camel-case/-/to-camel-case-1.0.0.tgz",
-            "integrity": "sha1-GlYFSy+daWKYzmamCJcyK29CPkY=",
-            "requires": {
-                "to-space-case": "^1.0.0"
-            }
-        },
         "to-fast-properties": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
             "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
             "dev": true
         },
-        "to-no-case": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/to-no-case/-/to-no-case-1.0.2.tgz",
-            "integrity": "sha1-xyKQcWTvaxeBMsjmmTAhLRtKoWo="
-        },
         "to-object-path": {
             "version": "0.3.0",
             "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
@@ -10304,14 +10328,6 @@
                 "repeat-string": "^1.6.1"
             }
         },
-        "to-space-case": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/to-space-case/-/to-space-case-1.0.0.tgz",
-            "integrity": "sha1-sFLar7Gysp3HcM6gFj5ewOvJ/Bc=",
-            "requires": {
-                "to-no-case": "^1.0.0"
-            }
-        },
         "toidentifier": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",

package.json

@@ -6,7 +6,6 @@
         "dev": "webpack-dev-server --open --mode development",
         "build": "cross-env NODE_ENV=production webpack",
         "build:server": "cross-env NODE_ENV=server webpack",
-        "deploy": "ts-node deploy",
         "show": "gource -f  --start-date \"2019-07-01 12:00\" --key --hide dirnames,filenames,bloom -s 0.3",
         "start": "node ./dist/server"
     },
@@ -27,6 +26,7 @@
         "babel-loader": "^8.0.6",
         "babel-plugin-transform-runtime": "^6.23.0",
         "babel-regenerator-runtime": "^6.5.0",
+        "copy-webpack-plugin": "^5.0.4",
         "cross-env": "^5.2.0",
         "css-loader": "^3.0.0",
         "file-loader": "^4.1.0",
@@ -53,7 +53,6 @@
         "keycode": "^2.2.0",
         "mainloop.js": "^1.0.4",
         "react": "^16.8.6",
-        "react-custom-scrollbars": "^4.2.1",
         "react-dom": "^16.8.6",
         "react-helmet": "^5.2.1",
         "react-router-dom": "^5.0.1",

src/index.html

@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head> </head>
+    <head>
+        <!-- This doesnt work inside react helmetv-->
+        <meta name="pinterest" content="nopin" />
+    </head>
 
     <body
         ondragstart="return false;"

src/main.tsx

@@ -6,18 +6,25 @@ import { handleErrors } from './modules/errors/helpers/handleErrors'
 import { initKeyBindings } from './modules/keybindings/helpers/initialiseKeyBindings'
 import { initBaseTemplates } from './modules/saving/helpers/initBaseTemplates'
 import { loadSubject } from './modules/core/subjects/loadedSubject'
-import { take } from 'rxjs/operators'
+import { take, filter } from 'rxjs/operators'
 import { logWelcome } from './modules/core/helpers/logWelcome'
+import { initRenderer } from './modules/simulationRenderer/helpers/initRenderer'
+import { updateLogicGateList } from './modules/logic-gates/subjects/LogicGateList'
 
 export const start = async () => {
-    console.clear()
+    const result = loadSubject
-
+        .pipe(
-    const result = loadSubject.pipe(take(1)).toPromise()
+            filter(a => a),
+            take(1)
+        )
+        .toPromise()
 
     handleErrors()
+    initRenderer()
     initKeyBindings()
     initBaseTemplates()
     logWelcome()
+    updateLogicGateList()
 
     render(<App />, document.getElementById('app'))
 

src/modules/core/components/App.scss

@@ -1,4 +1,6 @@
 @import '../styles/global-styles/global-styles.scss';
+@import '../../core/styles/mixins/full-screen.scss';
+@import '../styles/colors.scss';
 
 html,
 body {
@@ -8,7 +10,7 @@ body {
     overflow: hidden;
 }
 
-canvas {
+.page {
-    background-color: #222222;
+    @include page-width();
-    z-index: -1;
+    background-color: $bg;
 }

src/modules/core/components/App.tsx

@@ -1,33 +1,38 @@
 import '../styles/reset'
 import './App.scss'
+import './Scrollbars.scss'
 import 'react-toastify/dist/ReactToastify.css'
 
 import { ToastContainer } from 'react-toastify'
 import { theme as muiTheme } from '../constants'
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
 
-import React from 'react'
+import React, { useEffect } from 'react'
-import Canvas from './Canvas'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import Theme from '@material-ui/styles/ThemeProvider'
 import Sidebar from './Sidebar'
-import CreateSimulation from '../../create-simulation/components/CreateSimulation'
-import Input from '../../input/components/Input'
-import LogicGateModal from '../../logic-gates/components/LogicGateModal'
 import Head from './Head'
+import Root from './Root'
+import LogicGatePage from '../../logic-gates/components/LogicGatesPage'
+import { loadSubject } from '../subjects/loadedSubject'
 
 const App = () => {
+    useEffect(() => {
+        loadSubject.next(true)
+    })
+
     return (
         <>
             <Head />
             <CssBaseline />
 
             <Theme theme={muiTheme}>
-                <CssBaseline />
+                <Router>
-                <Canvas />
                     <Sidebar />
-                <CreateSimulation />
+
-                <Input />
+                    <Route path="/" component={Root} exact />
-                <LogicGateModal />
+                    <Route path="/gates" component={LogicGatePage} />
+                </Router>
             </Theme>
 
             <ToastContainer

src/modules/core/components/BackToSimulation.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import Icon from '@material-ui/core/Icon'
+import { useTranslation } from '../../internalisation/helpers/useLanguage'
+import { Link } from 'react-router-dom'
+
+const BackToSimulation = () => {
+    const translation = useTranslation()
+
+    return (
+        <Link to="/">
+            <ListItem button className="contained">
+                <ListItemIcon>
+                    <Icon>arrow_back_ios</Icon>
+                </ListItemIcon>
+                <ListItemText>
+                    {translation.sidebar.backToSimulation}
+                </ListItemText>
+            </ListItem>
+        </Link>
+    )
+}
+
+export default BackToSimulation

src/modules/core/components/Canvas.tsx

@@ -1,34 +1,30 @@
-import React, { Component, createRef, Ref, RefObject } from 'react'
+import React, { Component, createRef, RefObject } from 'react'
 import FluidCanvas from './FluidCanvas'
 import loop from 'mainloop.js'
-import { SimulationRenderer } from '../../simulationRenderer/classes/SimulationRenderer'
 import { renderSimulation } from '../../simulationRenderer/helpers/renderSimulation'
+import { getRendererSafely } from '../../logic-gates/helpers/getRendererSafely'
+import { Subscription } from 'rxjs'
 import { rendererSubject } from '../subjects/rendererSubject'
-import { loadSubject } from '../subjects/loadedSubject'
+import { filter } from 'rxjs/operators'
 
 class Canvas extends Component {
     private canvasRef: RefObject<HTMLCanvasElement> = createRef()
     private renderingContext: CanvasRenderingContext2D | null
-    private renderer = new SimulationRenderer(this.canvasRef)
 
     public constructor(props: {}) {
         super(props)
 
-        rendererSubject.next(this.renderer)
-
         loop.setDraw(() => {
             if (this.renderingContext) {
-                renderSimulation(this.renderingContext, this.renderer)
+                renderSimulation(this.renderingContext, getRendererSafely())
             }
         })
     }
 
     public componentDidMount() {
-        loadSubject.next(true)
-
         if (this.canvasRef.current) {
             this.renderingContext = this.canvasRef.current.getContext('2d')
-            this.renderer.updateWheelListener()
+            getRendererSafely().updateWheelListener(this.canvasRef)
         }
 
         loop.start()
@@ -39,12 +35,14 @@ class Canvas extends Component {
     }
 
     public render() {
+        const renderer = getRendererSafely()
+
         return (
             <FluidCanvas
                 ref={this.canvasRef}
-                mouseDownOuput={this.renderer.mouseDownOutput}
+                mouseDownOuput={renderer.mouseDownOutput}
-                mouseUpOutput={this.renderer.mouseUpOutput}
+                mouseUpOutput={renderer.mouseUpOutput}
-                mouseMoveOutput={this.renderer.mouseMoveOutput}
+                mouseMoveOutput={renderer.mouseMoveOutput}
             />
         )
     }

src/modules/core/components/FluidCanvas.tsx

@@ -33,6 +33,7 @@ const FluidCanvas = forwardRef(
 
         return (
             <canvas
+                className="page"
                 ref={ref}
                 width={currentWidth}
                 height={currentHeight}

src/modules/core/components/Head.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 const title = 'Logic gate simulator'
 const description = 'A logic gate simulator made for infoeducatie 2019'
 const url = 'https://logic-gate-simulator.herokuapp.com/'
-const thumbail = require('../../../assets/thumbail.png')
+const thumbail = require('../../../assets/favicon.ico')
 
 const Head = () => {
     return (
@@ -34,6 +34,11 @@ const Head = () => {
             <meta property="og:image" content={`${url}${thumbail}`} />
             <meta property="og:url" content={url} />
 
+            <meta
+                name="Description"
+                content="A logic gate simulator made for infoeducatie 2019"
+            />
+
             <link rel="icon" href={require('../../../assets/favicon.ico')} />
         </Helmet>
     )

src/modules/core/components/LogicGates.tsx

@@ -4,8 +4,8 @@ import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
 import Icon from '@material-ui/core/Icon'
 import { useTranslation } from '../../internalisation/helpers/useLanguage'
-import { open } from '../../logic-gates/components/LogicGateModal'
 import { updateLogicGateList } from '../../logic-gates/subjects/LogicGateList'
+import { Link } from 'react-router-dom'
 
 /**
  * Component wich contains the sidebar 'Open simulation' button
@@ -16,11 +16,11 @@ const LogicGates = () => {
     const translation = useTranslation()
 
     return (
+        <Link to="/gates">
             <ListItem
                 button
                 onClick={() => {
                     updateLogicGateList()
-                open.next(true)
                 }}
             >
                 <ListItemIcon>
@@ -28,6 +28,7 @@ const LogicGates = () => {
                 </ListItemIcon>
                 <ListItemText>{translation.sidebar.logicGates}</ListItemText>
             </ListItem>
+        </Link>
     )
 }
 

src/modules/core/components/Root.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Canvas from './Canvas'
+import CreateSimulation from '../../create-simulation/components/CreateSimulation'
+import Input from '../../input/components/Input'
+
+const Root = () => {
+    return (
+        <>
+            <Canvas />
+            <CreateSimulation />
+            <Input />
+        </>
+    )
+}
+
+export default Root

src/modules/core/components/Scrollbars.scss

@@ -0,0 +1,19 @@
+/* width */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: #888;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}

src/modules/core/components/Sidebar.tsx

@@ -7,6 +7,8 @@ import LogicGates from './LogicGates'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 import Language from './Language'
 import SimulationActions from '../../simulation-actions/components/SimulationActions'
+import { Route, Switch } from 'react-router'
+import BackToSimulation from './BackToSimulation'
 /**
  * The width of the sidebar
  */
@@ -56,11 +58,21 @@ const useStyles = makeStyles(
 const Sidebar = () => {
     const classes = useStyles()
 
+    const rootSidebarContent = () => {
+        return (
+            <>
+                <CreateSimulationButton />
+                <OpenSimulation />
+                <LogicGates />
+                <SimulationActions />
+            </>
+        )
+    }
     return (
         <div className={classes.root}>
             <Drawer
                 className={classes.drawer}
-                variant="persistent"
+                variant={'persistent'}
                 anchor="right"
                 open={true}
                 classes={{
@@ -68,10 +80,10 @@ const Sidebar = () => {
                 }}
             >
                 <List component="nav" className={classes.list}>
-                    <CreateSimulationButton />
+                    <Switch>
-                    <OpenSimulation />
+                        <Route path="/" exact component={rootSidebarContent} />
-                    <LogicGates />
+                        <Route path="*" component={BackToSimulation} />
-                    <SimulationActions />
+                    </Switch>
                 </List>
 
                 <Language />

src/modules/core/styles/colors.scss

@@ -1,3 +1,4 @@
 $modal-bg-color: rgba(0, 0, 0, 0.7);
 $primary: #673ab7;
 $grey: #444444;
+$bg: #222222;

src/modules/core/styles/mixins/full-screen.scss

@@ -5,3 +5,8 @@
     top: 0;
     left: 0;
 }
+
+@mixin page-width {
+    @include full-screen();
+    width: calc(100% - 240px);
+}

src/modules/core/subjects/loadedSubject.ts

@@ -1,3 +1,3 @@
-import { Subject } from 'rxjs'
+import { BehaviorSubject } from 'rxjs'
 
-export const loadSubject = new Subject<true>()
+export const loadSubject = new BehaviorSubject(false)

src/modules/internalisation/translations/english.ts

@@ -10,7 +10,8 @@ export const EnglishTranslation: Translation = {
         logicGates: 'Logic gates',
         openSimulation: 'Open simulations',
         simulation: 'Simulation',
-        language: 'Language'
+        language: 'Language',
+        backToSimulation: 'Back to simulation'
     },
     createSimulation: {
         mode: {
@@ -42,6 +43,7 @@ export const EnglishTranslation: Translation = {
         cleaned: name => `Succesfully cleaned simulation '${name}'`,
         refreshed: name => `Succesfully refreshed simulation '${name}'`,
         undone: name => `Succesfully undone simulation '${name}'`,
-        deletedSimulation: name => `Succesfully deleted simulation '${name}'`
+        deletedSimulation: name => `Succesfully deleted simulation '${name}'`,
+        addedGate: name => `Succesfully added gate '${name}'`
     }
 }

src/modules/internalisation/translations/nederlands.ts

@@ -10,7 +10,8 @@ export const DutchTranslation: Translation = {
         logicGates: 'Logische poorten',
         openSimulation: 'Open simulatie',
         simulation: 'Todo',
-        language: 'Taal'
+        language: 'Taal',
+        backToSimulation: 'Todo'
     },
     actions: {
         'delete selection': 'Todo',

src/modules/internalisation/translations/romanian.ts

@@ -10,7 +10,8 @@ export const RomanianTranslation: Translation = {
         openSimulation: 'Deschide o simulație',
         logicGates: 'Porți logice',
         simulation: 'Simulație',
-        language: 'Limba'
+        language: 'Limba',
+        backToSimulation: 'Înapoi la simulație'
     },
     createSimulation: {
         mode: {
@@ -44,6 +45,7 @@ export const RomanianTranslation: Translation = {
         refreshed: name => `Simulația '${name}' a fost reîncărcată cu succes`,
         undone: name => `Acțiunea a fost întoarsă`,
         deletedSimulation: name =>
-            `Simulația '${name}' a fost ștearsă cu succes`
+            `Simulația '${name}' a fost ștearsă cu succes`,
+        addedGate: name => `Componentul '${name}' a fost adăugat cu succes`
     }
 }

src/modules/internalisation/types/TranslationInterface.ts

@@ -16,6 +16,7 @@ export interface Translation {
         logicGates: string
         simulation: string
         language: string
+        backToSimulation: string
     }
     createSimulation: {
         mode: {
@@ -35,6 +36,7 @@ export interface Translation {
         cleaned: NameSentence
         undone: NameSentence
         deletedSimulation: NameSentence
+        addedGate: NameSentence
     }
     actions: Record<possibleAction, string>
 }

src/modules/keybindings/helpers/initialiseKeyBindings.ts

@@ -31,7 +31,7 @@ export const initKeyBindings = (bindings: KeyBindingMap = keyBindings) => {
     }
 
     window.addEventListener('keydown', e => {
-        if (!modalIsOpen()) {
+        if (!modalIsOpen() && location.pathname === '/') {
             const current: {
                 keys: string[]
                 callback: Function

src/modules/logic-gates/components/AddGate.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Icon from '@material-ui/core/Icon'
+import IconButton from '@material-ui/core/IconButton'
+import { LogicGateProps } from './LogicGate'
+import { addGateFromTemplate } from '../helpers/addGateFromTemplate'
+
+const AddGate = ({ template }: LogicGateProps) => {
+    return (
+        <div className="gate-info-icon">
+            <IconButton
+                aria-label="add"
+                onClick={() => {
+                    addGateFromTemplate(template)
+                }}
+            >
+                <Icon>add</Icon>
+            </IconButton>
+        </div>
+    )
+}
+
+export default AddGate

src/modules/logic-gates/components/GateInfo.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Icon from '@material-ui/core/Icon'
+import IconButton from '@material-ui/core/IconButton'
+import { LogicGateProps } from './LogicGate'
+import { randomItem } from '../../internalisation/helpers/randomItem'
+
+const GateInfo = ({ template }: LogicGateProps) => {
+    const info = template.info
+
+    if (info.length === 0) {
+        return <></>
+    } else {
+        return (
+            <div className="gate-info-icon">
+                <a href={randomItem(info)} target="blank">
+                    <IconButton aria-label="info">
+                        <Icon>info</Icon>
+                    </IconButton>
+                </a>
+            </div>
+        )
+    }
+}
+
+export default GateInfo

src/modules/logic-gates/components/GateSettings.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Icon from '@material-ui/core/Icon'
+import { LogicGateProps } from './LogicGate'
+
+const GateSettings = ({ template }: LogicGateProps) => {
+    const tags = template.tags
+
+    if (tags.includes('base')) {
+        return <></>
+    } else {
+        return (
+            <div className="gate-info-icon">
+                <Icon>settings</Icon>
+            </div>
+        )
+    }
+}
+
+export default GateSettings

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

@@ -0,0 +1,31 @@
+@import '../../core/styles/mixins/flex.scss';
+
+$gate-margin: 1em;
+
+.gate > section > .gate-preview > * {
+    width: 100%;
+}
+
+.gate > section > .gate-preview > * {
+    display: block;
+    height: 10em;
+    width: 10em;
+
+    margin: $gate-margin;
+}
+
+.gate > section > .gate-name {
+    width: 100%;
+    text-align: center;
+}
+
+.gate > section > .gate-icons {
+    @include flex();
+
+    width: calc(100% - 2 * #{$gate-margin});
+    height: 100%;
+    margin: $gate-margin;
+
+    flex-direction: row;
+    justify-content: space-evenly;
+}

src/modules/logic-gates/components/LogicGate.tsx

@@ -0,0 +1,46 @@
+import './LogicGate.scss'
+import React from 'react'
+import { GateTemplate } from '../../simulation/types/GateTemplate'
+import GateInfo from './GateInfo'
+import GateSettings from './GateSettings'
+import AddGate from './AddGate'
+
+export interface LogicGateProps {
+    template: GateTemplate
+}
+
+const LogicGate = ({ template }: LogicGateProps) => {
+    const gatePreview =
+        template.material.type === 'image' ? (
+            <img src={template.material.fill} alt={template.metadata.name} />
+        ) : (
+            <div
+                style={{
+                    backgroundColor: template.material.fill
+                }}
+            />
+        )
+
+    const rawName = template.metadata.name
+    const name = `${rawName[0].toUpperCase()}${rawName.substr(1)}`
+
+    return (
+        <div className="gate">
+            <section>
+                <div className="gate-preview">{gatePreview}</div>
+            </section>
+            <section>
+                <div className="gate-name">{name}</div>
+            </section>
+            <section>
+                <div className="gate-icons">
+                    <GateInfo template={template} />
+                    <GateSettings template={template} />
+                    <AddGate template={template} />
+                </div>
+            </section>
+        </div>
+    )
+}
+
+export default LogicGate

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

@@ -1,70 +0,0 @@
-@import '../../core/styles/mixins/flex.scss';
-@import '../../core/styles/mixins/visibility.scss';
-@import '../../modals/styles/mixins/modal-container.scss';
-@import '../../modals/styles/mixins/modal-title.scss';
-@import '../../core/styles/colors.scss';
-@import '../../core/styles/mixins/glow.scss';
-
-// Opacities
-$normal-opacity: 0.6;
-$hover-opacity: 0.9;
-
-// Colors
-$item-color: $grey;
-
-#logic-gate-modal-container {
-    @include modal-container();
-
-    justify-content: center;
-    overflow-y: auto;
-    height: 100%;
-}
-
-.visible#logic-gate-modal-container {
-    @include visible();
-}
-
-#logic-gate-modal-container > .logic-gate-item {
-    @include flex();
-
-    justify-content: left;
-    flex-direction: row;
-
-    width: 80%;
-    height: 4em;
-
-    border: 3px solid white;
-    margin: 0.5em;
-
-    background-color: rgba($item-color, $normal-opacity);
-}
-
-#logic-gate-modal-container > .logic-gate-item:hover {
-    background-color: rgba($item-color, $hover-opacity);
-}
-
-#logic-gate-modal-container > .logic-gate-item > * {
-    font-size: 2.5em;
-}
-
-#logic-gate-modal-container > .logic-gate-item > .logic-gate-item-type {
-    margin: 0.5em;
-}
-
-#logic-gate-modal-container > .logic-gate-item > *:last-child {
-    margin-right: 0.5em;
-}
-
-.lgi-icon:hover:not(.logic-gate-item-type) {
-    border: 1px solid white;
-}
-
-#logic-gate-modal-container > .logic-gate-item > .logic-gate-item-name {
-    flex-grow: 1;
-}
-
-#logic-gate-modal-container > .logic-gate-item:first-child {
-    // height: 4em;
-
-    opacity: 0;
-}

src/modules/logic-gates/components/LogicGateModal.tsx

@@ -1,90 +0,0 @@
-import './LogicGateModal.scss'
-import React from 'react'
-import { BehaviorSubject } from 'rxjs'
-import { useObservable } from 'rxjs-hooks'
-import { LogicGateList } from '../subjects/LogicGateList'
-import Icon from '@material-ui/core/Icon'
-import Typography from '@material-ui/core/Typography'
-import { addGate } from '../../simulation/helpers/addGate'
-import { randomItem } from '../../internalisation/helpers/randomItem'
-import { gateIcons } from '../constants'
-import { getTemplateSafely } from '../helpers/getTemplateSafely'
-import { getRendererSafely } from '../helpers/getRendererSafely'
-
-/**
- * Subject containing the open state of the modal
- */
-export const open = new BehaviorSubject(false)
-
-/**
- * helper to close the modal
- */
-export const handleClose = () => {
-    open.next(false)
-}
-
-/**
- * The component containing the info / actions about all logic gates
- */
-const LogicGateModal = () => {
-    const openSnapshot = useObservable(() => open, false)
-    const gates = useObservable(() => LogicGateList, [])
-    const renderer = getRendererSafely()
-
-    return (
-        <div
-            className={openSnapshot ? 'visible' : ''}
-            id="logic-gate-modal-container"
-            onClick={handleClose}
-        >
-            <div className="logic-gate-item">---</div>
-            {gates
-                .map(getTemplateSafely)
-                .filter(template => {
-                    return (
-                        renderer.simulation.mode === 'project' ||
-                        template.metadata.name !== renderer.simulation.name
-                    )
-                })
-                .map((template, index) => {
-                    const { name } = template.metadata
-
-                    return (
-                        <div
-                            key={index}
-                            className="logic-gate-item"
-                            onClick={e => {
-                                addGate(renderer, name)
-
-                                e.stopPropagation()
-                            }}
-                        >
-                            <Icon className="lgi-icon logic-gate-item-type">
-                                {gateIcons[template.tags[0]]}
-                            </Icon>
-                            <Typography className="logic-gate-item-name">
-                                {name}
-                            </Typography>
-                            {template.info.length ? (
-                                <a
-                                    target="_blank"
-                                    className="logic-gate-item-info"
-                                    href={randomItem(template.info)}
-                                    onClick={e => {
-                                        e.stopPropagation()
-                                        // e.preventDefault()
-                                    }}
-                                >
-                                    <Icon className="lgi-icon">info</Icon>
-                                </a>
-                            ) : (
-                                ''
-                            )}
-                        </div>
-                    )
-                })}
-        </div>
-    )
-}
-
-export default LogicGateModal

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

@@ -0,0 +1,34 @@
+@import '../../core/styles/colors.scss';
+@import '../../core/styles/mixins/flex.scss';
+
+#gates-page {
+    color: white;
+}
+
+.gate-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    grid-auto-rows: 1fr;
+}
+
+.gate-grid::before {
+    content: '';
+    width: 0;
+    padding-bottom: 100%;
+    grid-row: 1 / 1;
+    grid-column: 1 / 1;
+}
+
+.gate-grid > *:first-child {
+    grid-row: 1 / 1;
+    grid-column: 1 / 1;
+}
+
+.gate-grid > * {
+    @include flex();
+
+    justify-content: start;
+    margin: 0.3em;
+    background-color: $grey;
+    height: 20em;
+}

src/modules/logic-gates/components/LogicGatesPage.tsx

@@ -0,0 +1,38 @@
+import './LogicGatesPage.scss'
+import React from 'react'
+import { useObservable } from 'rxjs-hooks'
+import { LogicGateList } from '../subjects/LogicGateList'
+import { getTemplateSafely } from '../helpers/getTemplateSafely'
+import { getRendererSafely } from '../helpers/getRendererSafely'
+import LogicGate from './LogicGate'
+
+/**
+ * The component containing the info / actions about all logic gates
+ */
+const LogicGatePage = () => {
+    const gates = useObservable(() => LogicGateList, [])
+    const renderer = getRendererSafely()
+
+    return (
+        <main>
+            <div className="page" id="gates-page">
+                <div className="gate-grid">
+                    {gates
+                        .map(getTemplateSafely)
+                        .filter(template => {
+                            return (
+                                renderer.simulation.mode === 'project' ||
+                                template.metadata.name !==
+                                    renderer.simulation.name
+                            )
+                        })
+                        .map((template, index) => {
+                            return <LogicGate key={index} template={template} />
+                        })}
+                </div>
+            </div>
+        </main>
+    )
+}
+
+export default LogicGatePage

src/modules/logic-gates/helpers/addGateFromTemplate.ts

@@ -0,0 +1,12 @@
+import { GateTemplate } from '../../simulation/types/GateTemplate'
+import { addGate } from '../../simulation/helpers/addGate'
+import { getRendererSafely } from './getRendererSafely'
+
+/**
+ * Adds a gate to the current simulation from its template
+ *
+ * @param template The template to create
+ */
+export const addGateFromTemplate = (template: GateTemplate) => {
+    addGate(getRendererSafely(), template.metadata.name)
+}

src/modules/modals/helpers/modalIsOpen.ts

@@ -1,11 +1,6 @@
 import { InputStore } from '../../input/stores/InputStore'
-import { open as logicGateModalIsOpen } from '../../logic-gates/components/LogicGateModal'
 import { CreateSimulationStore } from '../../create-simulation/stores/CreateSimulationStore'
 
 export const modalIsOpen = () => {
-    return (
+    return InputStore.data.open.value || CreateSimulationStore.data.open.value
-        InputStore.data.open.value ||
-        logicGateModalIsOpen.value ||
-        CreateSimulationStore.data.open.value
-    )
 }

src/modules/simulation/helpers/addGate.ts

@@ -6,9 +6,13 @@ import { SimulationRenderer } from '../../simulationRenderer/classes/SimulationR
 import { DefaultGateTemplate } from '../constants'
 import { vector2 } from '../../../common/math/classes/Transform'
 import { Screen } from '../../screen/helpers/Screen'
+import { toast } from 'react-toastify'
+import { createToastArguments } from '../../toasts/helpers/createToastArguments'
+import { CurrentLanguage } from '../../internalisation/stores/currentLanguage'
 
 export const addGate = (renderer: SimulationRenderer, templateName: string) => {
     const template = templateStore.get(templateName)
+    const translation = CurrentLanguage.getTranslation()
 
     if (!template)
         throw new SimulationError(`Cannot find template ${templateName}`)
@@ -32,4 +36,11 @@ export const addGate = (renderer: SimulationRenderer, templateName: string) => {
 
     renderer.simulation.push(gate)
     renderer.spawnCount++
+
+    toast(
+        ...createToastArguments(
+            translation.messages.addedGate(templateName),
+            'add_circle_outline'
+        )
+    )
 }

src/modules/simulationRenderer/classes/SimulationRenderer.ts

@@ -67,7 +67,6 @@ export class SimulationRenderer {
     }
 
     public constructor(
-        public ref: RefObject<HTMLCanvasElement>,
         options: Partial<SimulationRendererOptions> = {},
         public simulation = new Simulation('project', 'default')
     ) {
@@ -83,6 +82,8 @@ export class SimulationRenderer {
 
             this.lastMousePosition = worldPosition
 
+            console.log('click')
+
             // We need to iterate from the last to the first
             // because if we have 2 overlapping gates,
             // we want to select the one on top
@@ -290,9 +291,9 @@ export class SimulationRenderer {
         this.reloadSave()
     }
 
-    public updateWheelListener() {
+    public updateWheelListener(ref: RefObject<HTMLCanvasElement>) {
-        if (this.ref.current) {
+        if (ref.current) {
-            this.ref.current.addEventListener('wheel', event => {
+            ref.current.addEventListener('wheel', event => {
                 if (!modalIsOpen()) {
                     event.preventDefault()
 

src/modules/simulationRenderer/helpers/initRenderer.ts

@@ -0,0 +1,16 @@
+import { rendererSubject } from '../../core/subjects/rendererSubject'
+import { SimulationError } from '../../errors/classes/SimulationError'
+import { SimulationRenderer } from '../classes/SimulationRenderer'
+
+/**
+ * Helper to create the simulationRenderer
+ *
+ * @throws SimulationError if the renderer already exists
+ */
+export const initRenderer = () => {
+    if (rendererSubject.value) {
+        throw new SimulationError('Renderer already inited')
+    } else {
+        rendererSubject.next(new SimulationRenderer())
+    }
+}

src/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Disallow: /server.js
+Disallow: /js
+Disallow: /css

src/server.ts

@@ -5,7 +5,7 @@ const app = express()
 
 app.use(_static(__dirname))
 
-app.get('/', (rex, res) => {
+app.get('*', (rex, res) => {
     res.sendFile(resolve(__dirname, 'index.html'))
 })
 

webpack.config.js

@@ -5,6 +5,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
 const webpackMerge = require('webpack-merge')
 const nodeExternals = require('webpack-node-externals')
+const CopyPlugin = require('copy-webpack-plugin')
 
 const isProduction = process.env.NODE_ENV === 'production'
 
@@ -71,7 +72,15 @@ const serverConfig = {
     },
     node: {
         __dirname: false
+    },
+    plugins: [
+        new CopyPlugin([
+            {
+                from: resolve(sourceFolder, 'public'),
+                to: buildFolder
             }
+        ])
+    ]
 }
 
 const baseConfig = {