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.
ac-nh-turnip-prices/index.html

331 lines
11 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">
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/img/192.png">
<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>