Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>TribeForge</title> | |
| <style> | |
| canvas { border: 1px solid black; } | |
| #ui { font-family: Arial, sans-serif; position: absolute; top: 10px; } | |
| button { padding: 5px 10px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; } | |
| button:hover { background: #45a049; } | |
| #editor { display: none; position: absolute; top: 50px; left: 10px; background: #fff; padding: 10px; border: 1px solid #000; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="ui"> | |
| <span id="resources">Food: 0</span> | <span id="population">Tribe: 1/5</span> | <span id="relations">Relations: Neutral</span> | |
| <button onclick="gatherFood()">Gather Food</button> | |
| <button onclick="buildHut()">Build Hut</button> | |
| <button onclick="attackTribe()">Attack Tribe</button> | |
| <button onclick="socializeTribe()">Socialize</button> | |
| <button onclick="toggleEditor()">Edit Creature</button> | |
| </div> | |
| <div id="editor"> | |
| <h3>Creature Editor</h3> | |
| <label>Color: <input type="color" id="creatureColor" value="#ff0000"></label><br> | |
| <label>Size: <input type="range" id="creatureSize" min="16" max="48" value="32"></label><br> | |
| <button onclick="applyChanges()">Apply</button> | |
| </div> | |
| <canvas id="gameCanvas" width="800" height="600"></canvas> | |
| <script src="{{ url_for('static', filename='game.js') }}"></script> | |
| <script src="{{ url_for('static', filename='tribalStage.js') }}"></script> | |
| <script src="{{ url_for('static', filename='creatureEditor.js') }}"></script> | |
| <script> | |
| const game = new TribalStage(document.getElementById("gameCanvas")); | |
| game.init(); | |
| </script> | |
| </body> | |
| </html> |