ChromaGaming/civ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Started work on a Spawn Progress Tracker

Browse source
This commit is contained in:
alisolarflare 2017-06-18 16:54:36 -04:00
parent 45df16fb2f
commit 8d39143f16
9 changed files with 145 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
game.html
View file

@ -16,6 +16,7 @@
<a href="./game.html">Game</a>
<a href="./rules.html">Rules</a>
<a href="./questions.html">Questions</a>
<a href="./spawn.html">Spawn</a>
</nav>
<canvas id="myCanvas" width="640" height="480"
style="border: 1px solid gray; width: 640px; height: 480px"></canvas>

1
index.html
View file

@ -12,6 +12,7 @@
<a href="./game.html">Game</a>
<a href="./rules.html">Rules</a>
<a href="./questions.html">Questions</a>
<a href="./spawn.html">Spawn</a>
</nav>
<h1>The Civilization Screen</h1>
<p>Welcome to the civilization screen.</p>

1
questions.html
View file

@ -15,6 +15,7 @@
<a href="./game.html">Game</a>
<a href="./rules.html">Rules</a>
<a href="./questions.html">Questions</a>
<a href="./spawn.html">Spawn</a>
</nav>
<h1>Our Little Interview</h1>

22
resources/spawn/buildings.json Normal file
View file

@ -0,0 +1,22 @@
{
"buildings": {
"rule-house":{
"id": "rule-house",
"name": "Rule House",
"use": "This building is where the rule signs are located. The signs should be accessible to read and should be the most important part of the room.",
"designed": true,
"started": true,
"completed": true,
"populated": true
},
"marketplace":{
"id": "marketplace",
"name": "Marketplace",
"use": "Here players can gather around, buying, selling, and trading materials. There should be plenty of space for players to set up their own shops, stands and stores",
"designed": false,
"started": false,
"completed": false,
"populated": false
}
}
}

64
resources/spawn/progress-table.js Normal file
View file

@ -0,0 +1,64 @@
window.onload = function(){
function addRow(building){
$nameElement = $("<td></td>")
$nameElement.attr("id", building.id + "-progress.name")
$nameElement.append(building.name);
$useElement = $("<td></td>");
$useElement.attr("id", building.id + "-progress.use");
$useElement.append(building.use)
$designedElement = $("<td></td>");
$designedElement.attr("id", building.id + "-progress.designed");
$designedElement.addClass("checkboxCell");
$designedElement.append(
$("<input>")
.attr("type", "checkbox")
.attr("id", building.id + ".designed?")
.attr("checked", building.designed))f;
$startedElement = $("<td></td>");
$startedElement.attr("id", building.id + "-progress.stated");
$startedElement.addClass("checkboxCell");
$startedElement.append(
$("<input>")
.attr("type", "checkbox")
.attr("id", building.id + ".started?")
.attr("checked", building.started));
$completedElement = $("<td></td>");
$completedElement.attr("id", building.id + "-progress.completed");
$completedElement.addClass("checkboxCell");
$completedElement.append(
$("<input>")
.attr("type", "checkbox")
.attr("id", building.id + ".completed?")
.attr("checked", building.completed));
$populatedElement = $("<td></td>");
$populatedElement.attr("id", building.id + "-progress.populated");
$populatedElement.addClass("checkboxCell");
$populatedElement.append(
$("<input>")
.attr("type", "checkbox")
.attr("id", building.id + ".populated?")
.attr("checked", building.populated));
$outputRow = $("<tr></tr>");
$outputRow.attr("id", building.id + "-progress");
$outputRow.append($nameElement);
$outputRow.append($useElement);
$outputRow.append($designedElement);
$outputRow.append($startedElement);
$outputRow.append($completedElement);
$outputRow.append($populatedElement);
return $outputRow;
}
console.info("loading");
$.getJSON("./resources/spawn/buildings.json", "", function(file){
for(const buildingName in file.buildings){
$("#progress-table").append(addRow(file.buildings[buildingName]));
}
});
}

18
resources/spawn/spawn.css Normal file
View file

@ -0,0 +1,18 @@
#progress-table{
font-family: "Calibri";
margin: 10px;
align: center;
}
#progress-table th{
border-bottom: solid gray;
border-width: thin;
}
#progress-table td{
border-bottom: solid lightgray;
border-width: thin;
max-width: 500px;
padding: 5px;
}
#progress-table .checkboxCell {
text-align: center;
}

1
rules.html
View file

@ -12,6 +12,7 @@
<a href="./game.html">Game</a>
<a href="./rules.html">Rules</a>
<a href="./questions.html">Questions</a>
<a href="./spawn.html">Spawn</a>
</nav>
<h1>The Rules</h1>

1
sandbox.html
View file

@ -14,6 +14,7 @@
<a href="./game.html">Game</a>
<a href="./rules.html">Rules</a>
<a href="./questions.html">Questions</a>
<a href="./spawn.html">Spawn</a>
</nav>
<h1>Developer's Sandbox</h1>

35
spawn.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spawn Progress</title>
<script src="./resources/frameworks/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./resources/spawn/progress-table.js"></script>
<link rel="stylesheet" href="./resources/spawn/spawn.css">
</head>
<body>
<h1>Spawn Progress Tracker</h1>
<p style="color:red">NOTE: THIS TRACKER IS UNFINISHED AN WILL NOT SAVE DATA, USE AT OWN RISK</p>
<nav>
<a href="./index.html">Main</a>
<a href="./sandbox.html">Sandbox</a>
<a href="./game.html">Game</a>
<a href="./rules.html">Rules</a>
<a href="./questions.html">Questions</a>
<a href="./spawn.html">Spawn</a>
</nav>
<table id="progress-table">
<tr>
<th>Name</td>
<th>Use</td>
<th>Designed</td>
<th>Started</td>
<th>Completed</td>
<th>Populated</td>
</tr>
</table>
</body>
</html>