crypticcp/frontend repository overview

⁠official frontend

This is the official frontend of Cryptic.
https://play.cryptic-game.net/⁠

⁠Advice for Developers

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.

⁠Editor

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.

⁠Setting up an Development Environment

For compiling and starting of the application NodeJS and NPM are needed. Downloads and installation advice can be found on https://nodejs.org/de/⁠.

⁠With VSCode

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⁠.

⁠With the CLI

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.

⁠VSCode

⁠Tasks

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).

! A task tutorial⁠

⁠Build

The task build compiles and builds the whole project. The result will be stored in dist/.

⁠Testing

Via the task test code can be tested with Karma⁠.

⁠End-to-End Testing

End-to-end tests can be made with e2e and Protractor⁠.

⁠Debugging

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 Angular CLI

The Angualar CLI helps you managing Angular projects.

⁠Generating Components

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.

⁠Build

ng build compiles and builds the whole project. The result will be stored in dist/. For production mode use the --prod argument.

⁠Testing

Via ng test code can be tested with Karma⁠.

⁠End-to-End Testing

End-to-end tests can be made with ng e2e and Protractor⁠.

⁠Appendix

⁠Advice for browser compatibility

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.).

⁠Further help

The Angular documentation⁠ is very helpful. ng --help or the Angular CLI documentation⁠ can help with the CLI

⁠Docker-Hub

This frontend is online on docker-hub (https://hub.docker.com/r/crypticcp/frontend/⁠).