paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit 0a20f407d459d79e63f3ea2b0218130ad1fd09b6
parent 2889a20fe8439809ade17950ab07175f040bda0d
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Mon, 15 Apr 2019 02:10:22 -0400

Get functional side of initative page working

Diffstat:
Mpages/projects/dnd/initiative.md | 40++++++++++++++++++++++++++++------------
Apublic/js/initiative.js | 122+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 150 insertions(+), 12 deletions(-)

diff --git a/pages/projects/dnd/initiative.md b/pages/projects/dnd/initiative.md @@ -1,25 +1,41 @@ ## D&D Initative Tracker +<script type="text/javascript" src=/js/initiative.js></script> <noscript>Your browser must support or enable Javascript for this applet to function.</noscript> +While the page is functionally working, much still needs to be done to make +it look good. Especially on smaller screens. + This is a tool designed to help you keep track of who has initiative and in what order. With many characters plus many more NPCs it can become difficult to keep track of exactly who's turn it is next. This should help alleviate those problems. -<div class="initiative-list"> - -<div class="initiative-div"> - <p class="initiative-name-n">Jeff</p> - <p class="initiative-val-n">18</p> - -</div> - -</div> - +<div class="initiative-list" id="initiative-list"> +<div id="add-char"> <form> <input id="char-name" type="text" placeholder="Character Name"></input> <input id="init-val" type="number" placeholder="0"></input> - <input ></input> </form> -<button>Add Character</button> + +<button onClick=addChar() id="add-char">Add Character</button> +<button onClick=sortList()>Sort List</button> +</div> +</div> + +<script> + let charInit = document.getElementById("init-val"); + charInput.addEventListener("keyup", (event) => { + if (event.keyCode === 13) { + event.preventDefault(); + document.getElementById("add-char").click(); + } + }); + let charName = document.getElementById("char-name"); + charName.addEventListener("keyup", (event) => { + if (event.keyCode === 13) { + event.preventDefault(); + document.getElementById("add-char").click(); + } + }); +</script> diff --git a/public/js/initiative.js b/public/js/initiative.js @@ -0,0 +1,122 @@ +// initiative.js +// Created By: Jake Bauer +// 2019-04-15 + +let charArray = []; + +function draw(char, position) { + let list = document.getElementById("initiative-list"); + let div = document.createElement('div'); + div.setAttribute("class","initiative-div"); + div.setAttribute("id", position); + list.insertBefore(div, list.childNodes[list.childNodes.length-3]); + + let charName = document.createElement('p'); + let textNode = document.createTextNode(char.name); + charName.appendChild(textNode); + charName.setAttribute("class", "in-name"); + div.appendChild(charName); + + let charInit = document.createElement('p'); + textNode = document.createTextNode(char.initiative); + charInit.appendChild(textNode); + charInit.setAttribute("class", "in-val"); + div.appendChild(charInit); + + let editBtn = document.createElement('button'); + let pencil = document.createElement('strong'); + textNode = document.createTextNode("✎"); + pencil.setAttribute("class", "green-pencil"); + pencil.appendChild(textNode); + editBtn.setAttribute("class", "in-edit-btn"); + editBtn.setAttribute("onClick", "editChar(this)"); + div.appendChild(editBtn); + editBtn.appendChild(pencil); + textNode = document.createTextNode(" Edit"); + editBtn.appendChild(textNode); + + let removeBtn = document.createElement('button'); + let x = document.createElement('strong'); + textNode = document.createTextNode("X"); + x.setAttribute("class", "red-x"); + x.appendChild(textNode); + removeBtn.setAttribute("class", "in-rem-btn"); + removeBtn.setAttribute("onClick", "removeChar(this)"); + div.appendChild(removeBtn); + removeBtn.appendChild(x); + textNode = document.createTextNode(" Remove"); + removeBtn.appendChild(textNode); +} + +function addChar() { + let newChar = {}; + newChar.name = document.getElementById("char-name").value; + newChar.initiative = Number(document.getElementById("init-val").value); + if (newChar.name == "" || newChar.initiative == null) { + alert("Please fill out both fields before adding a character."); + return; + } + draw(newChar, charArray.length); + charArray.push(newChar); +} + +function compare(a, b) { + if (a.initiative < b.initiative) + return -1; + if (a.initiative > b.initiative) + return 1; + else + return 0; +} + +function sortList() { + charArray.sort(compare); + // Delete all divs of class initiative-div + for (let i = 0; i < charArray.length; i++) { + let element = document.getElementById(i); + element.parentNode.removeChild(element); + } + // Then re-draw them + for (let i = 0; i < charArray.length; i++) { + draw(charArray[i], i); + } +} + +function editChar(elem) { + let newVal = prompt("Enter the new value:", "0"); + if (newVal != null) { + // Edit the value in the array of characters + let charIndex = elem.parentNode.getAttribute("id"); + charArray[charIndex].initiative = Number(newVal); + // Modify the number displayed for that character + let parentNode = elem.parentNode; + for (let i = 0; i < elem.parentNode.childNodes.length; i++) { + if (parentNode.childNodes[i].className == "in-val") { + parentNode.childNodes[i].innerHTML = newVal; + break; + } + } + } + else { + return; + } +} + +function removeChar(elem) { + let charIndex = elem.parentNode.getAttribute("id"); + for (let i = 0; i < charArray.length; i++) { + if (i == charIndex) { + charArray.splice(i,1); + } + } + // Delete all divs of class initiative-div + for (let i = 0; i <= charArray.length; i++) { + let element = document.getElementById(i); + element.parentNode.removeChild(element); + } + // Then re-draw them + for (let i = 0; i < charArray.length; i++) { + console.log(i); + draw(charArray[i], i); + } +}