feat(HUB-150): add a slight animation when opening app for a first time

feat(HUB-150): add a slight animation when opening app for a first time

src/elements/common/navbar.ts → src/elements/common/rvt-nav.ts

@@ -2,13 +2,11 @@ import { html, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { cssify } from '../../utils/css';
 import global from '../../utils/global';
-import cloud from '@rivet-gg/cloud';
-import styles from './navbar.scss';
+import cloud, { GameFull } from '@rivet-gg/cloud';
 import routes from '../../routes';
 import * as api from '../../utils/api';
 import { when } from 'lit/directives/when.js';
 import logging from '../../utils/logging';
-import { GameFull } from '@rivet-gg/cloud';
 import assets from '../../data/assets';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { CloudGameCache, GroupProfileCache } from '../../data/cache';
@@ -31,13 +29,13 @@ interface CrumbDisplay {
 	component?: TemplateResult;
 }
 
-@customElement('nav-bar')
-export default class NavBar extends LitElement {
+@customElement('rvt-nav')
+export default class RvtNav extends LitElement {
 	// Required since Tailwind styles get applied within 'cssify'
-	static styles = cssify(styles);
+	static styles = cssify();
 
 	@property({ type: String })
-	routeTitle: string = '';
+	routeTitle = '';
 
 	@property({ type: Object })
 	breadcrumbs: Breadcrumb = undefined;
@@ -364,7 +362,7 @@ export default class NavBar extends LitElement {
 	render() {
 		return html`
 			<nav
-				class="gap-10 px-6 lg:z-30 pointer-events-auto fixed inset-x-0 top-0 z-50 flex flex-col transition md:divide-white/15 backdrop-blur  bg-zinc-900/[.8]"
+				class="gap-10 px-6 lg:z-30 pointer-events-auto fixed inset-x-0 top-0 flex flex-col transition md:divide-white/15 backdrop-blur  bg-zinc-900/[.8]"
 			>
 				<div class="h-14 flex items-center justify-between ">
 					<div class="absolute inset-x-0 top-full h-px transition bg-[#29292c]"></div>

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

@@ -1,4 +1,4 @@
-import { LitElement, html, PropertyValues } from 'lit';
+import { html, LitElement, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
@@ -11,7 +11,7 @@ import global from '../../utils/global';
 import logging from '../../utils/logging';
 import routes from '../../routes';
 import { globalEventGroups } from '../../utils/global-events';
-import UIRoot from '../root/ui-root';
+import RvtRoot from '../root/rvt-root';
 import utils from '../../utils/utils';
 
 export interface Context {
@@ -54,7 +54,7 @@ export default class ContextMenu extends LitElement {
 	@property({ type: Object })
 	identitySummary: api.identity.IdentitySummary = null;
 
-	isFetching: boolean = false;
+	isFetching = false;
 
 	@property({ type: Boolean, attribute: 'wide' })
 	wide = false;
@@ -176,7 +176,7 @@ export default class ContextMenu extends LitElement {
 	}
 
 	onActionClick() {
-		UIRoot.shared.hideContextMenu();
+		RvtRoot.shared.hideContextMenu();
 	}
 
 	render() {

src/elements/dev/drop-down-list.ts

@@ -1,13 +1,12 @@
 import {
-	LitElement,
-	html,
 	customElement,
+	html,
+	LitElement,
 	property,
-	query,
-	css,
 	PropertyValues,
-	TemplateResult,
-	queryAll
+	query,
+	queryAll,
+	TemplateResult
 } from 'lit-element';
 import { cssify } from '../../utils/css';
 import styles from './drop-down-list.scss';
@@ -16,7 +15,7 @@ import { classMap } from 'lit-html/directives/class-map.js';
 import { when } from 'lit-html/directives/when.js';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { Orientation } from '../common/overlay-positioning';
-import UIRoot from '../root/ui-root';
+import RvtRoot from '../root/rvt-root';
 
 // TODO: Implement arrow key movement and enter key to complete
 
@@ -86,13 +85,13 @@ export default class DropDownList<T> extends LitElement {
 
 	recentClick: number = performance.now();
 	@property({ type: Number })
-	filterSelection: number = 0;
+	filterSelection = 0;
 	@property({ type: String })
-	filterString: string = '';
+	filterString = '';
 
 	// === GET HEIGHT OF SELECTION ===
 	@property({ type: Number })
-	maxHeight: number = 0;
+	maxHeight = 0;
 
 	updated(changedProperties: PropertyValues) {
 		super.updated(changedProperties);
@@ -115,7 +114,7 @@ export default class DropDownList<T> extends LitElement {
 		} else {
 			let style = window.getComputedStyle(this.shadowRoot.host as HTMLElement);
 
-			UIRoot.shared.openDropDownList({
+			RvtRoot.shared.openDropDownList({
 				contextElement: this,
 				active: true,
 				fixed: this.isFixed,

src/elements/mod.ts

@@ -1,6 +1,5 @@
 import './common/copy-area';
 import './common/date-display';
-import './common/date-display';
 import './common/embedded-svg';
 import './common/file-upload-list';
 import './common/file-uploader';
@@ -10,7 +9,7 @@ import './common/loading-placeholder';
 import './common/loading-placeholder-text';
 import './common/loading-wheel';
 import './common/namespace-dropdown';
-import './common/navbar';
+import './common/rvt-nav';
 import './common/overlay-positioning';
 import './common/stylized-button';
 import './common/toggle-switch';
@@ -60,6 +59,6 @@ import './overlay/register-panel';
 import './pages/module';
 import './profile/graph-view';
 import './profile/user-banner';
-import './root/ui-root';
-import './root/ui-router';
+import './root/rvt-root';
+import './root/rvt-router';
 import './tiles/group-handle-tile';

src/elements/overlay/alert-panel.ts

@@ -1,8 +1,8 @@
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { cssify } from '../../utils/css';
 import styles from './alert-panel.scss';
-import { AlertPanelData } from '../root/ui-root';
+import { AlertPanelData } from '../root/rvt-root';
 
 export class SelectOptionEvent extends Event {
 	constructor(public index: number) {

src/elements/overlay/identity-notification.ts

@@ -1,13 +1,12 @@
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { cssify } from '../../utils/css';
 import styles from './identity-notification.scss';
 import { classMap } from 'lit/directives/class-map.js';
 
 import { styleMap } from 'lit/directives/style-map.js';
 import utils, { SwipeDirection } from '../../utils/utils';
-import { MIN_SWIPE_THRESHOLD } from '../root/ui-root';
-import * as api from '../../utils/api';
+import { MIN_SWIPE_THRESHOLD } from '../root/rvt-root';
 
 type TriggerResult = Promise<any> | void;
 

src/elements/overlay/register-panel.ts

@@ -1,17 +1,17 @@
-import { LitElement, html } from 'lit';
+/* eslint-disable no-mixed-spaces-and-tabs */
+import { html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { cssify } from '../../utils/css';
 import styles from './register-panel.scss';
 import global from '../../utils/global';
 import { classMap } from 'lit/directives/class-map.js';
 import { responses } from '../../routes';
 import logging from '../../utils/logging';
-import { default as timing, wait } from '../../utils/timing';
 import TextInput from '../dev/text-input';
 import { clearCache } from '../../utils/cache';
 import * as api from '../../utils/api';
 import * as broadcast from '../../data/broadcast';
-import UIRoot from '../root/ui-root';
+import RvtRoot from '../root/rvt-root';
 import { globalEventGroups, IdentityChangeEvent } from '../../utils/global-events';
 
 export const VALIDATE_EMAIL =
@@ -31,25 +31,25 @@ export default class RegisterPanel extends LitElement {
 	verificationId: string = null;
 
 	@property({ type: String })
-	emailError: string = '';
+	emailError = '';
 
 	@property({ type: String })
 	codeError = '';
 
 	@property({ type: String })
-	loadingMessage: string = '';
+	loadingMessage = '';
 
 	@property({ type: Boolean })
 	isCompleting = false;
 
 	@property({ type: Boolean })
-	codeAreaActive: boolean = false;
+	codeAreaActive = false;
 
 	@property({ type: Boolean })
 	wait = false;
 
 	@property({ type: Boolean, attribute: 'light' })
-	light: boolean = false;
+	light = false;
 
 	@property({ type: String, attribute: 'title' })
 	title: string;
@@ -58,7 +58,7 @@ export default class RegisterPanel extends LitElement {
 	description: string;
 
 	@property({ type: Boolean, attribute: 'no-back' })
-	noBackButton: boolean = false;
+	noBackButton = false;
 
 	// Used for customizing the email
 	@property({ type: String })
@@ -101,7 +101,7 @@ export default class RegisterPanel extends LitElement {
 	emailKeyPress(event: KeyboardEvent) {
 		// Enter is pressed
 		if (this.emailError == null && event.key == 'Enter') {
-			this.startEmailVerificatoin();
+			this.startEmailVerification();
 			this.emailInput.blur();
 		}
 	}
@@ -121,13 +121,12 @@ export default class RegisterPanel extends LitElement {
 		if (this.codeError == null && event.key == 'Enter') this.completeEmailVerification();
 	}
 
-	async startEmailVerificatoin() {
+	async startEmailVerification() {
 		// Wait for captcha
 		let captchaToken = null;
 		if (global.bootstrapData.captcha.turnstile) {
-			captchaToken = await UIRoot.shared.promptCaptcha();
+			captchaToken = await RvtRoot.shared.promptCaptcha();
 		}
-
 		this.wait = true;
 		this.codeError = null;
 
@@ -314,7 +313,7 @@ export default class RegisterPanel extends LitElement {
 								  >`}
 							<stylized-button
 								?disabled=${this.emailError != null}
-								.trigger=${this.startEmailVerificatoin.bind(this)}
+								.trigger=${this.startEmailVerification.bind(this)}
 								>Continue</stylized-button
 							>
 						</div>