<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>

        <title>What's New - Sauce for Zwiftâ„¢</title>

        <link rel="preload" href="fonts/Saira.woff2?v=1" as="font" type="font/woff2"/>
        <link id="favicon" rel="shortcut icon" href="images/favicon.png"/>
        <link rel="stylesheet" href="css/common.css"/>

        <style>
            html {
                padding: 0;
                font-size: 15px;
            }

            html:not(.updated) .update-only {
                display: none;
            }

            html:not(.has-notes) .notes-only {
                display: none;
            }

            html.updated .not-update {
                display: none;
            }

            a {
                text-decoration: underline;
                font-weight: 450;
            }

            html body {
                border-radius: 0;
                padding: 2em;
                display: flex;
                align-items: center;
                flex-direction: column;
                overflow: auto;
                overflow: overlay;
            }

            img.logo {
                height: 120px;
                transform: rotate(-20deg);
                margin-right: 2em;
            }

            body > header {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            body > main {
                display: flex;
                justify-content: center;
                flex-direction: column;
                max-width: 600px;
                margin-bottom: 4em;
            }

            header h1 {
                font-size: 2em;
            }

            h4, h5 {
                margin-top: 1em;
                margin-bottom: 0.5em;
            }

            section.notes header {
                font-size: 1.4em;
                font-variant-numeric: tabular-nums;
                font-weight: 700;
                color: ##e0e0e0;
                text-shadow:
                    0 0 1px #000,
                    0 0 1px #000,
                    0 0 1px #000;
                display: flex;
                justify-content: space-between;
            }

            release {
                display: block;
                border-bottom: 1px solid #fff2;
                margin-bottom: 1em;
                padding-bottom: 0.2em;
            }

            ul.notes {
                padding-inline-start: 2em;
            }

            ul > li {
                padding: 0.28em 0.28em 0.1em 0;
            }

            ul > ul {
                background: #0001;
                border-radius: 0.28em;
                padding-top: 0.2em;
                padding-bottom: 0.4em;
                padding-inline-start: 2em;
            }

            ul > ul > li {
                font-size: 0.92em;
            }

            .dismiss-wrap {
                padding: 1em;
                display: flex;
                justify-content: center;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                background: #0007;
            }

            .close.button {
                font-size: 1.2em;
            }

            body > header .version {
                text-shadow:
                    0 0 1px #000,
                    0 0 1px #000,
                    0 0 1px #000,
                    0 0 1px #000;
                border-bottom: 1px solid #fff8;
            }

            code {
                font-size: 0.9em;
                background: #0003;
                border-radius: 0.28em;
                padding: 0.2em 0.4em;
            }
        </style>

        <script type="module">
            import * as common from './src/common.mjs';

            const notesPromise = fetch('https://www.sauce.llc/products/sauce4zwift/release_notes.json')
                .then(r => r.json());


            function stripAlpha(v) {
                return v.replace(/-.*$/, '');
            }


            function fakeSHU(version) {
                return Number(stripAlpha(version).split('.').map(x => x.padStart(2, '0')).join('')).toLocaleString();
            }


            function notesToHTML(notes) {
                const html = [];
                for (const x of notes) {
                    if (typeof x === 'string') {
                        html.push(`<li>${x}</li>`);
                    } else {
                        html.push(`<li>${x.html}</li>`);
                        if (x.children && x.children.length) {
                            html.push(`<ul>${notesToHTML(x.children)}</ul>`);
                        }
                    }
                }
                return html.join('');
            }


            function bigIntVersion(v) {
                const ints = stripAlpha(v).split('.').map(BigInt);
                if (ints.length > 4) {
                    throw new TypeError("Invalid version format: " + v);
                }
                let n = BigInt(0);
                const bits = 10;  // 1024 max revisions for each.
                for (let i = 0; i < ints.length; i++) {
                    const x = ints[i];
                    if (x > 1 << bits) {
                        throw new TypeError("Invalid version element: " + x);
                    }
                    n |= ints[i] << BigInt((3 - i) * bits);
                }
                return n;
            }


            async function main() {
                document.querySelector('.close.button').addEventListener('click',
                    () => common.rpc.closeWindow());
                const [lastVersion, version] = await Promise.all([
                    common.rpc.getSetting('lastVersion'),
                    common.rpc.getVersion(),
                ]);
                const updated = lastVersion !== version;
                if (updated) {
                    document.querySelectorAll('.from-version').forEach(x => x.textContent = 'v' + lastVersion);
                    document.querySelectorAll('.version').forEach(x => x.textContent = 'v' + version);
                    document.documentElement.classList.add('updated');
                }
                let notes = await notesPromise;
                if (updated) {
                    const prevBigVer = bigIntVersion(lastVersion);
                    notes = notes.filter(x => !x.private && bigIntVersion(x.version) > prevBigVer);
                }
                if (notes.length) {
                    document.documentElement.classList.add('has-notes');
                    const frag = document.createDocumentFragment();
                    for (const x of notes.reverse()) {
                        if (x.private) {
                            continue;
                        }
                        const release = document.createElement('release');
                        release.id = x.version;
                        release.innerHTML = `
                            <header>
                                <div class="version">v${x.version}</div>
                                <div class="date">${new Date(x.ts).toLocaleDateString()}</div>
                            </header>
                            <ul class="notes">${notesToHTML(x.notes)}</ul>
                        `;
                        frag.appendChild(release);
                    }
                    document.querySelector('section.notes').appendChild(frag);
                }
            }
            main();
        </script>
    </head>

    <body>
        <header>
            <img class="logo" src="images/logo_vert_120x320.png"/>
            <div>
                <h2 class="update-only">Sauce Updated to: <span class="version"></span>!</h2>
                <div class="update-only">Updated from: <span class="from-version"></span></div>
                <h1 class="not-update">Release Notes</h1>
            </div>
        </header>
        <main>
            <h3 class="notes-only">What's New...</h3>
            <section class="notes notes-only"></section>
            <div class="dismiss-wrap electron-only">
                <div class="std button close">Dismiss</div>
            </div>
        </main>
    </body>
</html>
