favicon

README.md

@@ -2,11 +2,17 @@
 
 This is a logic gate simulator made for infoeducatie 2019.
 
+Many thanks to [Canara](http://canana.xyz/) for the logo!
+
 ## Getting started
 
 Check out the [demo](https://mateiadrielrafael.github.io/logicGateSimulator/)
 Or read the [docs](./docs/main.md) (work in progess)
 
+I've also made a [trello board](https://trello.com/b/LW3XSnGN/logic-gate-simulator) and a [discord-serber]()
+
+// TODO: make the server
+
 ## Features
 
 -   Simple & intuitive UI

docs/controls.md

@@ -1,93 +0,0 @@
-# Controls
-
-## Moving around
-
--   To move around, just click anywhere in the enviroment, drag in the oposite of the direction you want to moe in.
--   Release when you finished the desired movement.
-
-## Zooming
-
--   To zoom in, scroll upwards.
--   To zoom out, scroll downwards.
--   The zoom will be applied in the position pointed by the mouse.
-
-## Moving a component
-
--   To move a component, left click on it.
--   The gate will follow your mouse
--   Release when the gate got in the desired position
-
-## Deleting a component
-
--   To remove a component, right click on it.
-
-## Connection 2 pins
-
--   To connect 2 pins, first click on one of them.
--   Click on the other pin
-
-> Note: You cannot connect 2 pins of the same type.
-
-## Deleting a wire
-
--   To delete a wire, click on it
-
-## Opening the command palette
-
--   To open the command palette, press ctrl + shift + p
-
-## Creating a simulation
-
--   To create a simulation, click the first button from the top of the sidebar, then type the desired name.
-
-## Saving a simulation
-
--   To save a simulation, follow one of the following actions:
-    1. Press ctrl + s
-    2. Open the command palette and type save, then press enter
-    3. Click on the 'simulation' button, then click 'save'
-
-## Opening a simulation
-
--   To open a simulation, click 'open simulation', then click the name of the simulation
-
-## Deleting a simulation
-
--   To delete a simulation, click 'open simulation', and then click the 'delete' icon on the row of your desired simulation.
-
-## Rewind to the latest save (undo)
-
--   To rewind to the latest save, follow one of the following actions:
-    1. Press ctrl + z
-    2. Click 'simulation' and then click 'undo'
-
-## Downloading a simulation
-
--   To download a simulation, follow one of the following actions:
-    1. Click 'simulation' and then type 'download'
-    2. Open the command palette, type 'download' and then press enter
-
-> Note: You can also type 'download --save' or 'download -s' in the command palette to also save the simulation before downloading it
-
-## Deleting a simulation
-
--   To delete a simulation, press 'simulation' and then press 'delete'
--   Press 'yes'
-
-## Refreshing the enviroment
-
--   To refresh the enviroment (reload all components), follow one of the following actions:
-    1. Click 'simulation' and then click 'refresh'
-    2. Press sfhit + delete
-
-> Note: this won't refresh the whole window. To refresh the whole window, use the ui built in your browser
-
-> Note 2: this can be useful if you just edited a custom logic gate and you want to see the changes without refreshing the whole window
-
-## Clearing a simulation
-
-> Note: cleaning = deleting all logic gates wich are not connected to anything
-
--   To clear a simulation follow one of the following actions:
-    1. Click 'simulation'and then click 'clean'
-    2. Press shift + delete

docs/import.md

@@ -1,13 +0,0 @@
-# importing a logic gate
-
-## Opening the import palette
-
--   To open the import palette, follow one of the following actions:
-
-1. Press ctrl + g
-2. Press 'custom gates' and then press 'import new gate'
-
-## Importing a logic gate
-
--   Open the import palette
--   Type a valid command (see **[the url parser](./url.md)**)

docs/url.md

@@ -1,13 +0,0 @@
-# The url parser
-
-If the first word is 'gist', the parser will automatcally try to fetch the github gist with the id equl to the second word:
-
-**_Eg_**:
-
-```
-gist 8886faa6f99a7d2667ea8aa2f81ace04
-```
-
-![example of a gist id](./assets/gist_url.png)
-
-Else, the parser will just try to fetch directly from the full string

package-lock.json

@@ -1647,6 +1647,15 @@
                 "csstype": "^2.2.0"
             }
         },
+        "@types/react-helmet": {
+            "version": "5.0.8",
+            "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-5.0.8.tgz",
+            "integrity": "sha512-ZTr12eDAYI0yUiMx1K82EHqRYa8J1BOOLus+0gL+AkksUiIPwLE0wLiXa9FNqD8r9GXAi+yRPZImkRh1JNlTkQ==",
+            "dev": true,
+            "requires": {
+                "@types/react": "*"
+            }
+        },
         "@types/react-router": {
             "version": "5.0.3",
             "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.0.3.tgz",
@@ -4057,6 +4066,11 @@
                 }
             }
         },
+        "exenv": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+            "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+        },
         "expand-brackets": {
             "version": "2.1.4",
             "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -8532,6 +8546,22 @@
                 "scheduler": "^0.13.6"
             }
         },
+        "react-fast-compare": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+            "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+        },
+        "react-helmet": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.1.tgz",
+            "integrity": "sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==",
+            "requires": {
+                "object-assign": "^4.1.1",
+                "prop-types": "^15.5.4",
+                "react-fast-compare": "^2.0.2",
+                "react-side-effect": "^1.1.0"
+            }
+        },
         "react-is": {
             "version": "16.8.6",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
@@ -8588,6 +8618,15 @@
                 "tiny-warning": "^1.0.0"
             }
         },
+        "react-side-effect": {
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz",
+            "integrity": "sha512-Z2ZJE4p/jIfvUpiUMRydEVpQRf2f8GMHczT6qLcARmX7QRb28JDBTpnM2g/i5y/p7ZDEXYGHWg0RbhikE+hJRw==",
+            "requires": {
+                "exenv": "^1.2.1",
+                "shallowequal": "^1.0.1"
+            }
+        },
         "react-toastify": {
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-5.3.2.tgz",
@@ -9297,6 +9336,11 @@
                 }
             }
         },
+        "shallowequal": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+            "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+        },
         "shebang-command": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

package.json

@@ -19,6 +19,7 @@
         "@types/deepmerge": "^2.2.0",
         "@types/gh-pages": "^2.0.0",
         "@types/mainloop.js": "^1.0.5",
+        "@types/react-helmet": "^5.0.8",
         "@types/react-router-dom": "^4.3.4",
         "babel-loader": "^8.0.6",
         "babel-plugin-transform-runtime": "^6.23.0",
@@ -49,6 +50,7 @@
         "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",
         "react-toastify": "^5.3.2",
         "rxjs": "^6.5.2",

src/index.html

@@ -1,26 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
+    <head> </head>
-        <title>Logic gate simulator</title>
-
-        <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-        />
-        <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/icon?family=Material+Icons"
-        />
-        <meta
-            name="viewport"
-            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
-        />
-
-        <link
-            href="https://fonts.googleapis.com/css?family=Righteous&display=swap"
-            rel="stylesheet"
-        />
-    </head>
 
     <body
         ondragstart="return false;"

src/modules/core/components/App.tsx

@@ -13,10 +13,14 @@ 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'
 
 const App = () => {
     return (
         <>
+            <Head />
+            <CssBaseline />
+
             <Theme theme={muiTheme}>
                 <CssBaseline />
                 <Canvas />
@@ -25,7 +29,7 @@ const App = () => {
                 <Input />
                 <LogicGateModal />
             </Theme>
-            <CssBaseline />
+
             <ToastContainer
                 position="top-left"
                 autoClose={5000}

src/modules/core/components/Head.tsx

@@ -0,0 +1,32 @@
+import Helmet from 'react-helmet'
+import React from 'react'
+
+const Head = () => {
+    return (
+        <Helmet>
+            <title>Logic gate simulator</title>
+
+            <link
+                rel="stylesheet"
+                href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+            />
+            <link
+                rel="stylesheet"
+                href="https://fonts.googleapis.com/icon?family=Material+Icons"
+            />
+            <meta
+                name="viewport"
+                content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+            />
+
+            <link
+                href="https://fonts.googleapis.com/css?family=Righteous&display=swap"
+                rel="stylesheet"
+            />
+
+            <link rel="icon" href={require('../../../assets/favicon.ico')} />
+        </Helmet>
+    )
+}
+
+export default Head

src/modules/simulationRenderer/helpers/scaleCanvas.ts

@@ -14,7 +14,7 @@ export const updateMouse = (e: MouseEventInfo) => {
 }
 
 export const handleScroll = (e: WheelEvent, camera: Camera) => {
-    const sign = e.deltaY / Math.abs(e.deltaY)
+    const sign = -e.deltaY / Math.abs(e.deltaY)
     const zoom = scrollStep ** sign
 
     const mouseFraction = Screen.scale.map(

src/modules/splash/classes/Splash.scss

@@ -66,5 +66,5 @@
 }
 
 .mail {
-    color: $primary * 2;
+    color: #aaaaff;
 }

webpack.config.js

@@ -18,7 +18,7 @@ const babelRule = {
 }
 
 const fileRule = {
-    test: /\.(png|svg|jpg|gif)$/,
+    test: /\.(png|svg|jpg|gif|ico)$/,
     use: ['file-loader']
 }
 
@@ -74,8 +74,7 @@ const baseConfig = {
             '.jpg',
             '.gif'
         ]
-    },
+    }
-    plugins: []
 }
 
 const devConfig = {
@@ -84,6 +83,8 @@ const devConfig = {
         new HtmlWebpackPlugin({
             template: htmlTemplateFile,
             chunksSortMode: 'dependency'
+            // favicon: faviconPath,
+            // inject: true
         })
     ],
     devtool: 'inline-source-map',
@@ -118,6 +119,7 @@ const prodConfig = {
                 minifyURLs: true
             },
             inject: true
+            // favicon: faviconPath
         }),
         new HtmlWebpackInlineSourcePlugin()
     ],