From 1ab3b36f402f712ae7c789c073f04f2f13a7d730 Mon Sep 17 00:00:00 2001 From: Leopold Date: Sat, 9 Nov 2024 22:18:08 +0100 Subject: [PATCH] Added the initial Website --- border.png | Bin 0 -> 315 bytes index.html | 69 +++++++++++++++++++++++++++ scripts.js | 106 +++++++++++++++++++++++++++++++++++++++++ styles.css | 136 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 311 insertions(+) create mode 100644 border.png create mode 100644 index.html create mode 100644 scripts.js create mode 100644 styles.css diff --git a/border.png b/border.png new file mode 100644 index 0000000000000000000000000000000000000000..b0fdcbb6698f8c52c5488918f87985c84d23338c GIT binary patch literal 315 zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEjKx9jP7LeL$-D$|zIwVihD5Z! zopF%2$w9#Nzm)a{`KS%dkIq`NuX=Fc?(Buk(F^3G4_x-Y(qY`~ZDjw+Px{a~etl;# zHO3he+-L2a7k&I_Uhg8+o5h9l`tkWTA?e`bet@E*G_qSP7m#1Gi^h!2+ z{`Tpe^BhkHT;}Cu__ggESJtk^)6?a)eL5uVqftJo;^Zmr{13vyVOHVOpLj~CDEfFw z@g(+n;9|9z@2Cy@@AWO`S;-m(o&T$M-#fO(Mz;CLtf^me_r5s0tWfI9vzL-vHl%6a t`?)~ewz= + + + + + + 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; +}