Casey DeLorme 4 lat temu
commit
41e8464f60
4 zmienionych plików z 483 dodań i 0 usunięć
  1. 114 0
      index.html
  2. 193 0
      main.css
  3. 103 0
      main.js
  4. 73 0
      readme.md

+ 114 - 0
index.html

@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="Legend of Mana: Level-Up Calculator">
+	<title>Legend of Mana: Level-Up Calculator</title>
+	<link rel="icon" href="data:;base64,iVBORw0KGgo=">
+	<link rel="stylesheet" type="text/css" href="main.css">
+</head>
+<body>
+	<header>
+		<h1>Legend of Mana: Level-Up Calculator</h1>
+		<p>Enter numbers in the text boxes below and the data here will be updated!</p>
+		<form method="POST" action="#" id="auto">
+			<fieldset class='outputs'>
+				<legend>Character</legend>
+				<label>
+					<span>Level: </span>
+					<input type="text" placeholder="0" name="Level" disabled />
+				</label>
+				<label>
+					<span>Power (Pw): </span>
+					<input type="text" placeholder="0" name="Pw" disabled />
+				</label>
+				<label>
+					<span>Skill (Sk): </span>
+					<input type="text" placeholder="0" name="Sk" disabled />
+				</label>
+				<label>
+					<span>Defense (Df): </span>
+					<input type="text" placeholder="0" name="Df" disabled />
+				</label>
+				<label>
+					<span>Magic (Mg): </span>
+					<input type="text" placeholder="0" name="Mg" disabled />
+				</label>
+				<label>
+					<span>HP (Hp): </span>
+					<input type="text" placeholder="0" name="Hp" disabled />
+				</label>
+				<label>
+					<span>Spirit (Sp): </span>
+					<input type="text" placeholder="0" name="Sp" disabled />
+				</label>
+				<label>
+					<span>Charm (Ch): </span>
+					<input type="text" placeholder="0" name="Ch" disabled /></label>
+				<label for="Decimals">
+					<span>Decimals: </span>
+					<input type="checkbox" name="Decimals" id="Decimals" checked="checked" />
+				</label>
+			</fieldset>
+		</form>
+	</header>
+	<main>
+		<form method="POST" action="#" id="entry">
+			<fieldset>
+				<legend>Weapons</legend>
+				<label for="Swords">
+					<span>Swords: </span>
+					<input type="number" value="0" placeholder="0" name="Swords" id="Swords" />
+				</label>
+				<label for="2H Swords">
+					<span>2H Swords: </span>
+					<input type="number" value="0" placeholder="0" name="2H Swords" id="2H Swords" />
+				</label>
+				<label for="Knives">
+					<span>Knives: </span>
+					<input type="number" value="0" placeholder="0" name="Knives" id="Knives" />
+				</label>
+				<label for="Axes">
+					<span>Axes: </span>
+					<input type="number" value="0" placeholder="0" name="Axes" id="Axes" />
+				</label>
+				<label for="2H Axes">
+					<span>2H Axes: </span>
+					<input type="number" value="0" placeholder="0" name="2H Axes" id="2H Axes" />
+				</label>
+				<label for="Staves">
+					<span>Staves: </span>
+					<input type="number" value="0" placeholder="0" name="Staves" id="Staves" />
+				</label>
+				<label for="Bows">
+					<span>Bows: </span>
+					<input type="number" value="0" placeholder="0" name="Bows" id="Bows" />
+				</label>
+				<label for="Spears">
+					<span>Spears: </span>
+					<input type="number" value="0" placeholder="0" name="Spears" id="Spears" />
+				</label>
+				<label for="Flails">
+					<span>Flails: </span>
+					<input type="number" value="0" placeholder="0" name="Flails" id="Flails" />
+				</label>
+				<label for="Hammers">
+					<span>Hammers: </span>
+					<input type="number" value="0" placeholder="0" name="Hammers" id="Hammers" />
+				</label>
+				<label for="Gloves">
+					<span>Gloves: </span>
+					<input type="number" value="0" placeholder="0" name="Gloves" id="Gloves" />
+				</label>
+			</fieldset>
+		</form>
+	</main>
+	<footer>
+	<div class="scripts">
+		<script type="text/javascript" src="main.js" async></script>
+	</div>
+	</footer>
+</body>
+</html>

+ 193 - 0
main.css

@@ -0,0 +1,193 @@
+
+/**
+ * css reset
+ * html5 display-role reset
+ * and default styles
+ */
+html, body, div, span, object, h1, h2, h3, h4, h5,
+h6, p, blockquote, pre, a, code, em, img, strong,
+dl, ol, ul, li, embed, footer, header, menu, nav,
+time, audio, video, progress {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline;
+}
+footer, header, menu, main {
+    display: block;
+}
+audio, canvas, progress, video {
+    display: inline-block;
+    vertical-align: baseline;
+}
+html {
+    font-family: 'droidsans', helvetica;
+    font-size: 22px;
+}
+body {
+    line-height: 1.4;
+    color: #333;
+    background-color: #fff;
+}
+h1 {
+    font-size: 1.75em;
+}
+h2 {
+    font-size: 1.5em;
+}
+h3 {
+    font-size: 1.25em;
+}
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'aller', sans-serif, georgia;
+    margin-top: 20px;
+    margin-bottom: 12px;
+    letter-spacing: 2px;
+}
+h3, h4 {
+    margin-top: 15px;
+    margin-bottom: 10px;
+}
+h5, h6 {
+    margin-top: 10px;
+}
+h1, h2 {
+    font-weight: bolder;
+}
+h3, h4, strong, b {
+    font-weight: bold;
+}
+em {
+    font-style: italic;
+    font-weight: 200;
+}
+blockquote {
+    font-family: "aller", sans-serif, helvetica;
+    quotes: none;
+    padding: 10px 20px;
+    margin: 0 0 20px;
+    border-left: 5px solid #eee;
+    font-style: italic;
+}
+hr {
+    height: 0;
+    margin: 20px 0;
+    border: 0;
+    border-top: 1px solid #eee;
+}
+pre {
+    font-family:  "Bitstream Vera Sans Mono", monospace;
+}
+code {
+    padding: 2px 4px;
+    font-size: 0.9em;
+    padding: 0.05em 4px;
+    border-radius: 4px;
+    background: #000;
+    overflow-x: auto;
+    color: #f8f8f8;
+}
+pre code {
+    display: block;
+    margin: 10px 0;
+    padding: 0.5em;
+}
+ul {
+    list-style: disc;
+}
+ol {
+    list-style: decimal;
+}
+li {
+    margin-left: 45px;
+    margin-bottom: 5px;
+    line-height: 1.25;
+}
+ul, ol, dl, p {
+    margin-bottom: 10px;
+}
+a, a:visited {
+    color: #337ab7;
+}
+a:hover, a:active {
+    background-color: transparent;
+    text-decoration: underline;
+    outline: 0;
+    color: inherit;
+}
+a:hover, a:focus {
+    text-decoration: underline;
+    color: #23527c;
+}
+a:focus {
+    outline: thin dotted;
+    text-decoration: underline;
+    outline-offset: -2px;
+}
+h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited,
+h4 a, h4 a:visited, strong a, strong a:visited {
+    color: #444;
+    text-decoration: underline;
+}
+img {
+    display: block;
+    border: none;
+    max-width: 100%;
+    height: auto;
+    vertical-align: middle;
+}
+
+/* containers */
+header, main, footer {
+    max-width: 980px;
+    margin: 20px auto;
+    padding: 0 2%;
+}
+
+/* form styles */
+fieldset {
+    width: 100%;
+    margin: 0px;
+    padding: 5px 12px;
+}
+label {
+    width: 32%;
+    display: inline-block;
+    margin: 5px 0px;
+}
+input[type=text], input[type=number] {
+    border-radius: 5px;
+    padding: 5px 3px;
+}
+label>span {
+    line-height: 28px;
+}
+label>span, label>input {
+    font: 14px 'droidsans', helvetica;
+    width: 46%;
+    display:  inline-block;
+}
+
+/* footer styles */
+footer {
+    text-align: center;
+}
+
+/* responsive font sizes and link styles */
+@media only screen and (min-width: 981px) {
+    html {
+        font-size: 19px;
+    }
+}
+@media only screen and (min-width: 1200px) {
+    html {
+        font-size: 16px;
+    }
+    a, a:hover, a:active, a:visited, h1 a, h2 a, h3 a, h4 a, strong a {
+        text-decoration: none;
+    }
+    header h1 {
+        font-size: 3em;
+    }
+}

+ 103 - 0
main.js

@@ -0,0 +1,103 @@
+(() => {
+	const level_cap = 99;
+
+	// @todo: verify that initial stats are indeed 1 across the board
+	const initial_stats = {
+		"Level": 1,
+		"Pw": 1,
+		"Sk": 1,
+		"Df": 1,
+		"Mg": 1,
+		"Hp": 1,
+		"Sp": 1,
+		"Ch": 1,
+	};
+
+	const weapon_tables = {
+		"Swords": {"Pw": 1, "Sk": 1, "Df": 1, "Mg": .75, "Hp": .75, "Sp": .75, "Ch": .75},
+		"2H Swords": {"Pw": 1.25, "Sk": 1, "Df": .5, "Mg": .75, "Hp": .75, "Sp": .5, "Ch": .75},
+		"Knives": {"Pw": .75, "Sk": 1.25, "Df": .75, "Mg": .75, "Hp": .5, "Sp": 1, "Ch": 1},
+		"Axes": {"Pw": 1, "Sk": .75, "Df": 1, "Mg": .75, "Hp": .75, "Sp": 1, "Ch": .5},
+		"2H Axes": {"Pw": 1.25, "Sk": 1.25, "Df": .75, "Mg": .75, "Hp": .5, "Sp": .75, "Ch": .5},
+		"Staves": {"Pw": .5, "Sk": .75, "Df": .75, "Mg": 1.25, "Hp": .5, "Sp": .75, "Ch": 1.25},
+		"Bows": {"Pw": .5, "Sk": 1.75, "Df": .75, "Mg": .75, "Hp": .5, "Sp": .75, "Ch": 1},
+		"Spears": {"Pw": .75, "Sk": 1.25, "Df": 1, "Mg": .75, "Hp": .5, "Sp": .75, "Ch": 1},
+		"Flails": {"Pw": .75, "Sk": 1.25, "Df": .5, "Mg": .75, "Hp": .5, "Sp": .75, "Ch": 1.25},
+		"Hammers": {"Pw": 1.75, "Sk": .75, "Df": .5, "Mg": .75, "Hp": .75, "Sp": .75, "Ch": .75},
+		"Gloves": {"Pw": 1.25, "Sk": .75, "Df": .75, "Mg": .5, "Hp": .75, "Sp": .75, "Ch": .75},
+	};
+
+	const decimals = document.forms[0]["Decimals"];
+
+	const outputs = {
+		"Level":  document.forms[0]["Level"],
+		"Pw": document.forms[0]["Pw"],
+		"Sk": document.forms[0]["Sk"],
+		"Df": document.forms[0]["Df"],
+		"Mg": document.forms[0]["Mg"],
+		"Hp": document.forms[0]["Hp"],
+		"Sp": document.forms[0]["Sp"],
+		"Ch": document.forms[0]["Ch"],
+	};
+
+	const inputs = {
+		"Swords": document.forms[1]["Swords"],
+		"2H Swords": document.forms[1]["2H Swords"],
+		"Knives": document.forms[1]["Knives"],
+		"Axes": document.forms[1]["Axes"],
+		"2H Axes": document.forms[1]["2H Axes"],
+		"Staves": document.forms[1]["Staves"],
+		"Bows": document.forms[1]["Bows"],
+		"Spears": document.forms[1]["Spears"],
+		"Flails": document.forms[1]["Flails"],
+		"Hammers": document.forms[1]["Hammers"],
+		"Gloves": document.forms[1]["Gloves"],
+	};
+
+	const preflight_check = function() {
+		let level = 0;
+		for (const key in inputs) {
+			if (inputs[key].value == "") {
+				inputs[key].value = 0;
+			}
+			if (!Number.isInteger(inputs[key].value)) {
+				inputs[key].value = Math.trunc(inputs[key].value);
+			}
+			level += Number.parseInt(inputs[key].value);
+		}
+		if (level > (level_cap - 1)) {
+			document.activeElement.value = Number.parseInt(document.activeElement.value) + ((level_cap - 1) - level);
+		}
+	};
+
+	const recalculating = function() {
+		preflight_check();
+
+		for (const key in outputs) {
+			outputs[key].value = initial_stats[key];
+		}
+
+		for (const key in inputs) {
+			const tally = Number.parseInt(inputs[key].value);
+			if (tally > 0) {
+				outputs["Level"].value = Number(outputs["Level"].value) + tally;
+				for (const attribute in weapon_tables[key]) {
+					outputs[attribute].value = Number(outputs[attribute].value) + (tally * weapon_tables[key][attribute]);
+				}
+			}
+		}
+
+		if (decimals.checked) {
+			for (const key in outputs) {
+				outputs[key].value = Math.trunc(outputs[key].value);
+			}
+		}
+	};
+
+	for (const key in inputs) {
+		inputs[key].oninput = recalculating;
+	}
+	decimals.onchange = recalculating;
+
+	recalculating();
+})();

+ 73 - 0
readme.md

@@ -0,0 +1,73 @@
+
+# legend of mana calculator
+
+In the game `Legend of Mana`, your characters attributes increase based on the weapon equipped at the time they level up.
+
+This is a calculator that can be used to determine the final attributes based on how many levels each weapon is used up to the level cap of 99.
+
+The attributes appear to be broken into sizes as small as a quarter (eg. 1/4), which means the actual gains may be unable to be determined until 4 levels with a given weapon.
+
+This also means that if you use a weapon for less than 4 levels, you may be left with remainders.
+
+
+## usage
+
+Open up [`index.html`](index.html) in a web browser.
+
+Change the number of levels next to each weapon as needed.
+
+The total character level, and final attributes, will be listed.
+
+To see remainders a checkbox will allow you to show decimals instead of whole integers.
+
+
+## table
+
+Courtesy of DAC's level up guide @ Gamefaqs:
+
+	---------------------------------------------------------
+	| Stat        | Pwr | Skl | Dfn | Mgc | Hp! | Spt | Chm |
+	|-------------|-----|-----|-----|-----|-----|-----|-----|
+	| Swords      | 100 | 100 | 100 |  75 |  75 |  75 |  75 |
+	|-------------|-----|-----|-----|-----|-----|-----|-----|
+	| 2H Swords   | 125 | 100 |  75 |  75 |  75 |  50 |  75 |
+	|-------------|-----|-----|-----|-----|-----|-----|-----|
+	| Knifes      |  75 | 125 |  75 |  75 |  50 | 100 | 100 |
+	|-------------|-----|-----|-----|-----|-----|-----|-----|
+	| Axes        | 100 |  75 | 100 |  75 |  75 | 100 |  50 |
+	|-------------|-----|-----|-----|-----|-----|-----|-----|
+	| 2H Axes     | 125 | 125 |  75 |  75 |  50 |  75 |  50 |
+	|-------------|-----|-----|-----|-----|-----|-----|-----|
+	| Staves      |  50 |  75 |  75 | 125 |  50 |  75 | 125 |
+	|-------------|-----|-----|-----|-----|-----|-----|-----|
+	| Bows        |  50 | 175 |  75 |  75 |  50 |  75 | 100 |
+	|-------------|-----|-----|-----|-----|-----|-----|-----|
+	| Spears      |  75 | 125 | 100 |  75 |  50 |  75 | 100 |
+	|-------------|-----|-----|-----|-----|-----|-----|-----|
+	| Flails      |  75 | 125 |  50 |  75 |  50 |  75 | 125 |
+	|-------------|-----|-----|-----|-----|-----|-----|-----|
+	| Hammers     | 175 |  75 |  50 |  75 |  75 |  75 |  75 |
+	|-------------|-----|-----|-----|-----|-----|-----|-----|
+	| Gloves      | 125 |  75 |  75 |  50 |  75 |  75 |  75 |
+	---------------------------------------------------------
+
+
+## future
+
+Verify the starting level is 1.
+
+Verify all attributes start at 1.
+
+Verify this is the same for both the Hero and Heroine.
+
+Add tool-tips to describe the gains for each weapon.
+
+Add bitmask hash to URL so "builds" can be shared.
+
+Test across multiple browsers and mobile devices.
+
+
+# references
+
+- [Level-Up FAQ by DAC @ Gamefaqs](https://gamefaqs.gamespot.com/ps/256525-legend-of-mana/faqs/18949)
+- [Inspired by Dragon's Dogma Stat Planner](https://stackoverflow.github.io/dragons-dogma-stat-planner/)