import streamlit as st
from streamlit.components.v1 import html
# Define the p5.js sketch code as a string
p5js_code = """
let gridSize = 40;
let grid = [];
let buildings = [];
let train = { x: 0, y: 0, dir: 1 };
let monsterMode = false;
let currentMonster = 'Godzilla';
let monsterX, monsterY;
function setup() {
createCanvas(800, 600);
for (let i = 0; i < width / gridSize; i++) {
grid[i] = [];
for (let j = 0; j < height / gridSize; j++) {
grid[i][j] = 'empty';
}
}
for (let i = 0; i < width / gridSize; i++) {
grid[i][5] = 'track';
}
train.x = 0;
train.y = 5 * gridSize;
monsterX = width / 2;
monsterY = height / 2;
}
function draw() {
background(220);
drawGrid();
drawBuildings();
drawTrain();
if (monsterMode) drawMonster();
}
function drawGrid() {
for (let i = 0; i < grid.length; i++) {
for (let j = 0; j < grid[i].length; j++) {
let x = i * gridSize;
let y = j * gridSize;
if (grid[i][j] === 'track') {
fill(100);
rect(x, y, gridSize, gridSize);
} else {
fill(150, 200, 150);
rect(x, y, gridSize, gridSize);
}
stroke(0);
rect(x, y, gridSize, gridSize);
}
}
}
function drawBuildings() {
buildings.forEach(b => {
let x = b.x * gridSize;
let y = b.y * gridSize;
fill(b.color);
noStroke();
beginShape();
if (b.type === 'Residential') {
vertex(x + 10, y + 30); vertex(x + 20, y + 10); vertex(x + 30, y + 30);
vertex(x + 25, y + 30); vertex(x + 25, y + 35); vertex(x + 15, y + 35);
vertex(x + 15, y + 30);
} else if (b.type === 'Commercial') {
vertex(x + 10, y + 35); vertex(x + 15, y + 15); vertex(x + 25, y + 15);
vertex(x + 30, y + 35);
} else if (b.type === 'Industrial') {
vertex(x + 5, y + 35); vertex(x + 15, y + 20); vertex(x + 25, y + 20);
vertex(x + 35, y + 35);
}
endShape(CLOSE);
});
}
function drawTrain() {
fill(150, 50, 50);
noStroke();
beginShape();
let tx = train.x;
let ty = train.y;
vertex(tx + 10, ty + 10); vertex(tx + 30, ty + 10); vertex(tx + 35, ty + 20);
vertex(tx + 30, ty + 30); vertex(tx + 10, ty + 30); vertex(tx + 5, ty + 20);
endShape(CLOSE);
train.x += train.dir * 2;
if (train.x > width || train.x < 0) train.dir *= -1;
}
function drawMonster() {
fill(monsterMode ? 255 : 0, 0, 0);
noStroke();
beginShape();
if (currentMonster === 'Godzilla') {
vertex(monsterX, monsterY + 40); vertex(monsterX + 20, monsterY);
vertex(monsterX + 40, monsterY + 40); vertex(monsterX + 30, monsterY + 50);
vertex(monsterX + 10, monsterY + 50);
} else if (currentMonster === 'GiantRobot') {
vertex(monsterX, monsterY + 40); vertex(monsterX + 10, monsterY);
vertex(monsterX + 30, monsterY); vertex(monsterX + 40, monsterY + 40);
vertex(monsterX + 20, monsterY + 50);
}
endShape(CLOSE);
monsterX += random(-5, 5);
monsterY += random(-5, 5);
monsterX = constrain(monsterX, 0, width);
monsterY = constrain(monsterY, 0, height);
}
function mousePressed() {
let i = floor(mouseX / gridSize);
let j = floor(mouseY / gridSize);
if (grid[i][j] === 'empty' && !monsterMode) {
let types = ['Residential', 'Commercial', 'Industrial'];
let colors = [[0, 200, 0], [0, 0, 200], [200, 200, 0]];
let idx = floor(random(3));
buildings.push({ x: i, y: j, type: types[idx], color: colors[idx] });
grid[i][j] = 'building';
}
}
window.toggleMonsterMode = function() {
monsterMode = !monsterMode;
};
window.setMonster = function(monster) {
currentMonster = monster;
};
"""
# Full HTML content with embedded p5.js
html_content = f"""
"""
# Streamlit app
st.title("SimCity 2000 with Monster Mode")
st.write("Build your city and unleash a monster! Click to place buildings.")
html(html_content, height=700)