README

Global Layout Features

• All pages use centered #main div with arcade background.
• Logout button (additional feature).
• No advanced extras (bootstrap, animations, audio).

Navigation Bar:

• Left: avatar, “Home”, "Logout"
• Right: “Play Pairs”, “Leaderboard”/"Register"
• Provides consistent navigation.

index.php:

• Registered session -> play button.
• Otherwise -> registration prompt linking to registration.php.

registration.php:

• Stores profiles using PHP sessions.
• Username validation and avatar customisation (colour, eyes, mouth).

pairs.php:

• Sets up game state and HTML structure.
• Creates deck of cards based on current level.
• Randomly generates card attributes (colour, eyes, mouth).
• Controls session state.
• Ensures correct level loads.
• Implements "complex" game, with 6 levels (pairs -> groups of 3 -> groups of 4).
• Upon finishing a level, user can submit score to leaderboard.
• Previous/next level and replay buttons.
• Level selection screen shown when entering from leaderboard or first visit.
• Background div turns gold when new high score achieved.

game.js:

-Handles card flipping, match detection, interaction control.

• Tracks time, score, and attempts.
• Detects score reaching 0 (lose condition).

leaderboard.php:

• Table with usernames, total scores, scores per level.
• PHP sessions used to keep track of scores from multiple players on shared leaderboard.

global.css:

• Global typography, colours, layout rules.
• CSS Grid for card layout.
• Flexbox rules to centre elements such as emoji features.

index.css:

• index.php styling