File size: 2,697 Bytes
4f14a35 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
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.") |