Hugging Face's logo

Spaces:
awacke1
/
SimCityVsTheMonstersGame
Sleeping

App Files Community
awacke1 commited on
Commit
c83e1a9
·
verified ·
1 Parent(s): 812e218

Create app.py

Browse files
Files changed (1) hide show
  1. app.py +175 -0
app.py ADDED
@@ -0,0 +1,175 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import streamlit as st
2
+ from streamlit.components.v1 import html
3
+
4
+ # Define the p5.js sketch code as a string
5
+ p5js_code = """
6
+ let gridSize = 40;
7
+ let grid = [];
8
+ let buildings = [];
9
+ let train = { x: 0, y: 0, dir: 1 };
10
+ let monsterMode = false;
11
+ let currentMonster = 'Godzilla';
12
+ let monsterX, monsterY;
13
+
14
+ function setup() {
15
+ createCanvas(800, 600);
16
+ for (let i = 0; i < width / gridSize; i++) {
17
+ grid[i] = [];
18
+ for (let j = 0; j < height / gridSize; j++) {
19
+ grid[i][j] = 'empty';
20
+ }
21
+ }
22
+ for (let i = 0; i < width / gridSize; i++) {
23
+ grid[i][5] = 'track';
24
+ }
25
+ train.x = 0;
26
+ train.y = 5 * gridSize;
27
+ monsterX = width / 2;
28
+ monsterY = height / 2;
29
+ }
30
+
31
+ function draw() {
32
+ background(220);
33
+ drawGrid();
34
+ drawBuildings();
35
+ drawTrain();
36
+ if (monsterMode) drawMonster();
37
+ }
38
+
39
+ function drawGrid() {
40
+ for (let i = 0; i < grid.length; i++) {
41
+ for (let j = 0; j < grid[i].length; j++) {
42
+ let x = i * gridSize;
43
+ let y = j * gridSize;
44
+ if (grid[i][j] === 'track') {
45
+ fill(100);
46
+ rect(x, y, gridSize, gridSize);
47
+ } else {
48
+ fill(150, 200, 150);
49
+ rect(x, y, gridSize, gridSize);
50
+ }
51
+ stroke(0);
52
+ rect(x, y, gridSize, gridSize);
53
+ }
54
+ }
55
+ }
56
+
57
+ function drawBuildings() {
58
+ buildings.forEach(b => {
59
+ let x = b.x * gridSize;
60
+ let y = b.y * gridSize;
61
+ fill(b.color);
62
+ noStroke();
63
+ beginShape();
64
+ if (b.type === 'Residential') {
65
+ vertex(x + 10, y + 30); vertex(x + 20, y + 10); vertex(x + 30, y + 30);
66
+ vertex(x + 25, y + 30); vertex(x + 25, y + 35); vertex(x + 15, y + 35);
67
+ vertex(x + 15, y + 30);
68
+ } else if (b.type === 'Commercial') {
69
+ vertex(x + 10, y + 35); vertex(x + 15, y + 15); vertex(x + 25, y + 15);
70
+ vertex(x + 30, y + 35);
71
+ } else if (b.type === 'Industrial') {
72
+ vertex(x + 5, y + 35); vertex(x + 15, y + 20); vertex(x + 25, y + 20);
73
+ vertex(x + 35, y + 35);
74
+ }
75
+ endShape(CLOSE);
76
+ });
77
+ }
78
+
79
+ function drawTrain() {
80
+ fill(150, 50, 50);
81
+ noStroke();
82
+ beginShape();
83
+ let tx = train.x;
84
+ let ty = train.y;
85
+ vertex(tx + 10, ty + 10); vertex(tx + 30, ty + 10); vertex(tx + 35, ty + 20);
86
+ vertex(tx + 30, ty + 30); vertex(tx + 10, ty + 30); vertex(tx + 5, ty + 20);
87
+ endShape(CLOSE);
88
+ train.x += train.dir * 2;
89
+ if (train.x > width || train.x < 0) train.dir *= -1;
90
+ }
91
+
92
+ function drawMonster() {
93
+ fill(monsterMode ? 255 : 0, 0, 0);
94
+ noStroke();
95
+ beginShape();
96
+ if (currentMonster === 'Godzilla') {
97
+ vertex(monsterX, monsterY + 40); vertex(monsterX + 20, monsterY);
98
+ vertex(monsterX + 40, monsterY + 40); vertex(monsterX + 30, monsterY + 50);
99
+ vertex(monsterX + 10, monsterY + 50);
100
+ } else if (currentMonster === 'GiantRobot') {
101
+ vertex(monsterX, monsterY + 40); vertex(monsterX + 10, monsterY);
102
+ vertex(monsterX + 30, monsterY); vertex(monsterX + 40, monsterY + 40);
103
+ vertex(monsterX + 20, monsterY + 50);
104
+ }
105
+ endShape(CLOSE);
106
+ monsterX += random(-5, 5);
107
+ monsterY += random(-5, 5);
108
+ monsterX = constrain(monsterX, 0, width);
109
+ monsterY = constrain(monsterY, 0, height);
110
+ }
111
+
112
+ function mousePressed() {
113
+ let i = floor(mouseX / gridSize);
114
+ let j = floor(mouseY / gridSize);
115
+ if (grid[i][j] === 'empty' && !monsterMode) {
116
+ let types = ['Residential', 'Commercial', 'Industrial'];
117
+ let colors = [[0, 200, 0], [0, 0, 200], [200, 200, 0]];
118
+ let idx = floor(random(3));
119
+ buildings.push({ x: i, y: j, type: types[idx], color: colors[idx] });
120
+ grid[i][j] = 'building';
121
+ }
122
+ }
123
+
124
+ window.toggleMonsterMode = function() {
125
+ monsterMode = !monsterMode;
126
+ };
127
+
128
+ window.setMonster = function(monster) {
129
+ currentMonster = monster;
130
+ };
131
+ """
132
+
133
+ # Full HTML content with embedded p5.js
134
+ html_content = f"""
135
+ <!DOCTYPE html>
136
+ <html>
137
+ <head>
138
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>
139
+ <style>
140
+ body {{ font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #f0f0f0; }}
141
+ #controls {{ margin-bottom: 20px; }}
142
+ button {{ padding: 10px 20px; margin: 5px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; }}
143
+ button:hover {{ background: #45a049; }}
144
+ select {{ padding: 10px; margin: 5px; border-radius: 5px; }}
145
+ </style>
146
+ </head>
147
+ <body>
148
+ <div id="controls">
149
+ <button onclick="toggleMonster()">Toggle Monster Mode</button>
150
+ <select onchange="setMonster(this.value)">
151
+ <option value="Godzilla">Godzilla</option>
152
+ <option value="GiantRobot">Giant Robot</option>
153
+ </select>
154
+ </div>
155
+ <div id="sketch-holder"></div>
156
+
157
+ <script>
158
+ {p5js_code}
159
+
160
+ function toggleMonster() {{
161
+ window.toggleMonsterMode();
162
+ }}
163
+
164
+ function setMonster(monster) {{
165
+ window.setMonster(monster);
166
+ }}
167
+ </script>
168
+ </body>
169
+ </html>
170
+ """
171
+
172
+ # Streamlit app
173
+ st.title("SimCity 2000 with Monster Mode")
174
+ st.write("Build your city and unleash a monster! Click to place buildings.")
175
+ html(html_content, height=700)