Skip to content

Commit b73c3f4

Browse files
timblegoorntimblegoorn
committed
Initial Build
This is a rudimentary prototype and proof of concept that allows basic list adding, saving the current list, and loading a saved list.
1 parent f699959 commit b73c3f4

5 files changed

Lines changed: 165 additions & 0 deletions

File tree

‎assets/Blackcastlemf-BG5n.ttf‎

49 KB
Binary file not shown.

‎assets/DonjonikonsRegular-VABy.ttf‎

142 KB
Binary file not shown.

‎index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Combat Companion V0.1</title>
5+
<link rel="stylesheet" href="style/main.css">
6+
</head>
7+
<body>
8+
9+
10+
<div id="contentContainer">
11+
<div id="logoTitle">
12+
<h1 class="title">Combat Companion V0.1</h1>
13+
</div>
14+
15+
<div class="divBlocks">
16+
<p>
17+
Add a new unit:
18+
</p>
19+
<form>
20+
<label for="itemName">Unit Name:</label><br>
21+
<input type="text" id="itemName" name="itemName"><br>
22+
<label for="itemInitiative">Initiative:</label><br>
23+
<input type="text" id="itemInitiative" name="itemInitiative"><br>
24+
<label for="itemHP">HP:</label><br>
25+
<input type="text" id="itemHP" name="itemHP"><br>
26+
<button type="button" onclick="AddUnit()">Add Unit</button>
27+
<button type="button" onclick="SaveGame()">Save Current Combat</button>
28+
<button type="button" onclick="LoadGame()">Load Saved Combat</button>
29+
</form>
30+
</div>
31+
<br>
32+
<div id="list" class="divBlocks"></div>
33+
</div>
34+
35+
<script src="src/main.js"></script>
36+
</body>
37+
</html>

‎src/main.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
var units = [
2+
{name: "Goblin", initiative: 20, hp: 14},
3+
{name: "Goblin Archer", initiative: 16, hp: 14},
4+
{name: "Goblin Chief", initiative: 13, hp: 32},
5+
{name: "Ulfric", initiative: 18, hp: 53},
6+
{name: "Leah", initiative: 7, hp: 45},
7+
]
8+
9+
var currentRound = 1;
10+
11+
function DisplayUnits() {
12+
units.sort((a,b) => b.initiative - a.initiative);
13+
// Get the object list div
14+
const objectListDiv = document.getElementById('list');
15+
objectListDiv.innerHTML = ("Current Round: " + currentRound + "<br>");
16+
17+
// Loop through the objects and create a list item for each one
18+
for (const unit of units) {
19+
const listItem = document.createElement('div');
20+
listItem.className = "unit";
21+
listItem.innerHTML = `(${unit.initiative}) ${unit.name} (HP: ${unit.hp})`;
22+
objectListDiv.appendChild(listItem);
23+
}
24+
}
25+
26+
function AddUnit() {
27+
// Get the value of the input field
28+
var name = document.getElementById("itemName").value;
29+
var initiative = document.getElementById("itemInitiative").value;
30+
var hp = document.getElementById("itemHP").value;
31+
32+
if (isNaN(initiative) || initiative < 0 || initiative == "") {
33+
console.log("invalid initiative");
34+
return;
35+
}
36+
if (isNaN(hp) || hp < 0 || hp == "") {
37+
console.log("invalid hp");
38+
return;
39+
}
40+
if (name == "") {
41+
console.log("invalid name");
42+
return;
43+
}
44+
// Reset the value of the input field
45+
document.getElementById("itemName").value = "";
46+
document.getElementById("itemInitiative").value = "";
47+
document.getElementById("itemHP").value = "";
48+
49+
var obj = {name: name, initiative: initiative, hp: hp};
50+
units.push(obj);
51+
DisplayUnits();
52+
}
53+
54+
function SaveGame() {
55+
var saveFile = {
56+
currentRound: currentRound,
57+
units: units,
58+
}
59+
60+
localStorage.setItem("CombatCompanionSave", JSON.stringify(saveFile));
61+
}
62+
63+
function LoadGame() {
64+
var saveFile = JSON.parse(localStorage.getItem("CombatCompanionSave"));
65+
currentRound = saveFile.currentRound;
66+
units = saveFile.units;
67+
68+
DisplayUnits();
69+
}
70+
71+
// Call the displayObjectList function when the page loads
72+
window.addEventListener('load', DisplayUnits);

‎style/main.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
@font-face {
2+
font-family: themeFont;
3+
src: url(../assets/Blackcastlemf-BG5n.ttf);
4+
}
5+
6+
@font-face {
7+
font-family: iconFont;
8+
src: url(../assets/DonjonikonsRegular-VABy.ttf);
9+
}
10+
11+
:root {
12+
--themeRedPop:#e8443c;
13+
--themeRedLessPop: #e94445;
14+
--themeBlue: #264c5e;
15+
--themeRedMuted: #a34c50;
16+
--themeOffWhite: #cec2ae;
17+
--themeRedDark: #4a2932;
18+
}
19+
20+
body {
21+
background-color: var(--themeOffWhite);
22+
}
23+
24+
#contentContainer {
25+
text-align: center;
26+
padding-left: 20%;
27+
padding-right: 20%;
28+
}
29+
30+
.title {
31+
font-family: themeFont;
32+
color: var(--themeRedPop);
33+
font-size: 100px;
34+
font-weight: 50;
35+
}
36+
37+
.divBlocks {
38+
display: block;
39+
background: white;
40+
border-radius: 4px;
41+
padding-left: 10px;
42+
padding-right: 10px;
43+
padding-top: 20px;
44+
padding-bottom: 20px;
45+
border-radius: 20px;
46+
}
47+
48+
.unit {
49+
padding: 30px;
50+
background-color: var(--themeRedDark);
51+
margin: 5px;
52+
border-radius: 10px;
53+
font-family: Arial, Helvetica, sans-serif;
54+
text-align: left;
55+
color: var(--themeOffWhite);
56+
}

0 commit comments

Comments
 (0)