ft-transcendence - a pong web app

A pong app with a heap of add-on features

Live Demo

• Frontend: https://ft-transcendence.app
• Backend API: https://ft-transcendence.app/api/docs (not in production)
• ELK: https://ft-transcendence.app/kibana
• Vault: https://ft-transcendence.app/vault

Configure & Run

• Ensure docker, docker compose, and make are working
• Optionally configure environment settings/ports in env.json
• make (without ELK), make dev-elk or make prod

Demo

• [a gif showcasing the main feature (pong)]
• [a gif showcasing the additional features (accounts, tournaments, stats, etc.)]
• [opt: alt text: a gif showcasing the administrative features, ELK, Vault, etc.]

Core Features

• interactive webapp to play 3D pong - frontend & backend
• account management
• join matches via the a CLI client
• overkill security measures (ModSecurity, HashiCorp Vault, 2FA, JWT)
• AI opponent
• log management and observability (ELK)
• game statistics
• blockchain persistence (for game statistics)

Debugging / Development

Websockets

• Use wscat to connect to the websocket server via Caddy:

  • wscat -c ws://localhost:8080/ws
  • wscat -c localhost:8080/ws
  • wscat -nc wss://localhost:8443/ws

• Or connect directly via the backend, by patching compose.yaml

      backend:
  +       ports:
  +           - "3000:${BACKEND_PORT:3000}"
          build:
              context: "./backend/"

  • wscat -c localhost:3000/ws (no wss)

Coraza Web Application Firewall (WAF)

• Checking it it's enabled
  • curl -vk https://localhost:8443/?exec=/bin/bash should return 403 Forbidden
• Disabling it

      log
      handle {
  -       import waf
          root * /frontend/dist/
          try_files {path} /index.html
          file_server
      }
      handle_path /uploads/* {
  -       import waf
          root * /frontend/uploads
          file_server
      }
      handle_path /api/* {
  -       import waf
          reverse_proxy backend:{$BACKEND_PORT}
      }

Makefile

When running make (dev), arguments can be added to pass on additional flags for docker compose up. For instance make dev ARGS="--no-attach logstash" will silence any logs registered by the Caddy container, note that to silence more the flag needs to be repeated, i.e. make dev ARGS="--no-attach caddy --no-attach logstash". Similarly, you can also use ARGS="--attach backend" for inclusive logging.

API endpoint

• Check /api/docs for a list of backend endpoints auto-generated by swagger UI.

Vault

See vault/README.md

Translatable UI Components (through language Button)

1. Elements are stored in translatableElements Elements no longer need to be stored anywhere, an attribute will be attached to the element instead so the caller doesn't have to worry about it at all when using component factory function (i.e. createButton, createInput, createContainer, etc.) since they will handle everything internally. When creating element by non standard way, which is highly discouraged, will need to set attribute CONST.ATTR.I18N_TEXT (for textcontent, similar process for placeholder for input element, and alt attribute) to the I18Nkey.

2. Translation Keys are defined in the TEXT_MAP object locale.translation.ts Restructured to make adding or editing translation as needed simpler. Typescript will freak out when you don't have required keys (all available languages).

3. Subscribed to Language Changes with languageStore.subscribe: Again, caller does not need to worry about subscribing, translation is done via one central subscriber in locale.store.

4. Translation string can be templated with syntax of {string}. For instance, Player name {username} will expand to get username from the object passed to translation uiltilties. It should also be saved in dataset of the element with tag CONST.ATTR.I18N_VARS However, all these are handled internally by compontent factory function and should not concern caller.

Project Modules Tally

	Module	Notes	Point	% done for eval	Notes
Web	Backend	Fastify + Node.js	1	100%
	Frontend	Tailwind CSS + TS	0.5	100%
	Database	SQLite	0.5	100%
	Blockchain	Avalanche + Solidity	1	95%	Only works with dummy data ATM
Game	Remote Players		1	100%	Not thoroughly tested
	2FA + JWT		1	100%	Can't disable 2FA
Devops	Log Management	ELK (Elasticsearch, Logstash, Kibana)	1	100%
Graphics	3D Techniques	Babylon.js	1	100%	Not INSANE, but would pass this module
Accessibility	Browser Compatibility	Firefox Default + Chrome	0.5	100%	Not tested thoroughly
Pong	Server-side Pong		1	100%
	CLI Client		1	95%	Game engine (not needed for eval), 2FA & JWT integration missing
Accessibility	Multiple Language	Ultra-simple	0.5	95%	Need to fill in translation last
Algo	Stats Dashboard		0.5	100%
Algo	AI Opponent		1	90%	Works, but all levels of difficulties are difficult
		✅ Finished for eval ✅	12.5
Game	Customization		0.5	100%	Arguably there but would feel too little to pass
User	Standard Management	Tedious Albeit Weird Without	1	85%	Missing ability to add and show friends
		✅ Committed ✅	14.0
		🟡 Partially Committed 🟡	14.5
User	Remote Authentication	Google Sign-in, Simple But Extra API Key Required	1	0%
Accessibility	Server-side Rendering	Ultra-simple	0.5	0%
Cybersecurity	GDPR Compliance		0.5	0%
		⏳ Total Planned ⏳	16.5

License

• CC0 1.0 Universal