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.
timblegoorn · Dec 27, 2022 · b73c3f4 · b73c3f4
1 parent f699959
commit b73c3f4
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 0 deletions.
diff --git a/assets/Blackcastlemf-BG5n.ttf b/assets/Blackcastlemf-BG5n.ttf
diff --git a/assets/DonjonikonsRegular-VABy.ttf b/assets/DonjonikonsRegular-VABy.ttf
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Combat Companion V0.1</title>
+  <link rel="stylesheet" href="style/main.css">
+</head>
+<body>
+
+
+  <div id="contentContainer">
+    <div id="logoTitle">
+      <h1 class="title">Combat Companion V0.1</h1>
+    </div>
+
+    <div class="divBlocks">
+      <p>
+        Add a new unit:
+      </p>
+      <form>
+        <label for="itemName">Unit Name:</label><br>
+        <input type="text" id="itemName" name="itemName"><br>
+        <label for="itemInitiative">Initiative:</label><br>
+        <input type="text" id="itemInitiative" name="itemInitiative"><br>
+        <label for="itemHP">HP:</label><br>
+        <input type="text" id="itemHP" name="itemHP"><br>
+        <button type="button" onclick="AddUnit()">Add Unit</button>
+        <button type="button" onclick="SaveGame()">Save Current Combat</button>
+        <button type="button" onclick="LoadGame()">Load Saved Combat</button>
+      </form> 
+    </div>
+    <br>
+    <div id="list" class="divBlocks"></div>
+  </div>
+
+  <script src="src/main.js"></script>
+</body>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,72 @@
+var units = [
+    {name: "Goblin", initiative: 20, hp: 14},
+    {name: "Goblin Archer", initiative: 16, hp: 14},
+    {name: "Goblin Chief", initiative: 13, hp: 32},
+    {name: "Ulfric", initiative: 18, hp: 53},
+    {name: "Leah", initiative: 7, hp: 45},
+]
+
+var currentRound = 1;
+
+function DisplayUnits() {
+  units.sort((a,b) => b.initiative - a.initiative);
+  // Get the object list div
+  const objectListDiv = document.getElementById('list');
+  objectListDiv.innerHTML = ("Current Round: " + currentRound + "<br>");
+
+  // Loop through the objects and create a list item for each one
+  for (const unit of units) {
+    const listItem = document.createElement('div');
+    listItem.className = "unit";
+    listItem.innerHTML = `(${unit.initiative}) ${unit.name} (HP: ${unit.hp})`;
+    objectListDiv.appendChild(listItem);
+  }
+}
+
+function AddUnit() {
+  // Get the value of the input field
+  var name = document.getElementById("itemName").value;
+  var initiative = document.getElementById("itemInitiative").value;
+  var hp = document.getElementById("itemHP").value;
+
+  if (isNaN(initiative) || initiative < 0 || initiative == "") {
+    console.log("invalid initiative");
+    return;
+  }
+  if (isNaN(hp) || hp < 0 || hp == "") {
+    console.log("invalid hp");
+    return;
+  }
+  if (name == "") {
+    console.log("invalid name");
+    return;
+  }
+  // Reset the value of the input field
+  document.getElementById("itemName").value = "";
+  document.getElementById("itemInitiative").value = "";
+  document.getElementById("itemHP").value = "";
+
+  var obj = {name: name, initiative: initiative, hp: hp};
+  units.push(obj);
+  DisplayUnits();
+}
+
+function SaveGame() {
+    var saveFile = {
+        currentRound: currentRound,
+        units: units,
+    }
+
+    localStorage.setItem("CombatCompanionSave", JSON.stringify(saveFile));
+}
+
+function LoadGame() {
+    var saveFile = JSON.parse(localStorage.getItem("CombatCompanionSave"));
+    currentRound = saveFile.currentRound;
+    units = saveFile.units;
+
+    DisplayUnits();
+}
+
+// Call the displayObjectList function when the page loads
+window.addEventListener('load', DisplayUnits);
diff --git a/style/main.css b/style/main.css
@@ -0,0 +1,56 @@
+@font-face {
+  font-family: themeFont;
+  src: url(../assets/Blackcastlemf-BG5n.ttf);
+}
+
+@font-face {
+  font-family: iconFont;
+  src: url(../assets/DonjonikonsRegular-VABy.ttf);
+}
+
+:root {
+  --themeRedPop:#e8443c;
+  --themeRedLessPop: #e94445;
+  --themeBlue: #264c5e;
+  --themeRedMuted: #a34c50;
+  --themeOffWhite: #cec2ae;
+  --themeRedDark: #4a2932;
+}
+
+body {
+  background-color: var(--themeOffWhite);
+}
+
+#contentContainer {
+  text-align: center;
+  padding-left: 20%;
+  padding-right: 20%;
+}
+
+.title {
+  font-family: themeFont;
+  color: var(--themeRedPop);
+  font-size: 100px;
+  font-weight: 50;
+}
+
+.divBlocks {
+  display: block;
+  background: white;
+  border-radius: 4px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  border-radius: 20px;
+}
+
+.unit {
+  padding: 30px;
+  background-color: var(--themeRedDark);
+  margin: 5px;
+  border-radius: 10px;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: left;
+  color: var(--themeOffWhite);
+}