# AL-Arcade Multiplayer Website — Setup Guide

## Quick Start (One-Click)

1. Open the Unity project
2. Open any empty scene (or create new: File > New Scene)
3. Go to menu: **AL-Arcade > Quick Setup (Full Scene)** (or press `Ctrl+Shift+B`)
4. Press **Play**

That's it. The scene will have:
- A capsule placeholder player (blue = you, orange = others)
- Isometric perspective camera that follows you
- Auto-connects to the live server
- Name tags above all players
- WASD to move, Tab to change name, E to interact

## With Your Character Model

1. Go to menu: **AL-Arcade > Setup Scene** (or press `Ctrl+Shift+M`)
2. In the window that opens:
   - Drag your FBX model into **Character Model** field (e.g., `Website Player.fbx`)
   - Drag your Animator Controller into **Animator Controller** field
3. Click **Build Full Scene**

## What the Editor Tool Creates

| GameObject | Purpose |
|---|---|
| `--- NETWORK MANAGER ---` | Auto-connects to server on Play. No config needed. |
| `LocalPlayer` (prefab) | Your controlled character + name tag + outline |
| `RemotePlayer` (prefab) | Other visitors (interpolated movement + name tag) |
| `Main Camera` | Isometric perspective, follows local player |
| `--- UI CANVAS ---` | Name changer panel + online counter + hint text |
| `Ground` | 50x50 dark ground plane |
| `Directional Light` | Warm angled lighting |

Prefabs are saved to: `Assets/_Project/Prefabs/`

## Animator Setup

Your Animator Controller needs:
- A `bool` parameter called **`IsWalking`**
- An **Idle** state (default)
- A **Walk** state
- Transition: Idle → Walk when `IsWalking = true`
- Transition: Walk → Idle when `IsWalking = false`

That's the only requirement. The scripts read/write `IsWalking` only.

## Controls

| Input | Action |
|---|---|
| WASD / Arrow Keys | Move |
| E | Interact with nearby objects |
| Tab | Open/close name change panel |
| Touch Joystick (mobile) | Move (add TouchJoystickInput to your UI) |

## How It Works (Visitor Experience)

1. Site loads → WebGL game starts
2. Silently connects to `wss://al-arcade-server.caprover.al-arcade.com`
3. Server assigns name: `Visitor0001`, `Visitor0002`, etc.
4. Name appears above your head (TextMeshPro, always faces camera)
5. Other visitors appear instantly with interpolated movement
6. Press Tab → type a new name → press OK or Enter → syncs to everyone
7. If connection fails → you still play alone, no error shown

## Server

- **Health:** https://al-arcade-server.caprover.al-arcade.com/health
- **Monitor:** https://al-arcade-server.caprover.al-arcade.com/monitor
- **Source:** `/server/` directory
- **Deployed on:** CapRover (Docker)
- **Tech:** Colyseus 0.17 + Node.js 22

### Server Messages

| Message | Direction | Payload |
|---|---|---|
| `move` | Client → Server | `{x, y, z, rot, anim}` |
| `rename` | Client → Server | `{name}` (max 16 chars) |
| `interact` | Client → Server | `{objectId, action}` |
| `release` | Client → Server | `{objectId}` |

### Schema (synced state)

```
LobbyState
├── players: Map<sessionId, Player>
│   ├── x, y, z (float32)
│   ├── rot (float32)
│   ├── anim (string: "idle" | "walk")
│   ├── displayName (string)
│   └── skinIndex (uint8)
└── objects: Map<objectId, WorldObject>
    ├── objectId (string)
    ├── objectType (string)
    ├── state (string)
    ├── data (string)
    └── usedBy (string)
```

## Adding Interactable Objects

1. Add any GameObject to the scene
2. Add a Collider (trigger or not)
3. Set its Layer to `Interactable` (create this layer)
4. Add the `InteractableObject` component
5. Set an `objectId` (must match a server-registered object)
6. Set `objectType` (arcade_cabinet, door, toggle, pickup)

To register new objects on the server, edit:
`server/src/rooms/LobbyRoom.ts` → `registerWorldObjects()`

## File Structure

```
Assets/_Project/
├── Scripts/
│   ├── Editor/
│   │   └── ArcadeSceneSetup.cs      ← One-click scene builder
│   ├── Network/
│   │   ├── ArcadeNetworkManager.cs   ← Silent auto-connect singleton
│   │   ├── OnlineCounter.cs          ← "X visitors online" UI
│   │   └── Schema/
│   │       ├── LobbyState.cs
│   │       ├── NetworkPlayer.cs
│   │       └── NetworkWorldObject.cs
│   ├── Player/
│   │   ├── CameraFollowPlayer.cs     ← Isometric follow cam
│   │   ├── LocalPlayerController.cs  ← WASD + sends position
│   │   ├── PlayerInteract.cs         ← E key interaction
│   │   ├── PlayerNameChanger.cs      ← Tab UI for rename
│   │   ├── PlayerNameTag.cs          ← Billboard TMPro above head
│   │   ├── RemotePlayerController.cs ← Smooth interpolation
│   │   └── TouchJoystickInput.cs     ← Mobile joystick
│   └── World/
│       └── InteractableObject.cs     ← Network-synced objects
├── Prefabs/
│   ├── LocalPlayer.prefab           ← (generated by editor tool)
│   └── RemotePlayer.prefab          ← (generated by editor tool)
└── Char/
    └── Model/
        └── Website Player.fbx        ← Your character model
```

## Redeploying the Server

```bash
cd /path/to/al-arcade-website/server
# Edit code in src/
# Then:
tar -czf /tmp/deploy.tar.gz --exclude=node_modules captain-definition Dockerfile package.json package-lock.json tsconfig.json src/
# Upload via CapRover dashboard or API
```

## Troubleshooting

- **Can't see other players:** Check browser console for WebSocket errors. Server might be restarting.
- **Name tag not facing camera:** Make sure the scene has a Camera tagged as `MainCamera`.
- **502 on server:** SSH in, run `sudo docker service update --replicas 1 --force srv-captain--al-arcade-server`
- **Animator errors:** Ensure your controller has a `bool` parameter called exactly `IsWalking`.
