feat: add favicon and improve WebSocket connection handling

Author: th33k

README.md

@@ -95,6 +95,28 @@ python -m http.server 3000
 
 **Open Browser**: `http://localhost:3000`
 
+### Using GitHub Pages + Local Server
+
+**Play Online**: https://th33k.github.io/minitankfire.game/
+
+**Setup Local Server with SSL Tunnel** (Required for HTTPS):
+
+1. **Install ngrok**: https://ngrok.com/download
+
+2. **Start Server**:
+   ```bash
+   make run-server
+   ```
+
+3. **Start Tunnel** (new terminal):
+   ```bash
+   ngrok http 8080
+   ```
+
+4. **Connect**: Enter your ngrok URL (e.g., `abc123.ngrok.io`) in the game
+
+**See [GITHUB_PAGES_SETUP.md](docs/GITHUB_PAGES_SETUP.md) for detailed instructions**
+
 ---
 
 ##  Prerequisites

client/favicon.svg

@@ -6,6 +6,7 @@
     <meta name="description" content="Tank Arena - Real-time multiplayer tank battle arena game">
     <meta name="theme-color" content="#00ff88">
     <title>Tank Arena: Online</title>
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="preconnect" href="https://cdnjs.cloudflare.com">

client/index.html

@@ -9,9 +9,15 @@ export class NetworkManager {
         this.currentPing = 0;
     }
 
+    // Determine the correct WebSocket protocol based on page protocol
+    getWebSocketProtocol() {
+        return window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    }
+
     connectToLobby(serverAddress) {
         try {
-            this.lobbyWs = new WebSocket(`ws://${serverAddress}:8080/game`);
+            const protocol = this.getWebSocketProtocol();
+            this.lobbyWs = new WebSocket(`${protocol}//${serverAddress}:8080/game`);
 
             this.lobbyWs.onopen = () => {
                 this.sendLobbyMessage({ type: 'lobby_info' });
@@ -48,7 +54,8 @@ export class NetworkManager {
     }
 
     connectToGame(name, serverAddress, onOpen, onMessage, onClose, onError) {
-        const wsUrl = `ws://${serverAddress}:8080/game`;
+        const protocol = this.getWebSocketProtocol();
+        const wsUrl = `${protocol}//${serverAddress}:8080/game`;
         console.log('Attempting to connect to:', wsUrl);
 
         this.ws = new WebSocket(wsUrl);

client/js/managers/network-manager.js

@@ -0,0 +1,137 @@
+# GitHub Pages + Local Server Setup
+
+## Problem
+When hosting the client on GitHub Pages (HTTPS), browsers block insecure WebSocket connections (ws://) due to mixed content security policies. To connect to a local server, you need secure WebSocket connections (wss://).
+
+## Solution Overview
+The client now automatically detects the page protocol and uses:
+- `wss://` when loaded from HTTPS (GitHub Pages)
+- `ws://` when loaded from HTTP (local development)
+
+## Setup Options
+
+### Option 1: Use a Reverse Proxy with SSL (Recommended for LAN)
+
+Use a reverse proxy like **ngrok**, **Cloudflare Tunnel**, or **nginx** to provide SSL termination for your local server.
+
+#### Using ngrok (Easiest)
+
+1. **Install ngrok**: Download from https://ngrok.com/download
+
+2. **Start your game server** (port 8080)
+   ```bash
+   cd server
+   mvn clean compile exec:java
+   ```
+
+3. **Start ngrok tunnel**:
+   ```bash
+   ngrok http 8080
+   ```
+
+4. **Connect from GitHub Pages**:
+   - ngrok will give you a URL like: `https://abc123.ngrok.io`
+   - Enter in the game: `abc123.ngrok.io` (without https://)
+   - The client will automatically use `wss://abc123.ngrok.io:8080/game`
+
+**Note**: Free ngrok URLs change each restart. Get a free static domain at ngrok.com
+
+#### Using Cloudflare Tunnel (Free Static URL)
+
+1. **Install cloudflared**: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/
+
+2. **Start tunnel**:
+   ```bash
+   cloudflared tunnel --url http://localhost:8080
+   ```
+
+3. Use the provided URL in your game client
+
+### Option 2: Self-Signed Certificate (For Testing Only)
+
+⚠️ **Warning**: Browsers will show security warnings. Not recommended for production.
+
+1. **Generate certificate**:
+   ```bash
+   keytool -genkeypair -keyalg RSA -keysize 2048 -keystore keystore.jks \
+     -alias minitank -validity 365 -storepass changeit
+   ```
+
+2. **Modify GameServer.java** to use SSLServerSocket
+
+3. **Accept certificate** in browser (visit https://your-lan-ip:8080 first)
+
+### Option 3: Local Development Only
+
+For local testing without HTTPS:
+
+1. **Host client locally** (not on GitHub Pages):
+   ```bash
+   cd client
+   python -m http.server 3000
+   ```
+
+2. **Access via HTTP**: http://localhost:3000
+
+3. **Client will use**: `ws://` protocol automatically
+
+## Current Configuration
+
+The client (`network-manager.js`) now includes:
+
+```javascript
+getWebSocketProtocol() {
+    return window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+}
+```
+
+This ensures the correct protocol is used based on how the page is loaded.
+
+## Recommended Setup for LAN Gaming with GitHub Pages
+
+1. **Use ngrok or Cloudflare Tunnel** for SSL termination
+2. **Share the tunnel URL** with other players on your LAN
+3. **Everyone connects** via GitHub Pages using the tunnel hostname
+4. **Advantage**: No certificate warnings, works from any network
+
+## Testing
+
+### Test Local Connection:
+1. Start server: `make run-server`
+2. Open: http://localhost:8080 (or use index.html locally)
+3. Enter server: `localhost`
+4. Should connect via `ws://localhost:8080/game`
+
+### Test GitHub Pages Connection:
+1. Start server with ngrok: `ngrok http 8080`
+2. Open: https://th33k.github.io/minitankfire.game/
+3. Enter server: `abc123.ngrok.io` (your ngrok domain)
+4. Should connect via `wss://abc123.ngrok.io:8080/game`
+
+## Port Considerations
+
+The server runs on port **8080**. When using a tunnel service:
+- The tunnel handles SSL on the public side
+- Forwards to your local server on port 8080
+- You only need to enter the tunnel hostname (e.g., `abc123.ngrok.io`)
+- Don't include the port in the server address field
+- The client automatically appends `:8080/game`
+
+## Troubleshooting
+
+### "Mixed Content" Error
+- ✅ Fixed: Client now uses correct protocol
+- If still occurring: clear browser cache
+
+### "Connection Refused"
+- Check server is running: `netstat -an | findstr 8080`
+- Verify firewall allows port 8080
+- For tunnels: check tunnel is active
+
+### Certificate Warnings
+- With ngrok/Cloudflare: No warnings (they provide valid certs)
+- With self-signed: Expected, must accept in browser
+
+### Can't Connect from Other Devices
+- Use tunnel service (ngrok/Cloudflare)
+- OR ensure your LAN IP is accessible and firewall allows connections

docs/dev/GITHUB_PAGES_SETUP.md

@@ -0,0 +1,136 @@
+# 🚀 Quick Setup: GitHub Pages + Local Server
+
+## The Problem
+✗ GitHub Pages uses HTTPS  
+✗ Your server uses WS (insecure WebSocket)  
+✗ Browsers block mixed content (HTTPS → WS)
+
+## The Solution
+✓ Use WSS (secure WebSocket) with a tunnel service  
+✓ Client auto-detects and uses correct protocol
+
+---
+
+## 3-Step Setup with ngrok (Easiest)
+
+### 1. Download & Install ngrok
+https://ngrok.com/download
+
+### 2. Start Your Server
+```bash
+cd server
+mvn clean compile exec:java
+```
+
+### 3. Start ngrok Tunnel
+```bash
+ngrok http 8080
+```
+
+**You'll see:**
+```
+Forwarding   https://abc123.ngrok.io -> http://localhost:8080
+```
+
+---
+
+## Connect & Play
+
+### From GitHub Pages:
+1. Open: **https://th33k.github.io/minitankfire.game/**
+2. Enter server: **abc123.ngrok.io** (your ngrok URL)
+3. Click Join Game!
+
+### Share with Friends:
+- Give them the ngrok URL: `abc123.ngrok.io`
+- They visit: https://th33k.github.io/minitankfire.game/
+- Everyone plays together!
+
+---
+
+## What Changed?
+
+### ✅ Client (network-manager.js)
+```javascript
+// Auto-detects protocol
+getWebSocketProtocol() {
+    return window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+}
+
+// Uses correct protocol
+const protocol = this.getWebSocketProtocol();
+this.ws = new WebSocket(`${protocol}//${serverAddress}:8080/game`);
+```
+
+**Result:**
+- HTTPS page → Uses `wss://`
+- HTTP page → Uses `ws://`
+
+---
+
+## Alternative: Cloudflare Tunnel (Free Forever)
+
+```bash
+# Install
+npm install -g cloudflared
+
+# Run tunnel
+cloudflared tunnel --url http://localhost:8080
+```
+
+**Advantage:** Free static URL that doesn't change
+
+---
+
+## Local Development (No Tunnel Needed)
+
+Host client locally instead of GitHub Pages:
+
+```bash
+cd client
+python -m http.server 3000
+```
+
+Open: **http://localhost:3000**  
+Server: **localhost**
+
+Uses `ws://` automatically since page is HTTP.
+
+---
+
+## Troubleshooting
+
+### Still getting "Mixed Content" errors?
+- Clear browser cache (Ctrl+Shift+Delete)
+- Hard refresh (Ctrl+F5)
+- Check console: should show `wss://` not `ws://`
+
+### ngrok URL keeps changing?
+- Free plan gives new URL on restart
+- Get free static domain: https://ngrok.com/pricing (forever free tier)
+- OR use Cloudflare Tunnel
+
+### Connection fails?
+- Check server is running: `netstat -an | findstr 8080`
+- Check ngrok is running and shows "online"
+- Try URL in browser: `https://abc123.ngrok.io` (should show some response)
+
+### Firewall blocking?
+- ngrok bypasses firewall (tunnels through HTTPS)
+- Allow Java through Windows Firewall if needed
+
+---
+
+## Files Changed
+
+✓ `client/js/managers/network-manager.js` - Auto protocol detection  
+✓ `client/index.html` - Added favicon  
+✓ `client/favicon.svg` - New icon (no more 404)
+
+---
+
+## For More Details
+
+📖 [Full Setup Guide](GITHUB_PAGES_SETUP.md)  
+📖 [Development Guide](DEVELOPMENT.md)  
+📖 [Architecture](ARCHITECTURE.md)