basic docs

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`
+## Features
-to install all dependenices, `npm run dev` to start the development server or `npm run build` to bundle it.
 
-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)
+## Playing with the source
--   [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)
 
-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
+```

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)
+There are 3 ways to open the simulator:
-2. [Importing a custom logic gate](import.md)
+
+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>              |