feat: Added a fresh coat of paint from Materialize

Adds some visual styling based on Material Design language, using the Materialize library.
master
Ryan Carbotte 4 years ago
parent 6c808436a8
commit bdf967afc3

@ -1,21 +1,20 @@
#turnipTable {
border: 1px solid #000000;
border-spacing: 0;
border-collapse: collapse;
}
#turnipTable th, #turnipTable td { #turnipTable th, #turnipTable td {
padding: 5px; padding: 5px;
border: 1px solid #000000; }
margin: 0;
min-width: 50px; #turnipTable thead tr:first-child {
border: none;
} }
#turnipTable th { #turnipTable th {
text-align: center; text-align: center;
vertical-align: top; }
#turnipTable td:first-child {
white-space: nowrap;
text-align: left;
} }
#turnipTable td { #turnipTable td {
text-align: right; text-align: center;
} }

@ -9,6 +9,8 @@
<meta name="author" content="Mike Bryant"> <meta name="author" content="Mike Bryant">
<link rel="stylesheet" href="css/styles.css?v=1.0"> <link rel="stylesheet" href="css/styles.css?v=1.0">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162470902-1"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-162470902-1"></script>
@ -23,133 +25,150 @@
</head> </head>
<body> <body>
<p> <div class="container">
To use, enter as much data as you can from <b>your own island</b>. If you bought from Daisy on your own island <b>for the first time this week</b> leave the buy price blank. The tool will figure out all possible patterns and predict the lowest and highest prices for each day. <div class="col s12 m5">
</p> <div class="card-panel z-depth-0">
<p> <span>
I couldn't have done this without <a href="https://twitter.com/_Ninji/status/1244818665851289602?s=20">Ninji's work extracting the code</a> To use, enter as much data as you can from <b>your own island</b>. If you bought from Daisy on your own island <b>for the first time this week</b> leave the buy price blank. The tool will figure out all possible patterns and predict the lowest and highest prices for each day.
</p> <p />
<p> I couldn't have done this without <a href="https://twitter.com/_Ninji/status/1244818665851289602?s=20">Ninji's work extracting the code</a>
Support, comments and contributions are available through <a href="https://github.com/mikebryant/ac-nh-turnip-prices/issues">Gitlab</a> <p />
</p> Support, comments and contributions are available through <a href="https://github.com/mikebryant/ac-nh-turnip-prices/issues">Github</a>
<form> </span>
<p> </div>
<label>Daisy Mae</label><br> </div>
<label> <form>
Buy price <div class="row">
<input type="number" id="buy"> <div class="col s2">
</label> <h5>Daisy Mae</h5>
</p> <div class="input-field">
<p> <label for="buy">Buy price</label>
<label>Monday</label><br> <input type="number" id="buy">
<label> </div>
AM </div>
<input type="number" id="sell_2"> </div>
</label> <div class="row">
<label> <div class="col s2">
PM <h6>Monday</h6>
<input type="number" id="sell_3"> <div class="input-field col s6">
</label> <label for="sell_2">AM</label>
</p> <input type="number" id="sell_2">
<p> </div>
<label>Tuesday</label><br> <div class="input-field col s6">
<label> <label for="sell_3">PM</label>
AM <input type="number" id="sell_3">
<input type="number" id="sell_4"> </div>
</label> </div>
<label> <div class="col s2">
PM <h6>Tuesday</h6>
<input type="number" id="sell_5"> <div class="input-field col s6">
</label> <label for="sell_4">AM</label>
</p> <input type="number" id="sell_4">
<p> </div>
<label>Wednesday</label><br> <div class="input-field col s6">
<label> <label for="sell_5">PM</label>
AM <input type="number" id="sell_5">
<input type="number" id="sell_6"> </div>
</label> </div>
<label> <div class="col s2">
PM <h6>Wednesday</h6>
<input type="number" id="sell_7"> <div class="input-field col s6">
</label> <label for="sell_6">AM</label>
</p> <input type="number" id="sell_6">
<p> </div>
<label>Thursday</label><br> <div class="input-field col s6">
<label> <label for="sell_7">PM</label>
AM <input type="number" id="sell_7">
<input type="number" id="sell_8"> </div>
</label> </div>
<label> <div class="col s2">
PM <h6>Thursday</h6>
<input type="number" id="sell_9"> <div class="input-field col s6">
</label> <label for="sell_8">AM</label>
</p> <input type="number" id="sell_8">
<p> </div>
<label>Friday</label><br> <div class="input-field col s6">
<label> <label for="sell_9">PM</label>
AM <input type="number" id="sell_9">
<input type="number" id="sell_10"> </div>
</label> </div>
<label> <div class="col s2">
PM <h6>Friday</h6>
<input type="number" id="sell_11"> <div class="input-field col s6">
</label> <label for="sell_10">AM</label>
</p> <input type="number" id="sell_10">
<p> </div>
<label>Saturday</label><br> <div class="input-field col s6">
<label> <label for="sell_11">PM</label>
AM <input type="number" id="sell_11">
<input type="number" id="sell_12"> </div>
</label> </div>
<label> <div class="col s2">
PM <h6>Saturday</h6>
<input type="number" id="sell_13"> <div class="input-field col s6">
</label> <label for="sell_12">AM</label>
</p> <input type="number" id="sell_12">
<button id="reset">Reset</button> </div>
</form> <div class="input-field col s6">
<label for="sell_13">PM</label>
<input type="number" id="sell_13">
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<button id="reset" class="btn waves-effect waves-light" type="submit" name="action">
Reset
</button>
</div>
</div>
</form>
<p> <div class="divider"></div>
</p> <div class="card-panel z-depth-0">
<span>Your turnip prices will be one of the following patterns. Each cell contains the minimum..maximum price for that half-day. If you don't have a pattern, something's gone wrong, sorry &#128531;. Check back next week!</span>
</div>
<p> <div class="section">
<table id="turnipTable"> <table id="turnipTable" class="responsive-table highlight">
<caption>Your turnip prices will be one of the following patterns. Each cell contains the minimum..maximum price for that half-day. If you don't have a pattern, something's gone wrong, sorry :(. Check back next week!</caption> <thead>
<thead> <tr>
<tr> <th rowspan="2">Pattern</th>
<th rowspan="2">Pattern</th> <th rowspan="2">Sunday</th>
<th rowspan="2">Sunday</th> <th colspan="2">Monday</th>
<th colspan="2">Monday</th> <th colspan="2">Tuesday</th>
<th colspan="2">Tuesday</th> <th colspan="2">Wednesday</th>
<th colspan="2">Wednesday</th> <th colspan="2">Thursday</th>
<th colspan="2">Thursday</th> <th colspan="2">Friday</th>
<th colspan="2">Friday</th> <th colspan="2">Saturday</th>
<th colspan="2">Saturday</th> <th rowspan="2">Week Min</th>
<th rowspan="2">Week Min</th> <th rowspan="2">Week Max</th>
<th rowspan="2">Week Max</th> </tr>
</tr> <tr>
<tr> <th>AM</th>
<th>AM</th> <th>PM</th>
<th>PM</th> <th>AM</th>
<th>AM</th> <th>PM</th>
<th>PM</th> <th>AM</th>
<th>AM</th> <th>PM</th>
<th>PM</th> <th>AM</th>
<th>AM</th> <th>PM</th>
<th>PM</th> <th>AM</th>
<th>AM</th> <th>PM</th>
<th>PM</th> <th>AM</th>
<th>AM</th> <th>PM</th>
<th>PM</th> </tr>
</tr> </thead>
</thead> <tbody id="output"></tbody>
<tbody id="output"></tbody> </table>
</table> </div>
</p> </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/predictions.js"></script> <script src="js/predictions.js"></script>
<script src="js/scripts.js"></script> <script src="js/scripts.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body> </body>
</html> </html>

@ -12,15 +12,19 @@ $(document).ready(function () {
return; return;
} }
const buyInput = $("#buy");
if (index === 0) { if (index === 0) {
$("#buy").val(sell_price); buyInput.focus();
buyInput.val(sell_price);
buyInput.blur();
return; return;
} }
const element = $("#sell_" + index); const element = $("#sell_" + index);
if (element.length) { if (element.length) {
element.focus();
element.val(sell_price); element.val(sell_price);
element.blur();
} }
}); });

Loading…
Cancel
Save