|
|
import gradio as gr |
|
|
import numpy as np |
|
|
import json |
|
|
import random |
|
|
|
|
|
|
|
|
THREE_JS_TEMPLATE = """ |
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Webspace Network</title> |
|
|
<style> |
|
|
body {{ |
|
|
margin: 0; |
|
|
overflow: hidden; |
|
|
font-family: 'Arial', sans-serif; |
|
|
}} |
|
|
canvas {{ display: block; }} |
|
|
#ui {{ |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
left: 10px; |
|
|
color: white; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
padding: 15px; |
|
|
border-radius: 10px; |
|
|
width: 300px; |
|
|
}} |
|
|
.bar-container {{ |
|
|
width: 100{percent}; |
|
|
background: #333; |
|
|
border-radius: 5px; |
|
|
margin: 5px 0; |
|
|
}} |
|
|
.bar {{ |
|
|
height: 20px; |
|
|
border-radius: 5px; |
|
|
text-align: center; |
|
|
line-height: 20px; |
|
|
color: white; |
|
|
font-size: 12px; |
|
|
}} |
|
|
.health-bar {{ background: linear-gradient(to right, #ff0000, #00ff00); }} |
|
|
.fuel-bar {{ background: linear-gradient(to right, #0000ff, #00ffff); }} |
|
|
#resources {{ |
|
|
margin-top: 10px; |
|
|
}} |
|
|
.resource-item {{ |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
margin: 5px 0; |
|
|
}} |
|
|
#interaction-prompt {{ |
|
|
position: absolute; |
|
|
bottom: 20px; |
|
|
left: 50{percent}; |
|
|
transform: translateX(-50{percent}); |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
padding: 10px 20px; |
|
|
border-radius: 5px; |
|
|
color: white; |
|
|
display: none; |
|
|
}} |
|
|
#planet-info {{ |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
right: 10px; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
padding: 15px; |
|
|
border-radius: 10px; |
|
|
width: 300px; |
|
|
color: white; |
|
|
display: none; |
|
|
}} |
|
|
#game-menu {{ |
|
|
position: absolute; |
|
|
top: 50{percent}; |
|
|
left: 50{percent}; |
|
|
transform: translate(-50{percent}, -50{percent}); |
|
|
background: rgba(0, 0, 0, 0.9); |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
color: white; |
|
|
text-align: center; |
|
|
display: none; |
|
|
}} |
|
|
.menu-btn {{ |
|
|
margin: 10px; |
|
|
padding: 10px 20px; |
|
|
background: #333; |
|
|
border: none; |
|
|
border-radius: 5px; |
|
|
color: white; |
|
|
cursor: pointer; |
|
|
}} |
|
|
.menu-btn:hover {{ |
|
|
background: #555; |
|
|
}} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="ui"> |
|
|
<h2>Webspace Network</h2> |
|
|
<div> |
|
|
<div>Health: <span id="health-value">100</span>/100</div> |
|
|
<div class="bar-container"> |
|
|
<div id="health-bar" class="bar health-bar" style="width: 100{percent}">100{percent}</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div>Fuel: <span id="fuel-value">100</span>/100</div> |
|
|
<div class="bar-container"> |
|
|
<div id="fuel-bar" class="bar fuel-bar" style="width: 100{percent}">100{percent}</div> |
|
|
</div> |
|
|
</div> |
|
|
<div id="resources"> |
|
|
<h3>Resources:</h3> |
|
|
<div id="resource-list"></div> |
|
|
</div> |
|
|
<button id="menu-btn" class="menu-btn">Menu</button> |
|
|
</div> |
|
|
|
|
|
<div id="interaction-prompt">Press [E] to interact</div> |
|
|
|
|
|
<div id="planet-info"> |
|
|
<h3 id="planet-name">Planet Name</h3> |
|
|
<div>Type: <span id="planet-type">Desert</span></div> |
|
|
<div>Resources: <span id="planet-resources">Iron, Water</span></div> |
|
|
<div>Habitability: <span id="planet-habitability">0.75</span></div> |
|
|
<button id="mine-btn" class="menu-btn">Mine Resources</button> |
|
|
</div> |
|
|
|
|
|
<div id="game-menu"> |
|
|
<h2>Game Menu</h2> |
|
|
<button id="resume-btn" class="menu-btn">Resume Game</button> |
|
|
<button id="save-btn" class="menu-btn">Save Game</button> |
|
|
<button id="load-btn" class="menu-btn">Load Game</button> |
|
|
<button id="new-btn" class="menu-btn">New Game</button> |
|
|
<button id="quit-btn" class="menu-btn">Quit to Desktop</button> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script> |
|
|
|
|
|
<script> |
|
|
// Game state |
|
|
const gameState = {{ |
|
|
health: 100, |
|
|
maxHealth: 100, |
|
|
fuel: 100, |
|
|
maxFuel: 100, |
|
|
resources: {{ |
|
|
'Iron': 10, |
|
|
'Water': 5, |
|
|
'Fuel': 20, |
|
|
'Gold': 2 |
|
|
}}, |
|
|
currentPlanet: null, |
|
|
inMenu: false |
|
|
}}; |
|
|
|
|
|
// Universe data |
|
|
const universeData = {universe_json}; |
|
|
|
|
|
// Scene setup |
|
|
const scene = new THREE.Scene(); |
|
|
scene.background = new THREE.Color(0x000010); |
|
|
|
|
|
// Camera |
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); |
|
|
camera.position.set(0, 5, 15); |
|
|
|
|
|
// Renderer |
|
|
const renderer = new THREE.WebGLRenderer({{ antialias: true }}); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
document.body.appendChild(renderer.domElement); |
|
|
|
|
|
// Lighting |
|
|
const ambientLight = new THREE.AmbientLight(0x404040); |
|
|
scene.add(ambientLight); |
|
|
|
|
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); |
|
|
directionalLight.position.set(1, 1, 1); |
|
|
scene.add(directionalLight); |
|
|
|
|
|
// Stars background |
|
|
const starGeometry = new THREE.BufferGeometry(); |
|
|
const starVertices = []; |
|
|
for (let i = 0; i < 10000; i++) {{ |
|
|
const x = (Math.random() - 0.5) * 2000; |
|
|
const y = (Math.random() - 0.5) * 2000; |
|
|
const z = (Math.random() - 0.5) * 2000; |
|
|
starVertices.push(x, y, z); |
|
|
}} |
|
|
starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3)); |
|
|
const starMaterial = new THREE.PointsMaterial({{ color: 0xffffff, size: 1 }}); |
|
|
const stars = new THREE.Points(starGeometry, starMaterial); |
|
|
scene.add(stars); |
|
|
|
|
|
// Player ship |
|
|
const shipGeometry = new THREE.ConeGeometry(1, 3, 8); |
|
|
const shipMaterial = new THREE.MeshPhongMaterial({{ color: 0x00aaff }}); |
|
|
const ship = new THREE.Mesh(shipGeometry, shipMaterial); |
|
|
ship.rotation.x = Math.PI / 2; |
|
|
scene.add(ship); |
|
|
|
|
|
// Planets |
|
|
const planets = []; |
|
|
|
|
|
// Create planets |
|
|
function createPlanets() {{ |
|
|
universeData.systems[0].planets.forEach((planet, i) => {{ |
|
|
const planetGeometry = new THREE.SphereGeometry(planet.size, 32, 32); |
|
|
|
|
|
// Planet colors |
|
|
const colors = {{ |
|
|
'Lava': [0.8, 0.3, 0.1], |
|
|
'Ocean': [0.1, 0.3, 0.8], |
|
|
'Desert': [0.9, 0.8, 0.5], |
|
|
'Ice': [0.7, 0.8, 0.9], |
|
|
'Jungle': [0.1, 0.7, 0.2], |
|
|
'Toxic': [0.5, 0.1, 0.7], |
|
|
'Radioactive': [0.3, 0.8, 0.1] |
|
|
}}; |
|
|
|
|
|
const planetMaterial = new THREE.MeshStandardMaterial({{ |
|
|
color: new THREE.Color(...colors[planet.type] || [0.5, 0.5, 0.5]), |
|
|
roughness: 0.8, |
|
|
metalness: 0.2 |
|
|
}}); |
|
|
|
|
|
const planetMesh = new THREE.Mesh(planetGeometry, planetMaterial); |
|
|
|
|
|
// Position in orbit |
|
|
const angle = (i / universeData.systems[0].planets.length) * Math.PI * 2; |
|
|
const distance = 15 + i * 5; |
|
|
planetMesh.position.set( |
|
|
Math.cos(angle) * distance, |
|
|
0, |
|
|
Math.sin(angle) * distance |
|
|
); |
|
|
|
|
|
planetMesh.userData = planet; |
|
|
scene.add(planetMesh); |
|
|
planets.push(planetMesh); |
|
|
|
|
|
// Add click handler |
|
|
planetMesh.addEventListener('click', (event) => {{ |
|
|
gameState.currentPlanet = planet; |
|
|
document.getElementById('planet-name').textContent = planet.name; |
|
|
document.getElementById('planet-type').textContent = planet.type; |
|
|
document.getElementById('planet-resources').textContent = planet.resources.join(', '); |
|
|
document.getElementById('planet-habitability').textContent = planet.habitability.toFixed(2); |
|
|
document.getElementById('planet-info').style.display = 'block'; |
|
|
event.stopPropagation(); |
|
|
}}); |
|
|
}}); |
|
|
}} |
|
|
|
|
|
createPlanets(); |
|
|
|
|
|
// Camera controls |
|
|
const controls = new THREE.OrbitControls(camera, renderer.domElement); |
|
|
controls.enableDamping = true; |
|
|
controls.dampingFactor = 0.05; |
|
|
controls.screenSpacePanning = false; |
|
|
controls.minDistance = 5; |
|
|
controls.maxDistance = 50; |
|
|
controls.maxPolarAngle = Math.PI / 2 - 0.05; |
|
|
|
|
|
// Ship movement |
|
|
const shipSpeed = 0.1; |
|
|
const keys = {{}}; |
|
|
|
|
|
window.addEventListener('keydown', (e) => {{ |
|
|
keys[e.key.toLowerCase()] = true; |
|
|
|
|
|
if (e.key === 'e' && gameState.currentPlanet) {{ |
|
|
mineResources(); |
|
|
}} |
|
|
|
|
|
if (e.key === 'm') {{ |
|
|
toggleMenu(); |
|
|
}} |
|
|
}}); |
|
|
|
|
|
window.addEventListener('keyup', (e) => {{ |
|
|
keys[e.key.toLowerCase()] = false; |
|
|
}}); |
|
|
|
|
|
// Update UI |
|
|
function updateUI() {{ |
|
|
document.getElementById('health-value').textContent = gameState.health; |
|
|
document.getElementById('health-bar').style.width = `${{(gameState.health / gameState.maxHealth) * 100}}{percent}`; |
|
|
document.getElementById('health-bar').textContent = `${{Math.round((gameState.health / gameState.maxHealth) * 100)}}{percent}`; |
|
|
|
|
|
document.getElementById('fuel-value').textContent = gameState.fuel; |
|
|
document.getElementById('fuel-bar').style.width = `${{(gameState.fuel / gameState.maxFuel) * 100}}{percent}`; |
|
|
document.getElementById('fuel-bar').textContent = `${{Math.round((gameState.fuel / gameState.maxFuel) * 100)}}{percent}`; |
|
|
|
|
|
// Update resources |
|
|
const resourceList = document.getElementById('resource-list'); |
|
|
resourceList.innerHTML = ''; |
|
|
for (const [resource, amount] of Object.entries(gameState.resources)) {{ |
|
|
const item = document.createElement('div'); |
|
|
item.className = 'resource-item'; |
|
|
item.innerHTML = `<span>${{resource}}:</span><span>${{amount}}</span>`; |
|
|
resourceList.appendChild(item); |
|
|
}} |
|
|
}} |
|
|
|
|
|
// Mine resources |
|
|
function mineResources() {{ |
|
|
if (!gameState.currentPlanet) return; |
|
|
|
|
|
const planet = gameState.currentPlanet; |
|
|
planet.resources.forEach(resource => {{ |
|
|
gameState.resources[resource] = (gameState.resources[resource] || 0) + 1; |
|
|
}}); |
|
|
|
|
|
updateUI(); |
|
|
alert(`Mined resources from ${{planet.name}}!`); |
|
|
}} |
|
|
|
|
|
// Toggle menu |
|
|
function toggleMenu() {{ |
|
|
gameState.inMenu = !gameState.inMenu; |
|
|
document.getElementById('game-menu').style.display = gameState.inMenu ? 'block' : 'none'; |
|
|
controls.enabled = !gameState.inMenu; |
|
|
}} |
|
|
|
|
|
// Menu buttons |
|
|
document.getElementById('resume-btn').addEventListener('click', toggleMenu); |
|
|
document.getElementById('menu-btn').addEventListener('click', toggleMenu); |
|
|
document.getElementById('mine-btn').addEventListener('click', mineResources); |
|
|
|
|
|
// Save game |
|
|
document.getElementById('save-btn').addEventListener('click', () => {{ |
|
|
localStorage.setItem('webspace_save', JSON.stringify(gameState)); |
|
|
alert('Game saved successfully!'); |
|
|
}}); |
|
|
|
|
|
// Load game |
|
|
document.getElementById('load-btn').addEventListener('click', () => {{ |
|
|
const save = localStorage.getItem('webspace_save'); |
|
|
if (save) {{ |
|
|
Object.assign(gameState, JSON.parse(save)); |
|
|
updateUI(); |
|
|
alert('Game loaded successfully!'); |
|
|
toggleMenu(); |
|
|
}} else {{ |
|
|
alert('No saved game found!'); |
|
|
}} |
|
|
}}); |
|
|
|
|
|
// New game |
|
|
document.getElementById('new-btn').addEventListener('click', () => {{ |
|
|
if (confirm('Start a new game? All progress will be lost.')) {{ |
|
|
Object.assign(gameState, {{ |
|
|
health: 100, |
|
|
maxHealth: 100, |
|
|
fuel: 100, |
|
|
maxFuel: 100, |
|
|
resources: {{ |
|
|
'Iron': 10, |
|
|
'Water': 5, |
|
|
'Fuel': 20, |
|
|
'Gold': 2 |
|
|
}}, |
|
|
currentPlanet: null |
|
|
}}); |
|
|
updateUI(); |
|
|
toggleMenu(); |
|
|
}} |
|
|
}}); |
|
|
|
|
|
// Quit game |
|
|
document.getElementById('quit-btn').addEventListener('click', () => {{ |
|
|
if (confirm('Quit to desktop?')) {{ |
|
|
// In a real game, this would close the window |
|
|
alert('Thanks for playing!'); |
|
|
}} |
|
|
}}); |
|
|
|
|
|
// Initial UI update |
|
|
updateUI(); |
|
|
|
|
|
// Animation loop |
|
|
function animate() {{ |
|
|
requestAnimationFrame(animate); |
|
|
|
|
|
// Ship movement |
|
|
if (!gameState.inMenu) {{ |
|
|
if (keys['w'] || keys['arrowup']) {{ |
|
|
ship.position.z -= shipSpeed; |
|
|
}} |
|
|
if (keys['s'] || keys['arrowdown']) {{ |
|
|
ship.position.z += shipSpeed; |
|
|
}} |
|
|
if (keys['a'] || keys['arrowleft']) {{ |
|
|
ship.position.x -= shipSpeed; |
|
|
}} |
|
|
if (keys['d'] || keys['arrowright']) {{ |
|
|
ship.position.x += shipSpeed; |
|
|
}} |
|
|
if (keys['q']) {{ |
|
|
ship.rotation.z += 0.05; |
|
|
}} |
|
|
if (keys['e']) {{ |
|
|
ship.rotation.z -= 0.05; |
|
|
}} |
|
|
|
|
|
// Fuel consumption |
|
|
if (keys['w'] || keys['s'] || keys['a'] || keys['d']) {{ |
|
|
gameState.fuel = Math.max(0, gameState.fuel - 0.05); |
|
|
updateUI(); |
|
|
}} |
|
|
}} |
|
|
|
|
|
// Update camera to follow ship |
|
|
camera.position.x = ship.position.x; |
|
|
camera.position.y = ship.position.y + 5; |
|
|
camera.position.z = ship.position.z + 15; |
|
|
camera.lookAt(ship.position.x, ship.position.y, ship.position.z); |
|
|
|
|
|
controls.update(); |
|
|
renderer.render(scene, camera); |
|
|
}} |
|
|
|
|
|
animate(); |
|
|
|
|
|
// Handle window resize |
|
|
window.addEventListener('resize', () => {{ |
|
|
camera.aspect = window.innerWidth / window.innerHeight; |
|
|
camera.updateProjectionMatrix(); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
}}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
""".replace("{percent}", "%%") |
|
|
|
|
|
class PlanetGenerator: |
|
|
def __init__(self, seed=42): |
|
|
self.rng = np.random.RandomState(seed) |
|
|
self.planet_types = [ |
|
|
'Lava', 'Ocean', 'Desert', 'Ice', 'Jungle', 'Toxic', 'Radioactive' |
|
|
] |
|
|
self.resources = [ |
|
|
'Iron', 'Copper', 'Gold', 'Water', 'Oxygen', 'Hydrogen', |
|
|
'Silicon', 'Titanium', 'Uranium', 'Platinum' |
|
|
] |
|
|
|
|
|
def generate_planet(self, index): |
|
|
planet_type = self.rng.choice(self.planet_types) |
|
|
|
|
|
|
|
|
num_resources = self.rng.randint(2, 5) |
|
|
planet_resources = random.sample(self.resources, num_resources) |
|
|
|
|
|
return { |
|
|
'name': f"Planet-{chr(65 + index)}", |
|
|
'type': planet_type, |
|
|
'resources': planet_resources, |
|
|
'size': self.rng.uniform(0.8, 1.5), |
|
|
'habitability': self.rng.uniform(0.1, 0.9) |
|
|
} |
|
|
|
|
|
def generate_system(self, index): |
|
|
return { |
|
|
'name': f"System-{index}", |
|
|
'planets': [self.generate_planet(i) for i in range(self.rng.randint(3, 7))] |
|
|
} |
|
|
|
|
|
def generate_universe(self, num_systems=1): |
|
|
return { |
|
|
'systems': [self.generate_system(i) for i in range(num_systems)] |
|
|
} |
|
|
|
|
|
|
|
|
generator = PlanetGenerator() |
|
|
universe = generator.generate_universe() |
|
|
|
|
|
def get_threejs_app(): |
|
|
"""Generate the Three.js HTML with current universe data""" |
|
|
|
|
|
template = THREE_JS_TEMPLATE |
|
|
|
|
|
return template.replace("{universe_json}", json.dumps(universe)) |
|
|
|
|
|
with gr.Blocks(title="Webspace Network", css=".gradio-container {background: linear-gradient(to bottom, #000033, #000066);}") as demo: |
|
|
gr.Markdown("# 🚀 Webspace Network - Space Exploration Simulator") |
|
|
gr.Markdown("### Procedurally generated universe inspired by No Man's Sky") |
|
|
|
|
|
with gr.Row(): |
|
|
with gr.Column(scale=2): |
|
|
|
|
|
html = gr.HTML(get_threejs_app()) |
|
|
|
|
|
|
|
|
with gr.Accordion("Game Controls", open=False): |
|
|
gr.Markdown(""" |
|
|
**Movement:** |
|
|
- W/S: Move forward/backward |
|
|
- A/D: Move left/right |
|
|
- Q/E: Rotate ship |
|
|
- Mouse: Look around |
|
|
|
|
|
**Interaction:** |
|
|
- E: Interact with objects |
|
|
- M: Open game menu |
|
|
|
|
|
**Planets:** |
|
|
- Click on planets to see details |
|
|
- Press 'Mine Resources' to collect resources |
|
|
""") |
|
|
|
|
|
with gr.Column(scale=1): |
|
|
|
|
|
with gr.Group(): |
|
|
gr.Markdown("### Game State") |
|
|
health = gr.Slider(0, 100, value=100, label="Health", interactive=False) |
|
|
fuel = gr.Slider(0, 100, value=100, label="Fuel", interactive=False) |
|
|
|
|
|
|
|
|
with gr.Group(): |
|
|
gr.Markdown("### Resources") |
|
|
resources = gr.JSON(value={ |
|
|
'Iron': 10, |
|
|
'Water': 5, |
|
|
'Fuel': 20, |
|
|
'Gold': 2 |
|
|
}, label="Inventory") |
|
|
|
|
|
|
|
|
with gr.Group(): |
|
|
gr.Markdown("### Actions") |
|
|
with gr.Row(): |
|
|
save_btn = gr.Button("💾 Save Game") |
|
|
load_btn = gr.Button("📂 Load Game") |
|
|
new_btn = gr.Button("🆕 New Game") |
|
|
|
|
|
|
|
|
with gr.Group(): |
|
|
gr.Markdown("### Current Planet") |
|
|
planet_info = gr.JSON(label="Planet Data", value={}) |
|
|
|
|
|
|
|
|
with gr.Group(): |
|
|
gr.Markdown("### Debug Console") |
|
|
console = gr.Textbox(label="Game Events", interactive=False) |
|
|
|
|
|
|
|
|
def save_game(): |
|
|
return {"message": "Game saved successfully!"} |
|
|
|
|
|
def load_game(): |
|
|
return {"message": "Game loaded successfully!"} |
|
|
|
|
|
def new_game(): |
|
|
return { |
|
|
"health": 100, |
|
|
"fuel": 100, |
|
|
"resources": { |
|
|
'Iron': 10, |
|
|
'Water': 5, |
|
|
'Fuel': 20, |
|
|
'Gold': 2 |
|
|
}, |
|
|
"planet_info": {}, |
|
|
"console": "New game started" |
|
|
} |
|
|
|
|
|
save_btn.click( |
|
|
save_game, |
|
|
outputs=console |
|
|
) |
|
|
|
|
|
load_btn.click( |
|
|
load_game, |
|
|
outputs=console |
|
|
) |
|
|
|
|
|
new_btn.click( |
|
|
new_game, |
|
|
outputs=[health, fuel, resources, planet_info, console] |
|
|
) |
|
|
|
|
|
if __name__ == "__main__": |
|
|
demo.launch() |
