paritybit.ca

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

commit 1875833141e70366bbd400214462d5acce15c248
parent 1557b7fb3f1c1a02bb0c284f07bd5997a2a1cd26
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Mon, 27 Jan 2020 22:07:09 -0500

Make morrowind character generator project accessible

Diffstat:
Mpages/projects/morrowind-character-roller.md | 48++++++++++++++++--------------------------------
Mpublic/js/generator.js | 22+++++++++++-----------
Mstyle/main.css | 38+++++++++++++++++++++++++-------------
Mstyle/morrowind.css | 89++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------
4 files changed, 134 insertions(+), 63 deletions(-)

diff --git a/pages/projects/morrowind-character-roller.md b/pages/projects/morrowind-character-roller.md @@ -23,38 +23,22 @@ This project was inspired by Reddit user ihategoose's <a href="https://old.reddit.com/r/Morrowind/comments/7l93rm/">Improved Morrowind Random Character Roller</a>. -<div id="mainDiv"> - <table id="fields"> - <tr> - <td class="fieldTitle">Name: </td> - <td> <a href="https://insane0hflex.github.io/TesNameGenerator/">Link - to Generate A Name</a></td> - </tr> - <tr> - <td class="fieldTitle">Faction 1: </td> - <td class="charField" id="factionField1"></td> - </tr> - <tr> - <td class="fieldTitle">Faction 2: </td> - <td class="charField" id="factionField2"></td> - </tr> - <tr> - <td class="fieldTitle">Class: </td> - <td class="charField" id="classField"></td> - </tr> - <tr> - <td class="fieldTitle">Hometown: </td> - <td class="charField" id="hometownField"></td> - </tr> - <tr> - <td class="fieldTitle">Birthsign: </td> - <td class="charField" id="birthsignField"></td> - </tr> - <tr> - <td class="fieldTitle">Race: </td> - <td class="charField" id="raceField"></td> - </tr> - </table> +<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> diff --git a/public/js/generator.js b/public/js/generator.js @@ -21,11 +21,11 @@ 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 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", @@ -45,12 +45,12 @@ function charGen() { "Imperial", "Khajiit", "Nord", "Orc", "Redguard"]; let firstFaction = Math.floor(Math.random() * factions.length); - document.getElementById("factionField1").innerHTML = factions[firstFaction]; - document.getElementById("factionField2").innerHTML = factions[secondFaction(firstFaction, factions)]; - document.getElementById("classField").innerHTML = classes[Math.floor(Math.random()*classes.length)]; - document.getElementById("hometownField").innerHTML = hometowns[Math.floor(Math.random()*hometowns.length)]; - document.getElementById("birthsignField").innerHTML = birthsigns[Math.floor(Math.random()*birthsigns.length)]; - document.getElementById("raceField").innerHTML = races[Math.floor(Math.random()*races.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){ diff --git a/style/main.css b/style/main.css @@ -3,6 +3,7 @@ --fg: #dddddd; --bg-alt: #424242; --fg-alt: #eaeaea; + --input-bg: #5b5b5b; --unvis-link: #4e8dc5; --vis-link: #917ebf; /*#9a828b;*/ --hov-link: #bb7777; @@ -115,6 +116,22 @@ img { max-width: 100%; } +input { + color: var(--fg-alt); + background-color: var(--input-bg); + border: 2px inset var(--shadow); + border-radius: 5px; + padding: 0.1em; + height: 1.5em; +} + +button { + color: var(--fg-alt); + background-color: var(--bg-alt); + border-radius: 5px; + height: 1.8em; +} + .rss-icon > img { width: 15px; height: 15px; @@ -273,59 +290,54 @@ img { nav > a:visited { color: var(--unvis-link-light); } - body { background-color: var(--bg-light); color: var(--fg-light); } - h1, h2, h3, h4, h5 ,h6 { color: var(--fg-alt-light); } - pre { background-color: var(--bg-alt-light); border: 3px var(--border-light) solid; } - code { background-color: var(--bg-alt-light); color: var(--fg-alt-light); } - .inline-notice { background-color: var(--notice-bg-light); } - .inline-warning { background-color: var(--warning-bg-light); } - .inline-danger { background-color: var(--danger-bg-light); } - a { color: var(--unvis-link-light); } - a:visited { color: var(--vis-link-light); } - a:hover { color: var(--hov-link-light); } - + input { + color: var(--fg-alt-light); + background-color: var(--bg-alt-light); + } + button { + color: var(--fg-alt-light); + background-color: var(--bg-alt-light); + } #table-of-contents { background-color: var(--bg-alt-light); border: 3px var(--border-light) solid; } - .back-to-top, .back-to-top:hover, .back-to-top:visited { color: var(--unvis-link-light); } - .back-to-top:hover { text-shadow: 2px 2px var(--vis-link-light); } diff --git a/style/morrowind.css b/style/morrowind.css @@ -1,19 +1,94 @@ +#grid-container { + display: grid; + grid-template-columns: auto auto; + justify-content: center; + align-content: center; +} + +#lfn { + grid-column: 1; + grid-row: 1; + margin: 0; +} + +#lff1 { + grid-column: 1; + grid-row: 2; +} + +#lff2 { + grid-column: 1; + grid-row: 3; +} + +#lcf { + grid-column: 1; + grid-row: 4; +} + +#lhf { + grid-column: 1; + grid-row: 5; +} + +#lbf { + grid-column: 1; + grid-row: 6; +} + +#lrf { + grid-column: 1; + grid-row: 7; +} + #genButton { - margin: 0.5em 0 0 7.7em; - width: 16.5em; + grid-column: 2; + grid-row: 8; + margin-top: 0.5em; +} + +#afn { + grid-column: 2; + grid-row: 1; +} + +#factionField1 { + grid-column: 2; + grid-row: 2; +} + +#factionField2 { + grid-column: 2; + grid-row: 3; +} + +#classField { + grid-column: 2; + grid-row: 4; +} + +#hometownField { + grid-column: 2; + grid-row: 5; +} + +#birthsignField { + grid-column: 2; + grid-row: 6; +} + +#raceField { + grid-column: 2; + grid-row: 7; } .fieldTitle { font-weight: bold; padding: 0 1em 0 0; text-align: right; + margin-top: 0.2em; } .charField { - color: #eee; - background-color: #5b5b5b; - border: 2px inset black; - padding: 0.1em; width: 16em; - height: 1.5em; }