This commit is contained in:
Matei Adriel 2019-07-25 22:59:52 +03:00
parent c1c84f1a6e
commit f47e1a4cc2
13 changed files with 97 additions and 146 deletions

View file

@ -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

View file

@ -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

View file

@ -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)**)

View file

@ -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

44
package-lock.json generated
View file

@ -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",

View file

@ -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",

BIN
src/assets/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View file

@ -1,26 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<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>
<head> </head>
<body
ondragstart="return false;"

View file

@ -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}

View file

@ -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

View file

@ -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(

View file

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

View file

@ -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()
],