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:
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;
}
