Refactor file tree

Known issue with repeating requests

src/config.ts

@@ -16,7 +16,7 @@ const config = {
 	ORIGIN_API: RIVET_ORIGIN_API as string,
 	ASSETS_URL: ENV_ASSETS_URL as string,
 
-	MEDIA_URL: RIVET_ORIGIN_API + "/media",
+	MEDIA_URL: RIVET_ORIGIN_API + '/media',
 
 	API_AUTH_URL: modifyBaseUrl(RIVET_ORIGIN_API, 'auth.', '/v1'),
 	API_PORTAL_URL: modifyBaseUrl(RIVET_ORIGIN_API, 'portal.', '/v1'),

src/elements/common/file-uploader.ts

@@ -325,8 +325,8 @@ export default class FileUploader extends LitElement {
 			? this.uploadState.type == 'uploading'
 				? this.uploadState.progress / this.uploadState.total
 				: this.uploadState.type == 'completing'
-					? 1
-					: 0
+				? 1
+				: 0
 			: 0;
 
 		// Separate file type from current upload
@@ -346,8 +346,8 @@ export default class FileUploader extends LitElement {
 		let accept = this.video
 			? 'video/mp4,video/x-m4v,video/*'
 			: this.image
-				? 'image/*'
-				: this.accept ?? null;
+			? 'image/*'
+			: this.accept ?? null;
 
 		return html`
 			<div id="base" @drop=${this.onChange.bind(this)} @dragover=${(e: Event) => e.preventDefault()}>
@@ -356,53 +356,54 @@ export default class FileUploader extends LitElement {
 						<slot name="icon"></slot>
 						<slot name="content"></slot>
 						${when(
-			this.uploadError,
-			() =>
-				html`<h3 id="error">
+							this.uploadError,
+							() =>
+								html`<h3 id="error">
 									${when(
-					typeof this.uploadError == 'string',
-					() => this.uploadError,
-					() => html`Error while uploading. Please try again.</h3>`
-				)}
+										typeof this.uploadError == 'string',
+										() => this.uploadError,
+										() => html`Error while uploading. Please try again.</h3>`
+									)}
 								</h3>`
-		)}
+						)}
 					</div>
 
 					${uploading
-				? html` <div id="upload">
+						? html` <div id="upload">
 								<div id="upload-background" style=${loadingBarStyles}></div>
 								<div id="upload-content">
 									${this.uploadState.type == 'preparing'
-						? html` <h1>
+										? html` <h1>
 													Preparing ${this.uploadState.count}
 													file${this.uploadState.count == 1 ? '' : 's'}...
 												</h1>
 												<div id="progress-area">
 													<loading-bar .progress=${0}></loading-bar>
 												</div>`
-						: null}
+										: null}
 									${this.uploadState.type == 'uploading'
-						? html`
+										? html`
 											<h1>Uploading...</h1>
-											<h2><span id='upload-name'>${currentUpload[0].repeat(2)}</span id='upload-type'><span>${currentUpload[1]
-							}</span></h2>
+											<h2><span id='upload-name'>${currentUpload[0].repeat(2)}</span id='upload-type'><span>${
+												currentUpload[1]
+											}</span></h2>
 											<div id='progress-area'>
 												<loading-bar .progress=${progress}></loading-bar>
 												<h3>${this.uploadState.progress}/${this.uploadState.total}</h3>
 											</div>`
-						: null}
+										: null}
 									${this.uploadState.type == 'completing'
-						? html` <h1>Completing upload...</h1>
+										? html` <h1>Completing upload...</h1>
 												<div id="progress-area">
 													<loading-bar .progress=${1}></loading-bar>
 												</div>`
-						: null}
+										: null}
 								</div>
 						  </div>`
-				: null}
+						: null}
 					${this.dragActive && !uploading
-				? html` <div id="overlay">Drag and drop files here</div>`
-				: null}
+						? html` <div id="overlay">Drag and drop files here</div>`
+						: null}
 				</label>
 				<input
 					id="file-upload"

src/elements/common/namespace-dropdown.ts

@@ -29,17 +29,17 @@ export default class RichEmbed extends LitElement {
 			<a
 				class="pt-3 last:pb-3 transition-all first:border-t-[1px] border-zinc-800 first:aria-expanded:border-zinc-600/80 group text-sm text-gray-200 hover:text-white flex flex-row place-content-around"
 				href=${routes.devNamespace.build({
-			gameId: this.game.gameId,
-			namespaceId: namespace.namespaceId
-		})}
+					gameId: this.game.gameId,
+					namespaceId: namespace.namespaceId
+				})}
 				aria-expanded=${this.expanded}
 			>
 				<div class=${clsx(isCurrent ? 'font-bold text-white' : '', 'mr-auto')}>
 					${namespace.displayName}
 				</div>
 				<!-- ${isCurrent
-				? html` <e-svg src="regular/check" class="mb-[2px] h-full" preserve></e-svg> `
-				: html``} -->
+					? html` <e-svg src="regular/check" class="mb-[2px] h-full" preserve></e-svg> `
+					: html``} -->
 			</a>
 		`;
 	}
@@ -85,11 +85,11 @@ export default class RichEmbed extends LitElement {
 						aria-expanded=${this.expanded}
 					>
 						${this.game.namespaces.map(namespace => {
-			return this.renderNamespaceListEntry(
-				namespace,
-				namespace.namespaceId === this.currentNamespace.namespaceId
-			);
-		})}
+							return this.renderNamespaceListEntry(
+								namespace,
+								namespace.namespaceId === this.currentNamespace.namespaceId
+							);
+						})}
 					</ul>
 				</div>
 			</div>

src/elements/context-menu/context-menu.ts

@@ -202,8 +202,7 @@ export default class ContextMenu extends LitElement {
 
 		let showAdminControls = !isSelf && ctx.selfIsOwner;
 
-		return html`
-		${when(
+		return html` ${when(
 			showAdminControls,
 			() =>
 				html`<div class="spacer"></div>

src/elements/dev/version-publish-summary.ts

@@ -100,9 +100,7 @@ export default class VersionPublishSumary extends LitElement {
 
 		return html`<div class="region">
 			<ul>
-				<li>
-					${regionConfig.regionDisplayName} (${formattedTierNameId})
-				</li>
+				<li>${regionConfig.regionDisplayName} (${formattedTierNameId})</li>
 				<li class="expanded-list-item">
 					<p>Lobbies</p>
 				</li>

src/elements/dev/version/version-info-matchmaker.ts

@@ -11,24 +11,25 @@ import { DropDownSelectEvent, DropDownSelection } from '../drop-down-list';
 import { SelectBuildEvent } from '../builds';
 import * as ext from './ext';
 
-export const HCAPTCHA_DIFFICULTIES: DropDownSelection<Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel>[] = [
-	{
-		label: 'Easy',
-		value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.Easy
-	},
-	{
-		label: 'Moderate',
-		value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.Moderate
-	},
-	{
-		label: 'Difficult',
-		value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.Difficult
-	},
-	{
-		label: 'Always On',
-		value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.AlwaysOn
-	}
-];
+export const HCAPTCHA_DIFFICULTIES: DropDownSelection<Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel>[] =
+	[
+		{
+			label: 'Easy',
+			value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.Easy
+		},
+		{
+			label: 'Moderate',
+			value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.Moderate
+		},
+		{
+			label: 'Difficult',
+			value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.Difficult
+		},
+		{
+			label: 'Always On',
+			value: Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel.AlwaysOn
+		}
+	];
 
 const PORT_PROTOCOLS: DropDownSelection<Rivet.cloud.version.matchmaker.PortProtocol>[] = [
 	{
@@ -200,7 +201,9 @@ export default class VersionInfoMatchmaker extends LitElement {
 		this.updateConfig();
 	}
 
-	changeHcaptchaDifficulty(event: DropDownSelectEvent<Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel>) {
+	changeHcaptchaDifficulty(
+		event: DropDownSelectEvent<Rivet.cloud.version.matchmaker.CaptchaHcaptchaLevel>
+	) {
 		this.configExt.config.captcha.hcaptcha.level = event.selection.value;
 
 		this.updateConfig();
@@ -358,7 +361,8 @@ export default class VersionInfoMatchmaker extends LitElement {
 	updatePortProtocol(idx: number, event: DropDownSelectEvent<Rivet.cloud.version.matchmaker.PortProtocol>) {
 		// Switch from target port to port range and vice versa
 		if (
-			this.dockerRuntimeExt.ports[idx].port.protocol != Rivet.cloud.version.matchmaker.PortProtocol.Udp &&
+			this.dockerRuntimeExt.ports[idx].port.protocol !=
+				Rivet.cloud.version.matchmaker.PortProtocol.Udp &&
 			event.selection.value == Rivet.cloud.version.matchmaker.PortProtocol.Udp
 		) {
 			this.dockerRuntimeExt.ports[idx].port.port = undefined;
@@ -367,7 +371,8 @@ export default class VersionInfoMatchmaker extends LitElement {
 				max: MAX_HOST_PORT
 			};
 		} else if (
-			this.dockerRuntimeExt.ports[idx].port.protocol == Rivet.cloud.version.matchmaker.PortProtocol.Udp &&
+			this.dockerRuntimeExt.ports[idx].port.protocol ==
+				Rivet.cloud.version.matchmaker.PortProtocol.Udp &&
 			event.selection.value != Rivet.cloud.version.matchmaker.PortProtocol.Udp
 		) {
 			this.dockerRuntimeExt.ports[idx].port.port = 80;

src/elements/dev/version/version-info.ts

@@ -1,6 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { Rivet } from "@rivet-gg/api-internal";
+import { Rivet } from '@rivet-gg/api-internal';
 import { cssify } from '../../../utils/css';
 import styles from './version-info.scss';
 import { when } from 'lit/directives/when.js';
@@ -129,8 +129,8 @@ export default class DevVersionInfo extends LitElement {
 		return html`
 			<div id="base">
 				${!this.editing && this.noServices()
-				? html`<p class="muted">No services enabled for this version.</p>`
-				: null}
+					? html`<p class="muted">No services enabled for this version.</p>`
+					: null}
 				${when(
 					this.editing || this.config.cdn,
 					() =>
@@ -157,25 +157,25 @@ export default class DevVersionInfo extends LitElement {
 						></version-info-matchmaker>`
 				)}
 				${this.editing || this.config.kv
-				? html`<version-info-kv
+					? html`<version-info-kv
 							.game=${this.game}
 							.config=${this.config}
 							.errors=${this.errors.branch('kv')}
 							.editing=${this.editing}
 							@toggle=${this.toggleKv.bind(this)}
 							@update=${this.updateConfig.bind(this)}
 					  ></version-info-kv>`
-				: null}
+					: null}
 				${this.editing || this.config.identity
-				? html`<version-info-identity
+					? html`<version-info-identity
 							.game=${this.game}
 							.config=${this.config}
 							.errors=${this.errors.branch('identity')}
 							.editing=${this.editing}
 							@toggle=${this.toggleIdentity.bind(this)}
 							@update=${this.updateConfig.bind(this)}
 					  ></version-info-identity>`
-				: null}
+					: null}
 			</div>
 		`;
 	}

src/elements/identity/identity-profile-edit.ts

@@ -250,10 +250,7 @@ export default class IdentityProfileEdit extends LitElement {
 						<div id="banner-bg" style=${bgStyles}></div>
 
 						<div id="avatar-holder">
-							<identity-avatar
-								id="main-avatar"
-								.identity=${fakeIdentity}
-							></identity-avatar>
+							<identity-avatar id="main-avatar" .identity=${fakeIdentity}></identity-avatar>
 
 							<!-- Change profile image button -->
 							<icon-button

src/elements/identity/identity-tile.ts

@@ -57,10 +57,7 @@ export default class IdentityTile extends LitElement {
 				class=${classes}
 				@contextmenu=${this.noContextMenu ? null : showIdentityContextMenu(this.identity)}
 			>
-				<identity-avatar
-					.link=${!this.noLink}
-					.identity=${this.identity}
-				></identity-avatar>
+				<identity-avatar .link=${!this.noLink} .identity=${this.identity}></identity-avatar>
 				<div id="spaced">
 					<div id="content">
 						<identity-name .identity=${this.identity} no-link></identity-name>

src/elements/layouts/sidebar-layout.ts

@@ -13,7 +13,9 @@ export default class Layout extends LitElement {
 		return html`
 			<div>
 				<!-- Sidebar -->
-				<div class="fixed flex w-72 flex-col border-white/10 border-r top-14 max-[850px]:top-0 bottom-0">
+				<div
+					class="fixed flex w-72 flex-col border-white/10 border-r top-14 max-[850px]:top-0 bottom-0"
+				>
 					<div class="min-h-full overflow-y-auto px-6 py-5 w-full h-full">
 						<slot name="sidebar"></slot>
 					</div>

src/elements/mod.ts

@@ -62,4 +62,4 @@ import './profile/graph-view';
 import './profile/user-banner';
 import './root/ui-root';
 import './root/ui-router';
-import './tiles/group-handle-tile';
+import './tiles/group-handle-tile';

src/elements/pages/dev-dash.ts

@@ -47,7 +47,8 @@ export default class DeveloperDash extends LitElement {
 	render() {
 		return html`
 			${when(
-				(global.currentIdentity.isAdmin) || global.currentIdentity.groups.find(group => group.group.isDeveloper),
+				global.currentIdentity.isAdmin ||
+					global.currentIdentity.groups.find(group => group.group.isDeveloper),
 				() => html`
 					<div class="w-full">
 						<user-banner></user-banner>
@@ -57,10 +58,16 @@ export default class DeveloperDash extends LitElement {
 					</div>
 				`,
 				() => html`
-					<div class=${clsx(
-							global.currentIdentity.isRegistered ? "absolute text-center top-1/2 left-1/2 -translate-x-1/2 translate-y-1/2 pt-36" : '',
-							(!global.currentIdentity.isRegistered) ? "absolute text-center top-1/2 left-1/2 -translate-x-1/2 translate-y-1/2 pt-20" : ''
-						)}>
+					<div
+						class=${clsx(
+							global.currentIdentity.isRegistered
+								? 'absolute text-center top-1/2 left-1/2 -translate-x-1/2 translate-y-1/2 pt-36'
+								: '',
+							!global.currentIdentity.isRegistered
+								? 'absolute text-center top-1/2 left-1/2 -translate-x-1/2 translate-y-1/2 pt-20'
+								: ''
+						)}
+					>
 						<h1 class="text-3xl pb-2">Private Beta</h1>
 						<h2 class="text-lg pb-4">
 							Rivet is still in private beta. Join the waitlist to get early access.
@@ -70,16 +77,18 @@ export default class DeveloperDash extends LitElement {
 								Beta Access Form
 							</stylized-button>
 						</div>
-						${when(!global.currentIdentity.isRegistered, () => html`
+						${when(
+							!global.currentIdentity.isRegistered,
+							() => html`
 								<div class="w-3/4 border-b-white/10 border-b-[1px] h-px mx-auto"></div>
-									<h2 class="text-md pt-5 pb-3">Have access and just got logged out?</h2>
-										<div class="w-full flex flex-row place-content-center m-auto pb-5">
-										<stylized-button .trigger=${() => UIRoot.shared.openRegisterPanel()}>
-											Login
-										</stylized-button>
+								<h2 class="text-md pt-5 pb-3">Have access and just got logged out?</h2>
+								<div class="w-full flex flex-row place-content-center m-auto pb-5">
+									<stylized-button .trigger=${() => UIRoot.shared.openRegisterPanel()}>
+										Login
+									</stylized-button>
 								</div>
-							`)
-						}
+							`
+						)}
 					</div>
 				`
 			)}

src/elements/pages/dev/game/module.ts

@@ -0,0 +1,5 @@
+import './game-banner';
+import './games';
+
+import './settings/module';
+import './pages/module';