diff options
Diffstat (limited to 'readme.md')
-rw-r--r-- | readme.md | 124 |
1 files changed, 46 insertions, 78 deletions
@@ -1,114 +1,82 @@ # PO connect-4 -<div style="text-align: center;"><img src="./banner.png"/></div> +![](./banner.png) -## Dit is de PO informatica met Python en SQL +## This is a school project using Python and SQL -## Dingen die er graag in willes: +Some of this project's code is in Dutch (commit messages, documents etc.), along with the whole website. I'm planning on adding some form of localization system, and I'll try to maintain this after the assignment deadline because I think this is a pretty cool project. I'll also be fixing issues/merging pr's after the deadline. I think the deadline is ~January 25th~ sometime in March? though I'm not sure about this. -- Werkend 4 op een rij spel -- Client-server verbinding met socket.io -- Accounts aanmaken -- Anonieme accounts / invite links -- Veilige wachtwoordauthenticatie -- Spelen tegen computer -- Rest API die dit allemaal doet inplaats van jank oplossing +## Things that we'd like to have working: -## Misschien: +- Working connect 4 game +- Client-server connection with socket.io +- Account creation +- Anonymous accounts / invite links +- Safe password authentication +- Play against the computer +- Follow people/add as friend +- Game rating like on chess.com +- Rest API that handles all of this instead of some janky solution -- ~Log in met google / apple / andere~ -- Berichten -- Mensen kunnen volgen -- Meerdere game modes -- Rating net als op chess.com -- Verschillende thema's (minimalistisch of skeuomorf met realistische stuiter-animaties) +## Maybe: -## Dingen die gebruikt worden: +- ~Log in with google / apple / other~ +- Messages +- Multiple game modes +- Different themes (minimalist or skeumorphic with realistic bouncing animation) -- [Flask](https://flask.palletsprojects.com/) voor de http server en de REST api -- [ReactJS](https://reactjs.org/) om de website mee te maken -- [NextJS](https://nextjs.org/) om meerdere pagina's te hebben met reactjs -- [socket.io](https://socket.io/) voor de communicatie tussen de clients en de server tijdens een potje -- [SQLite](https://sqlite.org/index.html) voor de database +## Used libraries and frameworks: -Een voorbeeld van de database is te vinden op [Google Docs](https://docs.google.com/spreadsheets/d/1mDN9IUqRIMjr_9RmLxKybjIgVuaUadalmPEFnG-XeJg/edit?usp=sharing) samen met de api endpoints, en een voorbeeld van de website is te vinden op [Figma](https://www.figma.com/file/rTciVQApAe6cwrH1Prl5Wn/4-op-een-rij?node-id=0%3A1) +- [Flask](https://flask.palletsprojects.com/) for the REST API +- [ReactJS](https://reactjs.org/) to create the website +- [NextJS](https://nextjs.org/) for static react pages and html page routing +- [socket.io](https://socket.io/) for bidirecitonal communication during a game +- [SQLite](https://sqlite.org/index.html) for the database +- [nginx](https://nginx.org/en/) for serving static files generated by nextjs, caching and reverse proxy -## Hoe 'installeren' +An example database can be found on [Google Docs](https://docs.google.com/spreadsheets/d/1mDN9IUqRIMjr_9RmLxKybjIgVuaUadalmPEFnG-XeJg/edit?usp=sharing) along with the API endpoints, and the website prototypes can be found on [Figma](https://www.figma.com/file/rTciVQApAe6cwrH1Prl5Wn/4-op-een-rij?node-id=0%3A1) + +![](./diagram.png) + +## How to set up + +> I haven't figured out how to run this project on Windows, so please install [WSL](https://docs.microsoft.com/en-us/windows/wsl/install-win10) if you want to run this yourself on Windows. The distro you choose doesn't matter, though package names in ./configure may vary if your distro doesn't use the apt package manager. 0. `git clone https://github.com/lonkaars/po-4-op-een-rij` -1. Zorg dat je [python](https://python.org/downloads) hebt geïnstalleerd. -2. Zorg dat je [nodejs](https://nodejs.org/en/download) hebt geïnstalleerd. -3. Installeer typescript, react-scripts en yarn: +1. Make sure you have [python](https://python.org/downloads) (with pip and venv) installed. +2. Make sure you have [nodejs](https://nodejs.org/en/download) (with npm) installed. +2. Make sure you have [nginx](https://nginx.org/en/) installed. +3. Install typescript, react-scripts and yarn: ```sh - npm i -g typescript yarn react-scripts + npm i -g typescript yarn ``` -4. Maak een python virtual environment en installeer pip modules: +4. Create a new python virtual environment and install pip modules: ```sh python -m venv venv - - # activeer virtual environment (zie volgende alinea) - + source venv/bin/activate pip install -r requirements.txt ``` -5. Installeer node modules: +5. Install node modules: ```sh yarn ``` -## Hoe python virtual environment activeren - -### Windows (cmd) - -``` -.\venv\Scripts\activate.bat -``` - -### Windows (powershell) - -``` -.\venv\Scripts\Activate.ps1 -``` - -### Windows (git bash) - -``` -source venv/Scripts/activate -``` +## How to start -### Linux (bash/zsh/sh) - -``` -source venv/bin/activate -``` - -Als je het goed gedaan hebt krijg je een nieuwe prompt te zien met `(venv)` er voor. - -## Hoe starten - -Om dit project te starten moet je 3 terminals gebruiken die afzonderlijk de flask server en de react server starten: +In order to start this project you'll need three terminal windows to start the flask server, react server, and nginx seperately: ```sh # term 1 - -# activeer virtual environment - +source venv/bin/activate python3 api/main.py # term 2 - yarn dev # term 3 +sudo nginx -c $PWD/nginx.conf -sudo nginx -c $PWD/nginx.conf # dit werkt alleen op unix (ik moet nog ooit gaan testen op windows) -``` - -## Hoe API endpoints testen -```sh -# Als je alleen de flask server draait: -curl http://localhost:5000/<endpoint> - -# Als nginx ook draait: -curl http://localhost:2080/api/<endpoint> +# if nginx can't run as the user nobody, try running the following command and restart nginx: +sed "s/user nobody/user $(whoami)/" -i nginx.conf ``` |