Swap to using Webpack to decrease deployment size

2021-07-01 17:08:18 -04:00
parent 4e48152ff7
commit 3263dd360c
7 changed files with 2921 additions and 13 deletions
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,136 @@
+import {
+    Chart,
+    LineElement,
+    PointElement,
+    LineController,
+    LinearScale,
+    TimeSeriesScale,
+    Legend,
+    Title,
+    Tooltip
+} from 'chart.js';
+import $ from 'cash-dom';
+import { DateTime } from 'luxon';
+import 'chartjs-adapter-luxon';
+import './style.css';
+
+
+Chart.register(
+    LineElement,
+    PointElement,
+    LineController,
+    LinearScale,
+    TimeSeriesScale,
+    Legend,
+    Title,
+    Tooltip
+)
+
+var current_region_selection = 'us'
+var current_time_selection = '72h'
+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,
+                cubicInterpolationMode: 'monotone',
+                pointRadius: 0
+            }]
+        },
+        options: {
+            scales: {
+                x: {
+                    type: 'time',
+                    
+                }
+            },
+        }
+    })
+}
+
+
+async function callUpdateURL() {
+    let resp = await fetch("https://piwv24uske.execute-api.us-east-1.amazonaws.com/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://piwv24uske.execute-api.us-east-1.amazonaws.com/token/history/" + current_region_selection + "/" + current_time_selection + ".json");
+    let chart_data = await resp.json();
+    var new_chart_js_data = []
+    for (var i = 0; i < chart_data.length; i++) {
+        var 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)
+});
+
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,342 @@
+/* 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;
+    width: 93s%;
+    aspect-ratio: 2;
+}
+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;
+}
+p {
+    margin: 0px;
+    padding: 0px;
+    line-height: 3em;
+}
+
+
+#option_select {
+    font-size: 20px;
+}
+
+#token {
+    color: gold;
+}
+
+#token-chart {
+    color: white;
+}
+