commit 1d01edd8ad3857a6b84269abb1eb58210dd5b40c
Author: Emily Doherty <emily@emilyd.xyz>
Date: Fri, 19 Feb 2021 04:47:19 -0500
Initial commit to github
Diffstat:
| A | css/style.css | | | 335 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | index.html | | | 37 | +++++++++++++++++++++++++++++++++++++ |
| A | js/token.js | | | 105 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
3 files changed, 477 insertions(+), 0 deletions(-)
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,335 @@
+/* Adapted from https://github.com/thomasf/solarized-css and https://github.com/altercation/solarized
+ Portions Copyright (c) 2015 Thomas Frössman and Copyright (c) 2011 Ethan Schoonover */
+
+@import url(https://fonts.googleapis.com/css?family=Inconsolata);
+@import url(https://fonts.googleapis.com/css?family=PT+Sans);
+@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+ display: block;
+}
+audio,
+canvas,
+video {
+ display: inline-block;
+}
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+[hidden] {
+ display: none;
+}
+html {
+ font-family: sans-serif;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+body {
+ margin: 0;
+}
+a:focus {
+ outline: thin dotted;
+}
+a:active,
+a:hover {
+ outline: 0;
+}
+h1 {
+ font-size: 2em;
+}
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+b,
+strong {
+ font-weight: bold;
+}
+dfn {
+ font-style: italic;
+}
+mark {
+ background: #ff0;
+ color: #000;
+}
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, serif;
+ font-size: 1em;
+}
+pre {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+q {
+ quotes: "\201C" "\201D" "\2018" "\2019";
+}
+small {
+ font-size: 80%;
+}
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sup {
+ top: -0.5em;
+}
+sub {
+ bottom: -0.25em;
+}
+img {
+ border: 0;
+}
+svg:not(:root) {
+ overflow: hidden;
+}
+figure {
+ margin: 0;
+}
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+legend {
+ border: 0;
+ padding: 0;
+}
+button,
+input,
+select,
+textarea {
+ font-family: inherit;
+ font-size: 100%;
+ margin: 0;
+}
+button,
+input {
+ line-height: normal;
+}
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button;
+ cursor: pointer;
+}
+button[disabled],
+input[disabled] {
+ cursor: default;
+}
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box;
+ padding: 0;
+}
+input[type="search"] {
+ -webkit-appearance: textfield;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+textarea {
+ overflow: auto;
+ vertical-align: top;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+html {
+ font-family: 'PT Sans', sans-serif;
+}
+pre,
+code {
+ font-family: 'Inconsolata', sans-serif;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: 'PT Sans Narrow', sans-serif;
+ font-weight: 700;
+}
+html {
+ background-color: #073642;
+ color: #839496;
+ margin: 1em;
+}
+/*body {
+
+}*/
+code {
+ background-color: #073642;
+ padding: 2px;
+}
+a {
+ color: #b58900;
+}
+a:visited {
+ color: #cb4b16;
+}
+a:hover {
+ color: #cb4b16;
+}
+h1 {
+ color: #d33682;
+}
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: #859900;
+}
+pre {
+ background-color: #002b36;
+ color: #839496;
+ border: 1pt solid #586e75;
+ padding: 1em;
+ box-shadow: 5pt 5pt 8pt #073642;
+}
+pre code {
+ background-color: #002b36;
+}
+h1 {
+ font-size: 2.4em;
+}
+h2 {
+ font-size: 2.4em;
+}
+h3 {
+ font-size: 1.8em;
+}
+h4 {
+ font-size: 1.4em;
+}
+h5 {
+ font-size: 1.3em;
+}
+h6 {
+ font-size: 1.15em;
+}
+.tag {
+ background-color: #073642;
+ color: #d33682;
+ padding: 0 0.2em;
+}
+.todo,
+.next,
+.done {
+ color: #002b36;
+ background-color: #dc322f;
+ padding: 0 0.2em;
+}
+.tag {
+ -webkit-border-radius: 0.35em;
+ -moz-border-radius: 0.35em;
+ border-radius: 0.35em;
+}
+.TODO {
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ border-radius: 0.2em;
+ background-color: #2aa198;
+}
+.NEXT {
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ border-radius: 0.2em;
+ background-color: #268bd2;
+}
+.ACTIVE {
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ border-radius: 0.2em;
+ background-color: #268bd2;
+}
+.DONE {
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ border-radius: 0.2em;
+ background-color: #859900;
+}
+.WAITING {
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ border-radius: 0.2em;
+ background-color: #cb4b16;
+}
+.HOLD {
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ border-radius: 0.2em;
+ background-color: #d33682;
+}
+.NOTE {
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ border-radius: 0.2em;
+ background-color: #d33682;
+}
+.CANCELLED {
+ -webkit-border-radius: 0.2em;
+ -moz-border-radius: 0.2em;
+ border-radius: 0.2em;
+ background-color: #859900;
+}
+
+.flex-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ background-color: #002b36;
+ margin: 0 auto;
+ max-width: 85%;
+ border: 1pt solid #586e75;
+ padding: 1em;
+}
+
+.flex-container > div {
+ flex: 100%;
+ margin: 10px;
+ text-align: center;
+ line-height: 75px;
+ font-size: 30px;
+}
+
+
+#option_select {
+ font-size: 20px;
+}
+
+#token {
+ color: gold;
+}
+
+#token-chart {
+ color: white;
+}
+
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+ <head>
+ <title>WoW Historical Token Prices</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta name="description" content="Make smart WoW Token purchasing decisions">
+ <link rel="stylesheet" href="css/style.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.css" integrity="sha512-C7hOmCgGzihKXzyPU/z4nv97W0d9bv4ALuuEbSf6hm93myico9qa0hv4dODThvCsqQUmKmLcJmlpRmCaApr83g==" crossorigin="anonymous" />
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/cash/8.1.0/cash.min.js" integrity="sha512-sgDgZX/GgfD7qSeMjPN/oE9EQgXZJW55FIjdexVT60QerG2gAWhR9QDQEGt3O90Dy9jVcwMWsoTMhLgldIiKXw==" crossorigin="anonymous"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.8/dayjs.min.js" integrity="sha512-kZ+x2gdehn6OZMWZSp3Vt5R+v9hQTYEATQwaUfWquhxbvNVAy6IRtYs7asdyxKUTqG0I5ZqBqnzcBrpnHJCAGw==" crossorigin="anonymous"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js" integrity="sha512-SuxO9djzjML6b9w9/I07IWnLnQhgyYVSpHZx0JV97kGBfTIsUYlWflyuW4ypnvhBrslz1yJ3R+S14fdCWmSmSA==" crossorigin="anonymous"></script>
+ <script src="js/token.js"></script>
+ </head>
+ <body>
+ <div class="flex-container">
+ <div><h1>1 Token = <u id="token">0</u> Gold</h1></div>
+ <div>
+ <canvas id="token-chart"></canvas>
+ <div id="option_select">
+ <p>
+ Region:
+ <a href="javascript:updateRegionPreference('us')">US</a>
+ <a href="javascript:updateRegionPreference('eu')">EU</a>
+ <a href="javascript:updateRegionPreference('kr')">KR</a>
+ <a href="javascript:updateRegionPreference('tw')">TW</a>
+ | Time Selection:
+ <a href="javascript:updateTimePreference('48h')">2d</a>
+ <a href="javascript:updateTimePreference('72h')">3d</a>
+ <a href="javascript:updateTimePreference('120h')">5d</a>
+ <a href="javascript:updateTimePreference('168h')">7d</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/js/token.js b/js/token.js
@@ -0,0 +1,105 @@
+var current_token_int = 0;
+var current_region_selection = 'us'
+var current_time_selection = '48h'
+var current_price_hash = {
+ us: 0,
+ eu: 0,
+ kr: 0,
+ tw: 0
+}
+var chart_js_data;
+var ctx;
+var token_chart;
+
+
+function populateChart() {
+ ctx = document.getElementById("token-chart").getContext('2d');
+ token_chart = new Chart(ctx, {
+ type: 'line',
+ data: {
+ datasets: [{
+ borderColor: 'gold',
+ label: current_region_selection.toUpperCase() + " WoW Token Price",
+ data: chart_js_data
+ }]
+ },
+ options: {
+ scales: {
+ xAxes: [{
+ type: 'time'
+ }]
+ }
+ }
+ })
+}
+
+
+async function callUpdateURL() {
+ let resp = await fetch("https://data.wowtoken.app/token/current.json");
+ let data = await resp.json();
+ updateTokens(data);
+}
+
+function updateTokens(data) {
+ updateRegionalToken('us', data);
+ updateRegionalToken('eu', data);
+ updateRegionalToken('kr', data);
+ updateRegionalToken('tw', data);
+}
+
+function updateRegionalToken(region, data) {
+ if (current_price_hash[region] != data['price_data'][region]) {
+ current_price_hash[region] = data['price_data'][region];
+ if (region === current_region_selection) {
+ formatToken();
+ }
+ }
+
+}
+
+function updateRegionPreference(newRegion) {
+ if (newRegion != current_region_selection) {
+ token_chart.destroy();
+ current_region_selection = newRegion;
+ }
+ formatToken();
+ pullChartData().then(populateChart);
+}
+function updateTimePreference(newTime) {
+ if (newTime != current_time_selection) {
+ token_chart.destroy();
+ current_time_selection = newTime;
+ }
+ pullChartData().then(populateChart)
+}
+
+async function pullChartData() {
+ let resp = await fetch("https://data.wowtoken.app/token/history/" + current_region_selection + "/" + current_time_selection + ".json");
+ let chart_data = await resp.json();
+ new_chart_js_data = []
+ for (i = 0; i < chart_data.length; i++) {
+ datum = {
+ x: chart_data[i]['time'],
+ y: chart_data[i]['value']
+ }
+ new_chart_js_data.push(datum)
+ }
+ chart_js_data = new_chart_js_data
+}
+
+async function updateChartData() {
+ token_chart.destroy();
+ pullChartData().then(populateChart)
+}
+
+function formatToken() {
+ $("#token").html(current_price_hash[current_region_selection].toLocaleString());
+}
+
+$(document).ready(function() {
+ callUpdateURL()
+ setInterval(callUpdateURL, 60*1000);
+ pullChartData().then(populateChart);
+ setInterval(updateChartData, 15*60*1000)
+});
+
