Fix Neon Vortex button input and add Jellyfin WAL mode
Some checks failed
Build and Push to Harbor / build-and-push (push) Has been cancelled
Some checks failed
Build and Push to Harbor / build-and-push (push) Has been cancelled
- Comment out CORS headers in nginx.conf to fix button input blocking - Add WAL enable job for Jellyfin to resolve database locking issues - Include comprehensive troubleshooting documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Neon Vortex
289
NEON_VORTEX_BUTTON_FIX.md
Normal file
289
NEON_VORTEX_BUTTON_FIX.md
Normal file
@@ -0,0 +1,289 @@
|
||||
# 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!
|
||||
Reference in New Issue
Block a user