Update bot project name to be a little less generic

Link to the new TokenBot project
Add option to generate overlay URL
2024-12-09 19:27:04 -08:00 · 2024-12-08 20:20:40 -08:00 · 2024-11-16 17:53:57 -08:00 · 2024-11-16 17:53:14 -08:00 · 2024-11-03 23:22:01 -08:00 · 2024-11-03 22:54:23 -08:00
11 changed files with 688 additions and 490 deletions
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@

 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 CodePipeline, built via CodeBuild, and deployed.
+This project gets picked up by CodePipeline, built via CodeBuild, and to S3.
+
+Backend lambdas can be found at my private git repository [wowtoken.app-backend](https://git.emily.sh/wowtoken-app/wowtoken.app-backend)

 ![Build Status](https://codebuild.us-east-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiblpRUnlNUzVmNU9sK1VBRVl1bVI1U1ZrWHJFSDVPYjFpTC9WVzZuSk1hd0lsUU5NekdDZTl4M2t4Uy9EWFdaY3JSNU1mYTFtaVI0VXN6ZGQvNE9BUWpvPSIsIml2UGFyYW1ldGVyU3BlYyI6InZNcHhHanNTODQ0b2lwbkkiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=main)
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -15,9 +15,9 @@
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
-    "chart.js": "^4.4.0",
-    "chartjs-adapter-dayjs-3": "^1.2.3",
-    "css-minimizer-webpack-plugin": "^5.0.0",
-    "dayjs": "^1.11.7"
+    "chart.js": "^4.4.5",
+    "chartjs-adapter-dayjs-4": "^1.0.4",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "dayjs": "^1.11.13"
  }
 }
--- a/src/fetchCurrent.js
+++ b/src/fetchCurrent.js
@@ -1,4 +1,4 @@
 export default async function fetchCurrent() {
-    const resp = await fetch("https://data.wowtoken.app/token/current.json");
+    const resp = await fetch("https://data.wowtoken.app/v2/current/retail.json");
    return await resp.json();
 }
--- a/src/fetchData.js
+++ b/src/fetchData.js
@@ -6,7 +6,7 @@ export default async function fetchData(currentRegionSelection, currentTimeSelec
    const resp = await fetch(urlBuilder(currentRegionSelection, currentTimeSelection, currentAggregateSelection));
    const respData = await resp.json();
    for (let i = 0, l = respData.length; i < l; i++) {
-        let datum = new Datum(Date.parse(respData[i]['time']), respData[i]['value']);
+        const datum = new Datum(new Date(respData[i][0]), respData[i][1]);
        data.push(datum);
    }
    return data;
--- a/src/index.html
+++ b/src/index.html
@@ -7,16 +7,16 @@
        <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="dns-prefetch" href="https://data.wowtoken.app">
-        <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/token/history/us/72h.json" as="fetch" type="application/json" crossorigin="anonymous">
+        <link rel="preload" href="https://data.wowtoken.app/v2/current/retail.json" as="fetch" type="application/json" crossorigin="anonymous">
+        <link rel="preload" href="https://data.wowtoken.app/v2/relative/retail/us/72h.json" as="fetch" type="application/json" crossorigin="anonymous">
    </head>
    <body>
        <div class="flex-container">
            <div class="data-header">
                <h1>1 Token = <u id="token">0</u> Gold</h1>
                <div class="high-low">
-                    <p>Highest in last <em id="high-time">3 days</em>: <u id="high-val">0</u></p>
                    <p>Lowest in last <em id="low-time">3 days</em>: <u id="low-val">0</u></p>
+                    <p>Highest in last <em id="high-time">3 days</em>: <u id="high-val">0</u></p>
                </div>
            </div>
            <div id="chart-frame">
@@ -59,9 +59,15 @@
                            <label for="aggregate">Smoothing Function:</label>
                            <select name="aggregate" id="aggregate">
                                <option id='agg_none' value="none">None</option>
-                                <option id='agg_davg' value="daily_mean">Daily Average</option>
+                                <option id='agg_davg' value="avg">Daily Average</option>
                            </select>
                        </fieldset>
+                        <fieldset id="period-overlay-options">
+                            <label for="period-overlay" id="period-overlay-label">
+                                Overlay previous <em id="period-time">0 hours</em> on current period:
+                            </label>
+                            <input type="checkbox" id="period-overlay" name="period-overlay">
+                        </fieldset>
                        <fieldset id="y-start-options">
                            <label for="y-start">Start y-axis at 0:</label>
                            <input type="checkbox" id="y-start" name="y-start"/>
@@ -74,7 +80,11 @@
                            Copy URL to this Chart
                        </button>
                    </div>
-                    <div>
+                    <div class="other-projects">
+                        <p><em>
+                            Get alerted when the Token hits certain thresholds using GoblinBot, find out more <a href="https://blog.emily.sh/token-bot/">here!</a>
+                        </em></p>
+                        <hr />
                        <p><em>Looking for the classic WoW Token price? Find it <a href="https://classic.wowtoken.app">here!</a></em></p>
                    </div>
                </div>
--- a/src/index.js
+++ b/src/index.js
@@ -1,15 +1,4 @@
-import {
-    Chart,
-    Legend,
-    LinearScale,
-    LineController,
-    LineElement,
-    PointElement,
-    TimeSeriesScale,
-    Title,
-    Tooltip
-} from 'chart.js';
-import 'chartjs-adapter-dayjs-3';
+import 'chartjs-adapter-dayjs-4';
 import "./style.css"

 import fetchCurrent from "./fetchCurrent";
@@ -17,6 +6,7 @@ import fetchData from "./fetchData";
 import {updateHighTime} from "./highTime";
 import {updateLowTime} from "./lowTime";
 import {addLoader, removeLoader} from "./loader";
+import {allowOverlay, forceOverlayOff, forceOverlayOn, isOverlayAllowed, isOverlaySelected} from "./overlay";
 import TokenChart from "./tokenChart";
 import Datum from "./datum";

@@ -26,6 +16,7 @@ let currentRegionSelection = '';
 let currentTimeSelection = '';
 let currentAggregateSelection = '';
 let startYAtZero = false;
+let datum;
 let chart;
 const currentPriceHash = {
    us: 0,
@@ -54,11 +45,11 @@ async function updateTokens(data) {
 }

 async function updateRegionalToken(region, data) {
-    if (currentPriceHash[region] !== data['price_data'][region]) {
-        currentPriceHash[region] = data['price_data'][region];
+    if (currentPriceHash[region] !== data[region][1]) {
+        currentPriceHash[region] = data[region][1];
        if (region === currentRegionSelection) {
            formatToken();
-            const datum = new Datum(Date.parse(data['current_time']), data['price_data'][region]);
+            datum = new Datum(Date.parse(data[region][0]), data[region][1]);
            if (currentAggregateSelection === 'none' && chart.active()) {
                await chart.addDataToChart(datum);
            }
@@ -69,25 +60,6 @@ async function updateRegionalToken(region, data) {
    }
 }

-async function aggregateFunctionToggle() {
-    // TODO: We should probably make these global or something
-    //  so if the need to be updated in the future we can do so easily
-    const smallTimes = ['72h', '168h', '336h'];
-    const longTimes = ['720h', '30d', '2190h', '90d', '1y', '2y', '6m', 'all'];
-    const idsToModify = ['agg_wavg']
-    if (smallTimes.includes(currentTimeSelection)) {
-        for (const id of idsToModify) {
-            let ele = document.getElementById(id);
-            ele.disabled = true;
-        }
-    } else if (longTimes.includes(currentTimeSelection)) {
-        for (const id of idsToModify) {
-            let ele = document.getElementById(id);
-            ele.disabled = false;
-        }
-    }
-}
-
 async function updateRegionPreference(newRegion) {
    if (newRegion !== currentRegionSelection) {
        await chart.destroyChart();
@@ -95,7 +67,6 @@ async function updateRegionPreference(newRegion) {
        currentRegionSelection = newRegion;
    }
    formatToken();
-    chart = new TokenChart();
    await pullChartData();
 }

@@ -104,9 +75,13 @@ async function updateTimePreference(newTime) {
        await chart.destroyChart();
        addLoader();
        currentTimeSelection = newTime;
-        await aggregateFunctionToggle();
    }
-    chart = new TokenChart();
+    if (newTime === "all") {
+        forceOverlayOff();
+    }
+    else {
+        allowOverlay();
+    }
    await pullChartData();
    updateHighTime();
    updateLowTime();
@@ -118,7 +93,6 @@ async function updateAggregatePreference(newAggregate) {
        addLoader();
        currentAggregateSelection = newAggregate;
    }
-    chart = new TokenChart();
    await pullChartData();
 }

@@ -139,16 +113,28 @@ function toggleStartYAtZero(){
    chart.toggleYStart(startYAtZero);
 }

+async function toggleOverlay() {
+    await chart.destroyChart();
+    addLoader();
+    await pullChartData();
+}
+
 async function pullChartData() {
-    chartData[currentRegionSelection] = await fetchData(currentRegionSelection, currentTimeSelection, currentAggregateSelection);
+    let timeSelection = currentTimeSelection;
+    if (isOverlaySelected()) {
+        let timeDigits = parseInt(timeSelection.slice(0, timeSelection.length - 1)) * 2;
+        let timeUnit = timeSelection.slice(timeSelection.length - 1);
+        timeSelection = `${timeDigits}${timeUnit}`;
+    }
+    chartData[currentRegionSelection] = await fetchData(currentRegionSelection, timeSelection, currentAggregateSelection);
    if (!chart.active()) {
        await chart.createChart(currentRegionSelection, currentTimeSelection, startYAtZero, chartData[currentRegionSelection]);
    }
    else {
        for (let i = 0; i < chartData[currentRegionSelection].length; i++) {
            await chart.addDataToChart(chartData[currentRegionSelection][i]);
-            console.warn("This should never hit, and should be okay to remove");
        }
+        console.warn("This should never hit, and should be okay to remove");
    }
    removeLoader();
 }
@@ -181,6 +167,9 @@ function detectTimeQuery(urlSearchParams) {
    const validTimes = ['72h', '168h', '336h', '720h', '30d', '2190h', '90d', '1y', '2y', '6m', 'all'];
    if (validTimes.includes(urlSearchParams.get('time').toLowerCase())) {
        currentTimeSelection = urlSearchParams.get('time').toLowerCase();
+        if (currentTimeSelection === 'all') {
+            forceOverlayOff();
+        }
        let timeDDL = document.getElementById('time');
        for (let i = 0; i < timeDDL.options.length; i++) {
            if (timeDDL.options[i].value === currentTimeSelection) {
@@ -195,16 +184,19 @@ function detectTimeQuery(urlSearchParams) {
 }

 function detectAggregateQuery(urlSearchParams) {
-    const validOperations = ['none', 'daily_mean', 'weekly_mean'];
+    const validOperations = ['none', 'daily_mean', 'avg'];
    if (validOperations.includes(urlSearchParams.get('aggregate').toLowerCase())) {
        currentAggregateSelection = urlSearchParams.get('aggregate').toLowerCase();
+        // For backwards compatibility
+        if (currentAggregateSelection === 'daily_mean') {
+            currentAggregateSelection = 'avg';
+        }
        let aggregateDDL = document.getElementById('aggregate');
        for (let i = 0; i < aggregateDDL.options.length; i++) {
            if (aggregateDDL.options[i].value === currentAggregateSelection) {
                aggregateDDL.options[i].selected = true;
            }
        }
-        aggregateFunctionToggle();
    } else {
        console.warn("An incorrect or malformed aggregate selection was made in the query string");
    }
@@ -220,6 +212,15 @@ function detectZeroQuery(urlSearchParams) {
    toggleStartYAtZero();
 }

+function detectOverlayQuery(urlSearchParams) {
+    const enableOverlay = urlSearchParams.get('overlay') === 'previous_time';
+    if (enableOverlay) {
+        forceOverlayOn();
+    } else {
+        forceOverlayOff();
+    }
+}
+
 function detectURLQuery() {
    const urlSearchParams = new URLSearchParams(window.location.search);
    if (urlSearchParams.has('region')) {
@@ -234,6 +235,9 @@ function detectURLQuery() {
    if (urlSearchParams.has('startAtZero')) {
        detectZeroQuery(urlSearchParams)
    }
+    if (urlSearchParams.has('overlay')) {
+        detectOverlayQuery(urlSearchParams);
+    }
 }

 function buildDeepLinksURL() {
@@ -250,6 +254,9 @@ function buildDeepLinksURL() {
    if (startYAtZero !== false){
        url += `startAtZero=${startYAtZero}&`
    }
+    if (isOverlaySelected()){
+        url += `overlay=previous_time&`
+    }
    return url
 }

@@ -276,6 +283,8 @@ function registerEventHandles() {
    registerAdvancedHandlers();
 }

+// TODO: These need to be moved out into probably tokenChart if not other files
+
 function registerAdvancedHandlers() {
    document.getElementById('enable-advanced').addEventListener('change', () => {
        toggleAdvancedSetting();
@@ -283,6 +292,9 @@ function registerAdvancedHandlers() {
    document.getElementById('y-start').addEventListener('change', () => {
        toggleStartYAtZero();
    })
+    document.getElementById('period-overlay').addEventListener('change', () => {
+        toggleOverlay();
+    })
 }

 function registerCopyHandlers() {
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -0,0 +1,40 @@
+function isOverlaySelected() {
+    return document.getElementById('period-overlay').checked;
+}
+
+function getOverlayTime() {
+    return document.getElementById("time").selectedOptions[0].innerText;
+}
+
+function setOverlayLabelTime() {
+    const currentTime = document.getElementById("time").selectedOptions[0].innerText;
+    let overlayTimeLabel = document.getElementById("period-time");
+    overlayTimeLabel.innerText = currentTime.toLocaleString();
+}
+
+function forceOverlayOff(){
+    const overlaySetting = document.getElementById("period-overlay");
+    const periodOverlayField = document.getElementById("period-overlay-options");
+    overlaySetting.checked = false;
+    periodOverlayField.style.display = 'none';
+}
+
+function forceOverlayOn(){
+    const overlaySetting = document.getElementById("period-overlay");
+    const periodOverlayField = document.getElementById("period-overlay-options");
+    const advancedOptionsField = document.getElementById("advanced-options");
+    overlaySetting.checked = true;
+    advancedOptionsField.style.display = 'flex';
+    periodOverlayField.style.display = 'flex';
+}
+
+function isOverlayAllowed(timeSelection) {
+    return !(timeSelection === "all")
+}
+
+function allowOverlay(){
+    const periodOverlayField = document.getElementById("period-overlay-options");
+    periodOverlayField.style.display = 'flex';
+}
+
+export {isOverlaySelected, getOverlayTime, setOverlayLabelTime, forceOverlayOff, forceOverlayOn, isOverlayAllowed, allowOverlay};
--- a/src/style.css
+++ b/src/style.css
@@ -420,6 +420,16 @@ details[open] summary {
    margin: 10px;
 }

+.other-projects {
+    border: 1px solid silver;
+    margin-bottom: 10px;
+    font-size: 15px;
+}
+
+.other-projects > p {
+    line-height: 1em;
+}
+
 .data-header h1 {
    margin-top: 24px;
    margin-bottom: 24px;
--- a/src/tokenChart.js
+++ b/src/tokenChart.js
@@ -9,7 +9,7 @@ import {
    Title,
    Tooltip
 } from 'chart.js';
-import 'chartjs-adapter-dayjs-3';
+import 'chartjs-adapter-dayjs-4';

 Chart.register(
    LineElement,
@@ -24,6 +24,8 @@ Chart.register(

 import {updateHighVal} from "./highTime";
 import {updateLowVal} from "./lowTime";
+import {isOverlaySelected, getOverlayTime, setOverlayLabelTime} from "./overlay";
+import Datum from "./datum";

 function lookupTimeUnit(query){
    const lookup = {
@@ -36,6 +38,24 @@ function lookupTimeUnit(query){
    return lookup[query.charAt(query.length - 1)]
 }

+function timeDeltaInMilliseconds(time) {
+    let timeDigits = (parseInt(time.slice(0, time.length - 1))).toFixed(0);
+    let timeUnit = time.slice(time.length - 1);
+
+    switch (timeUnit) {
+        case 'h':
+            return timeDigits * (60 * 60) * 1000;
+        case 'd':
+            return timeDigits * (24 * 60 * 60) * 1000;
+        case 'm':
+            return (timeDigits * (30.437 * 24 * 60 * 60)).toFixed(0) * 1000;
+        case 'y':
+            return (timeDigits * (365.25 * 24 * 60 * 60)).toFixed(0) * 1000;
+        case 'l':
+            console.warn("This path should not happen, this warning is an error in logic")
+    }
+}
+
 export default class TokenChart {
    constructor() {
        this._context = document.getElementById("token-chart").getContext('2d');
@@ -54,19 +74,116 @@ export default class TokenChart {
        return this._lowDatum;
    }

-    async createChart(region, time, yLevel, data) {
+    async #newChart(chartConfig) {
+        this._chart = new Chart(this._context, chartConfig);
+    }
+
+    async #updateHighLow(datum) {
+        if (this._highDatum === null) {
+            this._highDatum = new Datum(datum.getTime(), 0);
+            this._lowDatum = datum;
+            return;
+        }
+        if (datum.getPrice() > this._highDatum.getPrice()) {
+            this._highDatum = datum;
+            updateHighVal(this.highDatum);
+        }
+        else if (datum.getPrice() < this._lowDatum.getPrice()) {
+            this._lowDatum = datum;
+            updateLowVal(this.lowDatum);
+        }
+    }
+
+    async #createOverlayChart(region, time, yLevel, data){
        const chartData = [];
-        let lateUpdateData = this._lastDatum;
+        const overlayData = [];
+        const overlayDelta = timeDeltaInMilliseconds(time);
+
+        for (let i = 0; i < data.length; i++) {
+            const originalDate = data[i].getX();
+            if (i < (data.length / 2)) {
+                overlayData.push({
+                    x: new Date(originalDate.getTime() + overlayDelta),
+                    y: data[i].getY(),
+                });
+            }
+            else {
+                await this.#updateHighLow(data[i]);
+
+                chartData.push({
+                    x: data[i].getX(),
+                    y: data[i].getY(),
+                })
+            }
+        }
+
+        const chartConfig = {
+            type: 'line',
+            data: {
+                datasets: [
+                    {
+                        borderColor: 'gold',
+                        label: region.toUpperCase() + " WoW Token Price",
+                        data: chartData,
+                        cubicInterpolationMode: 'monotone',
+                        pointRadius: 0
+                    },
+                    {
+                        borderColor: 'red',
+                        label: `Previous ${getOverlayTime()} ${region.toUpperCase()} WoW Token Price`,
+                        data: overlayData,
+                        cubicInterpolationMode: 'monotone',
+                        pointRadius: 0
+                    }
+                ]
+            },
+            options: {
+                interaction: {
+                    intersect: false,
+                    mode: "index"
+                },
+                scales: {
+                    x: {
+                        type: 'time',
+                        grid: {
+                            color: '#625f62',
+                        },
+                        ticks: {
+                            color: '#a7a4ab',
+                            font: {
+                                size: 18,
+                            }
+                        },
+                        time: {
+                            unit: lookupTimeUnit(time)
+                        }
+                    },
+                    y: {
+                        beginAtZero: yLevel,
+                        grid: {
+                            color: '#2f2c2f',
+                        },
+                        ticks: {
+                            color: '#a7a4ab',
+                            font: {
+                                size: 18,
+                            }
+                        }
+                    }
+                },
+            }
+        }
+
+        await this.#newChart(chartConfig)
+    }
+
+    async #createNormalChart(region, time, yLevel, data) {
+        const chartData = [];
+

        for (let i = 0; i < data.length; i++) {
            this._lastDatum = data[i];
-            if (this._highDatum === null || this._lastDatum.getPrice() > this._highDatum.getPrice()) {
-                this._highDatum = data[i];
-            }
-
-            if (this._lowDatum === null || this._lowDatum.getPrice() > this._lastDatum.getPrice()) {
-                this._lowDatum = data[i];
-            }
+            await this.#updateHighLow(data[i]);

            chartData.push({
                x: data[i].getX(),
@@ -74,10 +191,7 @@ export default class TokenChart {
            })
        }

-        updateHighVal(this.highDatum);
-        updateLowVal(this.lowDatum);
-
-        this._chart = new Chart(this._context, {
+        const chartConfig = {
            type: 'line',
            data: {
                datasets: [{
@@ -123,7 +237,25 @@ export default class TokenChart {
                    }
                },
            }
-        });
+        }
+
+        await this.#newChart(chartConfig)
+    }
+
+    async createChart(region, time, yLevel, data) {
+        let lateUpdateData = this._lastDatum;
+
+        if (isOverlaySelected()) {
+            await this.#createOverlayChart(region, time, yLevel, data)
+        }
+        else {
+            await this.#createNormalChart(region, time, yLevel, data)
+        }
+
+        setOverlayLabelTime();
+
+        updateHighVal(this.highDatum);
+        updateLowVal(this.lowDatum);

        if (this._lateUpdate) {
            if (this._lastDatum.getPrice() !== lateUpdateData.getPrice() &&
@@ -160,11 +292,9 @@ export default class TokenChart {
            this._lowDatum = datum;
            updateLowVal(this.lowDatum);
        }
-        this._chart.data.datasets.forEach((dataset) => {
-            dataset.data.push({
+        this._chart.data.datasets[0].data.push({
            x: datum.getX(),
            y: datum.getY(),
-            })
        });
        this._chart.update();
    }
--- a/src/urlBuilder.js
+++ b/src/urlBuilder.js
@@ -1,8 +1,12 @@
 export default function urlBuilder(currentRegionSelection, currentTimeSelection, currentAggregateSelection) {
-    let url = "https://data.wowtoken.app/token/history/";
-    if (currentAggregateSelection !== 'none') {
-        url += `${currentAggregateSelection}/`
+    let url = "https://data.wowtoken.app/v2/";
+    if (currentAggregateSelection !== '' && currentAggregateSelection !== 'none'){
+        url += `math/${currentAggregateSelection}/retail/`
    }
-    url += `${currentRegionSelection}/${currentTimeSelection}.json`
+    else {
+        url += `relative/retail/`
+    }
+
+    url += `${currentRegionSelection}/${currentTimeSelection}.json`;
    return url;
 }
Author	SHA1	Message	Date
Emily Doherty	24d424bd90	Update bot project name to be a little less generic	2024-12-09 19:27:04 -08:00
Emily Doherty	1345b984d4	Link to the new TokenBot project	2024-12-08 20:20:40 -08:00
Emily Doherty	14b80dfea6	Add option to generate overlay URL This is going to be expanded upon in future releases, for now it's hardcoded to use just the previous time overlay	2024-11-16 17:53:57 -08:00
Emily Doherty	24928c10fa	Fix live token price updates	2024-11-16 17:53:14 -08:00
Emily Doherty	df7e5c0e97	Update README to link to backend lambda src	2024-11-03 23:22:01 -08:00
Emily Doherty	d25334d35f	Initial implementation of overlay functionality	2024-11-03 22:54:23 -08:00
Emily Doherty	8c8499fb1c	Add backwards compatibility for average changes	2024-11-03 16:29:31 -08:00
Emily Doherty	0180e8a3b5	Swap to v2 of the historical api	2024-11-01 00:09:19 -07:00
Emily Doherty	fa058cc64e	Swap to v2 of current API	2024-10-31 22:35:11 -07:00
Emily Doherty	ef95388185	Fix live prices being added to the chart with incorrect price	2024-10-24 18:09:21 -07:00
Emily Doherty	ad069cb7bf	Dependency updates	2024-10-17 00:27:35 -07:00
Emily Doherty	367b767f52	Remove unused aggregate function toggle	2024-10-17 00:05:37 -07:00
Emily Doherty	c9e14e265f	Flip high and low sections This is more in line with how English reads, left to right, low to high	2024-10-16 23:58:16 -07:00