This is the official frontend of Cryptic.
https://play.cryptic-game.net/
This web application is created with the Angular framework. The Framework uses the languages TypeScript (JavaScript with typing), HTML and SCSS. A fundamental understanding of these languages is important to understand the code. SCSS or Sass is a CSS preprocessor. You can find a tutorial here.
The framework also uses a CLI (Comand Line Interface). It helps creating and managing Angular projects fast.
The project of course works with any editor, but we recommend the editor VSCode by Microsoft. Visual Studio Code also has a build-in debugger and a helpful git support.
For compiling and starting of the application NodeJS and NPM are needed. Downloads and installation advice can be found on https://nodejs.org/de/.
After the installation of Node an NPM open the repository in VSCode. Press Ctrl+Shift+P / CMD+Shift+P to open the command palette. Type Task: Run Task to enter task mode. The task install installs all dependencies needed.
! On Unix-based systems such as Linux or OS X you have to type in your password.
After this you can execute the task run. It starts an development server listening on http://localhost:4200.
After the installation process open the repository in the terminal and run npm install. Make yourself a coffee, because this process can take a bit time.
To start a development server on http://localhost:4200 run ng serve. This is also possible with npm start.
Visual Studio Code offers the possibility to create tasks. Tasks can be very helpful to manage big projects without a CLI. Tasks can be executed via the command palette (open with Ctrl+Shift+P / CMD+Shift+P).
The task build compiles and builds the whole project. The result will be stored in dist/.
Via the task test code can be tested with Karma.
End-to-end tests can be made with e2e and Protractor.
VSCode comes with a build-in debugger. It's already configured. The only thing you have to do is running the taks run, switching to the debug section and starting Run.
! For the debugger the extension Debugger for Chrome must be installed.
The Angualar CLI helps you managing Angular projects.
The command ng generate component component-name (short: ng g c component-name) creates a new Component. Details can be found in the Angular documentation.
ng build compiles and builds the whole project. The result will be stored in dist/. For production mode use the --prod argument.
Via ng test code can be tested with Karma.
End-to-end tests can be made with ng e2e and Protractor.
Every contributor should test his code minimum with one WebKit browser, such as Chrome, Chromium, Safari and Opera, and a non-WebKit browser, such as Firefox, Internet Explorer or Edge.
Before you use very new or old things in your code it's recommendet to use "Can I use". With this tool you can test the compatibility of your code.
CSS tricks delivers tipps for CSS/SCSS (e.g. centering, flex-box, grid etc.).
The Angular documentation is very helpful. ng --help or the Angular CLI documentation can help with the CLI
This frontend is online on docker-hub (https://hub.docker.com/r/useto/cryptic-frontend/).