aboutsummaryrefslogtreecommitdiff
path: root/src/sim/index.html
diff options
context:
space:
mode:
authorMark Powers <markppowers0@gmail.com>2020-05-23 20:52:57 -0500
committerMark Powers <markppowers0@gmail.com>2020-05-23 20:52:57 -0500
commitb6d40fa3776b33a03f8f40636a35a967873fc97b (patch)
tree9d777e363363c150290733dbf5613df4306e7c21 /src/sim/index.html
parentb5de6d44e0f291f6fcbe035f4a15edcab1491aad (diff)
Make sim an idle game
Diffstat (limited to 'src/sim/index.html')
-rw-r--r--src/sim/index.html119
1 files changed, 55 insertions, 64 deletions
diff --git a/src/sim/index.html b/src/sim/index.html
index b9330e0..c3f7926 100644
--- a/src/sim/index.html
+++ b/src/sim/index.html
@@ -8,16 +8,19 @@
<link rel="stylesheet" type="text/css" href="/sim/styles.css">
</head>
-<body style="padding:0; margin:0; overflow:hidden;">
+<body style="padding:0; margin:0;">
<div>
<div>Population: <span id="population"></span></div>
<div>Gold: <span id="gold"></span></div>
<div>Resources: <span id="resources"></span></div>
- <button onclick="status = ''; update()">Update</button>
+ <!-- <button onclick="update()">Update</button> -->
+ </div>
+ <div style="display: flex">
+ <canvas style="padding: 1em;" id="canvas"></canvas>
+ <p>Towns create population, Mountains mine gold, Forests farm resources</p>
</div>
- <canvas id="canvas"></canvas>
- <div id="status"></div>
<div id="shopDiv"></div>
+ <div style="overflow: scroll; height: 10em; border: 1px solid black"><ul id="status"></ul></div>
<script src="/highscore.js"></script>
<script src="/sim/tiles.js"></script>
<script src="/sim/items.js"></script>
@@ -25,23 +28,15 @@
var score;
var username = undefined
- var populationEl = document.getElementById("population")
- var goldEl = document.getElementById("gold")
- var shopEl = document.getElementById("shopDiv")
- var statusEl = document.getElementById("status")
- var resourceEl = document.getElementById("resources")
-
- var population, gold, resources;
+ var game
var shopItems = [];
- var queuedTile
var width = 10
var height = 10
var tileSize = 40;
- var status = ""
var t
- var eventQueue
+ var eventQueue, messages, bindings
var level
window.onload = function () {
@@ -56,20 +51,39 @@
}
function init() {
score = 0
- level = []
+
+ game = {}
+ game.population = 10
+ game.gold = 5
+ game.resources = 0
+ game.level = []
for (var i = 0; i < width; i++) {
var row = []
for (var j = 0; j < height; j++) {
row.push(undefined)
}
- level.push(row)
+ game.level.push(row)
}
- level[Math.floor(width / 2)][Math.floor(height / 2)] = new Town()
+ game.level[Math.floor(width / 2)][Math.floor(height / 2)] = new Town()
+
+ messages = []
- population = 10
- gold = 5
- resources = 0
+ bindings = []
+ bindTo(document.getElementById("population"), () => Math.floor(game.population))
+ bindTo(document.getElementById("gold"), () => Math.floor(game.gold))
+ bindTo(document.getElementById("resources"), () => Math.floor(game.resources))
+ var statusEl = document.getElementById('status')
+ bindTo(statusEl, ()=>{
+ if(messages.length > 0){
+ var string = "<li>" + messages.join("</li><li>") + "</li>"
+ messages = []
+ statusEl.scrollTop = 0
+ return string + statusEl.innerHTML
+ } else {
+ return statusEl.innerHTML
+ }
+ });
t = 0
eventQueue = {
@@ -79,12 +93,14 @@
30: getScout(),
}
addShopItem(getScout())
+
+ gameInterval = setInterval(update, 1000)
}
function draw() {
ctx.fillStyle = "#009900"
ctx.fillRect(0, 0, width * tileSize, height * tileSize)
for (var i = 0; i < width; i++) {
- var row = level[i]
+ var row = game.level[i]
for (var j = 0; j < height; j++) {
if (row[j]) {
row[j].draw(i, j, tileSize)
@@ -103,80 +119,55 @@
ctx.lineTo(i * tileSize, tileSize * height)
ctx.stroke()
}
-
- populationEl.innerText = population
- goldEl.innerText = gold
- statusEl.innerText = status
- resourceEl.innerText = resources
}
function update() {
t++
for (var i = 0; i < width; i++) {
- var row = level[i]
+ var row = game.level[i]
for (var j = 0; j < height; j++) {
if (row[j]) {
- processUpdate(row[j].update())
+ row[j].update(game)
}
}
}
- if(eventQueue[t]){
+ if (eventQueue[t]) {
addShopItem(eventQueue[t])
}
-
+ applyBindings()
draw()
}
function keyPush(e) {
- status = ""
- update()
}
function mouseClick(e) {
- if(queuedTile){
- var x = Math.floor((e.x - canvas.offsetLeft) / tileSize)
- var y = Math.floor((e.y - canvas.offsetTop) / tileSize)
- if(x < 0 || width <= x || y < 0 || height <= y){
- return
- }
- if(level[x][y] == undefined){
- level[x][y] = queuedTile
- status = `You placed the ${queuedTile.name}`
- queuedTile = undefined
- } else {
- status = `You cannot place a tile there.`
- }
- update()
- }
}
- function addShopItem(item){
+ function addShopItem(item) {
shopItems.push(item)
var newButton = document.createElement("button")
newButton.innerText = item.text + ": " + item.cost
newButton.id = item.id
- newButton.onclick = function(){
- if(item.cost <= gold){
+ newButton.onclick = function () {
+ if (item.cost <= game.gold) {
shopItems = shopItems.filter(it => it.id != item.id)
shopDiv.removeChild(newButton)
- gold -= item.cost
- processUpdate(item.callback())
+ game.gold -= item.cost
+ item.callback(game)
} else {
- status = "not enough gold"
+ message.push("not enough gold")
}
update()
}
shopDiv.appendChild(newButton)
update()
}
- function processUpdate(response){
- if(response.tile){
- queuedTile = response.tile
- } else if(response.gold){
- gold += response.gold
- } else if(response.population){
- population += response.population
- } else if(response.resources){
- resources += response.resources
- }
- }
+ function bindTo(element, callback) {
+ bindings.push([element, callback])
+ }
+ function applyBindings() {
+ bindings.forEach(binding => {
+ binding[0].innerHTML = binding[1]()
+ })
+ }
</script>
</body>
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-24 10:03:10 +0000