FIFA Neon App

Project Structure

• index.html: game UI and canvas layout
• style.css: neon visual styling, responsive scaling, and canvas layout
• app.js: game logic, input handling, rendering, and leaderboard API calls
• audio/: optional WAV sound assets for local play and CloudFront-hosted delivery
• backend/: AWS SAM backend for the leaderboard
  • backend/lambda/leaderboard.js: Lambda function handler
  • backend/template.yaml: SAM template defining the API and DynamoDB table
  • backend/package.json: Node dependency manifest for the backend

How the App Works

Frontend

• Uses a canvas element for the game field and player/ball rendering
• Supports mouse and touch input for dragging the player
• Includes game state, physics, collisions, scoring, and visual effects
• Sends leaderboard data via POST /leaderboard and loads the top leaderboard via GET /leaderboard
• Persists a guest profile locally so submissions keep a stable display name
• Supports Cognito Hosted UI sign-in with a local guest fallback
• Sends match telemetry to POST /telemetry for replay-style analysis
• Can load optional audio assets from an S3/CloudFront asset base when deployed with hosted sound packs

Backend

• AWS Lambda function written in Node.js using @aws-sdk/client-dynamodb
• Stores match telemetry summaries for later replay/tuning inspection
• Emits structured logs and CloudWatch-compatible metrics
• Writes each score entry with partition key LEADERBOARD and a sort key of padded score + timestamp
• Returns the latest top 10 leaderboard entries, with CORS and request validation

Cloud Deployment

Prerequisites: AWS CLI configured, AWS SAM CLI installed, Node.js installed for backend dependencies.

Run locally

python -m http.server 5500

Then open http://localhost:5500 in the browser - best served rather than opened directly as a file.

Deploy backend

cd backend
npm install
sam build
sam deploy --guided

Note the generated ApiUrl output and set it as API_BASE in app.js. Use the AssetBaseUrl output to host sound packs from CloudFront, and the Cognito outputs to configure window.APP_COGNITO for Hosted UI login.

Environment variables

• LEADERBOARD_TABLE: DynamoDB table name
• TELEMETRY_TABLE: DynamoDB table for match telemetry and replay summaries
• ALLOWED_ORIGINS: comma-separated list of allowed CORS origins
• window.APP_ASSET_BASE: CloudFront AssetBaseUrl for hosted sounds
• window.APP_COGNITO: domain, clientId, redirectUri, logoutRedirectUri for Hosted UI

Notes & Best Practices

• Do not commit node_modules/ or generated SAM build artifacts
• Keep AWS credentials out of the repo
• Limit ALLOWED_ORIGINS to the actual frontend origins in use
• Validate all incoming backend fields to prevent malformed or spoofed data

Optional Improvements

• Add a real leaderboard display in the frontend
• Use stricter IAM policies instead of DynamoDBCrudPolicy
• Replace hard-coded API_BASE with build-time or deployment-time configuration
• Add tests for game logic and backend validation
• Upload real audio packs to the CloudFront asset bucket for production delivery
• Wire window.APP_COGNITO from SAM outputs so the Hosted UI login button is active