| import streamlit as st | |
| import random | |
| from game_dev_snippet import run_game | |
| from mad_lib_generator import generate_mad_lib | |
| st.set_page_config(layout="wide") | |
| st.title("Game Development and Creative Writing Showcase") | |
| col1, col2 = st.columns(2) | |
| with col1: | |
| st.header("Game Development") | |
| st.code(run_game.__code__.co_code, language="python") | |
| if st.button("Run Game"): | |
| st.write("Game running in a separate window...") | |
| run_game() | |
| with col2: | |
| st.header("Mad Lib Generator") | |
| if st.button("Generate Mad Lib"): | |
| st.write(generate_mad_lib()) | |
| st.header("D&D SVG Sprite Animation") | |
| st.components.v1.html(""" | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="400" height="400"> | |
| <style> | |
| @keyframes move { | |
| 0% { transform: translateX(0); } | |
| 50% { transform: translateX(100px); } | |
| 100% { transform: translateX(0); } | |
| } | |
| .sprite { animation: move 4s infinite; } | |
| </style> | |
| <g class="sprite"> | |
| <!-- Wizard sprite --> | |
| <path d="M50,150 L70,100 L90,150 Z" fill="#4a0e4e" /> | |
| <circle cx="80" cy="90" r="20" fill="#c8a2c8" /> | |
| <path d="M70,90 Q80,70 90,90" stroke="#4a0e4e" stroke-width="2" fill="none" /> | |
| </g> | |
| <!-- Background elements --> | |
| <rect x="0" y="150" width="200" height="50" fill="#3a7d44" /> | |
| <circle cx="30" cy="30" r="15" fill="#f9d71c" /> | |
| </svg> | |
| """, height=400) | |
| st.header("Three.js 3D App") | |
| st.components.v1.html(""" | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Three.js Cube</title> | |
| <style> | |
| body { margin: 0; } | |
| canvas { display: block; } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script> | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer(); | |
| renderer.setSize(400, 300); | |
| document.body.appendChild(renderer.domElement); | |
| const geometry = new THREE.BoxGeometry(); | |
| const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); | |
| const cube = new THREE.Mesh(geometry, material); | |
| scene.add(cube); | |
| camera.position.z = 5; | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| cube.rotation.x += 0.01; | |
| cube.rotation.y += 0.01; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| </script> | |
| </body> | |
| </html> | |
| """, height=300) | |
| if __name__ == "__main__": | |
| st.sidebar.title("Navigation") | |
| st.sidebar.info("Use the buttons and sections above to interact with different components of the app.") |