The Tetris game with remote controller support.
The application's purpose is to brush up my skills in the Svelte framework (Single Page App version), WebSocket, and WebRTC communication protocols (using native browser's objects).
A live demo is available at https://remote-tetris.vercel.app.
- 🎁 Repository: regular Git repository,
- 🧰 Frameworks: Svelte and Vite build system,
- 🛠️ Tools: canvas, svelte qr code, native WebSocket, native WebRTC, express.js,
- 🎨 Styling: standard CSS,
- 💎 Others: desktop-first approach.
The HTML <map> tag defines an image map, but the defined map's elements are based on pixels, so they do not support scaling up and down with a responsive image. In the result, if the image is scaled using the object-fit: contain; to fit the whole width of the view, the defined image map's objects do not correspond to the image's objects.
The solution is to define an SVG transparent image, define the elements above the image's elements, and then place the SVG on top of the image using the position: absolute declaration. SVG objects even if they are expressed in the pixels, the browser can scale up keeping the correct ratio between SVG objects and the total width of the image.
The WebRTC provides interfaces and methods to establish the peer-to-peer connection but does not provide any solution to exchange the initial data (offer, answer, and ice candidates) between the peers.
The solution is to define a simple express.js server. The game landing page generates the offer and sends it to the server via Web Socket. When the user scans the QR code and navigates to the controller's view, its logic generates a GET request to fetch the offer object, accepts it, and generates the answer sent as a POST request's payload to the server. Finally, the game landing page is notified by the server via Web Socket that the answer is ready.
- Clone the repository.
- Install node.js and pnpm.
- Install dependencies with
pnpm install. - Run the server with
pnpm run dev:server. - Run the project with
pnpm run dev.