diff --git a/border.png b/border.png new file mode 100644 index 0000000..b0fdcbb Binary files /dev/null and b/border.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..db3dde3 --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ + + + + + + + MHWB Character Sheet + + + + +
+

Character Sheet

+ +
+ + + + + + + + + + + +
+ +
+

Materials

+ +
+ + +
+
+ +
+

Monster Parts

+ +
+ + +
+
+ +
+

Inventory

+ +
+ + +
+
+ + + + + + + + +

+
+ + + + + diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..f2dd746 --- /dev/null +++ b/scripts.js @@ -0,0 +1,106 @@ +// Add item to inventory list with delete button +function addItem(outList, newItem) { + const itemInput = document.getElementById(newItem); + const itemValue = itemInput.value.trim(); + if (itemValue) { + const listItem = document.createElement("li"); + + // Add item text + listItem.textContent = itemValue; + + // Add Counter + const count = document.createElement("input"); + count.setAttribute('type', 'number'); + count.setAttribute('value', 1); + // Append Counter to list item + listItem.appendChild(count); + + // Create delete button + const deleteButton = document.createElement("button"); + deleteButton.textContent = "Remove"; + deleteButton.classList.add("delete-button"); + + // Attach event to delete button + deleteButton.onclick = function() { + listItem.remove(); + }; + + // Append delete button to list item + listItem.appendChild(deleteButton); + + // Append list item to inventory list + document.getElementById(outList).appendChild(listItem); + + // Clear input field + itemInput.value = ""; + } +} + +// Save character data with inventory items +function saveCharacter() { + const characterData = { + playerName: document.getElementById("PlayerName").value, + hunterName: document.getElementById("HunterName").value, + campaignName: document.getElementById("CampaignName").value, + palicoName: document.getElementById("PalicoName").value, + materials: Array.from(document.getElementById("MaterialList").children).map(function(item) { + return { name: item.firstChild.textContent, count: item.lastChild.value} + }), + parts: Array.from(document.getElementById("PartList").children).map(function(item) { + return { name: item.firstChild.textContent, count: item.lastChild.value} + }), + items: Array.from(document.getElementById("inventoryList").children).map(function(item) { + return { name: item.firstChild.textContent, count: item.lastChild.value} + }), + potions: document.getElementById("potions").value, + day: document.getElementById("CampaignDay").value + }; + + localStorage.setItem("characterData", JSON.stringify(characterData)); + document.getElementById("statusMessage").textContent = "Character saved!"; +} + +// Load character data and populate inventory with remove buttons +window.onload = function() { + const savedData = localStorage.getItem("characterData"); + if (savedData) { + const characterData = JSON.parse(savedData); + document.getElementById("PlayerName").value = characterData.playerName; + document.getElementById("HunterName").value = characterData.hunterName; + document.getElementById("CampaignName").value = characterData.campaignName; + document.getElementById("PalicoName").value = characterData.palicoName; + document.getElementById("MaterialList").value = characterData.materials; + document.getElementById("inventoryList").value = characterData.parts; + document.getElementById("inventoryList").value = characterData.items; + + characterData.materials.forEach(item => {printInventorys(item,"MaterialList","newMat")}); + characterData.parts.forEach(item => {printInventorys(item,"PartList","newPart")}); + characterData.items.forEach(item => {printInventorys(item,"inventoryList","newItem")}); + + document.getElementById("potions").value = characterData.potions; + document.getElementById("CampaignDays").value = characterData.day; + } +}; + +function printInventorys(item,list) { + const listItem = document.createElement("li"); + listItem.textContent = item.name; + + // Create and append count + const count = document.createElement("input"); + count.setAttribute('type', 'number'); + count.setAttribute('value', item.count); + // Append Counter to list item + listItem.appendChild(count); + + // Create and append delete button + const deleteButton = document.createElement("button"); + deleteButton.textContent = "Remove"; + deleteButton.classList.add("delete-button"); + deleteButton.onclick = function() { + listItem.remove(); + }; + listItem.appendChild(deleteButton); + + document.getElementById(list).appendChild(listItem); +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3e75c99 --- /dev/null +++ b/styles.css @@ -0,0 +1,136 @@ +/* General Reset and Basic Styles */ +* { + box-sizing: border-box; + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; +} + +body { + background: #1a1a1a; + color: #f0e6d2; + font-family: 'Trebuchet MS', sans-serif; +} + +/* Container Styling */ +.container { + max-width: 700px; + margin: 20px auto; + padding: 20px; + image-rendering: crisp-edges; + background: #3a3a3a; + border-image: url('border.png'); + border-image-slice: 12; + border-image-outset: 6px; + border-image-repeat: repeat; + border-width: 12px; + border-style: solid; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.8); +} + +/* Titles and Headers */ +h1 { + color: #d4af37; + font-size: 2em; + text-align: center; + margin-bottom: 20px; + border-bottom: 2px solid #7f5f35; + padding-bottom: 10px; +} + +h2 { + color: #c89b3c; + font-size: 1.5em; + border-bottom: 1px solid #7f5f35; + padding-bottom: 5px; + margin-bottom: 10px; +} + +/* Labels and Inputs */ +label { + display: block; + font-weight: bold; + margin-top: 15px; + color: #e0d6ba; +} + +input[type="text"], input[type="number"], textarea { + width: 100%; + padding: 8px; + margin-top: 5px; + background-color: #2a2a2a; + border: 2px solid #7f5f35; + border-radius: 5px; + color: #f0e6d2; +} + +/* Button Styles */ +button { + margin-top: 5px; + padding: 10px 20px; + background-color: #c89b3c; + color: #1a1a1a; + font-weight: bold; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #a07929; +} + +.delete-button { + padding: 5px 10px; + background-color: #e74c3c; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + margin-left: 10px; +} + +.delete-button:hover { + background-color: #c0392b; +} + +/* List Styles */ +ul { + list-style-type: none; + padding: 0; + margin-top: 10px; + background: #2f2f2f; + border-radius: 5px; + padding: 10px; + border: 2px solid #7f5f35; +} + +li { + padding: 8px; + border-bottom: 1px solid #444; + display: flex; + align-items: center; + justify-content: space-between; +} + +li:last-child { + border-bottom: none; +} + +/* Inventory Counter Style */ +li input[type="number"] { + width: 60px; + text-align: center; + background-color: #1a1a1a; + border: 1px solid #7f5f35; + color: #f0e6d2; +} + +/* Status Message */ +#statusMessage { + color: #c89b3c; + font-weight: bold; + margin-top: 15px; + text-align: center; +}