paritybit.ca

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

commit 92bc1e6d6e6bbeac446dd7fe2c7934a2e29bcf80
parent ecaa68355d9e60e7c7618ef8f227946b7c2793e0
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Wed, 16 Feb 2022 00:09:50 -0500

Update JS projects to work with new site stylesheet

Diffstat:
Mcontent/projects/morrowind-character-roller.md | 58+++++++++++++++++++++++++++++++++++-----------------------
Mcontent/projects/roll.md | 101++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------
Mcontent/projects/time-duration-calculator.md | 58++++++++++++++++++++++++++++++++++++----------------------
Dstatic/js/generator.js | 79-------------------------------------------------------------------------------
Mstatic/js/initiative.js | 16++--------------
Mstatic/js/roll.js | 18+++---------------
6 files changed, 137 insertions(+), 193 deletions(-)

diff --git a/content/projects/morrowind-character-roller.md b/content/projects/morrowind-character-roller.md @@ -3,7 +3,7 @@ Summary: Generate a random scenario for role-playing a character in TES III: Mor # [%title] -<script type="text/javascript" src=/js/generator.js></script> +<script type="text/javascript" src=/js/morrowind-character-generator.js></script> <noscript>It seems that the current browser you are using does not support JavaScript or it has been disabled. JavaScript is required for this applet to function.</noscript> @@ -11,29 +11,41 @@ function.</noscript> Here is a small project of mine from when I was first learning JavaScript. It generates a random scenario for playing a character in the much-loved classic RPG _The Elder Scrolls III: Morrowind_ (which you can play on Linux using the -FLOSS engine [OpenMW](https://openmw.org/)). It chooses from a list of -factions, classes, hometowns, birthsigns, and races to generate a unique play -scenario. Also included is a link to an external name generator. +FOSS engine [OpenMW](https://openmw.org/)). It chooses from a list of factions, +classes, hometowns, birthsigns, and races to generate a unique play scenario. It +also generates a random Dunmer name, with support for more races planned. This project was inspired by Reddit user ihategoose's [Improved Morrowind Random Character Roller](https://old.reddit.com/r/Morrowind/comments/7l93rm/). -<div id="grid-container"> - <p class="fieldTitle" id="lfn">Name: </p> - <a href="https://insane0hflex.github.io/TesNameGenerator/" id="afn" >Link - to Generate A Name</a> - <label class="fieldTitle" id="lff1" for="factionField1">Faction 1: </label> - <input class="charField" id="factionField1"> - <label class="fieldTitle" id="lff2" for="factionField2">Faction 2: </label> - <input class="charField" id="factionField2"> - <label class="fieldTitle" id="lcf" for="classField">Class: </label> - <input class="charField" id="classField"> - <label class="fieldTitle" id="lhf" for="hometownField">Hometown: </label> - <input class="charField" id="hometownField"> - <label class="fieldTitle" id="lbf" for="birthsignField">Birthsign: </label> - <input class="charField" id="birthsignField"> - <label class="fieldTitle" id="lrf" for="raceField">Race: </label> - <input class="charField" id="raceField"> - <button id="genButton" type="button" onClick="charGen()">Generate New - Character</button> -</div> +<table> + <tr> + <td><label class="fieldTitle" id="lfn" for="nameField">Name: </label></td> + <td><input class="charField" id="nameField"></td> + </tr> + <tr> + <td><label class="fieldTitle" id="lff1" for="factionField1">Faction 1: </label></td> + <td><input class="charField" id="factionField1"></td> + </tr> + <tr> + <td><label class="fieldTitle" id="lff2" for="factionField2">Faction 2: </label></td> + <td><input class="charField" id="factionField2"></td> + </tr> + <tr> + <td><label class="fieldTitle" id="lcf" for="classField">Class: </label></td> + <td><input class="charField" id="classField"></td> + </tr> + <tr> + <td><label class="fieldTitle" id="lhf" for="hometownField">Hometown: </label></td> + <td><input class="charField" id="hometownField"></td> + </tr> + <tr> + <td><label class="fieldTitle" id="lbf" for="birthsignField">Birthsign: </label></td> + <td><input class="charField" id="birthsignField"></td> + </tr> + <tr> + <td><label class="fieldTitle" id="lrf" for="raceField">Race: </label></td> + <td><input class="charField" id="raceField"></td> + </tr> +</table> +<button id="genButton" type="button" onClick="charGen()">Generate New Character</button> diff --git a/content/projects/roll.md b/content/projects/roll.md @@ -17,49 +17,70 @@ physical dice? Don't have any physical dice? Well this is the roller for you!</p with a plus or minus sign followed by another number. This text field will accept dice of any value.</p> -<div id="grid-container"> - <h3 id="die-header">Die</h3> - <h3 id="num-header">Num</h3> - <h3 id="mod-header">Mod</h3> - <h3 id="res-header">Result</h3> - <button id="d4" onClick="roll(this)" aria-label="Roll d4">d4</button> - <input type="number" min=1 value=1 id="num4" aria-label="Number of d4 dice to roll"> - <input type="number" value=0 id="mod4" aria-label="d4 plus/minus modifier"> - <p class="field" id="d4result" aria-label="d4 result">0</p> - <button id="d6" onClick="roll(this)" aria-label="Roll d6">d6</button> - <input type="number" min=1 value=1 id="num6" aria-label="Number of d6 dice to roll"> - <input type="number" value=0 id="mod6" aria-label="d6 plus/minus modifier"> - <p class="field" id="d6result" aria-label="d6 result">0</p> - <button id="d8" onClick="roll(this)" aria-label="Roll d8">d8</button> - <input type="number" min=1 value=1 id="num8" aria-label="Number of d8 dice to roll"> - <input type="number" value=0 id="mod8" aria-label="d8 plus/minus modifier"> - <p class="field" id="d8result" aria-label="d8 result">0</p> - <button id="d10" onClick="roll(this)" aria-label="Roll d10">d10</button> - <input type="number" min=1 value=1 id="num10" aria-label="Number of d10 dice to roll"> - <input type="number" value=0 id="mod10" aria-label="d10 plus/minus modifier"> - <p class="field" id="d10result" aria-label="d10 result">0</p> - <button id="d12" onClick="roll(this)" aria-label="Roll d12">d12</button> - <input type="number" min=1 value=1 id="num12" aria-label="Number of d12 dice to roll"> - <input type="number" value=0 id="mod12" aria-label="d12 plus/minus modifier"> - <p class="field" id="d12result" aria-label="d12 result">0</p> - <button id="d20" onClick="roll(this)" aria-label="Roll d20">d20</button> - <input type="number" min=1 value=1 id="num20" aria-label="Number of d20 dice to roll"> - <input type="number" value=0 id="mod20" aria-label="d20 plus/minus modifier"> - <p class="field" id="d20result" aria-label="d20 result">0</p> - <button id="d100" onClick="roll(this)" aria-label="Roll d100">d100</button> - <input type="number" min=1 value=1 id="num100" aria-label="Number of d100 dice to roll"> - <input type="number" value=0 id="mod100" aria-label="d100 plus/minus modifier"> - <p class="field" id="d100result" aria-label="d100 result">0</p> - <div id="history"> - <textarea id="history-text" rows=16 cols=34 aria-label="Roll history">-------&#13;&#10;History</textarea> - <button id="clear-history" onClick="clear_history()">Clear History</button> - </div> -</div> +<button id="clear-history" onClick="clear_history()">Clear</button> +<table> + <thead> + <tr> + <th>Die</th> + <th>Number to Roll</th> + <th>Modifier</th> + <th>Result</th> + </tr> + </thead> + <tbody> + <tr> + <td><button id="d4" onClick="roll(this)" aria-label="Roll d4">d4</button></td> + <td><input type="number" min=1 value=1 id="num4" aria-label="Number of d4 dice to roll"></td> + <td><input type="number" value=0 id="mod4" aria-label="d4 plus/minus modifier"></td> + <td><p class="field" id="d4result" aria-label="d4 result">0</p></td> + </tr> + <tr> + <td><button id="d6" onClick="roll(this)" aria-label="Roll d6">d6</button></td> + <td><input type="number" min=1 value=1 id="num6" aria-label="Number of d6 dice to roll"></td> + <td><input type="number" value=0 id="mod6" aria-label="d6 plus/minus modifier"></td> + <td><p class="field" id="d6result" aria-label="d6 result">0</p></td> + </tr> + <tr> + <td><button id="d8" onClick="roll(this)" aria-label="Roll d8">d8</button></td> + <td><input type="number" min=1 value=1 id="num8" aria-label="Number of d8 dice to roll"></td> + <td><input type="number" value=0 id="mod8" aria-label="d8 plus/minus modifier"></td> + <td><p class="field" id="d8result" aria-label="d8 result">0</p></td> + </tr> + <tr> + <td><button id="d10" onClick="roll(this)" aria-label="Roll d10">d10</button></td> + <td><input type="number" min=1 value=1 id="num10" aria-label="Number of d10 dice to roll"></td> + <td><input type="number" value=0 id="mod10" aria-label="d10 plus/minus modifier"></td> + <td><p class="field" id="d10result" aria-label="d10 result">0</p></td> + </tr> + <tr> + <td><button id="d12" onClick="roll(this)" aria-label="Roll d12">d12</button></td> + <td><input type="number" min=1 value=1 id="num12" aria-label="Number of d12 dice to roll"></td> + <td><input type="number" value=0 id="mod12" aria-label="d12 plus/minus modifier"></td> + <td><p class="field" id="d12result" aria-label="d12 result">0</p></td> + </tr> + <tr> + <td><button id="d20" onClick="roll(this)" aria-label="Roll d20">d20</button></td> + <td><input type="number" min=1 value=1 id="num20" aria-label="Number of d20 dice to roll"></td> + <td><input type="number" value=0 id="mod20" aria-label="d20 plus/minus modifier"></td> + <td><p class="field" id="d20result" aria-label="d20 result">0</p></td> + </tr> + <tr> + <td><button id="d100" onClick="roll(this)" aria-label="Roll d100">d100</button></td> + <td><input type="number" min=1 value=1 id="num100" aria-label="Number of d100 dice to roll"></td> + <td><input type="number" value=0 id="mod100" aria-label="d100 plus/minus modifier"></td> + <td><p class="field" id="d100result" aria-label="d100 result">0</p></td> + </tr> + </tbody> +</table> + <div id="stringRoll" onload=registerShortcut()> - or type here (modifier optional): <input type="text" id="inputString" placeholder="1d20+0" aria-label="Custom dice value in the form <number_of_dice>d<dice_value>+/-<modifier>"> - <button id="textRollSubmit" onClick="stringRoll()">Roll</button> + or type here (modifier optional): <input type="text" id="inputString" placeholder="1d20+0" aria-label="Custom dice value in the form <number_of_dice>d<dice_value>+/-<modifier>"> + <button id="textRollSubmit" onClick="stringRoll()">Roll</button> </div> +<h2>History</h2> +<p id="history-text"></p> + <script> let rollInput = document.getElementById("inputString"); rollInput.addEventListener("keyup", (event) => { diff --git a/content/projects/time-duration-calculator.md b/content/projects/time-duration-calculator.md @@ -13,27 +13,41 @@ the 24 hour clock (i.e. no AM/PM). This calculator supports durations which cross midnight. <form action="javascript:calculate();"> - <label for="start-time-h">Hour</label> - <input id="start-time-h" type="number" min="0" max="24" placeholder="0-24" autofocus> - <label for="start-time-h">Minute</label> - <input id="start-time-m" type="number" min="0" max="60" placeholder="0-60"> - <label for="start-time-h">Second</label> - <input id="start-time-s" type="number" min="0" max="60" placeholder="0-60"> to - <br/> - <label for="end-time-h">Hour</label> - <input id="end-time-h" type="number" min="0" max="24" placeholder="0-60"> - <label for="end-time-h">Minute</label> - <input id="end-time-m" type="number" min="0" max="60" placeholder="0-60"> - <label for="end-time-h">Second</label> - <input id="end-time-s" type="number" min="0" max="60" placeholder="0-60"> - <br/> - <button id="calc-btn" type="submit">Calculate</button> - <button id="clear-btn" type="button" onClick="clear_inputs()">Reset</button> + <label for="start-time-h">Hour</label> + <input id="start-time-h" type="number" min="0" max="23" placeholder="0-23" autofocus> + <label for="start-time-h">Minute</label> + <input id="start-time-m" type="number" min="0" max="59" placeholder="0-59"> + <label for="start-time-h">Second</label> + <input id="start-time-s" type="number" min="0" max="59" placeholder="0-59"> to + <br/> + <label for="end-time-h">Hour</label> + <input id="end-time-h" type="number" min="0" max="23" placeholder="0-23"> + <label for="end-time-h">Minute</label> + <input id="end-time-m" type="number" min="0" max="59" placeholder="0-59"> + <label for="end-time-h">Second</label> + <input id="end-time-s" type="number" min="0" max="59" placeholder="0-59"> + <br/> + <button id="calc-btn" type="submit">Calculate</button> + <button id="clear-btn" type="button" onClick="clear_inputs()">Reset</button><br> </form> -<div id="grid-container"> - <p id="duration-label"><b>Duration:</b></p> <p id="result-field">00h:00m:00s</p> - <p id="hours-label"><b>Hours:</b></p> <p id="result-field-hours">0.0000</p> - <p id="minutes-label"><b>Minutes:</b></p> <p id="result-field-minutes">0.0000</p> - <p id="seconds-label"><b>Seconds:</b></p> <p id="result-field-seconds">0</p> -</div> +<table> + <tbody> + <tr> + <td><b>Duration:</b></td> + <td id="result-field">00h:00m:00s</td> + </tr> + <tr> + <td id="hours-label"><b>Hours:</b></td> + <td id="result-field-hours">0.0000</td> + </tr> + <tr> + <td id="minutes-label"><b>Minutes:</b></td> + <td id="result-field-minutes">0.0000</td> + </tr> + <tr> + <td id="seconds-label"><b>Seconds:</b></td> + <td id="result-field-seconds">0</td> + </tr> + </tbody> +</table> diff --git a/static/js/generator.js b/static/js/generator.js @@ -1,79 +0,0 @@ -/* -* generator.js -* Contains backend code for generation of game parameters -* -* This file is part of MorrowindGameGen -* Copyright (C) 2019 Jake Bauer -* -* This program is free software: you can redistribute it and/or modify -* it under the terms of the GNU General Public License as published by -* the Free Software Foundation, either version 3 of the License, or -* (at your option) any later version. -* -* This program is distributed in the hope that it will be useful, -* but WITHOUT ANY WARRANTY; without even the implied warranty of -* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -* GNU General Public License for more details. -* -* You should have received a copy of the GNU General Public License -* along with this program. If not, see <https://www.gnu.org/licenses/>. -*/ - -function charGen() { - - const factions = ["Great House Redoran", "Great House Hlaalu", "Great House Telvanni", - "Vampire Clan Aundae", "Vampire Clan Berne", "Vampire Clan Quarra", - "Tribunal Temple", "Imperial Cult", "Sixth House or a Daedra Cult", - "Fighter's Guild", "Mage's Guild", "Thieves Guild", "Blades", - "Morag Tong", "Imperial Legion", "East Empire Company"]; - - const classes = ["Acrobat", "Agent", "Archer", "Assassin", "Barbarian", - "Bard", "Battlemage", "Crusader", "Healer", "Knight", "Mage", "Monk", - "Nightblade", "Pilgrim", "Rogue", "Scout", "Sorcerer", "Spellsword", - "Thief", "Warrior", "Witchhunter"]; - - const hometowns = ["Ald Velothi", "Ald'ruhn", "Balmora", "Caldera", - "Dagon Fel", "Ebonheart", "Gnisis", "Hla Oad", "Khuul", "Maar Gan", - "Molag Mar", "Mournhold", "Pelagiad", "Sadrith Mora", "Seyda Neen", - "Skaal Village", "Suran", "Tel Aruhn", "Tel Branora", "Tel Fyr", - "Tel Mora", "Vivec", "Vos"]; - - const birthsigns = ["Warrior", "Mage", "Thief", "Serpent", "Lady", "Steed", - "Lord", "Apprentice", "Atronach", "Ritual", "Lover", "Shadow", "Tower"]; - - const races = ["Altmer", "Argonian", "Bosmer", "Breton", "Dunmer", - "Imperial", "Khajiit", "Nord", "Orc", "Redguard"]; - - let firstFaction = Math.floor(Math.random() * factions.length); - document.getElementById("factionField1").value = factions[firstFaction]; - document.getElementById("factionField2").value = factions[secondFaction(firstFaction, factions)]; - document.getElementById("classField").value = classes[Math.floor(Math.random()*classes.length)]; - document.getElementById("hometownField").value = hometowns[Math.floor(Math.random()*hometowns.length)]; - document.getElementById("birthsignField").value = birthsigns[Math.floor(Math.random()*birthsigns.length)]; - document.getElementById("raceField").value = races[Math.floor(Math.random()*races.length)]; -} - -function secondFaction(firstFaction, factions){ - let result = firstFaction; - // If the player has already been assigned a great house, choose a non-great - // house faction instead (player cannot be a member of more than one). - if (firstFaction <= 2) - while (result <= 2) - result = Math.floor(Math.random()*factions.length); - // If player is a member of one of the vampire clans, choose another faction - // that isn't a vampire clan (player cannot be a member of more than one). - else if (firstFaction >= 3 && firstFaction <= 5) - while (result >= 3 && result <= 5) - result = Math.floor(Math.random()*factions.length); - // If a player is a member of one of the cults, choose another faction that - // isn't another cult (otherwise it wouldn't make sense roleplay-wise). - else if (firstFaction >= 6 && firstFaction <= 8) - while (result >= 6 && result <= 8) - result = Math.floor(Math.random()*factions.length); - // If none of the above conditions are true, choose any faction other than - // the one already chosen. - else - while (result === firstFaction) - result = Math.floor(Math.random()*factions.length); - return (result); -} diff --git a/static/js/initiative.js b/static/js/initiative.js @@ -1,18 +1,6 @@ /*initiative.js -* Copyright (C) 2019 Jake Bauer -* -* This program is free software: you can redistribute it and/or modify -* it under the terms of the GNU General Public License as published by -* the Free Software Foundation, either version 3 of the License, or -* (at your option) any later version. -* -* This program is distributed in the hope that it will be useful, -* but WITHOUT ANY WARRANTY; without even the implied warranty of -* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -* GNU General Public License for more details. -* -* You should have received a copy of the GNU General Public License -* along with this program. If not, see <https://www.gnu.org/licenses/>. +* Copyright (C) 2019,2022 Jake Bauer +* Licensed under the ISC License. */ // Global variable keeping track of all characters added to the list. diff --git a/static/js/roll.js b/static/js/roll.js @@ -1,18 +1,6 @@ /*roll.js -* Copyright (C) 2019 Jake Bauer -* -* This program is free software: you can redistribute it and/or modify -* it under the terms of the GNU General Public License as published by -* the Free Software Foundation, either version 3 of the License, or -* (at your option) any later version. -* -* This program is distributed in the hope that it will be useful, -* but WITHOUT ANY WARRANTY; without even the implied warranty of -* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -* GNU General Public License for more details. -* -* You should have received a copy of the GNU General Public License -* along with this program. If not, see <https://www.gnu.org/licenses/>. +* Copyright (C) 2019,2022 Jake Bauer +* Licensed under the ISC License. */ /* stringRoll() @@ -143,5 +131,5 @@ function clear_history() { } } let hist = document.getElementById("history-text"); - hist.innerHTML = "-------&#13;&#10;History"; + hist.innerHTML = ""; }