Team Lead: Harikrishan Singh
Harir Al-Rubaye, Nour Tayem, Thulasi Jothiravi, Rehan Nagoor Mohideen, Harikrishan Singh, and Ivan Odiel Magtangob
- Description
- Visuals
- Requirements
- Installation
- Usage (Local Development)
We just wrapped up Sprint 6, and it's packed with cool stuff to enhance your experience with our cryptogram puzzle game. Let’s dive into what we’ve been up to:
- Cryptogram Magic: The frontend and backend got a major facelift, making puzzles more fun and interactive.
- Jumping into solving puzzles is now faster with our streamlined authentication and smoother navigation.
- We’ve hidden a riddle within the cryptograms. Solve it, and bask in the glory of your puzzle mastery.
- Added JavaScript Linting Guide to Project Wiki.
Hidden puzzle
| Hidden puzzle | Hidden puzzle value Menu |
|---|---|
 |
 |
| Cryptogram | Congralatuation Menu |
|---|---|
 |
 |
| Hangman | about us hint Menu |
|---|---|
 |
 |
| Game Start Page | Game Menu |
|---|---|
 |
 |
| Easy Level | Medium Level |
|---|---|
 |
 |
| Hard Level | Game Over |
|---|---|
 |
 |
| Landing Page - part 1 | landing Page - part 2 |
|---|---|
 |
 |
| Game Start Page | Game Menu |
|---|---|
 |
 |
| Stage 1 | Stage 2 |
|---|---|
 |
 |
| Stage 3 | Game Over |
|---|---|
 |
 |
| Landing Page - part 1 | landing Page - part 2 |
|---|---|
|
|
| Instructions Page | About Us Page |
|---|---|
 |
 |
(Please find User Testing Script and Result documentation in user_testing/results directory)
| Task & Question | Tester 1 | Tester 2 | Tester 3 | Tester 4 | Tester 5 |
|---|---|---|---|---|---|
| Task 1: Onboarding Process | Found “Games” section after initial confusion; clear once seen. | Could be more interactive. | Used phone; not specified. | Clear enough to understand the game process. | Straightforward, nice overview. |
| Task 2: Visual Style & Engagement | Likes different levels/themes; progressively harder. | Fullscreen stretches image; game is fun. | Pretty nice; works well. | Friendly UI; straightforward rules. | Nice visuals; could be better with multiple objects. |
| Task 3: Transition Between Levels | Smooth transition; intuitive controls. | Made sense; zoom controls not obvious. | Inconvenient navigation; game over screen not phone compatible. | Smooth; clear indicators of goal achievement. | Easy transition; suggests showing target object image. |
| Task 4: Full-Screen Mode & Zoom | Intuitive controls; full-screen appreciated. | Full-screen button confusion. | Loses lives in full-screen on phone. | Easy navigation; zoom enhances experience. | Easy-to-use full-screen button; suggests hint for zoom. |
| Task 5: Finding Developer Info | “About Us” button was helpful. | Not specified. | Not difficult to find. | Depends on game popularity and developer openness. | Easy to use “About Us” link; can access developer LinkedIn. |
| Task 6: Website Navigation | Prefers clicking logo for home; simple game but engaging. | Navigation is nice; some levels difficult at first. | Easy; logo should return to homepage. | Simple and intuitive; medium difficulty to locate game. | Consistent navigation bar; easy to access different webpages. |
| Task 7: Overall Impressions | Would recommend; likes the game concept. | Might play again; 4/5 stars. | It’s fine; would not play but recognizes potential. | Positive; likely to recommend. | Likely to play again; rates 8.8/10. |
- Install Docker engine: https://docs.docker.com/engine/install/ubuntu/#install-using-the-repository
- Install Docker Desktop: https://www.docker.com/products/docker-desktop/
- Go to the page of the repository that you want to clone (sprint-2 branch)
- Click on “Clone or download” and copy the URL.
- Use the git clone command along with the copied URL from earlier.
- Run the following on the command line:
$ git clone --branch sprint-2 https://github.com/USERNAME/REPOSITORY
- Press Enter.
- Pull branch sprint-2
- Make sure your docker engine is running (by launching docker)
- Run:
makewhich will run thedocker compose upand nginx/php will run on localhost:8000 - Run:
make down: which will rundocker compose downand close the docker enviroment [After you are done]
- Access the web application at the following URL: http://localhost:8000/
Research for CodeSniffer by Ivan Odiel Magtangob
- https://github.com/squizlabs/PHP_CodeSniffer
- https://github.com/squizlabs/PHP_CodeSniffer/wiki/Configuration-Options
PHP_CodeSniffer is a set of two PHP scripts; the main phpcs script that tokenizes PHP, JavaScript and CSS files to
detect violations of a defined coding standard, and a second phpcbf script to automatically correct coding standard
violations. PHP_CodeSniffer is an essential development tool that ensures your code remains clean and consistent.
To avoid modifying the VM, the two PHP_CodeSniffer scripts were installed into the repository using curl:
curl -OL https://squizlabs.github.io/PHP_CodeSniffer/phpcs.phar
curl -OL https://squizlabs.github.io/PHP_CodeSniffer/phpcbf.phar
To use either script:
phpcs /path/to/code/myfile.php
phpcbf /path/to/code/myfile.php
PHP_CodeSniffer can be further configured to ignore certain warnings, enable coloured output messages, etc.. Settings
such as these can be implemented in a CodeSniffer.conf file:
<?php
$phpCodeSnifferConfig = array (
'colors' => '1',
'ignore_warnings_on_exit' => '1',
);
?>
Some other configuration options can also be added within the PHP files to be linted, or specified in the command when executing the script. For example, to ignore all of a certain error:
phpcs --exclude=Generic.Files.LineEndings /path/to/code/myfile.php