diff --git a/README.md b/README.md index a5ad85a..298323b 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,35 @@ -# logicGateSimulator2 +# Logic gate simulator -a better version of my logic gate simulator +This is a logic gate simulator made for infoeducatie 2019. + +## Getting started Check out the [demo](https://mateiadrielrafael.github.io/logicGateSimulator/) Or read the [docs](./docs/main.md) (work in progess) -To run locally clone this repo, and then run: `npm install` -to install all dependenices, `npm run dev` to start the development server or `npm run build` to bundle it. +## Features -This project wouldnt have been possible without the follownig libraries: +- Simple & intuitive UI +- Multiple simulations support +- Integrated circuits +- Multiple language support: Romanian, English, German, Dutch, Spanish & more in the future -- [typescript](https://github.com/microsoft/TypeScript) and [sass](https://github.com/sass/sass) -- [lit-html](https://github.com/Polymer/lit-html) , [lit-rx](https://github.com/Dabolus/lit-rx) and [rxjs](https://github.com/ReactiveX/rxjs) -- [material components for the web](https://github.com/material-components/material-components-web) -- [webpack](https://github.com/webpack/webpack) -- [gh-pages](https://github.com/tschaub/gh-pages) -- [eix-js](https://github.com/eix-js) +## Playing with the source -I used lit-html, lit-rx and rxjs mainly for the rendering, MCW for the styling, webpack for bundling, gh-pages for deploying and eix-js (a game engine me and a friend are working on) for input handling and common decorators. +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 +``` diff --git a/docs/main.md b/docs/main.md index ddf3f74..5114d0b 100644 --- a/docs/main.md +++ b/docs/main.md @@ -1,10 +1,86 @@ -# Welcome +<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> -Hello, and welcome to my logic gate simulator! I know it can look kinda scary at first, so that's why i wrote these docs! +# Introduction -I recomand reading the first 3 chapters before you start, and then only dig deeper into the others when you feel you mastered the basics! +These docs will walk you trough the process of creating a full adder. -# Table of contents +## Opening the simulator -1. [Basic controls](./controls.md) -2. [Importing a custom logic gate](import.md) +There are 3 ways to open the simulator: + +1. Using the version hosted on github-pages: + +This is by far the fastest solution - everything you need to do is open +[the github-pages url](https://mateiadrielrafael.github.io/logicGateSimulator/) + +2. Using a development server: + +First you need to have [node.js & npm](https://nodejs.org/en/download/) and [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) installed on your machine. + +Open a terminal in the desired folder and run: + +```sh +# Clone repo +git clone https://github.com/Mateiadrielrafael/logicGateSimulator + +# Cd into the folder +cd logicGateSimulator + +# install dependencies +npm install + +# run development server +npm run dev +``` + +3. Building the simulation yourself + +First, clone the repo and install the dependencies as explained in option 2. + +To build the source run: + +```sh +# build program +npm run build +``` + +To then run the simulation, open a server in the dist directory. A simple solution using npm: + +```sh +# instal nano-server globally +npm i nano-server -g + +# change directory +cd dist + +# run server +nano-server + +# linux +open http://localhost:5000 + +# Windows +start http://localhost:5000 +``` + +## The controls + +| Action | Keybinding | Gui | +| :---------------------------------: | :-------------: | :--------------------------------------------------------------------------: | +| Save | `ctrl + s` | `Simulation` > `Save` | +| Add a gate | - | click `logic-gates` > the gate you want to add | +| Move a gate | - | drag & drop the gate using the `right mouse button` | +| Pan | - | click & move & release the background useing the `right mouse button` | +| Select multiple gates | - | click & move & release using the `left mouse button` | +| Add to selection | `shift` | select while holding `shift` | +| Select all gates | `ctrl + a` | `Simulation` > `Select all` | +| Delete selection | `delete` | `Simulation` > `Delete selection` | +| Undo _(to last save)_ | `ctrl + z` | `Simulation` > `Undo` | +| Refresh (reload) simulation | `ctrl + r` | `Simulation` > `Refresh` | +| Clean (delete unconnected gates) | `ctrl + delete` | `Simulation` > `Clean` | +| Open simulation | - | `Open simulation` > the simulation you want to open | +| Create simulation | - | `Create simulation` > `Project` | `Integrated circuit` > type the name of the simulation | +| Create project | - | `Create simulation` > `Project` > type the name of the simulation | +| Create integrated circuit | - | `Create simulation` > `Integrated circuit` > type the name of the simulation | +| Change language | - | Click on the `Language: \<language\>` button (bottom of the sidebar) | +| Get more info about a built in gate | - | `Logic gates` > <i class="material-icons">info</i> |