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:

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:

# 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:

# ✅ 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:

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:

# 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

# 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:

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):

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):

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!