├── .npmrc
├── src
    ├── routes
    │   ├── __layout.svelte
    │   └── index.svelte
    ├── app.scss
    ├── app.html
    ├── stores
    │   ├── params.js
    │   ├── clock.js
    │   └── data.js
    ├── utils
    │   ├── geometry.js
    │   ├── format.js
    │   ├── actions.js
    │   ├── math.js
    │   └── webgl.js
    ├── lib
    │   ├── animation
    │   │   ├── Background.svelte
    │   │   ├── Athlete.svelte
    │   │   ├── Animation.svelte
    │   │   ├── SpeedskatingArena.svelte
    │   │   ├── IntermediateDisplay.svelte
    │   │   ├── Athletes.svelte
    │   │   └── Track.svelte
    │   ├── sources
    │   │   └── Sources.svelte
    │   ├── utils
    │   │   ├── TextAlignEmbed.svelte
    │   │   ├── Sizer.svelte
    │   │   └── SizeDetector.svelte
    │   ├── controls
    │   │   ├── TimeDisplay.svelte
    │   │   ├── PlayButton.svelte
    │   │   ├── ProgressBar.svelte
    │   │   └── Controls.svelte
    │   ├── overlay
    │   │   ├── NumberSwitcher.svelte
    │   │   ├── Countdown.svelte
    │   │   ├── Overlay.svelte
    │   │   └── Results.svelte
    │   └── header
    │   │   └── Header.svelte
    └── variables.scss
├── static
    ├── favicon.png
    ├── preview.png
    └── config.json
├── .gitignore
├── .prettierrc
├── .eslintrc.cjs
├── jsconfig.json
├── svelte.config.js
├── package.json
├── README.md
└── LICENSE


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/src/routes/__layout.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | 	import '../app.scss';
3 | </script>
4 | 
5 | <slot />
6 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spiegelgraphics/speedskating/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/static/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spiegelgraphics/speedskating/HEAD/static/preview.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | .env
7 | .env.*
8 | !.env.example
9 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"useTabs": true,
3 | 	"singleQuote": true,
4 | 	"trailingComma": "none",
5 | 	"printWidth": 100
6 | }
7 | 


--------------------------------------------------------------------------------
/src/app.scss:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | html, body {
 8 |     font-family: Arial, sans-serif;
 9 |     font-size: 16px;
10 | }


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	extends: ['eslint:recommended', 'prettier'],
 4 | 	plugins: ['svelte3'],
 5 | 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 6 | 	parserOptions: {
 7 | 		sourceType: 'module',
 8 | 		ecmaVersion: 2020
 9 | 	},
10 | 	env: {
11 | 		browser: true,
12 | 		es2017: true,
13 | 		node: true
14 | 	}
15 | };
16 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"baseUrl": ".",
 4 | 		"paths": {
 5 | 			"$lib": ["src/lib"],
 6 | 			"$lib/*": ["src/lib/*"],
 7 | 			"$utils": ["src/utils"],
 8 | 			"$utils/*": ["src/utils/*"],
 9 | 			"$stores": ["src/stores"],
10 | 			"$stores/*": ["src/stores/*"]
11 | 		}
12 | 	},
13 | 	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<meta name="description" content="" />
 6 | 		<link rel="icon" href="%svelte.assets%/favicon.png" />
 7 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 8 | 		%svelte.head%
 9 | 	</head>
10 | 	<body>
11 | 		<div>%svelte.body%</div>
12 | 	</body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/stores/params.js:
--------------------------------------------------------------------------------
 1 | import { readable } from 'svelte/store';
 2 | 
 3 | const defaultParams = {
 4 |     config_path: 'config.json',
 5 |     min_height: 320,
 6 |     max_height: 500,
 7 |     left_right_padding: 0,
 8 |     text_align_disabled: true,
 9 |     intermediate_times: false,
10 |     debug: false
11 | };
12 | 
13 | export const params = readable(defaultParams, set => {
14 |     // here we usually inject parameters from the CMS
15 |     const completeParams = {
16 |         ...defaultParams
17 |         // CMS parameters
18 |     };
19 |     set(completeParams);
20 | });


--------------------------------------------------------------------------------
/src/utils/geometry.js:
--------------------------------------------------------------------------------
 1 | const pathToArray = path => path.split(/(?=[a-zA-Z])/g);
 2 | 
 3 | const stripFirstPathOperation = path => {
 4 |     const arr = pathToArray(path);
 5 |     return arr.slice(1).join('');
 6 | };
 7 | 
 8 | export const fusePaths = (paths) => {
 9 |     if (!paths && !paths.length) return null;
10 | 
11 |     const start = paths[0];
12 |     const others = paths
13 |         .slice(1)
14 |         .map(d => stripFirstPathOperation(d));
15 | 
16 |     const fused = [start, ...others].reduce((acc, cur) => `${acc}${cur}`, '');
17 | 
18 |     return fused;
19 | };
20 | 
21 | export const getDistance = ({ x: x1 = 0, y: y1 = 0 }, { x: x2 = 0, y: y2 = 0 }) => {
22 |     return Math.hypot(x2 - x1, y2 - y1);
23 | };


--------------------------------------------------------------------------------
/src/lib/animation/Background.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Animation background selector
 3 |     import SpeedskatingArena from '$lib/animation/SpeedskatingArena.svelte';
 4 | 
 5 |     export let type;
 6 |     export let width;
 7 |     export let height;
 8 | </script>
 9 | 
10 | <div
11 |     class="background"
12 |     style="width: {width}px;
13 |            height: {height}px;"
14 | >
15 |     {#if (type === 'speedskating')}
16 |         <SpeedskatingArena />
17 |     {/if}
18 | </div>
19 | 
20 | <style lang="scss">
21 |     .background {
22 |         position: absolute;
23 |         top: 0;
24 |         right: 0;
25 |         bottom: 0;
26 |         left: 0;
27 |         z-index: 0;
28 |         display: flex;
29 |         align-items: center;
30 |         justify-content: center;
31 |         margin: auto;
32 |     }
33 | </style>


--------------------------------------------------------------------------------
/src/lib/sources/Sources.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Sources
 3 |     import TextAlignEmbed from '$lib/utils/TextAlignEmbed.svelte';
 4 | 
 5 |     export let sources;
 6 |     export let textAlign = false;
 7 | </script>
 8 | 
 9 | <TextAlignEmbed
10 |     disabled={!textAlign}
11 | >
12 |     <div class="sources">
13 |         <p>
14 |             {sources}
15 |         </p>
16 |     </div>
17 | </TextAlignEmbed>
18 | 
19 | <style lang="scss">
20 |     .sources {
21 |         width: 100%;
22 |         margin: 0.5rem 0;
23 | 
24 |         p {
25 |             margin: 0;
26 |             color: $shade-darker;
27 |             font-weight: 400;
28 |             font-size: 0.75rem;
29 | 
30 |             @media (prefers-color-scheme: dark) {
31 |                 color: $basic-white-dark;
32 |             }
33 |         }
34 |     }
35 | </style>


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import preprocess from 'svelte-preprocess';
 2 | import adapter from '@sveltejs/adapter-auto';
 3 | import path from 'path';
 4 | 
 5 | /** @type {import('@sveltejs/kit').Config} */
 6 | const config = {
 7 | 	kit: {
 8 | 		adapter: adapter(),
 9 | 
10 | 		vite: {
11 | 			css: {
12 | 				preprocessorOptions: {
13 | 					scss: {
14 | 						additionalData: '@use "src/variables.scss" as *;'
15 | 					}
16 | 				}
17 | 			},
18 | 			resolve: {
19 |                 alias: {
20 |                     '$stores': path.resolve('./src/stores'),
21 | 					'$utils': path.resolve('./src/utils')
22 |                 }
23 |             }
24 | 		}
25 | 	},
26 | 
27 | 	preprocess: [
28 | 		preprocess({
29 | 			scss: {
30 | 				prependData: '@use "src/variables.scss" as *;'
31 | 			}
32 | 		})
33 | 	]
34 | };
35 | 
36 | export default config;
37 | 


--------------------------------------------------------------------------------
/src/lib/utils/TextAlignEmbed.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Wrapper to align a full width animation with other text elements
 3 |     export let disabled = false;
 4 | </script>
 5 | 
 6 | {#if (disabled)}
 7 |     <slot />
 8 | {:else}
 9 |     <div class="text-align-embed">
10 |         <slot />
11 |     </div>
12 | {/if}
13 | 
14 | <style lang="scss">
15 |     .text-align-embed {
16 |         position: relative;
17 |         height: 100%;
18 |         margin: 0 auto;
19 |         padding: 0;
20 |         padding: 0 1.5rem;
21 | 
22 |         @media (max-width: 719px) {
23 |             width: 100%;
24 |             padding: 0 1rem;
25 |         }
26 | 
27 |         @media (min-width: 720px) and (max-width: 1011px) {
28 |             width: 83.33333333333334%;
29 |         }
30 | 
31 |         @media (min-width: 1012px) {
32 |             width: 66.66666666666667%;
33 |         }
34 |     }
35 | </style>


--------------------------------------------------------------------------------
/src/lib/utils/Sizer.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Wrapper to define width and height of a child
 3 |     import { css } from '$utils/actions';
 4 | 
 5 |     export let width;
 6 |     export let height;
 7 |     export let horizontal = false;
 8 | </script>
 9 | 
10 | <div
11 |     class="sizer"
12 |     class:horizontal={horizontal}
13 |     use:css={{
14 |         width,
15 |         height: horizontal ? null : height
16 |     }}
17 | >
18 |     <slot />
19 | </div>
20 | 
21 | <style lang="scss">
22 |     .sizer {
23 |         position: absolute;
24 |         top: 0;
25 |         right: 0;
26 |         bottom: 0;
27 |         left: 0;
28 |         z-index: 10;
29 |         isolation: isolate;
30 |         width: calc(var(--width) * 1px);
31 |         height: calc(var(--height) * 1px);
32 |         margin: auto;
33 | 
34 |         &.horizontal {
35 |             height: 100%;
36 |             margin: 0 auto;
37 |         }
38 |     }
39 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "speedskating",
 3 | 	"version": "1.0.0",
 4 | 	"scripts": {
 5 | 		"dev": "svelte-kit dev",
 6 | 		"build": "svelte-kit build",
 7 | 		"package": "svelte-kit package",
 8 | 		"preview": "svelte-kit preview",
 9 | 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
10 | 		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
11 | 	},
12 | 	"devDependencies": {
13 | 		"@sveltejs/adapter-auto": "next",
14 | 		"@sveltejs/kit": "next",
15 | 		"d3": "^7.3.0",
16 | 		"eslint": "^7.32.0",
17 | 		"eslint-config-prettier": "^8.3.0",
18 | 		"eslint-plugin-svelte3": "^3.2.1",
19 | 		"lodash-es": "^4.17.21",
20 | 		"prettier": "^2.4.1",
21 | 		"prettier-plugin-svelte": "^2.4.0",
22 | 		"regl": "^2.1.0",
23 | 		"sass": "^1.46.0",
24 | 		"svelte": "^3.44.0",
25 | 		"svelte-preprocess": "^4.10.1",
26 | 		"svelte-watch-resize": "^1.0.3"
27 | 	},
28 | 	"type": "module"
29 | }
30 | 


--------------------------------------------------------------------------------
/src/lib/controls/TimeDisplay.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Time display
 3 |     import { formatValue } from '$utils/format';
 4 | 
 5 |     export let clock;
 6 |     export let speed;
 7 | </script>
 8 | 
 9 | <div class="timer">
10 |     <span class="time">
11 |         {formatValue(clock, 'racetime')}
12 |     </span>
13 |     {#if (speed && speed > 1)}
14 |         <span class="speed">
15 |             ({Math.round(speed * 10) / 10}x)
16 |         </span>
17 |     {/if}
18 | </div>
19 | 
20 | <style lang="scss">
21 |     .timer {
22 |         display: flex;
23 |         align-items: center;
24 |         height: 100%;
25 |         margin: 0 1rem;
26 |         color: $basic-black;
27 |         font-size: 1.25rem;
28 |         user-select: none;
29 | 
30 |         @media (prefers-color-scheme: dark) {
31 |             color: $basic-white-dark;
32 |         }
33 | 
34 |         .time {
35 |             width: 4.5rem;
36 |         }
37 | 
38 |         .speed {
39 |             font-size: 0.75rem;
40 |             color: $shade-dark-dark;
41 |         }
42 |     }
43 | </style>


--------------------------------------------------------------------------------
/src/utils/format.js:
--------------------------------------------------------------------------------
 1 | import { timeParse, timeFormat } from 'd3';
 2 | 
 3 | export const NA_STRING = '—';
 4 | export const CURRENCY_FORMAT = '$,.0f';
 5 | export const PERCENT_FORMAT = '.1%';
 6 | export const INTEGER_FORMAT = ',.0f';
 7 | export const FLOAT_FORMAT = ',.1f';
 8 | 
 9 | const timeFormatRace = () => (value) => {
10 |     const minuteValue = value / 1000 / 60;
11 |     const minutes = Math.floor(minuteValue);
12 |     const seconds = ((minuteValue % 1) * 60).toFixed(2);
13 |     const secondsStr = `${seconds}`.replace('.', ',')
14 |     return `${minutes}:${secondsStr.padStart(5, '0')}`;
15 | };
16 | 
17 | const indicatorFormats = {
18 |     'millisecond': timeFormat('%L'),
19 |     'racetime': timeFormatRace()
20 | };
21 | 
22 | export const formatValue = (value, indicatorId) => {
23 |     const formatter = indicatorFormats[indicatorId];
24 |     return formatter(value);
25 | };
26 | 
27 | export const parseSplitTime = (value) => {
28 |     if (!/:/g.test(value)) value = `0:${value}`;
29 |     const [ minutes, seconds ] = value.split(':');
30 |     return Math.round((parseFloat(minutes) * 60 + parseFloat(seconds)) * 1000);
31 | };


--------------------------------------------------------------------------------
/src/lib/overlay/NumberSwitcher.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Number switching animation (used for countdown)
 3 |     import { fly } from 'svelte/transition';
 4 | 
 5 |     export let i;
 6 |     export let delay = 0;
 7 |     export let deactivate = false;
 8 | 
 9 |     const offset = 50;
10 |     const duration = 600;
11 | </script>
12 | 
13 | <span
14 |     class="number-switcher"
15 | >
16 |     {#key i}
17 |         <span
18 |             class="number"
19 |             in:fly={{y: -offset, duration, opacity: 0, delay}}
20 |             out:fly|local={{y: offset, duration: deactivate ? 0 : duration, opacity: 0}}
21 |         >
22 |             {i}
23 |         </span>
24 |     {/key}
25 | </span>
26 | 
27 | <style lang="scss">
28 |     .number-switcher {
29 |         position: relative;
30 |         display: inline-block;
31 |         width: 2rem;
32 |         height: auto;
33 |         text-align: center;
34 | 
35 |         @media (min-width: 500px) {
36 |             width: 2.5rem;
37 |         }
38 | 
39 |         .number {
40 |             position: absolute;
41 |             top: 0;
42 |             left: 0;
43 |             width: 100%;
44 |             transform: translateY(-50%);
45 |         }
46 |     }
47 | </style>


--------------------------------------------------------------------------------
/src/utils/actions.js:
--------------------------------------------------------------------------------
 1 | const setCssVariables = (node, variables) => {
 2 |     for (const name in variables) {
 3 |         if (variables[name]) {
 4 |             node.style.setProperty(`--${name}`, variables[name]);
 5 |         }
 6 |     }
 7 | };
 8 |   
 9 | export const css = (node, variables) => {
10 |     setCssVariables(node, variables);
11 | 
12 |     return {
13 |         update(variables) {
14 |             setCssVariables(node, variables);
15 |         }
16 |     };
17 | };
18 | 
19 | let intersectionObserver;
20 | 
21 | const ensureIntersectionObserver = () => {
22 |     if (intersectionObserver) return;
23 | 
24 |     intersectionObserver = new IntersectionObserver(
25 |         (entries) => {
26 |             entries.forEach(entry => {
27 |                 const eventName = entry.isIntersecting ? 'enterViewport' : 'exitViewport';
28 |                 entry.target.dispatchEvent(new CustomEvent(eventName));
29 |             });
30 |         }
31 |     );
32 | };
33 | 
34 | export const viewport = (element) => {
35 |     ensureIntersectionObserver();
36 |     intersectionObserver.observe(element);
37 |     return {
38 |         destroy() {
39 |             intersectionObserver.unobserve(element);
40 |         }
41 |     }
42 | };


--------------------------------------------------------------------------------
/src/lib/overlay/Countdown.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Starting countdown
 3 |     import { css } from '$utils/actions';
 4 | 
 5 |     import NumberSwitcher from '$lib/overlay/NumberSwitcher.svelte';
 6 | 
 7 |     export let clock;
 8 |     export let maxValue;
 9 |     export let height;
10 | 
11 |     $: number = Math.ceil((maxValue - clock) / 1000);
12 | </script>
13 | 
14 | <div
15 |     class="countdown"
16 |     use:css={{height}}
17 | >
18 |     <div class="number">
19 |         <NumberSwitcher
20 |             i={number}
21 |         />
22 |     </div>
23 | </div>
24 | 
25 | <style lang="scss">
26 |     .countdown {
27 |         position: absolute;
28 |         top: 0;
29 |         right: 0;
30 |         bottom: 0;
31 |         left: 0;
32 |         z-index: 1000;
33 |         isolation: isolate;
34 |     }
35 | 
36 |     .number {
37 |         position: relative;
38 |         display: flex;
39 |         flex-direction: column;
40 |         align-items: center;
41 |         justify-content: center;
42 |         width: 100%;
43 |         height: 100%;
44 |         color: #000000;
45 |         font-size: calc(var(--height) * 1px);
46 | 
47 |         @media (prefers-color-scheme: dark) {
48 |             color: #f1efed;
49 |         }
50 |     }
51 | </style>


--------------------------------------------------------------------------------
/src/utils/math.js:
--------------------------------------------------------------------------------
 1 | import { scaleLinear, scalePow } from 'd3';
 2 | 
 3 | export const getPositionScale = ({ times, sectors, startingExponent }) => {
 4 |     const powScale = scalePow()
 5 |         .exponent(startingExponent)
 6 |         .domain(times.slice(0, 2))
 7 |         .range(sectors.slice(0, 2))
 8 |         .clamp(true);
 9 | 
10 |     const linearScale = scaleLinear()
11 |         .domain(times.slice(1))
12 |         .range(sectors.slice(1))
13 |         .clamp(true);
14 | 
15 |     const fn = (value) => {
16 |         if (value < times[1]) return powScale(value);
17 |         return linearScale(value);
18 |     }
19 | 
20 |     fn.domain = () => [times[0], times.slice(-1)[0]];
21 |     fn.range = () => [sectors[0], sectors.slice(-1)[0]];
22 | 
23 |     return fn;
24 | };
25 | 
26 | export const getNormalOffsetCoords = (
27 |     { x: x0, y: y0 },
28 |     { x: x1, y: y1 },
29 |     { x: x2, y: y2 },
30 |     offset = 0
31 | ) => {
32 |     const normal = {
33 |         x: y2 - y1,
34 |         y: -x2 + x1
35 |     };
36 | 
37 |     return {
38 |         x: x0 + normal.x * offset,
39 |         y: y0 + normal.y * offset
40 |     };
41 | };
42 | 
43 | export const getRange = (start, end, step = 1) => {
44 |     const len = Math.floor((end - start) / step) + 1;
45 |     return Array(len).fill().map((_, i) => start + (i * step));
46 | };


--------------------------------------------------------------------------------
/src/stores/clock.js:
--------------------------------------------------------------------------------
 1 | import { writable, derived } from 'svelte/store';
 2 | 
 3 | import { animationDetails } from '$stores/data';
 4 | 
 5 | export const clock = writable(0);
 6 | export const raceClock = writable(0);
 7 | 
 8 | export const sectorCompletes = (() => {
 9 |     const { set, update, subscribe } = writable([]);
10 |     let stdRemoveInterval = 2000;
11 |     let tid;
12 | 
13 |     const reset = () => {
14 |         clearTimeout(tid);
15 |         set([]);
16 |     };
17 | 
18 |     const remove = () => {
19 |         update(values => values.slice(1));
20 |     };
21 | 
22 |     const add = (obj, { oneOnly = false, removeInterval = stdRemoveInterval } = {}) => {
23 |         if (oneOnly) {
24 |             set([obj]);
25 |         } else {
26 |             update(values => [...values, obj]);
27 |         }
28 |         tid = setTimeout(remove, removeInterval);
29 |     };
30 | 
31 |     return {
32 |         add,
33 |         reset,
34 |         subscribe
35 |     };
36 | })();
37 | 
38 | export const clockStep = derived(animationDetails, $animationDetails => {
39 |     const { speed, step } = $animationDetails;
40 |     return speed * step;
41 | });
42 | 
43 | export const realClockStep = derived(animationDetails, $animationDetails => {
44 |     const { speed, step } = $animationDetails;
45 |     return speed * Math.max(16.66, step);
46 | });


--------------------------------------------------------------------------------
/src/lib/utils/SizeDetector.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Wrapper to detect the width and height of a container
 3 |     // Needed instead of bind:clientWidth etc. because of CMS issues
 4 |     import { onMount } from 'svelte';
 5 | 
 6 |     import { viewport } from '$utils/actions';
 7 | 
 8 |     export let width = undefined;
 9 |     export let height = undefined;
10 |     export let inView = false;
11 | 
12 |     let tid;
13 |     let container;
14 | 
15 |     function handleResize() {
16 |         clearTimeout(tid);
17 |         ({ width, height } = container.getBoundingClientRect());
18 |     }
19 | 
20 |     function throttleResize() {
21 |         clearTimeout(tid);
22 |         tid = setTimeout(handleResize, 100);
23 |     }
24 | 
25 |     onMount(() => {
26 |         setTimeout(() => {
27 |             window.dispatchEvent(new Event('resize'));
28 |             throttleResize();
29 |         }, 125);
30 | 
31 |         new ResizeObserver(throttleResize).observe(container);
32 | 
33 |         return () => clearTimeout(tid);
34 |     });
35 | </script>
36 | 
37 | <svelte:window on:resize={throttleResize} />
38 | 
39 | <div
40 |     class="size-detector"
41 |     bind:this={container}
42 |     use:viewport
43 |     on:enterViewport={() => inView = true}
44 |     on:exitViewport={() => {}}
45 | >
46 |     <slot />
47 | </div>
48 | 
49 | <style lang="scss">
50 |     .size-detector {
51 |         position: relative;
52 |         width: 100%;
53 |         height: 100%;
54 |     }
55 | </style>


--------------------------------------------------------------------------------
/src/lib/header/Header.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Header with headline and subtitle
 3 |     import TextAlignEmbed from '$lib/utils/TextAlignEmbed.svelte';
 4 | 
 5 |     export let title;
 6 |     export let subtitle;
 7 |     export let textAlign = false;
 8 | </script>
 9 | 
10 | <TextAlignEmbed
11 |     disabled={!textAlign}
12 | >
13 |     <div class="header">
14 |         <h2>
15 |             {title}
16 |         </h2>
17 |         {#if (subtitle)}
18 |             <h3>
19 |                 {@html subtitle}
20 |             </h3>
21 |         {/if}
22 |     </div>
23 | </TextAlignEmbed>
24 | 
25 | <style lang="scss">
26 |     .header {
27 |         display: flex;
28 |         flex-direction: column;
29 |         gap: 0.25rem;
30 |         width: 100%;
31 |         height: 100%;
32 |         margin: 0.5rem 0;
33 | 
34 |         h2 {
35 |             margin: 0;
36 |             color: $basic-black;
37 |             font-size: 1.5rem;
38 |             font-weight: 700;
39 |             line-height: 1.05;
40 |             letter-spacing: 0;
41 |             opacity: 1;
42 | 
43 |             @media (prefers-color-scheme: dark) {
44 |                 color: $basic-white-dark;
45 |             }
46 |         }
47 | 
48 |         h3 {
49 |             margin: 0;
50 |             color: $basic-black;
51 |             font-weight: 400;
52 |             font-size: 1rem;
53 |             text-align: left;
54 | 
55 |             @media (prefers-color-scheme: dark) {
56 |                 color: $basic-white-dark;
57 |             }
58 |         }
59 |     }
60 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # <img src="https://raw.githubusercontent.com/SPIEGEL-GUI/assets/master/logo_one_letter.svg" height="26" /> Speedskating
 2 | 
 3 | > a DER SPIEGEL Olympia widget
 4 | 
 5 | <img src="./static/preview.png" alt="Screenshot of the speedskating widget" height="300"/>
 6 | 
 7 | An animation widget to show olympic speedskating runs. Built with [Svelte](https://svelte.dev), [D3](https://d3js.org) and [regl](http://regl.party).
 8 | 
 9 | Watch an example video [here](https://twitter.com/h_i_g_s_c_h/status/1490722093004214281?s=20&t=FJtQAXIF6Kp0vrFUG_X4tw).
10 | 
11 | 
12 | ## Run locally
13 | 
14 | ```
15 | git clone https://github.com/spiegelgraphics/speedskating.git
16 | cd speedskating
17 | npm install
18 | npm run dev
19 | ```
20 | 
21 | Data for the speedskating runs is imported via `config.json`. An example can be found in the `static` folder.
22 | More (data-independent) parameters can be set in the store `params.js`.
23 | 
24 | 
25 | ## Examples
26 | 
27 | [Twitter video 1](https://twitter.com/h_i_g_s_c_h/status/1490722093004214281?s=20&t=FJtQAXIF6Kp0vrFUG_X4tw)
28 | 
29 | [Twitter video 2](https://twitter.com/h_i_g_s_c_h/status/1490965786986676224?s=20&t=FJtQAXIF6Kp0vrFUG_X4tw)
30 | 
31 | [Twitter video 3](https://twitter.com/h_i_g_s_c_h/status/1491828448620425220?s=20&t=FJtQAXIF6Kp0vrFUG_X4tw)
32 | 
33 | [Pechstein vs. herself (S+) article](https://www.spiegel.de/sport/wintersport/claudia-pechsteins-lauf-gegen-sich-selbst-a-7d20bc82-8494-4e16-b366-9d3484e6ddcc)
34 | 
35 | 
36 | ## Built by
37 | 
38 | the [DER SPIEGEL](https://www.spiegel.de) graphics department, 2022.
39 | 
40 | The application was slightly changed compared to its original to be able to run it outside of a dedicated CMS.
41 | 
42 | ## License
43 | 
44 | Apache License Version 2.0


--------------------------------------------------------------------------------
/src/lib/controls/PlayButton.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Play button
 3 |     export let isRunning;
 4 | 
 5 |     function handleClick() {
 6 |         isRunning = !isRunning;
 7 |     }
 8 | </script>
 9 | 
10 | <div class="play-button">
11 |     <button
12 |         on:click={handleClick}
13 |     >
14 |         <svg
15 |             width="24"
16 |             height="24"
17 |             viewBox="0 0 24 24"
18 |             xmlns="http://www.w3.org/2000/svg"
19 |         >
20 |             <g
21 |                 transform-origin="50% 50%"
22 |             >
23 |                 {#if (isRunning)}
24 |                     <rect x="7" y="4" width="3" height="16" rx="1.5" />
25 |                     <rect x="14" y="4" width="3" height="16" rx="1.5" />
26 |                 {:else}
27 |                     <path
28 |                         d="M6 5.76341C6 5.19411 6.60936 4.83238 7.10914 5.10498L18.5429 11.3416C19.064 11.6258 19.064 12.3742 18.5429 12.6584L7.10914 18.895C6.60936 19.1676 6 18.8059 6 18.2366V5.76341Z"
29 |                     />
30 |                 {/if}
31 |             </g>
32 |         </svg>
33 |     </button>
34 | </div>
35 | 
36 | <style lang="scss">
37 |     .play-button {
38 |         margin: 0;
39 |         pointer-events: all;
40 |     }
41 | 
42 |     button {
43 |         display: flex;
44 |         align-items: center;
45 |         justify-content: center;
46 |         width: auto;
47 |         height: 100%;
48 |         margin: 0;
49 |         padding: 0;
50 |         border: none;
51 |         background: none;
52 |         cursor: pointer;
53 |     }
54 | 
55 |     rect, path {
56 |         stroke: none;
57 |         fill: $basic-black;
58 | 
59 |         @media (prefers-color-scheme: dark) {
60 |             fill: $basic-white-dark;
61 |         }
62 |     }
63 | </style>


--------------------------------------------------------------------------------
/src/variables.scss:
--------------------------------------------------------------------------------
 1 | // Colors
 2 | $darkGrey:    #333;
 3 | $lighterGrey: #999;
 4 | $lightGrey:   #ccc;
 5 | 
 6 | $basic-black:          #000000 !default; // rgb(000, 000, 000)
 7 | $basic-white:          #ffffff !default; // rgb(255, 255, 255)
 8 | $basic-black-dark:     #1F1E1C !default; // rgb(31, 30, 28);
 9 | $basic-white-dark:     #F1EFED !default; // rgb(241, 239, 237);
10 | $primary-base-dark:    #D03D12;
11 | 
12 | $shade-darkest:        #2F2D2B !default; // rgb(047, 045, 043)
13 | $shade-darker:         #5C5A58 !default; // rgb(092, 090, 088)
14 | $shade-dark:           #807E7C !default; // rgb(128, 126, 124)
15 | $shade-base:           #989694 !default; // rgb(152, 150, 148)
16 | $shade-light:          #BBB9B7 !default; // rgb(187, 185, 183)
17 | $shade-lighter:        #DDDBD9 !default; // rgb(221, 219, 217)
18 | $shade-lightest:       #F1EFED !default; // rgb(241, 239, 237)
19 | $primary-darker:       #811D00 !default; // rgb(129, 029, 000)
20 | $primary-dark:         #C12B00 !default; // rgb(193, 043, 000)
21 | $primary-base:         #E64415 !default; // rgb(230, 068, 021)
22 | $primary-lighter:      #EEC2B5 !default; // rgb(238, 194, 181)
23 | $secondary-1-lighter:  #B7DED1 !default; // rgb(183, 222, 209)
24 | $secondary-2-darker:   #1A3A4A !default; // rgb(026, 058, 074)
25 | $secondary-2-dark:     #235973 !default; // rgb(035, 089, 115)
26 | $secondary-2-lightest: #E9F1F5 !default; // rgb(233, 241, 245)
27 | $special-positive:     #3CC83C !default; // rgb(060, 200, 060)
28 | $special-attention:    #FFE646 !default; // rgb(255, 230, 070)
29 | $special-negative:     #DC3E0F !default; // rgb(220, 062, 015)
30 | $special-bento:        #BAF5E7 !default; // rgb(186, 245, 231)
31 | 
32 | $shade-darker-dark: #DDDBD9;
33 | $shade-dark-dark:   #BBB9B7;
34 | $shade-base-dark:   #BBB9B7;
35 | $shade-darker:      #5C5A58;
36 | $shade-lighter:     #DDDBD9;
37 | $shade-lightest:    #F1EFED;


--------------------------------------------------------------------------------
/src/lib/controls/ProgressBar.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Progress bar
 3 |     import { css } from '$utils/actions';
 4 | 
 5 |     export let value;
 6 |     export let maxValue;
 7 |     export let pointerPressed = false;
 8 |     export let step;
 9 | 
10 |     let container;
11 | 
12 |     function setValue(x) {
13 |         const { width } = container.getBoundingClientRect();
14 |         value = maxValue * x / width;
15 |     }
16 | 
17 |     function handlePointerdown(e) {
18 |         pointerPressed = true;
19 |         const { layerX: x } = e;
20 |         setValue(x);
21 |     }
22 | 
23 |     function handlePointermove(e) {
24 |         if (!pointerPressed) return;
25 |         const { layerX: x } = e;
26 |         setValue(x);
27 |     }
28 | 
29 |     function handlePointerup() {
30 |         pointerPressed = false;
31 |     }
32 | 
33 |     $: progress = Math.round(100 * 100 * value / maxValue) / 100;
34 | </script>
35 | 
36 | <div
37 |     class="progress-bar"
38 |     on:pointerdown={handlePointerdown}
39 |     on:pointermove={handlePointermove}
40 |     on:pointerup={handlePointerup}
41 |     bind:this={container}
42 | >
43 |     <div
44 |         class="progress-bar-inner"
45 |         class:enable-transition={!pointerPressed}
46 |         style="width: {progress}%;"
47 |         use:css={{step}}
48 |     ></div>
49 | </div>
50 | 
51 | <style lang="scss">
52 |     .progress-bar {
53 |         flex: 1;
54 |         position: relative;
55 |         height: 100%;
56 |         box-sizing: border-box;
57 |         cursor: pointer;
58 |     }
59 | 
60 |     .progress-bar-inner {
61 |         position: absolute;
62 |         top: 50%;
63 |         height: 0.5rem;
64 |         margin: auto;
65 |         border: none;
66 |         border-radius: 1.5px;
67 |         background-color: $shade-lighter;
68 |         transform: translateY(-50%);
69 | 
70 |         &.enable-transition {
71 |             transition: width calc(var(--step) * 1ms + 50ms);
72 |         }
73 |     }
74 | </style>


--------------------------------------------------------------------------------
/src/lib/overlay/Overlay.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Animation overlay
 3 |     import TextAlignEmbed from '$lib/utils/TextAlignEmbed.svelte';
 4 |     import Countdown from '$lib/overlay/Countdown.svelte';
 5 |     import Results from '$lib/overlay/Results.svelte';
 6 |     
 7 |     export let clock;
 8 |     export let details;
 9 |     export let results;
10 |     export let height;
11 |     export let textAlign;
12 |     export let showsResults = false;
13 | 
14 |     $: ({ countdown, starting, raceLength, ending, speed, result } = details);
15 |     $: isBefore = clock < countdown + starting;
16 |     $: isAfter = clock > countdown + starting + raceLength;
17 |     $: show = isBefore || isAfter;
18 | 
19 |     $: trueClock = clock / speed;
20 | 
21 |     $: showsResults = isAfter;
22 | </script>
23 | 
24 | {#if (show)}
25 |     <div
26 |         class="overlay"
27 |         class:blur={isAfter}
28 |     >
29 |         {#if (isAfter)}
30 |             <div class="background"></div>
31 |         {/if}
32 |         <TextAlignEmbed
33 |             disabled={textAlign}
34 |         >
35 |             {#if (isBefore)}
36 |                 <Countdown
37 |                     clock={trueClock}
38 |                     maxValue={countdown / speed}
39 |                     height={height}
40 |                 />
41 |             {:else if (isAfter)}
42 |                 <Results
43 |                     results={results}
44 |                     config={result}
45 |                 />
46 |             {/if}
47 |         </TextAlignEmbed>
48 |     </div>
49 | {/if}
50 | 
51 | <style lang="scss">
52 |     .overlay {
53 |         position: absolute;
54 |         top: 0;
55 |         right: 0;
56 |         bottom: 0;
57 |         left: 0;
58 |         z-index: 1000;
59 |         isolation: isolate;
60 |         pointer-events: none;
61 | 
62 |         &.blur {
63 |             backdrop-filter: blur(6px);
64 |         }
65 | 
66 |         .background {
67 |             position: absolute;
68 |             top: 0;
69 |             right: 0;
70 |             bottom: 0;
71 |             left: 0;
72 |             z-index: 0;
73 |             opacity: 0.95;
74 |             background-color: $basic-white;
75 | 
76 |             @media (prefers-color-scheme: dark) {
77 |                 opacity: 0.85;
78 |                 background-color: $basic-black-dark;
79 |             }
80 |         }
81 |     }
82 | </style>


--------------------------------------------------------------------------------
/src/lib/animation/Athlete.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // A single athlete
 3 |     import { createEventDispatcher } from 'svelte';
 4 |     import { scaleLinear, sum, interpolateHclLong } from 'd3';
 5 | 
 6 |     import { getPositionScale } from '$utils/math';
 7 |     import { getWebGLColor } from '$utils/webgl';
 8 | 
 9 |     export let data;
10 |     export let sectors;
11 |     export let currentCoords = [];
12 |     export let sizes = [];
13 |     export let colors = [];
14 |     export let opacities = [];
15 |     export let startingExponent;
16 |     export let trailLength;
17 |     export let localClock;
18 |     export let resolution;
19 | 
20 |     const dispatch = createEventDispatcher();
21 | 
22 |     let numCoords = 0;
23 |     
24 |     function notifySectorComplete(sectorComplete) {
25 |         if (!sectorComplete || sectorComplete < 1) return;
26 |         dispatch('sectorComplete', {
27 |             ...data,
28 |             sectorComplete,
29 |             sectorTime: cumulativeTimes[sectorComplete]
30 |         });
31 |     }
32 | 
33 |     $: ({
34 |         id,
35 |         cumulativeTimes,
36 |         finishTimeMs,
37 |         size,
38 |         opacity,
39 |         background_color,
40 |         trail_color = background_color,
41 |         coordinates
42 |     } = data);
43 | 
44 |     // Create position scale
45 |     $: positionScale = getPositionScale({
46 |         times: cumulativeTimes,
47 |         sectors: sectors,
48 |         startingExponent
49 |     });
50 | 
51 |     // Get the current position and coordinates
52 |     $: position = positionScale(localClock);
53 |     $: positionIndex = Math.floor(position * resolution);
54 |     $: finished = position >= 1;
55 |     $: {
56 |         currentCoords = finished ? [] : coordinates.slice(Math.max(0, positionIndex - trailLength + 1), positionIndex + 1);
57 |         numCoords = currentCoords.length;
58 |     }
59 | 
60 |     // Sizes
61 |     $: sizes = Array.from({length: numCoords}).map((_, i) => size * (i + 1) / numCoords);
62 | 
63 |     // Colors
64 |     $: colorScale = scaleLinear(interpolateHclLong)
65 |         .domain([0, numCoords - 1])
66 |         .range([trail_color, background_color])
67 |         .clamp(true);
68 |     $: colors = Array.from({length: numCoords}).map((_, i) => getWebGLColor(numCoords === 1 ? background_color : colorScale(i)));
69 | 
70 |     // Opacities
71 |     $: opacities = Array.from({length: numCoords}).map(() => opacity);
72 | 
73 |     // Check athlete position and notify intermediate timer
74 |     $: sectorsComplete = sum(sectors.map(d => position > d)) - 1;
75 |     $: notifySectorComplete(sectorsComplete);
76 | </script>


--------------------------------------------------------------------------------
/src/lib/animation/Animation.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Wrapper for the core animation
 3 |     import { trackData, animationDetails, athleteResults } from '$stores/data';
 4 |     import { clock, sectorCompletes } from '$stores/clock';
 5 |     import { params } from '$stores/params';
 6 | 
 7 |     import Track from '$lib/animation/Track.svelte';
 8 |     import Sizer from '$lib/utils/Sizer.svelte';
 9 |     import IntermediateDisplay from '$lib/animation/IntermediateDisplay.svelte';
10 |     import Athletes from '$lib/animation/Athletes.svelte';
11 |     import Overlay from '$lib/overlay/Overlay.svelte';
12 | 
13 |     export let isReady = false;
14 | 
15 |     let trackCoordinates;
16 |     let trackWidth;
17 |     let trackHeight;
18 |     let endCoordinate = {};
19 |     let tracksReady = false;
20 |     let showsResults = false;
21 | 
22 |     $: ({ intermediate_display } = $trackData);
23 | 
24 |     $: isReady = tracksReady;
25 | </script>
26 | 
27 | <div class="animation">
28 |     <Track
29 |         data={$trackData}
30 |         details={$animationDetails}
31 |         bind:coordinates={trackCoordinates}
32 |         bind:endCoordinate={endCoordinate}
33 |         bind:containerWidth={trackWidth}
34 |         bind:containerHeight={trackHeight}
35 |         bind:isReady={tracksReady}
36 |     />
37 |     <Sizer
38 |         width={trackWidth}
39 |         height={trackHeight}
40 |     >
41 |         {#if ($animationDetails.type === 'speedskating')}
42 |             <IntermediateDisplay
43 |                 data={$sectorCompletes}
44 |                 x={endCoordinate.x}
45 |                 y={endCoordinate.y}
46 |                 config={intermediate_display}
47 |             />
48 |         {/if}
49 |         {#if (tracksReady && !showsResults)}
50 |             <Athletes
51 |                 results={$athleteResults}
52 |                 details={$animationDetails}
53 |                 trackCoordinates={trackCoordinates}
54 |                 clock={$clock}
55 |                 width={trackWidth}
56 |                 height={trackHeight}
57 |             />
58 |         {/if}
59 |     </Sizer>
60 |     <Overlay
61 |         clock={$clock}
62 |         details={$animationDetails}
63 |         results={$athleteResults}
64 |         height={Math.max(48, trackHeight / 3)}
65 |         textAlign={!$params.text_align_disabled}
66 |         bind:showsResults={showsResults}
67 |     />
68 | </div>
69 | 
70 | <style lang="scss">
71 |     .animation {
72 |         position: relative;
73 |         flex: 1;
74 |         display: flex;
75 |         flex-direction: column;
76 |         width: 100%;
77 |         pointer-events: none;
78 |     }
79 | </style>


--------------------------------------------------------------------------------
/src/lib/animation/SpeedskatingArena.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     //Speed skating arena
 3 | </script>
 4 | 
 5 | <svg width="2586" height="1048" viewBox="0 0 2586 1048" fill="none" xmlns="http://www.w3.org/2000/svg">
 6 |     <g>
 7 |         <path d="M536.955 50.824H2050.7C2176.16 50.824 2296.48 100.675 2385.2 189.411C2473.91 278.146 2523.75 398.498 2523.75 523.989C2523.75 649.48 2473.91 769.832 2385.2 858.567C2296.48 947.303 2176.16 997.154 2050.7 997.154H536.955C411.495 997.154 291.174 947.303 202.461 858.567C113.748 769.832 63.9092 649.48 63.9092 523.989C63.9092 398.498 113.748 278.146 202.461 189.411C291.174 100.675 411.495 50.824 536.955 50.824Z" fill="#C4DDEF"/>
 8 |         <path d="M536.955 186.013H2050.7C2140.31 186.013 2226.26 221.621 2289.62 285.004C2352.99 348.387 2388.59 434.352 2388.59 523.989C2388.59 613.626 2352.99 699.592 2289.62 762.974C2226.26 826.357 2140.31 861.965 2050.7 861.965H536.955C447.34 861.965 361.397 826.357 298.03 762.974C234.663 699.592 199.064 613.626 199.064 523.989C199.064 434.352 234.663 348.387 298.03 285.004C361.397 221.621 447.34 186.013 536.955 186.013" fill="#F1F0EE"/>
 9 |         <path d="M536.955 186.013H2050.7C2140.31 186.013 2226.26 221.621 2289.62 285.004C2352.99 348.387 2388.59 434.352 2388.59 523.989C2388.59 613.626 2352.99 699.592 2289.62 762.974C2226.26 826.357 2140.31 861.965 2050.7 861.965H536.955C447.34 861.965 361.397 826.357 298.03 762.974C234.663 699.592 199.064 613.626 199.064 523.989C199.064 434.352 234.663 348.387 298.03 285.004C361.397 221.621 447.34 186.013 536.955 186.013V186.013Z" stroke="white" stroke-width="9" stroke-miterlimit="1" stroke-linecap="round"/>
10 |         <path class="inner-background" d="M536.958 240.091H2050.7C2088.06 239.967 2125.06 247.219 2159.61 261.431C2194.15 275.643 2225.55 296.535 2252.01 322.91C2278.46 349.285 2299.45 380.624 2313.78 415.129C2328.1 449.635 2335.47 486.629 2335.47 523.991C2335.47 561.352 2328.1 598.346 2313.78 632.852C2299.45 667.358 2278.46 698.696 2252.01 725.071C2225.55 751.446 2194.15 772.338 2159.61 786.55C2125.06 800.762 2088.06 808.014 2050.7 807.89H536.958C461.845 807.641 389.893 777.621 336.868 724.406C283.843 671.192 254.068 599.123 254.068 523.991C254.068 448.858 283.843 376.789 336.868 323.575C389.893 270.36 461.845 240.34 536.958 240.091" fill="#FCFCFA"/>
11 |         <path d="M605.413 55.0393V122.634" stroke="white" stroke-width="7"/>
12 |         <path d="M1880 866L1880 994" stroke="white" stroke-width="7"/>
13 |     </g>
14 | </svg>
15 | 
16 | <style lang="scss">
17 |     .inner-background {
18 |         fill: $basic-white;
19 | 
20 |         @media (prefers-color-scheme: dark) {
21 |           fill: $basic-black-dark;
22 |         }
23 |     }
24 | </style>


--------------------------------------------------------------------------------
/src/lib/controls/Controls.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Control bar
 3 |     import { onDestroy } from 'svelte';
 4 |     
 5 |     import { browser } from '$app/env';
 6 |     import { clock, clockStep } from '$stores/clock';
 7 |     import { animationDetails } from '$stores/data';
 8 | 
 9 |     import TextAlignEmbed from '$lib/utils/TextAlignEmbed.svelte';
10 |     import PlayButton from '$lib/controls/PlayButton.svelte';
11 |     import TimeDisplay from '$lib/controls/TimeDisplay.svelte';
12 |     import ProgressBar from '$lib/controls/ProgressBar.svelte';
13 | 
14 |     export let isReady = false;
15 |     export let isDeactivated = false;
16 |     export let textAlign = false;
17 | 
18 |     let afId;
19 |     let isRunning = true;
20 |     let isCompleted = false;
21 |     let frameCounter = 0;
22 | 
23 |     function run(startTime) {
24 |         let previousTimeStamp;
25 | 
26 |         function update(timeStamp) {
27 |             if ($clock > totalLength || !isRunning || isDeactivated) {
28 |                 cancelAnimationFrame(afId);
29 |                 frameCounter = 0;
30 |                 return;
31 |             }
32 |             const diff = (timeStamp - (previousTimeStamp || startTime)) * speed;
33 |             if (diff >= $clockStep) {
34 |                 $clock += diff;
35 |                 previousTimeStamp = timeStamp;
36 |                 frameCounter++;
37 |             }
38 |             afId = requestAnimationFrame(update);
39 |         }
40 |         afId = requestAnimationFrame(update);
41 |     }
42 | 
43 |     onDestroy(() => browser && cancelAnimationFrame(afId));
44 | 
45 |     $: ({ countdown, starting, raceLength, ending, speed, step } = $animationDetails);
46 |     $: totalLength = countdown + starting + raceLength + ending;
47 | 
48 |     $: isCompleted = $clock > totalLength;
49 |     $: isRunning = !isCompleted;
50 | 
51 |     $: browser && isReady && isRunning && $clockStep && !isDeactivated && run(performance.now());
52 |     $: isCompleted && isRunning && clock.set(0);
53 | 
54 |     $: raceClock = Math.max(0, Math.min(raceLength, $clock - countdown - starting));
55 | </script>
56 | 
57 | <TextAlignEmbed
58 |     disabled={!textAlign}
59 | >
60 |     <div class="controls">
61 |         <PlayButton
62 |             bind:isRunning={isRunning}
63 |         />
64 |         <TimeDisplay
65 |             clock={raceClock}
66 |             speed={speed}
67 |         />
68 |         <ProgressBar
69 |             bind:value={$clock}
70 |             maxValue={totalLength}
71 |             bind:pointerPressed={isDeactivated}
72 |             step={step}
73 |         />
74 |     </div>
75 | </TextAlignEmbed>
76 | 
77 | <style lang="scss"> 
78 |     .controls {
79 |         display: flex;
80 |         width: 100%;
81 |         height: 2rem;
82 |         padding: 0;
83 |         touch-action: none;
84 |         box-sizing: border-box;
85 |     }
86 | </style>


--------------------------------------------------------------------------------
/src/routes/index.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { params } from '$stores/params';
 3 |     import { setup, trackData } from '$stores/data';
 4 |     import { css } from '$utils/actions';
 5 | 
 6 |     import TextAlignEmbed from '$lib/utils/TextAlignEmbed.svelte';
 7 |     import SizeDetector from '$lib/utils/SizeDetector.svelte';
 8 |     import Header from '$lib/header/Header.svelte';
 9 |     import Animation from '$lib/animation/Animation.svelte';
10 |     import Controls from '$lib/controls/Controls.svelte';
11 |     import Sources from '$lib/sources/Sources.svelte';
12 | 
13 |     let width;
14 |     let height;
15 |     let isInView = false;
16 |     let isDeactivated = false;
17 |     let animationReady = false;
18 | 
19 |     $: ({ title, subtitle, sources } = $setup);
20 |     $: ({
21 |         min_height,
22 |         max_height_mobile,
23 |         max_height: presetHeight,
24 |         left_right_padding,
25 |         text_align_disabled
26 |     } = $params);
27 | 
28 |     $: height = Math.max(min_height, Math.min(presetHeight, 1.3 * width / $trackData.aspectRatio));
29 | </script>
30 | 
31 | <div class="app-wrapper">
32 |     <TextAlignEmbed
33 |         disabled={text_align_disabled}
34 |     >
35 |         <SizeDetector
36 |             bind:width={width}
37 |             bind:inView={isInView}
38 |         >
39 |             <div
40 |                 class="wrapper"
41 |                 class:ready={isInView && animationReady}
42 |                 use:css={{
43 |                     height,
44 |                     left_right_padding
45 |                 }}
46 |             >
47 |                 <Header
48 |                     title={title}
49 |                     subtitle={subtitle}
50 |                     textAlign={text_align_disabled}
51 |                 />
52 |                 <Animation
53 |                     bind:isReady={animationReady}
54 |                 />
55 |                 <Controls
56 |                     isReady={isInView && animationReady}
57 |                     bind:isDeactivated={isDeactivated}
58 |                     textAlign={text_align_disabled}
59 |                 />
60 |                 <Sources
61 |                     sources={sources}
62 |                     textAlign={text_align_disabled}
63 |                 />
64 |             </div>
65 |         </SizeDetector>
66 |     </TextAlignEmbed>
67 | </div>
68 | 
69 | <style lang="scss">
70 |     .app-wrapper {
71 |         width: 100%;
72 |     }
73 | 
74 |     .wrapper {
75 |         display: flex;
76 |         flex-direction: column;
77 |         width: 100%;
78 |         min-height: calc(var(--height) * 1px);
79 |         padding: 0 calc(var(--left_right_padding, 0) * 1rem);
80 |         opacity: 0.0;
81 |         box-sizing: border-box;
82 |         transition: opacity 0.1s;
83 | 
84 |         @media (prefers-color-scheme: dark) {
85 |             background-color: $basic-black-dark;
86 |         }
87 | 
88 |         &.ready {
89 |             opacity: 1.0;
90 |         }
91 |     }
92 | </style>


--------------------------------------------------------------------------------
/src/stores/data.js:
--------------------------------------------------------------------------------
 1 | import { derived } from 'svelte/store';
 2 | import { json, autoType } from 'd3';
 3 | import { maxBy } from 'lodash-es';
 4 | 
 5 | import { parseSplitTime } from '$utils/format';
 6 | 
 7 | import { params } from '$stores/params';
 8 | 
 9 | const config = derived(params, async ($params, set) => {
10 |     const { config_path } = $params;
11 |     try {
12 |         const data = await json(config_path, autoType);
13 |         set(data);
14 |     } catch {
15 |         set({});
16 |     }
17 | }, {});
18 | 
19 | export const race = derived(config, $config => {
20 |     const { race = {} } = $config;
21 |     return race;
22 | });
23 | 
24 | export const setup = derived(race, $race => {
25 |     const { setup = {} } = $race;
26 |     return setup;
27 | });
28 | 
29 | export const results = derived(race, $race => {
30 |     const { results = [] } = $race;
31 |     return results.map(result => {
32 |         const { times, finish_time } = result;
33 |         const cumulativeTimes = [0, ...times.map(d => parseSplitTime(d))];
34 |         const finishTimeMs = parseSplitTime(finish_time);
35 |         return {
36 |             ...result,
37 |             times,
38 |             cumulativeTimes,
39 |             finish_time: finish_time.replace('.', ','),
40 |             finishTimeMs
41 |         };
42 |     });
43 | });
44 | 
45 | export const athletes = derived([config, params], ([$config, $params]) => {
46 |     const { athletes = [] } = $config;
47 |     const { flag_server } = $params;
48 |     const flaggedAthletes = athletes.map(athlete => {
49 |         const flagPath = `${flag_server}${athlete.iso}.svg`;
50 |         return {
51 |             ...athlete,
52 |             flagPath
53 |         }
54 |     })
55 |     return flaggedAthletes;
56 | });
57 | 
58 | export const trackData = derived(config, $config => {
59 |     const { race = {}, tracks = {} } = $config;
60 |     if (!race || !tracks) return {};
61 |     const { setup: { type } = {} } = race;
62 |     const track = tracks[type];
63 |     const { parent_svg = {} } = track || {};
64 |     return {
65 |         ...track,
66 |         aspectRatio: parent_svg.width / parent_svg.height
67 |     };
68 | });
69 | 
70 | export const animationDetails = derived([results, setup], ([$results, $setup]) => {
71 |     const { speed, countdown, starting, ending } = $setup;
72 |     const { finishTimeMs: raceLength } = maxBy($results, 'finishTimeMs') || {};
73 |     return {
74 |         ...$setup,
75 |         countdown: countdown * speed,
76 |         starting: starting * speed,
77 |         ending: ending * speed,
78 |         raceLength
79 |     };
80 | });
81 | 
82 | export const athleteResults = derived([athletes, results], ([$athletes, $results]) => {
83 |     const combined = $results.map((result, id) => {
84 |         const { athlete_id } = result;
85 |         const athlete = $athletes.find(d => d.athlete_id === athlete_id);
86 |         return {
87 |             id,
88 |             ...athlete,
89 |             ...result
90 |         };
91 |     });
92 | 
93 |     return combined;
94 | });


--------------------------------------------------------------------------------
/src/lib/animation/IntermediateDisplay.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     // Intermediate times display
  3 |     import { fade } from 'svelte/transition';
  4 |     import { flip } from 'svelte/animate';
  5 | 
  6 |     import { formatValue } from '$utils/format';
  7 | 
  8 |     export let data = [];
  9 |     export let x;
 10 |     export let y;
 11 |     export let config = {};
 12 |     export let reduced = false;
 13 | 
 14 |     $: ({ show_type } = config);
 15 | 
 16 |     $: renderedData = data.slice(reduced ? -2 : 0).map(d => {
 17 |         const { id, sectorTime, background_color } = d;
 18 |         const display = show_type.map(t => d[t]).join(', ');
 19 |         return {
 20 |             id,
 21 |             time: formatValue(sectorTime, 'racetime'),
 22 |             display,
 23 |             color: background_color
 24 |         };
 25 |     });
 26 | </script>
 27 | 
 28 | <ul
 29 |     class="intermediate-display"
 30 |     style="left: {x}px;
 31 |            top: {y}px;"
 32 | >
 33 |     {#each renderedData as { id, time, display, color} (id)}
 34 |         <li
 35 |             style="color: {color};"
 36 |             animate:flip
 37 |             out:fade={{duration: 400}}
 38 |         >
 39 |             <span class="time">
 40 |                 {time}
 41 |             </span>
 42 |             <span class="display">
 43 |                 {display}
 44 |             </span>
 45 |         </li>
 46 |     {/each}
 47 | </ul>
 48 | 
 49 | <style lang="scss">
 50 |     .intermediate-display {
 51 |         position: absolute;
 52 |         z-index: 20;
 53 |         isolation: isolate;
 54 |         display: flex;
 55 |         flex-direction: column;
 56 |         justify-content: flex-end;
 57 |         min-width: 200px;
 58 |         height: 100%;
 59 |         margin: 0;
 60 |         padding: 0;
 61 |         transform: translateX(-50%) translateY(calc(-100% - 35px));
 62 |         list-style-type: none;
 63 | 
 64 |         @media (min-width: 500px) {
 65 |             transform: translateX(-50%) translateY(calc(-100% - 50px));
 66 |         }
 67 |     }
 68 | 
 69 |     li {
 70 |         padding: 0.125rem 0;
 71 |         color: $shade-darker;
 72 |         font-size: 0.875rem;
 73 |         border: none;
 74 |         border-radius: 1.5px;
 75 |         text-shadow: 3px 0px 4px $basic-white, 
 76 |                     -3px 0px 4px $basic-white, 
 77 |                      0px 4px 4px $basic-white;
 78 | 
 79 |         span {
 80 |             display: inline-block;
 81 |         }
 82 | 
 83 |         .time {
 84 |             min-width: 3rem;
 85 |             margin-right: 0.25rem;
 86 |             font-weight: 600;
 87 | 
 88 |             @media (min-width: 500px) {
 89 |                 min-width: 4rem;
 90 |             }
 91 |         }
 92 | 
 93 |         @media (min-width: 500px) {
 94 |             font-size: 1rem;
 95 |         }
 96 | 
 97 |         @media (prefers-color-scheme: dark) {
 98 |             color: $basic-white-dark;
 99 |             text-shadow: 3px 0px 4px $basic-black-dark, 
100 |                         -3px 0px 4px $basic-black-dark, 
101 |                          0px 4px 4px $basic-black-dark;
102 |         }
103 |     }
104 | </style>


--------------------------------------------------------------------------------
/src/lib/animation/Athletes.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     // Wrapper for the athletes
  3 |     import * as createREGL from 'regl';
  4 | 
  5 |     import { sectorCompletes } from '$stores/clock';
  6 |     import { params } from '$stores/params';
  7 |     import { initCanvas, createDrawDots } from '$utils/webgl';
  8 | 
  9 |     import Athlete from '$lib/animation/Athlete.svelte';
 10 | 
 11 |     export let results;
 12 |     export let details;
 13 |     export let trackCoordinates;
 14 |     export let clock;
 15 |     export let width;
 16 |     export let height;
 17 | 
 18 |     let canvas;
 19 |     let regl;
 20 |     let draw;
 21 |     let currentCoords = [];
 22 |     let sizes = [];
 23 |     let colors = [];
 24 |     let opacities = [];
 25 | 
 26 |     function handleSectorComplete(e) {
 27 |         if (!$params.intermediate_times) return; 
 28 |         const { detail } = e;
 29 |         sectorCompletes.add(detail);
 30 |     }
 31 | 
 32 |     $: ({
 33 |         countdown,
 34 |         starting,
 35 |         raceLength,
 36 |         sectors = [],
 37 |         starting_exponent: startingExponent,
 38 |         track_offset_factor: trackOffsetFactor,
 39 |         resolution,
 40 |         trail_length
 41 |     } = details);
 42 | 
 43 |     // Assemble data for single athletes
 44 |     $: athletes = results.map((result, i) => {
 45 |         return {
 46 |             ...result,
 47 |             coordinates: trackCoordinates[i % trackCoordinates.length],
 48 |         };
 49 |     }).reverse();
 50 | 
 51 |     // Setup coordinates container
 52 |     $: coordinatesContainer = Array(athletes.length).fill();
 53 | 
 54 |     // Set pure animation clock
 55 |     $: localClock = Math.max(0, clock - countdown - starting);
 56 | 
 57 |     // Reset intermediate times display
 58 |     $: localClock > raceLength && sectorCompletes.reset();
 59 | 
 60 |     // WebGL definition logic
 61 |     $: if (canvas) {
 62 |         initCanvas(canvas, width, height);
 63 |         regl = createREGL({
 64 |             canvas: canvas,
 65 |             pixelRatio: window.devicePixelRatio || 1,
 66 |             attributes: {
 67 |                 depth: false,
 68 |                 antialias: true
 69 |             }
 70 |         });
 71 |         draw = createDrawDots(regl);
 72 |     }
 73 | 
 74 |     // Draw with WebGL
 75 |     $: if (draw) {
 76 |         const coords = currentCoords.flat();
 77 |         draw({
 78 |             coords,
 79 |             sizes: sizes.flat(),
 80 |             colors: colors.flat(),
 81 |             opacities: opacities.flat(),
 82 |             n: coords.length
 83 |         });
 84 |     }
 85 | </script>
 86 | 
 87 | <canvas
 88 |     class="athletes"
 89 |     bind:this={canvas}
 90 | />
 91 | {#each athletes as data, i}
 92 |     <Athlete
 93 |         data={data}
 94 |         sectors={sectors}
 95 |         startingExponent={startingExponent}
 96 |         localClock={localClock}
 97 |         resolution={resolution}
 98 |         trailLength={trail_length}
 99 |         bind:currentCoords={currentCoords[i]}
100 |         bind:colors={colors[i]}
101 |         bind:sizes={sizes[i]}
102 |         bind:opacities={opacities[i]}
103 |         on:sectorComplete={handleSectorComplete}
104 |     />
105 | {/each}
106 | 
107 | <style lang="scss">
108 |     .athletes {
109 |         position: absolute;
110 |         top: 0;
111 |         left: 0;
112 |         z-index: 50;
113 |     }
114 | </style>


--------------------------------------------------------------------------------
/src/lib/overlay/Results.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     // End results list
  3 |     import { fade } from 'svelte/transition';
  4 |     import { orderBy } from 'lodash-es';
  5 | 
  6 |     import { css } from '$utils/actions';
  7 | 
  8 |     export let results = [];
  9 |     export let config = {};
 10 |     export let delay = 200;
 11 | 
 12 |     function composeName(first, last, country) {
 13 |         let name = `${first} ${last}`;
 14 |         if (show_country) name += ` (${country})`;
 15 |         return name;
 16 |     }
 17 | 
 18 |     $: ({ title, show_medals = true, show_year, show_country } = config);
 19 | </script>
 20 | 
 21 | <div class="results">
 22 |     {#if (title)}
 23 |         <h2 class="title">
 24 |             {title}
 25 |         </h2>
 26 |     {/if}
 27 |     <ul class:title={title}>
 28 |         {#each orderBy(results, 'finishTimeMs') as { id, rank, first_name, last_name, finish_time, year, highlight, medal, background_color, country }, i (id)}
 29 |             <li
 30 |                 in:fade={{duration: 400, delay: i * delay}}
 31 |                 use:css={{highlight, background_color}}
 32 |             >
 33 |                 {#if (show_medals)}
 34 |                     <span class="medal" use:css={{medal}}></span>
 35 |                 {/if}
 36 |                 <span class="rank">
 37 |                     {rank}.
 38 |                 </span>
 39 |                 <span class="time">
 40 |                     {finish_time}
 41 |                 </span>
 42 |                 <span class="name">
 43 |                     {composeName(first_name, last_name, country)}
 44 |                 </span>
 45 |                 {#if (show_year)}
 46 |                     <span class="year">
 47 |                         {year}
 48 |                     </span>
 49 |                 {/if}
 50 |             </li>
 51 |         {/each}
 52 |     </ul>
 53 | </div>
 54 | 
 55 | <style lang="scss">
 56 |     .results {
 57 |         position: relative;
 58 |         width: 100%;
 59 |         height: 100%;
 60 |         color: $basic-black;
 61 |         font-size: 1rem;
 62 |         box-sizing: border-box;
 63 | 
 64 |         @media (prefers-color-scheme: dark) {
 65 |             color: $basic-white-dark;
 66 |         }
 67 | 
 68 |         h2.title {
 69 |             height: 1.5rem;
 70 |             margin: 0.5rem 0 0 0;
 71 |             padding: 0;
 72 |             color: $basic-black;
 73 |             font-size: 1.25rem;
 74 |             font-weight: 700;
 75 |             box-sizing: border-box;
 76 | 
 77 |             @media (prefers-color-scheme: dark) {
 78 |                 color: $basic-white-dark;
 79 |             }
 80 |         }
 81 | 
 82 |         ul {
 83 |             position: absolute;
 84 |             top: 0;
 85 |             right: 0;
 86 |             left: 0;
 87 |             bottom: 0;
 88 |             z-index: 50;
 89 |             display: flex;
 90 |             flex-direction: column;
 91 |             gap: 1rem;
 92 |             margin: 0 auto;
 93 |             padding: 1rem 0;
 94 |             list-style-type: none;
 95 |             overflow-y: auto;
 96 |             pointer-events: all;
 97 | 
 98 |             &.title {
 99 |                 top: 2rem;
100 |             }
101 | 
102 |             li {
103 |                 display: flex;
104 |                 align-items: center;
105 |                 gap: 1rem;
106 | 
107 |                 span {
108 |                     display: inline-block;
109 |                 }
110 | 
111 |                 .rank {
112 |                     min-width: 2rem;
113 |                     text-align: right;
114 |                 }
115 | 
116 |                 .medal {
117 |                     min-width: 1rem;
118 |                     min-height: 1rem;
119 |                     border: 3px solid var(--medal, transparent);
120 |                     border-radius: 100%;
121 |                     box-sizing: border-box;
122 |                 }
123 | 
124 |                 .time {
125 |                     min-width: 3.5rem;
126 |                 }
127 |             }
128 |         }
129 |     }
130 | </style>


--------------------------------------------------------------------------------
/src/utils/webgl.js:
--------------------------------------------------------------------------------
  1 | import { color } from 'd3';
  2 | 
  3 | export const initCanvas = (canvas, width, height) => {
  4 |     const devicePixelRatio = window.devicePixelRatio || 1;
  5 |   
  6 |     canvas.width = devicePixelRatio * width;
  7 |     canvas.height = devicePixelRatio * height;
  8 | 
  9 |     canvas.style.width = `${width}px`;
 10 |     canvas.style.height = `${height}px`;
 11 | };
 12 | 
 13 | export const scaleCanvas = (canvas, ctx, width, height) => {
 14 |     const devicePixelRatio = window.devicePixelRatio || 1;
 15 |     const backingStoreRatio =
 16 |         ctx.webkitBackingStorePixelRatio ||
 17 |         ctx.mozBackingStorePixelRatio ||
 18 |         ctx.msBackingStorePixelRatio ||
 19 |         ctx.oBackingStorePixelRatio ||
 20 |         ctx.backingStorePixelRatio ||
 21 |         1;
 22 | 
 23 |     const ratio = devicePixelRatio / backingStoreRatio;
 24 | 
 25 |     if (devicePixelRatio !== backingStoreRatio) {
 26 |         canvas.width = width * ratio;
 27 |         canvas.height = height * ratio;
 28 |         canvas.style.width = width + 'px';
 29 |         canvas.style.height = height + 'px';
 30 |     } else {
 31 |         canvas.width = width;
 32 |         canvas.height = height;
 33 |         canvas.style.width = '';
 34 |         canvas.style.height = '';
 35 |     }
 36 | 
 37 |     ctx.scale(ratio, ratio);
 38 | };
 39 | 
 40 | export const getWebGLColor = (c) => {
 41 |     const webglColor = Object.values(color(c).rgb())
 42 |         .slice(0, 3)
 43 |         .map(d => d / 255);
 44 |     return webglColor;
 45 | };
 46 | 
 47 | export const generateCartesianToWebGL = (width, height) => ([ x, y ]) => {
 48 |     return [
 49 |         2 * ((x / width) - 0.5),
 50 |         -2 * ((y / height) - 0.5)
 51 |     ];
 52 | };
 53 | 
 54 | export const createDrawDots = (regl) => {
 55 |     return regl({
 56 |         frag: `
 57 |             precision highp float;
 58 | 
 59 |             varying vec3 fragColor;
 60 |             varying float fragOpacity;
 61 | 
 62 |             void main() {
 63 |                 float point_dist = length(gl_PointCoord * 2. - 1.);
 64 | 
 65 |                 if(point_dist > 1.0) discard;
 66 |                 float alpha = fragOpacity;
 67 | 
 68 |                 gl_FragColor = vec4(1.0 - alpha * (1.0 - fragColor), 1);
 69 |             }
 70 |         `,
 71 |         vert: `
 72 |             precision highp float;
 73 | 
 74 |             attribute vec2 position;
 75 |             attribute float size;
 76 |             attribute vec3 color;
 77 |             attribute float opacity;
 78 | 
 79 |             varying vec3 fragColor;
 80 |             varying float fragOpacity;
 81 | 
 82 |             void main() {
 83 |                 fragColor = color;
 84 |                 fragOpacity = opacity;
 85 |                 gl_PointSize = size;
 86 |                 gl_Position = vec4(position, 0.0, 1.0);
 87 |             }
 88 |         `,
 89 |         depth: {
 90 |             enable: false,
 91 |             mask: false
 92 |         },
 93 |         attributes: {
 94 |             position: {
 95 |                 buffer: (_, props) => {
 96 |                     return props.coords
 97 |                 }
 98 |             },
 99 |             size: {
100 |                 buffer: (_, props) => {
101 |                     return props.sizes
102 |                 }
103 |             },
104 |             color: {
105 |                 buffer: (_, props) => {
106 |                     return props.colors
107 |                 }
108 |             },
109 |             opacity: {
110 |                 buffer: (_, props) => {
111 |                     return props.opacities
112 |                 }
113 |             }
114 |         },
115 |         blend: {
116 |             enable: true,
117 |             func: {
118 |                 srcRGB: 'src alpha',
119 |                 srcAlpha: 'src alpha',
120 |                 dstRGB: 'one minus src alpha',
121 |                 dstAlpha: 'one minus src alpha',
122 |             }
123 |         },
124 |         count: (_, props) => props.n,
125 |         primitive: 'points'
126 |     });
127 | };


--------------------------------------------------------------------------------
/src/lib/animation/Track.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     // Speed skating track
  3 |     import { onMount } from 'svelte';
  4 | 
  5 |     import { fusePaths } from '$utils/geometry';
  6 |     import { getRange, getNormalOffsetCoords } from '$utils/math';
  7 |     import { generateCartesianToWebGL } from '$utils/webgl';
  8 | 
  9 |     import Background from '$lib/animation/Background.svelte';
 10 | 
 11 |     export let data;
 12 |     export let details = {};
 13 |     export let coordinates = [];
 14 |     export let endCoordinate = {};
 15 |     export let containerWidth = undefined;
 16 |     export let containerHeight = undefined;
 17 |     export let isReady = false;
 18 | 
 19 |     let track;
 20 |     let fusedPath = null;
 21 |     let tid;
 22 |     let svgElem;
 23 |     let gElem;
 24 |     let pathElement;
 25 |     let cartesianToWebGL;
 26 |     let basicCoordinates = [];
 27 | 
 28 |     function handleResize() {
 29 |         clearTimeout(tid);
 30 |         ({ width: containerWidth, height: containerHeight } = gElem.getBoundingClientRect());
 31 |     }
 32 | 
 33 |     function throttleResize() {
 34 |         clearTimeout(tid);
 35 |         tid = setTimeout(handleResize, 100);
 36 |     }
 37 | 
 38 |     function getBasicCoordinates({ getCoord }, { resolution }) {
 39 |         const positions = getRange(0, 1, 1 / resolution);
 40 |         const coords = positions.map(position => {
 41 |             const coord = getCoord(position);
 42 |             return coord;
 43 |         });
 44 |         return coords;
 45 |     }
 46 | 
 47 |     function getCoordinates(basicCoordinates, {
 48 |         trackOffsetFactor,
 49 |         cartesianToWebGL,
 50 |         i,
 51 |         numPaths,
 52 |         offsetFunctionType
 53 |     }) {
 54 |         const ratio = (i + 1) / numPaths * (i % 2 === 0 ? 1 : -1);
 55 |         let offsetFunction = (v) => v;
 56 |         if (offsetFunctionType === 'sinewave') {
 57 |             offsetFunction = (progress) => Math.sin(progress * 100 + Math.abs(ratio) * Math.PI) / trackOffsetFactor;
 58 |         } else if (offsetFunctionType === 'linear') {
 59 |             offsetFunction = () => ratio * trackOffsetFactor;
 60 |         } else if (offsetFunctionType === 'linearalternate') {
 61 |             offsetFunction = () => ((i % numPaths) / numPaths * (i % 2 === 0 ? 1 : -1)) * trackOffsetFactor;
 62 |         }
 63 | 
 64 |         const offsetCoords = basicCoordinates.map((coord, i, arr) => {
 65 |             const progress = i / (arr.length - 1);
 66 |             const trackOffset = offsetFunction(progress);
 67 |             const coord1 = arr[i - 1] || coord;
 68 |             const coord2 = arr[i + 1] || coord;
 69 |             const offsetCoord = getNormalOffsetCoords(coord, coord1, coord2, trackOffset);
 70 |             return offsetCoord;
 71 |         });
 72 | 
 73 |         const coordArray = offsetCoords.map(({ x, y }) => cartesianToWebGL([x, y]));
 74 | 
 75 |         return coordArray;
 76 |     }
 77 | 
 78 |     onMount(() => {
 79 |         setTimeout(() => {
 80 |             window.dispatchEvent(new Event('resize'));
 81 |             throttleResize();
 82 |         }, 125);
 83 | 
 84 |         new ResizeObserver(throttleResize).observe(svgElem);
 85 | 
 86 |         return () => clearTimeout(tid);
 87 |     });
 88 | 
 89 |     $: ({
 90 |         type,
 91 |         composition,
 92 |         num_paths: numPaths,
 93 |         resolution,
 94 |         track_offset_factor: trackOffsetFactor,
 95 |         offset_function_type: offsetFunctionType
 96 |     } = details);
 97 | 
 98 |     $: ({ parent_svg: { width = 0, height = 0 } = {}, paths = [] } = data || {});
 99 |     $: aspectRatio = width / height;
100 | 
101 |     // Generate a fused path from different smaller paths in order to assemble the speed skating track
102 |     $: if (composition) fusedPath = fusePaths(
103 |         composition
104 |             .split(',')
105 |             .map(d => paths.find(({ id }) => +d === id))
106 |             .map(({ path } = {}) => path)
107 |             .filter(d => d)
108 |     );
109 | 
110 |     // Define track object which holds the info how to get positions on the track
111 |     $: if (svgElem && pathElement) {
112 |         const scaleX = containerWidth / width;
113 |         const scaleY = containerHeight / height;
114 |         if (!isNaN(scaleX) && !isNaN(scaleY)) {
115 |             const matrix = svgElem.createSVGMatrix().scaleNonUniform(scaleX, scaleY);
116 |             const length = pathElement.getTotalLength();
117 |             const getCoord = (relPos) => {
118 |                 return pathElement.getPointAtLength(relPos * length).matrixTransform(matrix);
119 |             };
120 |             track = {
121 |                 pathElement,
122 |                 matrix,
123 |                 getCoord,
124 |                 length
125 |             };
126 |             cartesianToWebGL = generateCartesianToWebGL(containerWidth, containerHeight);
127 |         }
128 |     }
129 | 
130 |     // Precalculate every possible coordinate on the track
131 |     $: if (isReady) {
132 |         basicCoordinates = getBasicCoordinates(track, {resolution});
133 |         endCoordinate = basicCoordinates.slice(-1)[0];
134 |     }
135 | 
136 |     // Apply an offset to the coordinates
137 |     $: if (basicCoordinates && basicCoordinates.length) coordinates = Array.from({length: numPaths}).map((_, i) => getCoordinates(basicCoordinates, {
138 |         trackOffsetFactor,
139 |         cartesianToWebGL,
140 |         i,
141 |         numPaths,
142 |         offsetFunctionType
143 |     }));
144 | 
145 |     $: isReady = containerWidth && containerWidth < width;
146 | </script>
147 | 
148 | <svelte:window on:resize={throttleResize} />
149 | 
150 | <div
151 |     class="track"
152 | >
153 |     <Background
154 |         type={type}
155 |         width={containerWidth}
156 |         height={containerHeight}
157 |     />
158 |     <svg
159 |         height="100%"
160 |         width="100%"
161 |         viewBox="0 0 {width} {height}"
162 |         bind:this={svgElem}
163 |     >
164 |         <g
165 |             bind:this={gElem}
166 |         >
167 |             <path
168 |                 class:stroke={type === 'sliding'}
169 |                 d={fusedPath}
170 |                 bind:this={pathElement}
171 |             />
172 |             <circle cx="1" cy="1" r="1"/>
173 |             <circle cx={width - 1} cy={height - 1} r="1" />
174 |         </g>
175 |     </svg>
176 | </div>
177 | 
178 | <style lang="scss">
179 |     .track {
180 |         position: absolute;
181 |         top: 0;
182 |         right: 0;
183 |         bottom: 0;
184 |         left: 0;
185 |         isolation: isolate;
186 |         display: flex;
187 |         align-items: center;
188 |         justify-content: center;
189 |     }
190 | 
191 |     svg {
192 |         position: relative;
193 |     }
194 | 
195 |     path {
196 |         fill: none;
197 |         stroke: none;
198 |         vector-effect: non-scaling-stroke;
199 | 
200 |         &.stroke {
201 |             stroke: $basic-black;
202 |             stroke-width: 4px;
203 |             stroke-linecap: round;
204 | 
205 |             @media (prefers-color-scheme: dark) {
206 |                 stroke: $basic-white-dark;
207 |             }
208 |         }
209 |     }
210 | 
211 |     circle {
212 |         visibility: hidden;
213 |     }
214 | </style>


--------------------------------------------------------------------------------
/static/config.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "race": {
  3 |         "setup": {
  4 |             "type": "speedskating",
  5 |             "name": "Claudia Pechstein 3000m",
  6 |             "date": "2022-02-05",
  7 |             "place": "Beijing and others",
  8 |             "title": "Running after her shadows",
  9 |             "subtitle": "3000m speed skating: Claudia Pechstein <span style='border-bottom: 2px solid #D03D12;'>in 2022</span> vs. <span style='border-bottom: 2px solid #0096C7';>her previous self</span>.",
 10 |             "length": 3000,
 11 |             "composition": "6,7,8,9,10,0,1,2,3,4,5,6,7,8,9,10,0,1,2,3,4,5,6,7,8,9,10,0,1,2,3,4,5,6,7,8,9,10,0,1,2,3,4,5,6,7,8,9,10,0,1,2,3,4,5,6,7,8,9,10,0,1,2,3,4,5,6,7,8,9,10,0,1,2,3,4,5,6,7,8,9,10",
 12 |             "sectors": [0.0, 0.0667, 0.2, 0.3333, 0.4667, 0.6, 0.7333, 0.8667, 1.0],
 13 |             "num_paths": 7,
 14 |             "resolution": 5000,
 15 |             "trail_length": 30,
 16 |             "countdown": 3000,
 17 |             "starting": 0,
 18 |             "ending": 0,
 19 |             "step": 5,
 20 |             "starting_exponent": 1.4,
 21 |             "offset_function_type": "sinewave",
 22 |             "track_offset_factor": 0.8,
 23 |             "speed": 10,
 24 |             "result": {
 25 |                 "show_year": true,
 26 |                 "show_country": false
 27 |             },
 28 |             "sources": "Sources: Sports Reference, ISU"
 29 |         },
 30 |         "results": [
 31 |             {
 32 |                 "athlete_id": 0,
 33 |                 "year": 2022,
 34 |                 "times": ["21.04", "53.35", "1:26.36", "1:59.91", "2:34.03", "3:08.31", "3:42.90", "4:17.16"],
 35 |                 "finish_time": "4:17.16",
 36 |                 "opacity": 0.7,
 37 |                 "background_color": "#D03D12",
 38 |                 "trail_color": "#C4DDEF",
 39 |                 "size": 16,
 40 |                 "show_flag": false,
 41 |                 "rank": 6,
 42 |                 "medal": null
 43 |             },
 44 |             {
 45 |                 "athlete_id": 0,
 46 |                 "year": 2002,
 47 |                 "times": ["19.45", "49.93", "1:21.00", "1:52.30", "2:23.38", "2:54.57", "3:25.86", "3:57.70"],
 48 |                 "finish_time": "3:57.70",
 49 |                 "opacity": 0.7,
 50 |                 "background_color": "#0096C7",
 51 |                 "trail_color": "#C4DDEF",
 52 |                 "size": 16,
 53 |                 "show_flag": false,
 54 |                 "rank": 1,
 55 |                 "medal": "#D6AF36"
 56 |             },
 57 |             {
 58 |                 "athlete_id": 0,
 59 |                 "year": 2018,
 60 |                 "times": ["20.73", "52.02", "1:23.45", "1:55.07", "2:26.88", "2:58.96", "3:31.53", "4:04.49"],
 61 |                 "finish_time": "4:04.49",
 62 |                 "opacity": 0.7,
 63 |                 "background_color": "#0096C7",
 64 |                 "trail_color": "#C4DDEF",
 65 |                 "size": 16,
 66 |                 "show_flag": false,
 67 |                 "rank": 2,
 68 |                 "medal": null
 69 |             },
 70 |             {
 71 |                 "athlete_id": 0,
 72 |                 "year": 2014,
 73 |                 "times": ["20.21", "51.19", "1:22.54", "1:54.41", "2:26.30", "2:58.87", "3:32.00", "4:05.26"],
 74 |                 "finish_time": "4:05.26",
 75 |                 "opacity": 0.7,
 76 |                 "background_color": "#0096C7",
 77 |                 "trail_color": "#C4DDEF",
 78 |                 "size": 16,
 79 |                 "show_flag": false,
 80 |                 "rank": 3,
 81 |                 "medal": null
 82 |             },
 83 |             
 84 |             {
 85 |                 "athlete_id": 0,
 86 |                 "year": 2006,
 87 |                 "times": ["19.53", "50.21", "1:21.68", "1:53.55", "2:25.84", "2:58.64", "3:31.66", "4:05.54"],
 88 |                 "finish_time": "4:05.54",
 89 |                 "opacity": 0.7,
 90 |                 "background_color": "#0096C7",
 91 |                 "trail_color": "#C4DDEF",
 92 |                 "size": 16,
 93 |                 "show_flag": false,
 94 |                 "rank": 4,
 95 |                 "medal": null
 96 |             },
 97 |             {
 98 |                 "athlete_id": 0,
 99 |                 "year": 1998,
100 |                 "times": ["20.11", "51.41", "1:22.79", "1:54.30", "2:26.29", "2:59.12", "3:33.21", "4:08.47"],
101 |                 "finish_time": "4:08.47",
102 |                 "opacity": 0.7,
103 |                 "background_color": "#0096C7",
104 |                 "trail_color": "#C4DDEF",
105 |                 "size": 16,
106 |                 "show_flag": false,
107 |                 "rank": 5,
108 |                 "medal": "#A7A7AD"
109 |             },
110 |             {
111 |                 "athlete_id": 0,
112 |                 "year": 1994,
113 |                 "times": ["20.23", "52.53", "1:25.80", "1:59.51", "2:33.63", "3:08.05", "3:43.09", "4:18.34"],
114 |                 "finish_time": "4:18.34",
115 |                 "opacity": 0.7,
116 |                 "background_color": "#0096C7",
117 |                 "trail_color": "#C4DDEF",
118 |                 "size": 16,
119 |                 "show_flag": false,
120 |                 "rank": 7,
121 |                 "medal": "#fcb59f"
122 |             }
123 |         ]
124 |     },
125 |     "athletes": [
126 |         {
127 |             "athlete_id": 0,
128 |             "first_name": "Claudia",
129 |             "last_name": "Pechstein",
130 |             "age": 49,
131 |             "country": "Deutschland",
132 |             "iso": "de"
133 |         }
134 |     ],
135 |     "tracks": {
136 |         "speedskating": {
137 |             "parent_svg": {
138 |                 "width": 2586,
139 |                 "height": 1048
140 |             },
141 |             "paths": [
142 |                 {
143 |                     "id": 0,
144 |                     "path": "M1878 922.5H2037"
145 |                 },
146 |                 {
147 |                     "id": 1,
148 |                     "path": "M2037,922.5C2257.09,922.5 2435.5,744.085 2435.5,524"
149 |                 },
150 |                 {
151 |                     "id": 2,
152 |                     "path": "M2435.5 524C2435.5 303.415 2257.09 125 2037 125"
153 |                 },
154 |                 {
155 |                     "id": 3,
156 |                     "path": "M2037 125H1933"
157 |                 },
158 |                 {
159 |                     "id": 4,
160 |                     "path": "M1933 125H1188"
161 |                 },
162 |                 {
163 |                     "id": 5,
164 |                     "path": "M1188 125H604"
165 |                 },
166 |                 {
167 |                     "id": 6,
168 |                     "path": "M604 125H549"
169 |                 },
170 |                 {
171 |                     "id": 7,
172 |                     "path": "M549,125C329.415,125 151,303.415 151,524"
173 |                 },
174 |                 {
175 |                     "id": 8,
176 |                     "path": "M151,524C151,744.085 329.415,922.5 549,922.5"
177 |                 },
178 |                 {
179 |                     "id": 9,
180 |                     "path": "M549 922.5H1293"
181 |                 },
182 |                 {
183 |                     "id": 10,
184 |                     "path": "M1293 922.5H1878"
185 |                 }
186 |             ],
187 |             "intermediate_display": {
188 |                 "show_type": ["last_name", "year"]
189 |             }
190 |         }
191 |     }
192 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------