Anquilosaurios - Web Client

Frontend core for a social, multiplayer web game targeting the Latin American market, built with SvelteKit and integrating Unity WebGL.

This repository contains the frontend application built with SvelteKit. It serves as the user interface and orchestrator for the multiplayer web game, embedding the Unity WebGL game client hosted in a separate repository and communicating with the backend service (built in .NET) through REST API endpoints.

Table of Contents

• Background
• Install
• Usage
• Architecture
• Tech Stack
• Tools
• Maintainers
• License

Background

The frontend provides a responsive, lightweight web application optimized for Latin American users with limited hardware and unstable internet connections. It offers UI for authentication, lobby management, game session control, and analytics dashboards while embedding the Unity WebGL game client for immersive multiplayer gameplay.

Install

This project uses Node.js and Git. Clone the repository and install dependencies:

git clone https://github.com/LePeanutButter/anquilosaurios-web-client.git
cd anquilosaurios-web-client
npm install

Run the frontend locally:

npm run dev

The app will be available at http://localhost:5173 (or configured port).

Usage

The frontend provides:

• User authentication via external .NET backend
• Game lobby browsing and joining
• Embedding and launching the Unity WebGL game client
• Displaying player stats and global leaderboards
• Role-based routing (e.g., admin-only pages)

It communicates with the backend API to manage game sessions and player data. Tokens received after login are securely stored and passed to the Unity WebGL client via postMessage() for gameplay authentication.

Architecture

• Frontend: SvelteKit (adapter-static)
• Game Client: Unity WebGL embedded via iframe
• Backend: ASP.NET Core REST API (external repo)
• Database: Azure SQL
• Deployment: Azure Static Web Apps
• Security: HTTPS, JWT tokens for session auth
• Tools: GitHub, Azure DevOps, Miro, Figma

UI designs and user flows are maintained in Figma, with system diagrams available in Miro.

Tech Stack

• Language: TypeScript
• Framework: SvelteKit
• Auth: JWT via .NET backend
• CI/CD: Azure DevOps Pipelines
• Cloud: Azure Static Web Apps

Tools

Maintainers

• Lanapequin - Laura Natalia Perilla Quintero
• LePeanutButter - Santiago Botero Garcia
• shiro - Jose David Castillo Rodriguez

License

MIT © Richard Littauer

This README follows the Standard Readme specification.