wowtoken-app/wowtoken.app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: wowtoken-app:8f6cbbc75dd8837f4dc6276ffaf86dac179e676f
Branches Tags
wowtoken-app:main wowtoken-app:classic wowtoken-app:feature/candlestick
..
compare: wowtoken-app:feature/candlestick
Branches Tags
wowtoken-app:classic wowtoken-app:main wowtoken-app:feature/candlestick

9 Commits
8f6cbbc75d ... feature/ca

Author SHA1 Message Date
Emily Doherty
1e0b4a0a1f Make time and cost delineation more apparent 2024-04-25 00:17:09 -07:00
Emily Doherty
17ffbc3db1 Enabled the option to start Y at zero 2024-04-24 23:54:03 -07:00
Emily Doherty
0c9e7ed183 Change the timescale legend to be more readable instead of dense 2024-04-12 05:27:41 -07:00
Emily Doherty
4a7c03307d Change logs to warnings, since that's what they really are 2024-04-12 05:06:41 -07:00
Emily Doherty
0e40f403e4 Increase font size and brightness for better contrast 2024-04-12 05:04:33 -07:00
Emily Doherty
66ab042995 Changes to advanced options and styling in prep for future work 2023-10-15 01:16:38 -07:00
Emily Doherty
8cd9a2ddeb Remove Cash dependency, refactor event registration 2023-09-10 13:00:47 -07:00
Emily Doherty
702ca8c4d3 Update dependencies 2023-09-10 12:53:12 -07:00
Emily Doherty
c1b05851a4 Add link to classic token 2023-05-23 19:33:41 -07:00
5 changed files with 97 additions and 31 deletions
Expand all files Collapse all files

2
README.md
View File

@@ -2,6 +2,6 @@
These are the public assets for the [wowtoken.app](https://wowtoken.app) website, served off Amazon S3 behind CloudFront. These are the public assets for the [wowtoken.app](https://wowtoken.app) website, served off Amazon S3 behind CloudFront.
This project gets picked up by CodePipline, built via CodeBuild, and deployed. This project gets picked up by CodePipeline, built via CodeBuild, and deployed.
![Build Status](https://codebuild.us-east-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiblpRUnlNUzVmNU9sK1VBRVl1bVI1U1ZrWHJFSDVPYjFpTC9WVzZuSk1hd0lsUU5NekdDZTl4M2t4Uy9EWFdaY3JSNU1mYTFtaVI0VXN6ZGQvNE9BUWpvPSIsIml2UGFyYW1ldGVyU3BlYyI6InZNcHhHanNTODQ0b2lwbkkiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=main) ![Build Status](https://codebuild.us-east-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiblpRUnlNUzVmNU9sK1VBRVl1bVI1U1ZrWHJFSDVPYjFpTC9WVzZuSk1hd0lsUU5NekdDZTl4M2t4Uy9EWFdaY3JSNU1mYTFtaVI0VXN6ZGQvNE9BUWpvPSIsIml2UGFyYW1ldGVyU3BlYyI6InZNcHhHanNTODQ0b2lwbkkiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=main)

2
buildspec.yml
View File

@@ -3,7 +3,7 @@ version: 0.2
phases: phases:
install: install:
runtime-versions: runtime-versions:
nodejs: 18 nodejs: 16
commands: commands:
- echo Installing dependencies... - echo Installing dependencies...
- npm install - npm install

25
src/index.html
View File

@@ -1,18 +1,18 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>WoW Classic Historical Token Prices Tracker</title> <title>WoW Historical Token Prices Tracker</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Track current and historical gold price trends for the World of Warcraft (WoW) Classic in game token, including the US, EU, TW, and KR regions. Prices updated every minute. Simple, quick, and easy info, no ads or tracking, ever."> <meta name="description" content="Track current and historical gold price trends for the World of Warcraft (WoW) in game token, including the US, EU, TW, and KR regions. Prices updated every minute. Simple, quick, and easy info, no ads or tracking, ever.">
<link rel="preconnect" href="https://data.wowtoken.app"> <link rel="preconnect" href="https://data.wowtoken.app">
<link rel="dns-prefetch" href="https://data.wowtoken.app"> <link rel="dns-prefetch" href="https://data.wowtoken.app">
<link rel="preload" href="https://data.wowtoken.app/classic/token/current.json" as="fetch" type="application/json" crossorigin="anonymous"> <link rel="preload" href="https://data.wowtoken.app/token/current.json" as="fetch" type="application/json" crossorigin="anonymous">
<link rel="preload" href="https://data.wowtoken.app/classic/token/history/us/72h.json" as="fetch" type="application/json" crossorigin="anonymous"> <link rel="preload" href="https://data.wowtoken.app/token/history/us/72h.json" as="fetch" type="application/json" crossorigin="anonymous">
</head> </head>
<body> <body>
<div class="flex-container"> <div class="flex-container">
<div><h1>1 Classic Token = <u id="token">0</u> Gold</h1></div> <div><h1>1 Token = <u id="token">0</u> Gold</h1></div>
<div id="chart-frame"> <div id="chart-frame">
<div class="lds-ripple" id="loader"><div></div><div></div></div> <div class="lds-ripple" id="loader"><div></div><div></div></div>
<canvas id="token-chart"></canvas> <canvas id="token-chart"></canvas>
@@ -36,6 +36,9 @@
<option value="336h">14 Days</option> <option value="336h">14 Days</option>
<option value="720h">1 Month</option> <option value="720h">1 Month</option>
<option value="90d">3 Months</option> <option value="90d">3 Months</option>
<option value="6m">6 Months</option>
<option value="1y">1 Year</option>
<option value="2y">2 Years</option>
<option value="all">All Available</option> <option value="all">All Available</option>
</select> </select>
</div> </div>
@@ -67,7 +70,7 @@
</fieldset> </fieldset>
<fieldset id="y-start-options"> <fieldset id="y-start-options">
<label for="y-start">Start y-axis at 0:</label> <label for="y-start">Start y-axis at 0:</label>
<input type="checkbox" id="y-start" name="y-start" value="enable" disabled/> <input type="checkbox" id="y-start" name="y-start"/>
</fieldset> </fieldset>
</fieldset> </fieldset>
@@ -78,12 +81,12 @@
</button> </button>
</div> </div>
<div> <div>
<p><em>Looking for the retail WoW Token price? Find it <a href="https://wowtoken.app">here!</a></em></p> <p><em>Looking for the classic WoW Token price? Find it <a href="https://classic.wowtoken.app">here!</a></em></p>
</div> </div>
</div> </div>
<details id="about"> <details id="about">
<summary>About this Site</summary> <summary>About this Site</summary>
This is a site developed to track the value of the World of Warcraft Classic Token from various This is a site developed to track the value of the World of Warcraft Token from various
regions over time. I developed it because I wanted a quick and simple way to track the regions over time. I developed it because I wanted a quick and simple way to track the
cost without being advertised to or tracked, and to play around with various "serverless" cost without being advertised to or tracked, and to play around with various "serverless"
technologies. As such, my promise to you is never to use any tracking Javascript, and the technologies. As such, my promise to you is never to use any tracking Javascript, and the
@@ -91,10 +94,10 @@
</details> </details>
<details id="what-is"> <details id="what-is">
<summary>What is the WoW Token</summary> <summary>What is the WoW Token</summary>
The World of Warcraft Classic Token is a first-party system developed by Blizzard to allow you The World of Warcraft Token is a first-party system developed by Blizzard to allow you
to either spend currency (local denomination or Blizzard Balance) and convert it to gold to either spend currency (local denomination or Blizzard Balance) and convert it to gold
in classic World of Warcraft, or use gold to buy game time. in retail World of Warcraft, or use gold to buy game time or Blizzard Balance. To find out
To find out more, visit the support article on Blizzard's website more, visit the support article on Blizzard's website
<a href="https://us.battle.net/support/en/article/31218">here</a>. <a href="https://us.battle.net/support/en/article/31218">here</a>.
</details> </details>
<div id="source"> <div id="source">

81
src/index.js
View File

@@ -28,6 +28,7 @@ Chart.register(
let currentRegionSelection = ''; let currentRegionSelection = '';
let currentTimeSelection = ''; let currentTimeSelection = '';
let currentAggregateSelection = ''; let currentAggregateSelection = '';
let startYAtZero = false;
const currentPriceHash = { const currentPriceHash = {
us: 0, us: 0,
eu: 0, eu: 0,
@@ -66,7 +67,7 @@ function populateChart() {
data: { data: {
datasets: [{ datasets: [{
borderColor: 'gold', borderColor: 'gold',
label: currentRegionSelection.toUpperCase() + " WoW Classic Token Price", label: currentRegionSelection.toUpperCase() + " WoW Token Price",
data: chartJsData, data: chartJsData,
cubicInterpolationMode: 'monotone', cubicInterpolationMode: 'monotone',
pointRadius: 0 pointRadius: 0
@@ -79,16 +80,51 @@ function populateChart() {
}, },
scales: { scales: {
x: { x: {
type: 'time' type: 'time',
grid: {
color: '#625f62',
},
ticks: {
color: '#a7a4ab',
font: {
size: 18,
}
},
time: {
unit: lookupTimeUnit(currentTimeSelection)
}
},
y: {
beginAtZero: startYAtZero,
grid: {
color: '#2f2c2f',
},
ticks: {
color: '#a7a4ab',
font: {
size: 18,
}
}
} }
}, },
} }
}); });
} }
function lookupTimeUnit(query){
const lookup = {
'h': 'day',
'd': 'week',
'm': 'month',
'y': 'month',
'l': 'year'
}
return lookup[query.charAt(query.length - 1)]
}
async function callUpdateURL() { async function callUpdateURL() {
let resp = await fetch("https://data.wowtoken.app/classic/token/current.json"); let resp = await fetch("https://data.wowtoken.app/token/current.json");
let data = await resp.json(); let data = await resp.json();
updateTokens(data); updateTokens(data);
} }
@@ -203,8 +239,16 @@ function toggleAdvancedSetting() {
} }
} }
function toggleStartYAtZero(){
startYAtZero = document.getElementById('y-start').checked;
if (tokenChart){
tokenChart.options.scales.y.beginAtZero = startYAtZero;
tokenChart.update();
}
}
function urlBuilder() { function urlBuilder() {
let url = "https://data.wowtoken.app/classic/token/history/"; let url = "https://data.wowtoken.app/token/history/";
if (currentAggregateSelection !== 'none') { if (currentAggregateSelection !== 'none') {
url += `${currentAggregateSelection}/` url += `${currentAggregateSelection}/`
} }
@@ -244,7 +288,7 @@ function detectRegionQuery(urlSearchParams) {
} }
} }
} else { } else {
console.log("An incorrect or malformed region selection was made in the query string"); console.warn("An incorrect or malformed region selection was made in the query string");
} }
} }
@@ -262,7 +306,7 @@ function detectTimeQuery(urlSearchParams) {
} }
} }
} else { } else {
console.log("An incorrect or malformed time selection was made in the query string"); console.warn("An incorrect or malformed time selection was made in the query string");
} }
} }
@@ -278,10 +322,20 @@ function detectAggregateQuery(urlSearchParams) {
} }
aggregateFunctionToggle(); aggregateFunctionToggle();
} else { } else {
console.log("An incorrect or malformed aggregate selection was made in the query string"); console.warn("An incorrect or malformed aggregate selection was made in the query string");
} }
} }
function detectZeroQuery(urlSearchParams) {
startYAtZero = urlSearchParams.get('startAtZero') === 'true';
let advOptions = document.getElementById('enable-advanced');
let startAtZeroOption = document.getElementById('y-start');
advOptions.checked = startYAtZero;
startAtZeroOption.checked = startYAtZero;
toggleAdvancedSetting();
toggleStartYAtZero();
}
function detectURLQuery() { function detectURLQuery() {
const urlSearchParams = new URLSearchParams(window.location.search); const urlSearchParams = new URLSearchParams(window.location.search);
if (urlSearchParams.has('region')) { if (urlSearchParams.has('region')) {
@@ -293,10 +347,13 @@ function detectURLQuery() {
if (urlSearchParams.has('aggregate')) { if (urlSearchParams.has('aggregate')) {
detectAggregateQuery(urlSearchParams); detectAggregateQuery(urlSearchParams);
} }
if (urlSearchParams.has('startAtZero')) {
detectZeroQuery(urlSearchParams)
}
} }
function buildDeepLinksURL() { function buildDeepLinksURL() {
let url = "https://classic.wowtoken.app/?" let url = "https://wowtoken.app/?"
if (currentTimeSelection !== '72h'){ if (currentTimeSelection !== '72h'){
url += `time=${currentTimeSelection}&` url += `time=${currentTimeSelection}&`
} }
@@ -304,7 +361,10 @@ function buildDeepLinksURL() {
url += `region=${currentRegionSelection}&` url += `region=${currentRegionSelection}&`
} }
if (currentAggregateSelection !== '' && currentAggregateSelection !== 'none'){ if (currentAggregateSelection !== '' && currentAggregateSelection !== 'none'){
url += `aggregate=${currentAggregateSelection}` url += `aggregate=${currentAggregateSelection}&`
}
if (startYAtZero !== false){
url += `startAtZero=${startYAtZero}&`
} }
return url return url
} }
@@ -336,6 +396,9 @@ function registerAdvancedHandlers() {
document.getElementById('enable-advanced').addEventListener('change', () => { document.getElementById('enable-advanced').addEventListener('change', () => {
toggleAdvancedSetting(); toggleAdvancedSetting();
}) })
document.getElementById('y-start').addEventListener('change', () => {
toggleStartYAtZero();
})
} }
function registerCopyHandlers() { function registerCopyHandlers() {

18
src/style.css
View File

@@ -173,8 +173,8 @@ h6 {
font-weight: 700; font-weight: 700;
} }
html { html {
background-color: #6b4233; background-color: #073642;
color: #b7b7b7; color: #839496;
margin: 1em; margin: 1em;
} }
/*body { /*body {
@@ -194,7 +194,7 @@ a:hover {
color: #cb4b16; color: #cb4b16;
} }
h1 { h1 {
color: #ffd5e9; color: #d33682;
} }
h2, h2,
h3, h3,
@@ -206,7 +206,7 @@ h6 {
pre { pre {
background-color: #002b36; background-color: #002b36;
color: #839496; color: #839496;
border: 1pt solid #000000; border: 1pt solid #586e75;
padding: 1em; padding: 1em;
box-shadow: 5pt 5pt 8pt #073642; box-shadow: 5pt 5pt 8pt #073642;
} }
@@ -301,10 +301,10 @@ h6 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
background-color: #2f201e; background-color: #002b36;
margin: 0 auto; margin: 0 auto;
max-width: 85%; max-width: 85%;
border: 1pt solid #000000; border: 1pt solid #586e75;
padding: 1em; padding: 1em;
} }
@@ -341,8 +341,8 @@ p {
} }
details { details {
background-color: #6b4233; background-color: #073642;
border: 1px solid #000000; border: 1px solid #aaa;
border-radius: 4px; border-radius: 4px;
padding: 0.5em 0.5em 0; padding: 0.5em 0.5em 0;
font-size: 17px; font-size: 17px;
@@ -363,7 +363,7 @@ details[open] {
} }
details[open] summary { details[open] summary {
border-bottom: 1px solid #000000; border-bottom: 1px solid #aaa;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }