neon-vortex/NEON_VORTEX_BUTTON_FIX.md

# Neon Vortex Button Issue - Troubleshooting Guide

## Problem
Buttons work in Godot editor but not working in the deployed web version at https://nv.caffeinetux.com

## Most Likely Causes

### 1. **CORS Headers Too Restrictive**
The current nginx configuration has very strict CORS headers:
```nginx
add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Opener-Policy "same-origin" always;
```

These headers are required for SharedArrayBuffer (threads) but can break:
- Mouse/touch input
- Button click events
- External resources

**Check if you need threads:**
- Look at your Godot export settings
- If "Export Type" is **Regular** (not Threads), these headers might be blocking input

**Fix:** Update nginx.conf to conditionally apply headers:

```nginx
# Only add CORS headers if using threads
# For Regular (non-threaded) exports, comment these out:
# add_header Cross-Origin-Embedder-Policy "require-corp" always;
# add_header Cross-Origin-Opener-Policy "same-origin" always;
```

### 2. **JavaScript Console Errors**

**How to Check:**
1. Open https://nv.caffeinetux.com in browser
2. Press F12 (Developer Tools)
3. Go to Console tab
4. Click a button and look for errors

**Common Errors:**

#### Error: "SharedArrayBuffer is not defined"
- **Cause:** Missing CORS headers or not using HTTPS
- **Fix:** Keep the CORS headers, ensure HTTPS is working ✅ (you have this)

#### Error: "Failed to fetch" or "CORS policy"
- **Cause:** CORS headers too restrictive or missing resources
- **Fix:** Check Network tab for failed requests

#### Error: "WebGL context lost"
- **Cause:** GPU issues or resource exhaustion
- **Fix:** Reduce graphics quality in Godot, add memory limits

#### Error: "Input blocked"
- **Cause:** Browser security policy or iframe restrictions
- **Fix:** Ensure X-Frame-Options allows the domain

### 3. **Input Method Not Exported**

**In Godot, check your button scripts:**

```gdscript
# ✅ CORRECT - Web-compatible input
func _on_Button_pressed():
    print("Button clicked!")
    # Your code here

# ❌ WRONG - May not work on web
func _input(event):
    if event is InputEventMouseButton:
        # This might not work in some web configs
```

**Fix:** Use signal connections, not `_input()` or `_unhandled_input()` for buttons.

### 4. **Export Settings Issue**

**Check in Godot:**
1. Go to **Project → Export → HTML5**
2. Verify:
   - ✅ **Export Type:** Regular (unless you need threads)
   - ✅ **Custom HTML Shell:** Not set (use default)
   - ✅ **Head Include:** Empty or minimal
   - ✅ **Progressive Web App:** OFF (for debugging)

**Re-export:**
1. Delete the old export
2. Export fresh
3. Test locally first: `python3 -m http.server 8000`
4. If buttons work locally, issue is deployment-related

### 5. **Browser Cache**

**Your browser might be caching old broken version:**

**Fix:**
1. Hard refresh: `Ctrl + Shift + R` (or `Cmd + Shift + R` on Mac)
2. Clear cache for the site
3. Or use Incognito/Private browsing

### 6. **Service Worker Blocking**

The game has a service worker (`Neon Vortex.service.worker.js`) for offline support.
If corrupted, it can block updates.

**Fix:**
1. Open DevTools (F12)
2. Go to **Application** tab
3. Click **Service Workers**
4. Click **Unregister** for nv.caffeinetux.com
5. Hard refresh the page

## Recommended Debugging Steps

### Step 1: Check Browser Console
```
1. Open https://nv.caffeinetux.com
2. Press F12
3. Go to Console tab
4. Try clicking a button
5. Note any errors
```

### Step 2: Test Without CORS Headers
Temporarily modify nginx.conf:

```nginx
server {
    listen 8080;
    server_name _;

    root /usr/share/nginx/html;
    index "Neon Vortex.html";

    # TEMPORARILY COMMENT OUT for testing:
    # add_header Cross-Origin-Embedder-Policy "require-corp" always;
    # add_header Cross-Origin-Opener-Policy "same-origin" always;

    # Keep these:
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;

    location / {
        try_files $uri $uri/ "/Neon Vortex.html";
    }
}
```

**Rebuild and test:**
```bash
# Commit changes
git add htlm/nginx.conf
git commit -m "Test: Remove strict CORS headers"
git push

# Rebuild image (will happen via Flux)
# Wait for deployment
# Test buttons
```

### Step 3: Check Network Tab
1. Open DevTools (F12)
2. Go to **Network** tab
3. Reload page
4. Look for:
   - ❌ Failed requests (red)
   - ❌ 404 errors for required files
   - ✅ All .js, .wasm, .pck files loaded successfully

### Step 4: Test Locally
```bash
# Navigate to exported game folder
cd htlm/

# Start local server
python3 -m http.server 8000

# Open browser to http://localhost:8000
# Test if buttons work
```

**If buttons work locally but not deployed:**
- Issue is deployment-related (nginx config, CORS, headers)

**If buttons don't work locally:**
- Issue is with Godot export or game code

## Most Likely Fix

Based on your current setup, **most likely cause is CORS headers**.

### Quick Fix:

**htlm/nginx.conf** - Update to:

```nginx
server {
    listen 8080;
    server_name _;

    root /usr/share/nginx/html;
    index "Neon Vortex.html";

    # Enable gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript application/wasm;
    gzip_min_length 1000;

    # MIME types for WASM and other assets
    types {
        application/wasm wasm;
        application/javascript js;
        text/html html;
        application/json json;
        image/png png;
    }

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;

    # ONLY ADD THESE IF YOUR GAME USES THREADS:
    # If your Godot export is "Regular" (not "Threads"), comment these out:
    # add_header Cross-Origin-Embedder-Policy "require-corp" always;
    # add_header Cross-Origin-Opener-Policy "same-origin" always;

    location / {
        try_files $uri $uri/ "/Neon Vortex.html";
    }

    # Cache static assets
    location ~* \.(png|jpg|jpeg|gif|ico|wasm|js|css)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
```

## Godot-Specific Button Fixes

### Check Your Button Code:

**✅ CORRECT - Signal-based (Web-safe):**
```gdscript
extends Button

func _ready():
    connect("pressed", self, "_on_button_pressed")

func _on_button_pressed():
    print("Button clicked!")
    get_tree().change_scene("res://next_scene.tscn")
```

**✅ CORRECT - Using Godot Editor signals:**
```
1. Select button in scene tree
2. Go to Node tab (right side)
3. Double-click "pressed()" signal
4. Connect to script function
5. Implement the function
```

**❌ AVOID - Input polling (may not work on web):**
```gdscript
func _process(delta):
    if Input.is_action_just_pressed("ui_accept"):
        # This might not work reliably on web
```

### Button Properties to Check:
```
✅ Mouse Filter: Stop (default)
✅ Focus Mode: All or Click
✅ Disabled: false
✅ Visible: true
```

## Next Steps

1. **Check browser console** - This will tell you the exact error
2. **Test without CORS headers** - Comment them out temporarily
3. **Test locally** - See if it's deployment or game issue
4. **Share console errors** - If still broken, share the browser console output

The most common cause is the CORS headers blocking input, so start there!