cryptic-game / frontend

The official frontend of Cryptic
https://play.cryptic-game.net
GNU Affero General Public License v3.0
11 stars 15 forks source link
angular cryptic-game css frontend hacking hacktoberfest html typescript

Official Cryptic Frontend

Build Status

This is the official Cryptic frontend (available on Docker Hub). It has been created with the Angular framework using TypeScript, HTML and SASS.

Set up a development environment

NodeJS and NPM are required to compile and start the application. Refer to https://nodejs.org/de/ for download/installation instructions. To get help, run ng --help or check the Angular documentation / Angular CLI documentation.

If you use VSCode:

  1. Press Ctrl+Shift+P / CMD+Shift+P.
  2. Type Task: Run Task to enter task mode.
  3. Run install to install all required dependencies. On Linux/Mac OSX you must type in your password.
  4. Execute the task run, which starts an development server listening on http://localhost:4200.

If you use the CLI:

  1. Open the repository in the terminal.
  2. Run npm install. Brew a fresh coffee, because this process can take some time.
  3. Run ng serve or npm start to start a development server listening on http://localhost:4200.

If you use WebStorm:

  1. Click File -> New -> Project from Version Control (Welcome Screen: Get from VSC)
  2. Paste the GitHub repository url.
  3. Press Shift twice. Run npm install.
  4. Click the green play button in the top right to start the Angular CLI Server.

Note: Create a new component with the command ng generate component component-name (short: ng g c component-name).

Tasks

VSCode allows to create tasks, which 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). Learn more in this task tutorial.

Tasks:

Build & Test

Check browser compatibility

To check browser-compatibility, use Can I use. You should test your code at minimum with one WebKit browser (Chrome, Chromium, Safari, or Opera) and one non-WebKit browser (Firefox or Microsoft Edge).

Note: CSS tricks delivers tips for CSS/SCSS (e.g. centering, flex-box, grid etc.).

Debugging

VSCode comes with a built-in, ready-to-use debugger that requires the Debugger for Chrome browser extension. To use it, run the task run, switch to the debug section, and start Run.