<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Virtual World</title>
<style>
/* Futuristic / fun styling */
/* A gentle gradient background with animation */
body {
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', sans-serif;
background: linear-gradient(120deg, #0ff, #f0f);
background-size: 400% 400%;
animation: gradientShift 10s ease infinite alternate;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
/* Container for everything */
#app {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
position: relative;
z-index: 1; /* so it stays above the gradient */
}
/* Info bar top-left */
#infoBar {
position: absolute;
top: 0;
left: 0;
margin: 8px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid #888;
border-radius: 6px;
font-size: 14px;
z-index: 10;
transition: box-shadow 0.3s;
width: 200px;
}
#infoBar:hover {
box-shadow: 0 0 10px rgba(255,255,255,0.8);
}
/* Stats bar top-right */
#statsBar {
position: absolute;
top: 0;
right: 0;
margin: 8px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid #888;
border-radius: 6px;
font-size: 14px;
z-index: 10;
transition: box-shadow 0.3s;
width: 250px;
}
#statsBar:hover {
box-shadow: 0 0 10px rgba(255,255,255,0.8);
}
#menu {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 8px 0;
justify-content: center;
}
.menu-button {
padding: 6px 12px;
background: #fff;
border: 2px solid #444;
cursor: pointer;
border-radius: 4px;
transition: transform 0.25s ease, background-color 0.25s ease;
}
.menu-button:hover {
transform: scale(1.08);
background-color: #c8fffa;
}
#toggleLogsBtn {
margin-left: 10px;
}
canvas {
background: #ffffff;
border: 2px solid #444;
cursor: grab;
transition: box-shadow 0.3s;
}
canvas:active {
cursor: grabbing;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
#log {
width: 800px;
height: 120px;
margin-top: 10px;
border: 2px solid #444;
background: #f9f9f9;
padding: 5px;
font-size: 0.9rem;
overflow-y: auto;
border-radius: 6px;
transition: box-shadow 0.3s;
}
#log:hover {
box-shadow: 0 0 6px rgba(0,0,0,0.15);
}
.log-entry {
margin: 2px 0;
}
/* Responsive adjustments */
@media (max-width: 850px) {
#log {
width: 95%;
height: 100px;
}
canvas {
width: 95% !important;
height: 400px !important;
}
}
/* Menu categories */
.menu-category {
display: flex;
flex-direction: column;
margin: 0 5px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 5px;
background: rgba(255, 255, 255, 0.5);
}
.category-title {
font-weight: bold;
text-align: center;
margin-bottom: 5px;
font-size: 14px;
}
</style>
</head>
<body>
<!-- Info Bar with money/citizen count -->
<div id="infoBar">
<p id="moneyDisplay">Money: $0</p>
<p id="citizenCount">Citizens: 0</p>
<p id="woodDisplay">Wood: 0</p>
<p id="foodDisplay">Food: 0</p>
<p id="medicineDisplay">Medicine: 0</p>
<p id="knowledgeDisplay">Knowledge: 0</p>
</div>
<!-- Stats Bar with building/profession counts -->
<div id="statsBar">
<p id="buildingCountsDisplay">Buildings: 🏠0 🏪0 🏥0 🏫0</p>
<p id="professionCountsDisplay">Citizens: 👷0 🌾0 💰0 💉0 📚0</p>
</div>
<div id="app">
<!-- Store Menu -->
<div id="menu">
<div class="menu-category">
<div class="category-title">Buildings</div>
<button class="menu-button" id="buyHouseBtn">Buy House ($300)</button>
<button class="menu-button" id="buyRoadBtn">Buy Road ($150)</button>
<button class="menu-button" id="buyMarketBtn">Buy Market ($400)</button>
<button class="menu-button" id="buyHospitalBtn">Buy Hospital ($500)</button>
<button class="menu-button" id="buySchoolBtn">Buy School ($450)</button>
<button class="menu-button" id="buySpawnerBtn">Buy Spawner ($500)</button>
</div>
<div class="menu-category">
<div class="category-title">Citizens</div>
<button class="menu-button" id="buyBuilderBtn">Buy Builder ($100)</button>
<button class="menu-button" id="buyFarmerBtn">Buy Farmer ($100)</button>
<button class="menu-button" id="buyMerchantBtn">Buy Merchant ($150)</button>
<button class="menu-button" id="buyDoctorBtn">Buy Doctor ($200)</button>
<button class="menu-button" id="buyTeacherBtn">Buy Teacher ($180)</button>
<button class="menu-button" id="buySoldierBtn">Buy Soldier ($250)</button>
</div>
<div class="menu-category">
<div class="category-title">Resources</div>
<button class="menu-button" id="buyTreeBtn">Buy Tree ($50)</button>
</div>
<div class="menu-category">
<div class="category-title">Terrain</div>
<button class="menu-button" id="drawWaterBtn">Draw Water ($20)</button>
<button class="menu-button" id="drawGrassBtn">Draw Grass ($10)</button>
<button class="menu-button" id="drawSandBtn">Draw Sand ($15)</button>
<button class="menu-button" id="drawDirtBtn">Draw Dirt ($5)</button>
<button class="menu-button" id="drawStoneBtn">Draw Stone ($25)</button>
</div>
<button class="menu-button" id="toggleLogsBtn">Hide Logs</button>
</div>
<canvas id="worldCanvas" width="1200" height="800"></canvas>
<div id="log"></div>
</div>
<script src="entities.js"></script>
<script src="utils.js"></script>
<script src="terrain.js"></script>
<script src="ai.js"></script>
<script src="render.js"></script>
<script src="events.js"></script>
<script src="game.js"></script>
<script>
/**********************************************************************
* GLOBALS & REFERENCES
**********************************************************************/
const canvas = document.getElementById('worldCanvas');
const ctx = canvas.getContext('2d');
const logContainer = document.getElementById('log');
const moneyDisplay = document.getElementById('moneyDisplay');
const citizenCountDisplay = document.getElementById('citizenCount');
const woodDisplay = document.getElementById('woodDisplay');
const foodDisplay = document.getElementById('foodDisplay');
const medicineDisplay = document.getElementById('medicineDisplay');
const knowledgeDisplay = document.getElementById('knowledgeDisplay');
const buildingCountsDisplay = document.getElementById('buildingCountsDisplay');
const professionCountsDisplay = document.getElementById('professionCountsDisplay');
// Pan & Zoom
let offsetX = 0;
let offsetY = 0;
let scale = 1.0;
let isDragging = false;
let lastMouseX = 0;
let lastMouseY = 0;
/**********************************************************************
* SETUP & START
**********************************************************************/
function setupGame() {
setupPanZoom();
setupBuyButtons();
setupCanvasClick();
initWorld();
updateMoneyDisplay();
}
// Start the game
setupGame();
</script>
</body>
</html>