Spaces:
Running
Running
File size: 3,388 Bytes
784552c cacdf35 784552c 5c5f1bc 784552c 5c5f1bc 784552c 5c5f1bc 784552c |
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 92 93 94 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TribeForge</title>
<style>
body {
background: #87CEEB; /* Light sky blue, like Spore's vibrant palette */
margin: 0;
overflow: hidden;
font-family: 'Eurostile', Arial, sans-serif; /* Spore-like font */
}
canvas { border: 2px solid #4682B4; border-radius: 10px; margin: 10px; }
#ui {
position: absolute;
top: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#ui span {
color: #2F4F4F; /* Dark slate gray for text */
font-size: 16px;
margin-right: 20px;
}
button {
padding: 8px 16px;
background: #4CAF50; /* Bright green like Spore buttons */
color: white;
border: none;
border-radius: 20px; /* Rounded, Spore-like buttons */
cursor: pointer;
margin-right: 10px;
font-size: 14px;
transition: background 0.3s;
}
button:hover {
background: #45a049; /* Slightly darker green on hover */
}
button:disabled {
background: #A9A9A9; /* Gray for disabled state */
cursor: not-allowed;
}
#editor {
display: none;
position: absolute;
top: 50px;
left: 10px;
background: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border: 2px solid #4682B4;
}
#editor h3 {
color: #2F4F4F;
margin-top: 0;
}
#editor label {
display: block;
margin: 5px 0;
color: #2F4F4F;
}
#editor input[type="color"] { vertical-align: middle; }
#editor input[type="range"] { width: 100px; vertical-align: middle; }
</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> |