You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
343 lines
12 KiB
HTML
343 lines
12 KiB
HTML
<!doctype html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Animal Crossing - Turnip Prophet</title>
|
|
<meta name="description" content="Animal Crossing - Turnip Prophet">
|
|
<meta name="author" content="Mike Bryant">
|
|
<meta name="theme-color" content="#def2d9">
|
|
|
|
<!-- generics -->
|
|
<link rel="icon" href="img/favicon-32.png" sizes="32x32">
|
|
<link rel="icon" href="img/favicon-128.png" sizes="128x128">
|
|
<link rel="icon" href="img/favicon-192.png" sizes="192x192">
|
|
|
|
<!-- Android -->
|
|
<link rel="shortcut icon" href="img/favicon-196.png" sizes="196x196">
|
|
|
|
<!-- iOS -->
|
|
<link rel="apple-touch-icon" href="img/favicon-152.png" sizes="152x152">
|
|
<link rel="apple-touch-icon" href="img/favicon-167.png" sizes="167x167">
|
|
<link rel="apple-touch-icon" href="img/favicon-180.png" sizes="180x180">
|
|
|
|
<link rel="manifest" href="/manifest.json">
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162470902-1"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
|
|
function gtag() {
|
|
dataLayer.push(arguments);
|
|
}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'UA-162470902-1');
|
|
</script>
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div class="dialog-box">
|
|
<h2 class="dialog-box__name">Daisy Mae</h2>
|
|
<p>Hello, and welcome to the <b>Turnip Prophet</b> app on your Nook Phone.</p>
|
|
<p>This app lets you track your island's turnip prices daily, but you'll have to put the prices in yourself!
|
|
</p>
|
|
<p>After that, the Turnip Prophet app will <b>magically</b> predict the turnip prices you'll have for the rest of
|
|
the week.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="nook-phone">
|
|
<h1>Turnip Prophet</h1>
|
|
|
|
<div>
|
|
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
|
<defs>
|
|
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
|
</defs>
|
|
<g class="parallax">
|
|
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.6" />
|
|
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.4)" />
|
|
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)" />
|
|
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="nook-phone-center">
|
|
|
|
|
|
|
|
<form class="input__form">
|
|
<div class="form__row">
|
|
<h6>First-Time Buyer</h6>
|
|
<div class="input__group">
|
|
<label>Is this your first time buying turnips from Daisy Mae on your island?<i>(This affects your
|
|
pattern)</i></label>
|
|
<div class="input__radio-buttons">
|
|
<input type="radio" id="first-time-radio-no" name="first-time" value="false" checked>
|
|
<label for="first-time-radio-no">No</label>
|
|
<input type="radio" id="first-time-radio-yes" name="first-time" value="true">
|
|
<label for="first-time-radio-yes">Yes</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form__row">
|
|
<h6>Previous Pattern</h6>
|
|
<div class="input__group">
|
|
<label for="">What was last week's turnip price pattern?<i>(This affects your pattern)</i></label>
|
|
<div class="input__radio-buttons">
|
|
<input type="radio" id="pattern-radio-unknown" name="pattern" value="-1" checked>
|
|
<label for="pattern-radio-unknown">I don't know</label>
|
|
<input type="radio" id="pattern-radio-fluctuating" name="pattern" value="0">
|
|
<label for="pattern-radio-fluctuating">Fluctuating</label>
|
|
<input type="radio" id="pattern-radio-small-spike" name="pattern" value="3">
|
|
<label for="pattern-radio-small-spike">Small Spike</label>
|
|
<input type="radio" id="pattern-radio-large-spike" name="pattern" value="1">
|
|
<label for="pattern-radio-large-spike">Large Spike</label>
|
|
<input type="radio" id="pattern-radio-decreasing" name="pattern" value="2">
|
|
<label for="pattern-radio-decreasing">Decreasing</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form__row">
|
|
<h6>Sunday</h6>
|
|
<div class="input__group">
|
|
<label>What was the price of turnips this week on your island? <i>(If this is your first time buying turnips, this field
|
|
will be disabled)</i></label>
|
|
<input type="number" id="buy" placeholder="..." />
|
|
|
|
</div>
|
|
</div>
|
|
<i>AM - 8:00 am to 11:59 am</i>
|
|
<i>PM - 12:00 pm to 10:00 pm</i>
|
|
<div class="form__flex-wrap">
|
|
<div class="form__row">
|
|
<h6>Monday</h6>
|
|
<div class="input__group">
|
|
<label for="sell_2">AM</label>
|
|
<input type="number" id="sell_2" placeholder="..." />
|
|
</div>
|
|
<div class="input__group">
|
|
<label for="sell_3">PM</label>
|
|
<input type="number" id="sell_3" placeholder="..." />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form__row">
|
|
<h6>Tuesday</h6>
|
|
<div class="input__group">
|
|
<label for="sell_4">AM</label>
|
|
<input type="number" id="sell_4" placeholder="..." />
|
|
</div>
|
|
<div class="input__group">
|
|
<label for="sell_5">PM</label>
|
|
<input type="number" id="sell_5" placeholder="..." />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form__row">
|
|
<h6>Wednesday</h6>
|
|
<div class="input__group">
|
|
<label for="sell_6">AM</label>
|
|
<input type="number" id="sell_6" placeholder="..." />
|
|
</div>
|
|
<div class="input__group">
|
|
<label for="sell_7">PM</label>
|
|
<input type="number" id="sell_7" placeholder="..." />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form__row">
|
|
<h6>Thursday</h6>
|
|
<div class="input__group">
|
|
<label for="sell_8">AM</label>
|
|
<input type="number" id="sell_8" placeholder="..." />
|
|
</div>
|
|
<div class="input__group">
|
|
<label for="sell_9">PM</label>
|
|
<input type="number" id="sell_9" placeholder="..." />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form__row">
|
|
<h6>Friday</h6>
|
|
<div class="input__group">
|
|
<label for="sell_10">AM</label>
|
|
<input type="number" id="sell_10" placeholder="..." />
|
|
</div>
|
|
<div class="input__group">
|
|
<label for="sell_11">PM</label>
|
|
<input type="number" id="sell_11" placeholder="..." />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form__row">
|
|
<h6>Saturday</h6>
|
|
<div class="input__group">
|
|
<label for="sell_12">AM</label>
|
|
<input type="number" id="sell_12" placeholder="..." />
|
|
</div>
|
|
<div class="input__group">
|
|
<label for="sell_13">PM</label>
|
|
<input type="number" id="sell_13" placeholder="..." />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" id="reset" class="reset-button" name="action">
|
|
Reset Turnip Prophet
|
|
</button>
|
|
</form>
|
|
|
|
|
|
|
|
<h2>Output</h2>
|
|
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart" width="100%" height="100"></canvas>
|
|
</div>
|
|
|
|
<div class="table-wrapper">
|
|
<table id="turnipTable">
|
|
<thead>
|
|
<tr>
|
|
<th valign="bottom">Pattern</th>
|
|
<th valign="bottom">% Chance</th>
|
|
<th valign="bottom">Sunday</th>
|
|
<th colspan="2">
|
|
<div>Monday</div>
|
|
<div>
|
|
<span>AM</span>
|
|
<span>PM</span>
|
|
</div>
|
|
</th>
|
|
<th colspan="2">
|
|
<div>Tuesday</div>
|
|
<div>
|
|
<span>AM</span>
|
|
<span>PM</span>
|
|
</div>
|
|
</th>
|
|
<th colspan="2">
|
|
<div>
|
|
<div>Wednesday</div>
|
|
<div>
|
|
<span>AM</span>
|
|
<span>PM</span>
|
|
</div>
|
|
</div>
|
|
</th>
|
|
<th colspan="2">
|
|
<div>Thursday</div>
|
|
<div>
|
|
<span>AM</span>
|
|
<span>PM</span>
|
|
</div>
|
|
</th>
|
|
<th colspan="2">
|
|
<div>Friday</div>
|
|
<div>
|
|
<span>AM</span>
|
|
<span>PM</span>
|
|
</div>
|
|
</th>
|
|
<th colspan="2">
|
|
<div>Saturday</div>
|
|
<div>
|
|
<span>AM</span>
|
|
<span>PM</span>
|
|
</div>
|
|
</th>
|
|
<th valign="bottom">Guaranteed Minimum</th>
|
|
<th valign="bottom">Potential Maximum</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="output"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="transform:rotate(180deg)">
|
|
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
|
<defs>
|
|
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
|
</defs>
|
|
<g class="parallax">
|
|
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.6" />
|
|
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.4)" />
|
|
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)" />
|
|
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="dialog-box">
|
|
<h2 class="dialog-box__name">Daisy Mae</h2>
|
|
<p>After you've listed some turnip prices, the Turnip Prophet will run some numbers and display the different
|
|
possible patterns that your island may experience.</p>
|
|
<p>This app is still in development, but will improve over time!</p>
|
|
</div>
|
|
|
|
<div class="dialog-box">
|
|
<h2 class="dialog-box__name">Daisy Mae</h2>
|
|
<p>
|
|
None of this would have been possible without <a
|
|
href="https://twitter.com/_Ninji/status/1244818665851289602?s=20">Ninji's work</a> figuring out just how Timmy
|
|
and Tommy value their turnips.
|
|
</p>
|
|
<p>
|
|
Support, comments and contributions are available through <a
|
|
href="https://github.com/mikebryant/ac-nh-turnip-prices/issues">Github</a>
|
|
</p>
|
|
<p>Oh! And let's not forget to thank those who have contributed so far!</p>
|
|
<p id="contributors">
|
|
Contributors:
|
|
</p>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
|
|
<script src="js/chart.js"></script>
|
|
<script src="js/predictions.js"></script>
|
|
<script src="js/scripts.js"></script>
|
|
<script src="js/contributors.js"></script>
|
|
<script>
|
|
// Check compatibility for the browser we're running this in
|
|
if ("serviceWorker" in navigator) {
|
|
if (navigator.serviceWorker.controller) {
|
|
console.log(
|
|
"[PWA] Service Worker already found, skipping register"
|
|
);
|
|
} else {
|
|
// Register the service worker
|
|
navigator.serviceWorker
|
|
.register("/service-worker.js", {
|
|
scope: "./",
|
|
})
|
|
.then(function (reg) {
|
|
console.log(
|
|
"[PWA] Service worker has been registered for scope: " +
|
|
reg.scope
|
|
);
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|