commit 1d01edd8ad3857a6b84269abb1eb58210dd5b40c Author: Emily Doherty Date: Fri Feb 19 04:47:19 2021 -0500 Initial commit to github diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..12fd3a3 --- /dev/null +++ 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 new file mode 100644 index 0000000..19e248a --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + WoW Historical Token Prices + + + + + + + + + + + +
+

1 Token = 0 Gold

+
+ +
+

+ Region: + US + EU + KR + TW + | Time Selection: + 2d + 3d + 5d + 7d +

+
+
+
+ + diff --git a/js/token.js b/js/token.js new file mode 100644 index 0000000..88c5c4f --- /dev/null +++ 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) +}); +