flush changes for someone wanting to commit a pr

package-lock.json

@@ -16,6 +16,7 @@
 				"@sveltejs/adapter-auto": "^3.0.0",
 				"@sveltejs/kit": "^2.0.0",
 				"@sveltejs/vite-plugin-svelte": "^3.0.0",
+				"nintendo-switch-eshop": "^7.1.3",
 				"prettier": "^3.1.1",
 				"prettier-plugin-svelte": "^3.1.2",
 				"sharp": "^0.33.2",
@@ -1090,6 +1091,29 @@
 				"win32"
 			]
 		},
+		"node_modules/@sapphire/fetch": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/@sapphire/fetch/-/fetch-2.4.2.tgz",
+			"integrity": "sha512-aLZJ+ij3vAkHH6JlCbkT7Nj0dNLFdOEv0m1apNPFtUzHpaFdFeayYjLVfsY1JFVssvzjVr4x+mQTQ+XQIqraSg==",
+			"dev": true,
+			"dependencies": {
+				"cross-fetch": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=v14.0.0",
+				"npm": ">=7.0.0"
+			}
+		},
+		"node_modules/@sapphire/result": {
+			"version": "2.6.6",
+			"resolved": "https://registry.npmjs.org/@sapphire/result/-/result-2.6.6.tgz",
+			"integrity": "sha512-QCjj7X/QlY0QUCeAaZQmnrsMH/b2BMQYee3F1Y5iF17JagUQqO3KZlG7vfXWQU3SRAJX5OgZZynBjixUH+nNGg==",
+			"dev": true,
+			"engines": {
+				"node": ">=v14.0.0",
+				"npm": ">=7.0.0"
+			}
+		},
 		"node_modules/@sveltejs/adapter-auto": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.1.1.tgz",
@@ -1202,6 +1226,12 @@
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
 			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
 		},
+		"node_modules/@types/country-data": {
+			"version": "0.0.2",
+			"resolved": "https://registry.npmjs.org/@types/country-data/-/country-data-0.0.2.tgz",
+			"integrity": "sha512-9TtlOfoHEMWojmAV1IoisMlM9kXGw4QDAamkXUiCZBtU9sY3187naTc1OXwD3QVE1mMkPZbBVdyjVdBu7wJlNA==",
+			"dev": true
+		},
 		"node_modules/@types/estree": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -1540,6 +1570,25 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/country-data": {
+			"version": "0.0.31",
+			"resolved": "https://registry.npmjs.org/country-data/-/country-data-0.0.31.tgz",
+			"integrity": "sha512-YqlY/i6ikZwoBFfdjK+hJTGaBdTgDpXLI15MCj2UsXZ2cPBb+Kx86AXmDH7PRGt0LUleck0cCgNdWeIhfbcxkQ==",
+			"dev": true,
+			"dependencies": {
+				"currency-symbol-map": "~2",
+				"underscore": ">1.4.4"
+			}
+		},
+		"node_modules/cross-fetch": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
+			"integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
+			"dev": true,
+			"dependencies": {
+				"node-fetch": "^2.6.12"
+			}
+		},
 		"node_modules/css-select": {
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
@@ -1613,6 +1662,12 @@
 			"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
 			"dev": true
 		},
+		"node_modules/currency-symbol-map": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/currency-symbol-map/-/currency-symbol-map-2.2.0.tgz",
+			"integrity": "sha512-fPZJ3jqM68+AAgqQ7UaGbgHL/39rp6l7GyqS2k1HJPu/kpS8D07x/+Uup6a9tCUKIlOFcRrDCf1qxSt8jnI5BA==",
+			"dev": true
+		},
 		"node_modules/debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1849,6 +1904,28 @@
 				"node": ">=8.6.0"
 			}
 		},
+		"node_modules/fast-xml-parser": {
+			"version": "4.3.5",
+			"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.3.5.tgz",
+			"integrity": "sha512-sWvP1Pl8H03B8oFJpFR3HE31HUfwtX7Rlf9BNsvdpujD4n7WMhfmu8h9wOV2u+c1k0ZilTADhPqypzx2J690ZQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/NaturalIntelligence"
+				},
+				{
+					"type": "paypal",
+					"url": "https://paypal.me/naturalintelligence"
+				}
+			],
+			"dependencies": {
+				"strnum": "^1.0.5"
+			},
+			"bin": {
+				"fxparser": "src/cli/cli.js"
+			}
+		},
 		"node_modules/fastq": {
 			"version": "1.17.1",
 			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -2243,6 +2320,23 @@
 			"resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
 			"integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg=="
 		},
+		"node_modules/nintendo-switch-eshop": {
+			"version": "7.1.3",
+			"resolved": "https://registry.npmjs.org/nintendo-switch-eshop/-/nintendo-switch-eshop-7.1.3.tgz",
+			"integrity": "sha512-qqAx8/tUJNCzVz0ej6wQ8JI5FtFeF21S7cPeSUrMysVQNbVrjkI/dZic2kR4EbIecjk2TD/DYtqKnMUDDqQvGQ==",
+			"dev": true,
+			"dependencies": {
+				"@sapphire/fetch": "^2.4.1",
+				"@sapphire/result": "^2.6.1",
+				"@types/country-data": "^0.0.2",
+				"country-data": "^0.0.31",
+				"fast-xml-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": ">=10",
+				"npm": ">=6"
+			}
+		},
 		"node_modules/node-abi": {
 			"version": "3.56.0",
 			"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.56.0.tgz",
@@ -2259,6 +2353,26 @@
 			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
 			"integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA=="
 		},
+		"node_modules/node-fetch": {
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+			"integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+			"dev": true,
+			"dependencies": {
+				"whatwg-url": "^5.0.0"
+			},
+			"engines": {
+				"node": "4.x || >=6.0.0"
+			},
+			"peerDependencies": {
+				"encoding": "^0.1.0"
+			},
+			"peerDependenciesMeta": {
+				"encoding": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/normalize-path": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -2828,6 +2942,12 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/strnum": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
+			"integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==",
+			"dev": true
+		},
 		"node_modules/supports-color": {
 			"version": "7.2.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3047,6 +3167,12 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/tr46": {
+			"version": "0.0.3",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+			"dev": true
+		},
 		"node_modules/tslib": {
 			"version": "2.6.2",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
@@ -3077,6 +3203,12 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/underscore": {
+			"version": "1.13.6",
+			"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
+			"integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
+			"dev": true
+		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -3212,6 +3344,22 @@
 				}
 			}
 		},
+		"node_modules/webidl-conversions": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+			"dev": true
+		},
+		"node_modules/whatwg-url": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+			"dev": true,
+			"dependencies": {
+				"tr46": "~0.0.3",
+				"webidl-conversions": "^3.0.0"
+			}
+		},
 		"node_modules/wrappy": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"nintendo-switch-eshop": "^7.1.3",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"sharp": "^0.33.2",

src/components/LogoWithTextHorizontal.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+
+	export let size = 512;
+
+	const dispatcher = createEventDispatcher<{
+		click: void;
+	}>();
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<svg
+	class="pointer"
+	on:click={() => dispatcher("click")}
+	width={size * 3.771484375}
+	height={size}
+	viewBox="0 0 1931 512"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M1761.76 362.559C1828.26 362.559 1865.29 340.974 1877.74 294.87H1878.58C1878.58 316.024 1877.74 343.446 1876.9 358.402H1930.07V153.155H1876.9V237.082C1876.9 289.051 1832 318.973 1779.23 318.973C1720.61 318.973 1701.48 295.702 1701.48 257.882V153.155H1648.34V269.104C1648.34 318.559 1681.97 362.559 1761.76 362.559Z"
+		fill="white"
+	/>
+	<path
+		d="M1402.72 449C1453.41 449 1476.68 426.588 1509.92 362.978L1618.78 153.155H1564.35L1482.08 311.453H1481.25L1388.59 153.155H1326.68L1447.59 358.402H1457.98C1436.37 399.173 1422.66 407.493 1396.07 407.493C1381.52 407.493 1368.23 404.581 1361.58 402.501V443.181C1369.47 445.68 1385.68 449 1402.72 449Z"
+		fill="white"
+	/>
+	<path
+		d="M1126.74 362.559C1193.26 362.559 1230.26 340.974 1242.73 294.87H1243.56C1243.56 316.024 1242.73 343.446 1241.9 358.402H1295.04V153.155H1241.9V237.082C1241.9 289.051 1197 318.973 1144.21 318.973C1085.59 318.973 1066.47 295.702 1066.47 257.882V153.155H1013.33V269.104C1013.33 318.559 1046.95 362.559 1126.74 362.559Z"
+		fill="white"
+	/>
+	<path
+		d="M844.987 362.559C951.791 362.559 975.456 326.453 975.456 294.857C975.456 275.317 966.736 258.688 947.639 249.957C929.784 242.474 902.773 239.98 866.188 238.316C833.76 236.655 807.153 236.655 792.604 232.913C779.299 230.001 775.142 224.182 775.142 215.867C775.142 196.326 798.009 186.765 846.648 186.765C902.773 186.765 912.749 202.147 913.165 222.518H963.416C963.416 183.861 942.657 149 844.987 149C766.424 149 722 176.805 722 218.361C722 235.407 728.643 251.205 744.004 259.52C759.781 268.25 790.94 273.24 833.346 274.485C859.953 275.317 891.132 276.149 905.682 279.059C918.986 281.971 922.312 288.206 922.312 296.521C922.312 312.735 908.178 324.791 844.987 324.791C780.963 324.791 772.651 307.329 772.238 290.286H722C722 321.05 738.606 362.559 844.987 362.559Z"
+		fill="white"
+	/>
+	<path
+		d="M394.634 471.208C407.342 448.401 414.583 422.138 414.583 394.194C414.583 306.657 343.529 235.612 255.992 235.612C190.969 235.612 138.192 182.835 138.192 117.806C138.192 52.7762 190.969 0 255.992 0C397.313 0 512 114.688 512 256C512 346.235 465.227 425.613 394.634 471.208ZM255.992 52.7613C244.032 52.7613 234.316 62.4761 234.316 74.4429C234.316 86.4084 244.032 96.1245 255.992 96.1245C267.969 96.1245 277.673 86.4084 277.673 74.4429C277.673 62.4761 267.969 52.7613 255.992 52.7613ZM299.355 96.1245C287.391 96.1245 277.673 105.839 277.673 117.806C277.673 129.772 287.391 139.488 299.355 139.488C311.332 139.488 321.036 129.772 321.036 117.806C321.036 105.839 311.332 96.1245 299.355 96.1245ZM212.635 96.1245C200.669 96.1245 190.955 105.839 190.955 117.806C190.955 129.772 200.669 139.488 212.635 139.488C224.601 139.488 234.316 129.772 234.316 117.806C234.316 105.839 224.601 96.1245 212.635 96.1245ZM255.992 139.488C244.032 139.488 234.316 149.203 234.316 161.168C234.316 173.135 244.032 182.85 255.992 182.85C267.969 182.85 277.673 173.135 277.673 161.168C277.673 149.203 267.969 139.488 255.992 139.488Z"
+		fill="#FF3554"
+	/>
+	<path
+		d="M117.361 40.7917C104.657 63.5994 97.4173 89.8623 97.4173 117.806C97.4173 205.343 168.461 276.388 255.992 276.388C321.022 276.388 373.805 329.165 373.805 394.194C373.805 459.222 321.022 512 255.992 512C114.687 512 0 397.312 0 256C0 165.766 46.7638 86.3854 117.361 40.7917ZM255.992 329.149C244.032 329.149 234.316 338.865 234.316 350.831C234.316 362.798 244.032 372.512 255.992 372.512C267.969 372.512 277.673 362.798 277.673 350.831C277.673 338.865 267.969 329.149 255.992 329.149ZM299.355 372.512C287.391 372.512 277.673 382.227 277.673 394.194C277.673 406.161 287.391 415.876 299.355 415.876C311.332 415.876 321.036 406.161 321.036 394.194C321.036 382.227 311.332 372.512 299.355 372.512ZM255.992 415.876C244.032 415.876 234.316 425.59 234.316 437.557C234.316 449.523 244.032 459.239 255.992 459.239C267.969 459.239 277.673 449.523 277.673 437.557C277.673 425.59 267.969 415.876 255.992 415.876ZM212.634 372.512C200.669 372.512 190.954 382.227 190.954 394.194C190.954 406.161 200.669 415.876 212.634 415.876C224.601 415.876 234.316 406.161 234.316 394.194C234.316 382.227 224.601 372.512 212.634 372.512Z"
+		fill="#3A99FF"
+	/>
+</svg>
+
+<style>
+	.pointer {
+		cursor: pointer;
+	}
+</style>

src/components/ProgressBar.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	export let progress = 1;
+	export let total = 1;
+</script>
+
+<div class="progress-bar">
+	<div class="overflow-handler">
+		<div
+			class="progress"
+			style="width: {((progress === 0 ? 1 : progress) / (total === 0 ? 1 : total)) * 100}%"
+		></div>
+	</div>
+	<div class="glow-container">
+		<div
+			class="glow"
+			style="width: {((progress === 0 ? 1 : progress) / (total === 0 ? 1 : total)) * 100}%"
+		></div>
+	</div>
+</div>
+
+<style>
+	.progress-bar {
+		position: relative;
+		width: 100%;
+		height: 8px;
+		background-color: rgba(255, 255, 255, 0.1);
+		border-radius: 4px;
+	}
+
+	.overflow-handler {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		border-radius: 4px;
+	}
+
+	.progress {
+		height: 100%;
+		/* background-color: rgb(77, 156, 199); */
+		transition: 0.5s ease-in-out width;
+		clip-path: inset(0);
+	}
+
+	.progress::before {
+		width: 100%;
+		content: "";
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(to right, #ff3a3a, rgb(210, 103, 201), #3a99ff);
+	}
+
+	.glow-container {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		filter: blur(18px);
+	}
+
+	.glow {
+		height: 100%;
+		transition: 0.5s ease-in-out width;
+		clip-path: inset(-36px -24px);
+	}
+
+	.glow::before {
+		width: 100%;
+		content: "";
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(to right, #ff3a3a, rgb(210, 103, 201), #3a99ff);
+	}
+</style>

src/components/Spinner.svelte

@@ -0,0 +1,74 @@
+<div class="spinner">
+	{#each Array(9) as _, i}
+		<div class="bounce" />
+	{/each}
+</div>
+
+<style>
+	@keyframes flash {
+		0% {
+			opacity: 1;
+			box-shadow: 0 0 10px 0px white;
+		}
+		30% {
+			opacity: 0.4;
+			box-shadow: 0 0 4px 0px white;
+		}
+		100% {
+			opacity: 0;
+		}
+	}
+
+	.spinner {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		grid-gap: 6px;
+		justify-content: center;
+		align-items: center;
+		width: fit-content;
+		height: fit-content;
+	}
+
+	.bounce {
+		aspect-ratio: 1/1;
+		width: 8px;
+		background-color: white;
+		opacity: 0.5;
+	}
+
+	.bounce:not(:nth-child(5)) {
+		animation: linear 0.8s infinite flash;
+	}
+
+	.bounce:nth-child(1) {
+		animation-delay: 0.1s;
+	}
+
+	.bounce:nth-child(2) {
+		animation-delay: 0.2s;
+	}
+
+	.bounce:nth-child(3) {
+		animation-delay: 0.3s;
+	}
+
+	.bounce:nth-child(6) {
+		animation-delay: 0.4s;
+	}
+
+	.bounce:nth-child(9) {
+		animation-delay: 0.5s;
+	}
+
+	.bounce:nth-child(8) {
+		animation-delay: 0.6s;
+	}
+
+	.bounce:nth-child(7) {
+		animation-delay: 0.7s;
+	}
+
+	.bounce:nth-child(4) {
+		animation-delay: 0.8s;
+	}
+</style>

src/components/Wordmark.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	export let size = 256;
+</script>
+
+<svg
+	width={size * 4.02734375}
+	height={size}
+	viewBox="0 0 1031 256"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M887.264 182.237C944.012 182.237 975.604 163.818 986.232 124.476H986.946C986.946 142.527 986.232 165.928 985.517 178.689H1030.89V3.54565H985.517V75.1629C985.517 119.51 947.205 145.043 902.172 145.043C852.144 145.043 835.826 125.186 835.826 92.9126V3.54565H790.478V102.489C790.478 144.69 819.175 182.237 887.264 182.237Z"
+		fill="white"
+	/>
+	<path
+		d="M580.878 256C624.135 256 643.991 236.875 672.357 182.594L765.256 3.54565H718.805L648.601 138.626H647.891L568.823 3.54565H515.992L619.17 178.689H628.036C609.599 213.481 597.897 220.581 575.204 220.581C562.795 220.581 551.449 218.096 545.776 216.321V251.035C552.512 253.167 566.341 256 580.878 256Z"
+		fill="white"
+	/>
+	<path
+		d="M345.383 182.237C402.141 182.237 433.714 163.818 444.354 124.476H445.064C445.064 142.527 444.355 165.928 443.647 178.689H488.994V3.54565H443.647V75.1629C443.647 119.51 405.334 145.043 360.283 145.043C310.265 145.043 293.946 125.186 293.946 92.9126V3.54565H248.599V102.489C248.599 144.69 277.295 182.237 345.383 182.237Z"
+		fill="white"
+	/>
+	<path
+		d="M104.949 182.237C196.088 182.237 216.283 151.426 216.283 124.465C216.283 107.791 208.842 93.6001 192.545 86.1497C177.31 79.7643 154.26 77.6366 123.04 76.2166C95.3684 74.7989 72.6644 74.7989 60.2485 71.6062C48.8954 69.1212 45.3478 64.1557 45.3478 57.0603C45.3478 40.3845 64.8612 32.2264 106.367 32.2264C154.259 32.2264 162.773 45.3522 163.128 62.7357H206.008C206.008 29.7481 188.294 0 104.949 0C37.9084 0 0 23.7266 0 59.188C0 73.7339 5.66882 87.2146 18.7768 94.3101C32.2398 101.76 58.8286 106.018 95.0157 107.081C117.72 107.791 144.326 108.501 156.742 110.984C168.095 113.469 170.933 118.789 170.933 125.885C170.933 139.72 158.872 150.008 104.949 150.008C50.3154 150.008 43.2222 135.108 42.8694 120.564H0C0 146.816 14.1707 182.237 104.949 182.237Z"
+		fill="white"
+	/>
+</svg>

src/lib/css/index.css

@@ -50,3 +50,23 @@ body {
 ::-webkit-scrollbar-thumb:hover {
 	background: #526ca8;
 }
+
+button {
+	appearance: none;
+	border: none;
+	padding: 8px 32px;
+	background-color: var(--color-primary);
+	border: var(--border-primary);
+	border-radius: 16px;
+	cursor: pointer;
+	transition: 0.2s ease-in-out filter;
+}
+
+button:hover {
+	filter: brightness(1.1);
+}
+
+button:active {
+	transition: 0.05s ease-in-out filter;
+	filter: brightness(0.9);
+}

src/routes/+layout.svelte

@@ -1,19 +1,42 @@
 <script lang="ts">
+	import { goto } from "$app/navigation";
 	import BackgroundProvider from "$components/BackgroundProvider.svelte";
+	import LogoWithTextHorizontal from "$components/LogoWithTextHorizontal.svelte";
+	import { page } from "$app/stores";
 	import "$lib/css/index.css";
+
+	const excludedRoutesNav = ["/mockup/boot"];
+	const excludedRoutesBg = ["/mockup"];
+	$: isNavExcluded = excludedRoutesNav.some((route) => $page.url.pathname.startsWith(route));
+	$: isBgExcluded = excludedRoutesBg.some((route) => $page.url.pathname === route);
 </script>
 
-<div class="header" />
+{#if !isNavExcluded}
-<BackgroundProvider size={80} gap={12} speed={1} />
+	<div class="header">
-<div class="below">
+		<div class="left">
-	<div class="page-contents">
+			<LogoWithTextHorizontal on:click={() => goto("/")} size={50} />
-		<slot />
+		</div>
+		<div class="right">
+			<a href="https://gitlab.com/suyu-emu/suyu/-/releases" target="_blank">Download</a>
+			<a href="https://discord.gg/suyu" target="_blank">Discord</a>
+		</div>
 	</div>
-	<div class="bullshit-flex-container">
+{/if}
-		<div class="bullshit-flex-placeholder" />
+
-		<div class="bg-below-gradient" />
+{#if !isBgExcluded}
+	<BackgroundProvider size={80} gap={12} speed={1} />
+	<div class="below">
+		<div class="page-contents">
+			<slot />
+		</div>
+		<div class="bullshit-flex-container">
+			<div class="bullshit-flex-placeholder" />
+			<div class="bg-below-gradient" />
+		</div>
 	</div>
-</div>
+{:else}
+	<slot />
+{/if}
 
 <style>
 	.below {
@@ -35,6 +58,9 @@
 		z-index: 1000;
 		backdrop-filter: blur(10px);
 		-webkit-backdrop-filter: blur(10px);
+		align-items: center;
+		display: flex;
+		padding: 0 32px 0 16px;
 	}
 
 	.bullshit-flex-container {
@@ -60,4 +86,16 @@
 		background-size: 100% 100%;
 		z-index: -1;
 	}
+
+	.left {
+		display: flex;
+		align-items: center;
+		flex-grow: 1;
+	}
+
+	.right {
+		display: flex;
+		align-items: center;
+		gap: 32px;
+	}
 </style>

src/routes/+layout.ts

@@ -1 +0,0 @@
-export const prerender = true;

src/routes/+page.svelte

@@ -8,6 +8,7 @@
 	import totk from "$assets/cards/totk.webp";
 	import scarletviolet from "$assets/cards/scarlet-violet.webp";
 	import CardCarousel from "$components/CardCarousel.svelte";
+	import Wordmark from "$components/Wordmark.svelte";
 
 	let logoSizes = {
 		small: 256,
@@ -38,7 +39,9 @@
 	<div class="container">
 		<Logo size={logoSize} />
 		<div class="hero-text">
-			<h1 class="hero-header">{strings.landingHeader}</h1>
+			<h1 class="hero-header">
+				<Wordmark size={80} />
+			</h1>
 			<p>
 				{strings.landingOne}
 			</p>
@@ -46,6 +49,7 @@
 	</div>
 	<div class="below">
 		<div class="absolute-center">
+			<h1>We care about preservation...</h1>
 			<CardCarousel
 				cards={[
 					{
@@ -73,18 +77,41 @@
 				<span class="plus">+</span>
 				<ScrollIcon size={48} color="#bebbdd" />
 			</div>
+			<p>
+				...so we're setting out to continue the beloved Yuzu emulator, as a non-profit drive
+				for hardware preservation and research.
+			</p>
+			<div class="buttons">
+				<button
+					on:click={() =>
+						window.open("https://gitlab.com/suyu-emu/suyu/-/releases", "_blank")}
+					class="download">Download</button
+				>
+				<button
+					class="discord"
+					on:click={() => window.open("https://discord.gg/suyu", "_blank")}
+					>Discord</button
+				>
+			</div>
 		</div>
 	</div>
 </div>
 
 <style>
+	.buttons {
+		display: flex;
+		justify-content: center;
+		gap: 16px;
+		margin-top: 20px;
+	}
+
 	.instructions {
 		display: flex;
 		align-items: center;
 		margin-top: 24px;
 		opacity: 0.25;
 		position: absolute;
-		top: 100%;
+		top: calc(100% - 162px);
 		left: 50%;
 		transform: translateX(-50%);
 	}
@@ -120,7 +147,7 @@
 	.hero-header {
 		font-size: 110px;
 		margin-top: -48px;
-		margin-bottom: 12px;
+		margin-bottom: -24px;
 	}
 
 	.hero-text {
@@ -154,7 +181,7 @@
 
 	.below {
 		width: 100%;
-		min-height: 100vh;
+		min-height: calc(100vh - 80px);
 		height: fit-content;
 		padding-bottom: 80px;
 		position: relative;
@@ -165,4 +192,15 @@
 		left: 50%;
 		transform: translateX(-50%);
 	}
+
+	.absolute-center > h1 {
+		text-align: center;
+		margin-bottom: 18px;
+		margin-top: 36px;
+	}
+
+	.absolute-center > p {
+		text-align: center;
+		margin-top: 64px;
+	}
 </style>

src/routes/mockup/boot/[game]/+page.server.ts

@@ -0,0 +1,11 @@
+import type { PageServerLoad } from "./$types";
+import { getQueriedGamesAmerica, type GameUS } from "nintendo-switch-eshop";
+
+export const load: PageServerLoad = async ({ params }) => {
+	const games = await getQueriedGamesAmerica(params.game);
+	return {
+		props: {
+			games,
+		},
+	};
+};

src/routes/mockup/boot/[game]/+page.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import ProgressBar from "$components/ProgressBar.svelte";
+	import { onMount } from "svelte";
+	import type { PageData } from "./$types";
+	import Logo from "$components/Logo.svelte";
+
+	let shadersDone = 0;
+	const shadersTotal = 8146;
+
+	export let data: PageData;
+
+	$: game = data.props.games[0];
+	onMount(() => {
+		const interval = setInterval(() => {
+			shadersDone += Math.floor(Math.random() * 150);
+			if (shadersDone >= shadersTotal) {
+				clearInterval(interval);
+				shadersDone = shadersTotal;
+			}
+		}, 100);
+	});
+</script>
+
+<div class="body">
+	<div class="align-bottom">
+		<img
+			alt="Box art for {game.title}"
+			src={`https://assets.nintendo.com/image/upload/ar_16:9,c_lpad,w_656/b_white/f_auto/q_auto/${game.productImage}`}
+		/>
+		<div class="main-text">
+			<p class="launching">Launching <span class="bold">{game.title}</span></p>
+			<p>Shaders compiled: {shadersDone} / {shadersTotal}</p>
+			<div class="progress-bar">
+				<ProgressBar progress={shadersDone} total={shadersTotal} />
+			</div>
+		</div>
+		<div class="logo-spinner-container">
+			<div class="logo">
+				<Logo size={128} />
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	@keyframes spin {
+		0% {
+			transform: none;
+			animation-timing-function: cubic-bezier(1, 0, 1, 1);
+		}
+		25% {
+			animation-timing-function: ease-out;
+			transform: scale(0.75) rotateZ(30deg);
+		}
+		30% {
+			transform: scale(0.75) rotateZ(10deg);
+			animation-timing-function: cubic-bezier(0.77, 0, 0.75, 0.37);
+		}
+		40% {
+			transform: scale(1.1) rotateZ(375deg);
+			animation-timing-function: cubic-bezier(0, 0.92, 0.21, 0.97);
+		}
+		42% {
+			transform: scale(1) rotateZ(780deg);
+		}
+		70%,
+		100% {
+			transform: scale(1) rotateZ(720deg);
+		}
+	}
+
+	.logo-spinner-container {
+		margin-left: 120px;
+	}
+
+	.logo {
+		animation: spin 4s infinite;
+	}
+
+	.body {
+		display: flex;
+		width: 100vw;
+		height: 100vh;
+		padding: 150px;
+	}
+
+	.progress-bar {
+		width: 100%;
+		margin-top: 16px;
+	}
+
+	.align-bottom {
+		display: flex;
+		justify-content: center;
+		align-items: flex-end;
+		height: 100%;
+		width: 100%;
+	}
+	.align-bottom img {
+		aspect-ratio: 1/1;
+		width: 300px;
+		object-fit: cover;
+		object-position: center center;
+		border: solid thin rgb(145, 173, 192);
+		border-radius: 24px;
+		box-shadow: 0 0 32px 0px rgba(145, 173, 192, 0.463);
+	}
+
+	.main-text {
+		width: calc(100% - 615px);
+		margin-left: 64px;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		flex-grow: 1;
+	}
+
+	.launching,
+	.launching > * {
+		font-size: 32px;
+		white-space: nowrap;
+		overflow: hidden;
+		--mask-image: linear-gradient(
+			90deg,
+			black,
+			black calc(100% - 150px),
+			transparent calc(100% - 25px)
+		);
+		-webkit-mask-image: var(--mask-image);
+		mask-image: var(--mask-image);
+	}
+
+	.bold {
+		font-weight: bold;
+	}
+</style>