+
+
Welcome to Rivet!
+
Rivet is still in private beta.
+
Join the waitlist to get early access.
+
Beta Access Form
${when(
- !global.currentIdentity.isRegistered,
+ !global.currentIdentity?.isRegistered,
() => html`
-
-
Have access and just got logged out?
-
-
UIRoot.shared.openRegisterPanel()}>
+
+
+
Have access and just got logged out?
+
Login
+
+ By clicking Login, you agree to the Rivet
+
+ Terms of Service
+
+ and
+
+ Privacy Policy .
+
`
)}
diff --git a/src/elements/profile/user-banner.scss b/src/elements/profile/user-banner.scss
index ff7b4c43..0ed702e7 100644
--- a/src/elements/profile/user-banner.scss
+++ b/src/elements/profile/user-banner.scss
@@ -7,7 +7,6 @@ $tile-margin: 8px;
$tile-border-radius: 20px;
#base {
- padding: 0 20px 27px 20px;
display: flex;
flex-direction: column;
@@ -62,10 +61,10 @@ $tile-border-radius: 20px;
object-fit: cover;
$mask: radial-gradient(
- circle farthest-corner at 0 calc(100% + 150px),
- rgba(0, 0, 0, 0.7) 0%,
- rgba(0, 0, 0, 0.7) 5%,
- rgba(0, 0, 0, 1) 100%
+ circle farthest-corner at 0 calc(100% + 150px),
+ rgba(0, 0, 0, 0.7) 0%,
+ rgba(0, 0, 0, 0.7) 5%,
+ rgba(0, 0, 0, 1) 100%
);
mask-image: $mask;
-webkit-mask-image: $mask;
@@ -298,9 +297,8 @@ $tile-border-radius: 20px;
max-width: 300px;
box-sizing: border-box;
- transition:
- transform consts.$transition-length,
- box-shadow consts.$transition-length;
+ transition: transform consts.$transition-length,
+ box-shadow consts.$transition-length;
@include common.active-state();
@@ -405,9 +403,8 @@ $tile-border-radius: 20px;
max-width: 320px;
box-sizing: border-box;
- transition:
- transform consts.$transition-length,
- box-shadow consts.$transition-length;
+ transition: transform consts.$transition-length,
+ box-shadow consts.$transition-length;
@include common.active-state();
@@ -552,9 +549,8 @@ $tile-border-radius: 20px;
box-sizing: border-box;
border-radius: $tile-border-radius;
- transition:
- transform consts.$transition-length,
- box-shadow consts.$transition-length;
+ transition: transform consts.$transition-length,
+ box-shadow consts.$transition-length;
cursor: pointer;
@include common.active-state();
diff --git a/src/elements/root/ui-root.scss b/src/elements/root/ui-root.scss
index f0e450fe..145659bd 100644
--- a/src/elements/root/ui-root.scss
+++ b/src/elements/root/ui-root.scss
@@ -31,17 +31,6 @@
// min-height: 100vh;
// left: consts.$sidebar-width;
// top: 0px;
-
- ui-router {
- box-sizing: border-box;
- position: relative;
- min-height: 100%;
- }
-
- &.mobile {
- left: 0;
- width: 100%;
- }
}
// === MEDIA HOLDER ===
@@ -58,9 +47,8 @@
pointer-events: none;
// Don't transition width or height for performance
- transition:
- consts.$transition-length bottom,
- consts.$transition-length right;
+ transition: consts.$transition-length bottom,
+ consts.$transition-length right;
&.minimize {
box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
@@ -223,9 +211,8 @@ search-panel {
border-radius: 4px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
- transition:
- consts.$transition-length opacity,
- consts.$transition-length transform;
+ transition: consts.$transition-length opacity,
+ consts.$transition-length transform;
}
#dim {
diff --git a/src/elements/root/ui-root.ts b/src/elements/root/ui-root.ts
index 9792c046..748b6bfd 100644
--- a/src/elements/root/ui-root.ts
+++ b/src/elements/root/ui-root.ts
@@ -1,12 +1,12 @@
import { customElement, property, query } from 'lit/decorators.js';
-import { LitElement, html, TemplateResult } from 'lit';
+import { html, LitElement, TemplateResult } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { when } from 'lit/directives/when.js';
import { repeat } from 'lit/directives/repeat.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { cssify } from '../../utils/css';
import { GlobalStatus } from '../../utils/global';
-import { globalEventGroups, windowEventGroups, GlobalStatusChangeEvent } from '../../utils/global-events';
+import { globalEventGroups, GlobalStatusChangeEvent, windowEventGroups } from '../../utils/global-events';
import timing from '../../utils/timing';
import styles from './ui-root.scss';
import UIRouter, { RouteChangeEvent, RouteTitleChangeEvent } from './ui-router';
@@ -17,7 +17,7 @@ import config from '../../config';
import { HookFetch } from '../../utils/fetch-hook';
import { DeferredStageEvent, Stage } from '../pages/link-game';
import StylizedButton from '../common/stylized-button';
-import { Orientation, Alignment } from '../common/overlay-positioning';
+import { Alignment, Orientation } from '../common/overlay-positioning';
import { DropDownSelectEvent, DropDownSelection } from '../dev/drop-down-list';
import { Breadcrumb } from '../common/navbar';
@@ -163,7 +163,6 @@ export default class UIRoot extends LitElement {
// === LIFECYCLE ===
connectedCallback() {
super.connectedCallback();
-
// Handle status change
this.handleStatusChange = this.onStatusChange.bind(this);
globalEventGroups.add('status-change', this.handleStatusChange);
@@ -365,7 +364,6 @@ export default class UIRoot extends LitElement {
// === RENDER ===
render() {
let content = null;
-
// NOTE: Game link page has own flow
if (
window.location.pathname.startsWith('/link/') &&
@@ -385,17 +383,16 @@ export default class UIRoot extends LitElement {
${this.renderBasicOverlays()}
`;
} else {
+ console.log(this.globalStatus);
switch (this.globalStatus) {
// Loading
case GlobalStatus.Loading:
case GlobalStatus.Authenticating:
this.showLoading();
break;
-
- // Interactive
case GlobalStatus.Consenting:
this.hideLoading();
- content = html`
`;
+ content = html`
`;
break;
case GlobalStatus.Connected:
case GlobalStatus.Reconnecting:
@@ -441,7 +438,7 @@ export default class UIRoot extends LitElement {
inFlightHostCountsSorted,
x => x[0],
x => {
- return html`
+ return html`
${x[0]}: ${x[1]}
`;
}
@@ -454,11 +451,8 @@ export default class UIRoot extends LitElement {
renderContent() {
return html`
-
-
-
-
+
void;
/*=== Navigation State ===*/
+
/// Returns the full URL for the current page.
get fullPath(): string {
return location.href;
@@ -540,7 +537,7 @@ export default class UIRouter extends LitElement {
let newestPage = pageList[pageList.length - 1];
- if (!newestPage) return html``;
+ if (!newestPage) return html``;
// Create class map
let classes = classMap({
@@ -550,17 +547,6 @@ export default class UIRouter extends LitElement {
back: newestPage.back
});
- // Position old pages in the proper y-pos based on scroll
- let scrollStyle = styleMap({
- transform: newestPage.old ? `translateY(${-newestPage.state.scrollTop + this.scrollTop}px)` : null
- });
-
- // Two divs are used here because you cannot animate separate transform properties in
- // css separately
- return html`
-
-
${newestPage.renderResult.template}
-
-
${newestPage.renderResult.template}
`;
}
}
diff --git a/src/routes.ts b/src/routes.ts
index b2bb4394..1fabd2b2 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -1,4 +1,4 @@
-import { TemplateResult, html } from 'lit';
+import { html, TemplateResult } from 'lit';
import * as pathToRegexp from 'path-to-regexp';
import global from './utils/global';
import utils from './utils/utils';
@@ -63,11 +63,13 @@ class Route {
namespace routes {
export let home = new Route<{}>({
path: '/',
- render({}) {
+ render() {
return {
title: 'Home',
breadcrumb: { type: 'Home' },
- template: html` `
+ template: html`
+
+ `
};
}
});
@@ -87,7 +89,7 @@ namespace routes {
path: '/developer/:path*',
render({ path }, search) {
return {
- redirect: `${window.location.origin}/${path}${
+ redirect: `${window.location.origin} /${path}${
search ? `?${new URLSearchParams(search).toString()}` : ''
}`
};
@@ -96,7 +98,7 @@ namespace routes {
// Reuse the same template in order to preserve the same `page-group-settings` instance.
function renderPageGroupSettings(groupId: string, config?: GroupSettingsRootConfig) {
- return html``;
+ return html` `;
}
export let groupSettingsRedirect = new Route<{ groupId: string }>({
@@ -131,7 +133,7 @@ namespace routes {
return {
title: 'Group',
breadcrumb: { type: 'Group', groupId: id },
- template: html``
+ template: html` `
};
}
});
@@ -149,7 +151,7 @@ namespace routes {
groupId,
title: 'Analytics'
},
- template: html``
+ template: html` `
};
}
});
@@ -160,7 +162,7 @@ namespace routes {
return {
title: 'Group Invite',
breadcrumb: { type: 'Custom' },
- template: html``
+ template: html` `
};
}
});
@@ -171,7 +173,7 @@ namespace routes {
return {
title: `Settings`,
breadcrumb: { type: 'Custom' },
- template: html``
+ template: html` `
};
}
});
@@ -182,7 +184,7 @@ namespace routes {
return {
title: `Link account`,
breadcrumb: { type: 'Custom' },
- template: html``
+ template: html` `
};
}
});
@@ -196,17 +198,17 @@ namespace routes {
return {
title: 'Link Device',
breadcrumb: { type: 'Custom' },
- template: html``
+ template: html` `
};
}
});
// Reuse the same template in order to preserve the same `page-dev-game` instance.
function renderPageDevGame(gameId: string, namespaceId: string, config: DevGameRootConfig) {
- return html``;
}
@@ -219,7 +221,7 @@ namespace routes {
return {
title: 'Game',
breadcrumb: { type: 'Game', gameId, title: 'Overview' },
- template: html` `
+ template: html` `
};
}
});
@@ -235,7 +237,10 @@ namespace routes {
});
function renderPageDevGameSettings(gameId: string, config: GameSettingsRootConfig) {
- return html``;
+ return html` `;
}
export let devGameSettingsRedirect = new Route<{ gameId: string }>({
@@ -444,7 +449,7 @@ export namespace responses {
type: 'Custom'
},
- template: html``
+ template: html` `
};
}
@@ -454,7 +459,7 @@ export namespace responses {
breadcrumb: {
type: 'Custom'
},
- template: html``
+ template: html` `
};
}
@@ -464,7 +469,7 @@ export namespace responses {
breadcrumb: {
type: 'Custom'
},
- template: html`
+ template: html`
404
This page isn't available or it doesn't exist. Sorry!
`
@@ -477,7 +482,7 @@ export namespace responses {
breadcrumb: {
type: 'Custom'
},
- template: html`
+ template: html`
Coming Soon
This page isn't available yet. Come back soon!
@@ -493,15 +498,15 @@ export namespace responses {
breadcrumb: {
type: 'Custom'
},
- template: html`
+ template: html`
Registered Only
This page isn't available for guest accounts. Register to save your account.
- UIRoot.shared.openRegisterPanel()}
- >Register Now
+ Register Now
+
`
};
@@ -513,7 +518,7 @@ export namespace responses {
breadcrumb: {
type: 'Custom'
},
- template: html`
+ template: html`
Desktop Only
This page is only available on a Desktop platform.
`
@@ -526,7 +531,7 @@ export namespace responses {
breadcrumb: {
type: 'Custom'
},
- template: html``
+ template: html` `
};
}
@@ -535,7 +540,7 @@ export namespace responses {
let errorMessage: string;
if (typeof error == 'string') errorMessage = error;
else if (error instanceof RivetError) {
- return html``;
@@ -548,7 +553,7 @@ export namespace responses {
errorMessage = err.statusText ? err.statusText : err.status.toString() ?? 'Error';
} else errorMessage = 'Error';
- return html``;
+ return html` `;
}
}
diff --git a/yarn.lock b/yarn.lock
index 46e0c2e0..0730c839 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2130,7 +2130,6 @@
"@aws-sdk/util-user-agent-node" "3.80.0"
"@aws-sdk/util-utf8-browser" "3.55.0"
"@aws-sdk/util-utf8-node" "3.55.0"
- "@rivet-gg/common" "https://github.com/rivet-gg/rivet-sdk-js#4f439a15506de88c24c0e08ae3e5fe05cb0c60a0"
tslib "^2.3.1"
"@rivet-gg/chat@file:gen/api-chat":
@@ -2165,7 +2164,6 @@
"@aws-sdk/util-user-agent-node" "3.80.0"
"@aws-sdk/util-utf8-browser" "3.55.0"
"@aws-sdk/util-utf8-node" "3.55.0"
- "@rivet-gg/common" "https://github.com/rivet-gg/rivet-sdk-js#4f439a15506de88c24c0e08ae3e5fe05cb0c60a0"
tslib "^2.3.1"
"@rivet-gg/cloud@file:gen/api-cloud":
@@ -2200,15 +2198,6 @@
"@aws-sdk/util-user-agent-node" "3.80.0"
"@aws-sdk/util-utf8-browser" "3.55.0"
"@aws-sdk/util-utf8-node" "3.55.0"
- "@rivet-gg/common" "https://github.com/rivet-gg/rivet-sdk-js#4f439a15506de88c24c0e08ae3e5fe05cb0c60a0"
- tslib "^2.3.1"
-
-"@rivet-gg/common@https://github.com/rivet-gg/rivet-sdk-js#4f439a15506de88c24c0e08ae3e5fe05cb0c60a0":
- version "0.1.0"
- resolved "git+ssh://git@github.com/rivet-gg/rivet-sdk-js.git#4f439a15506de88c24c0e08ae3e5fe05cb0c60a0"
- integrity sha512-itN3X/QvE7cpGa2LzveUS+/nsLMU6gVw8CLfDiMCruNSeiufkalPdnHMGpkpcy0UaI2sN1qAY34EIII4yftyhw==
- dependencies:
- node-fetch "^2.6.7"
tslib "^2.3.1"
"@rivet-gg/group@file:gen/api-group":
@@ -2243,7 +2232,6 @@
"@aws-sdk/util-user-agent-node" "3.80.0"
"@aws-sdk/util-utf8-browser" "3.55.0"
"@aws-sdk/util-utf8-node" "3.55.0"
- "@rivet-gg/common" "https://github.com/rivet-gg/rivet-sdk-js#4f439a15506de88c24c0e08ae3e5fe05cb0c60a0"
tslib "^2.3.1"
"@rivet-gg/identity@file:gen/api-identity":
@@ -2278,7 +2266,6 @@
"@aws-sdk/util-user-agent-node" "3.80.0"
"@aws-sdk/util-utf8-browser" "3.55.0"
"@aws-sdk/util-utf8-node" "3.55.0"
- "@rivet-gg/common" "https://github.com/rivet-gg/rivet-sdk-js#4f439a15506de88c24c0e08ae3e5fe05cb0c60a0"
tslib "^2.3.1"
"@rivet-gg/kv@file:gen/api-kv":
@@ -2313,7 +2300,6 @@
"@aws-sdk/util-user-agent-node" "3.80.0"
"@aws-sdk/util-utf8-browser" "3.55.0"
"@aws-sdk/util-utf8-node" "3.55.0"
- "@rivet-gg/common" "https://github.com/rivet-gg/rivet-sdk-js#4f439a15506de88c24c0e08ae3e5fe05cb0c60a0"
tslib "^2.3.1"
"@rivet-gg/party@file:gen/api-party":
@@ -2348,7 +2334,6 @@
"@aws-sdk/util-user-agent-node" "3.80.0"
"@aws-sdk/util-utf8-browser" "3.55.0"
"@aws-sdk/util-utf8-node" "3.55.0"
- "@rivet-gg/common" "https://github.com/rivet-gg/rivet-sdk-js#4f439a15506de88c24c0e08ae3e5fe05cb0c60a0"
tslib "^2.3.1"
"@rivet-gg/portal@file:gen/api-portal":
@@ -2383,7 +2368,6 @@
"@aws-sdk/util-user-agent-node" "3.80.0"
"@aws-sdk/util-utf8-browser" "3.55.0"
"@aws-sdk/util-utf8-node" "3.55.0"
- "@rivet-gg/common" "https://github.com/rivet-gg/rivet-sdk-js#4f439a15506de88c24c0e08ae3e5fe05cb0c60a0"
tslib "^2.3.1"
"@rollup/plugin-babel@^5.2.0":
@@ -6587,7 +6571,7 @@ no-case@^3.0.4:
lower-case "^2.0.2"
tslib "^2.0.3"
-node-fetch@2.6.7, node-fetch@^2.6.7:
+node-fetch@2.6.7:
version "2.6.7"
resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz"
integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==