A starkingdoms-client/login/index.html => starkingdoms-client/login/index.html +20 -0
@@ 0,0 1,20 @@
+<!-- DO NOT CHANGE THIS FILE! -->
+<!-- UI is rendered by Svelte. The root of the component tree is src/pages/Login.svelte. -->
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta
+ name="viewport"
+ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+ <title>StarKingdoms.IO</title>
+ </head>
+ <body class="bg-grid">
+ <div id="mount">
+ <!-- Rendered by Svelte -->
+ </div>
+
+ <script type="module" src="../src/page_loaders/login.ts"></script>
+ </body>
+</html>
A starkingdoms-client/signup/index.html => starkingdoms-client/signup/index.html +20 -0
@@ 0,0 1,20 @@
+<!-- DO NOT CHANGE THIS FILE! -->
+<!-- UI is rendered by Svelte. The root of the component tree is src/pages/Signup.svelte. -->
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta
+ name="viewport"
+ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+ <title>StarKingdoms.IO</title>
+ </head>
+ <body class="bg-grid">
+ <div id="mount">
+ <!-- Rendered by Svelte -->
+ </div>
+
+ <script type="module" src="../src/page_loaders/signup.ts"></script>
+ </body>
+</html>
A starkingdoms-client/src/components/ui/PasswordInput.svelte => starkingdoms-client/src/components/ui/PasswordInput.svelte +40 -0
@@ 0,0 1,40 @@
+<script lang="ts">
+ let clazz: string = "";
+ export { clazz as class };
+ export let id: string = "";
+ export let disabled = false;
+ export let style = "";
+ export let required = false;
+ export let autocomplete = "";
+ export let value = "";
+ export let placeholder = "";
+</script>
+
+<input
+ bind:value
+ type="password"
+ {id}
+ class="txt {clazz}"
+ {disabled}
+ on:click
+ on:focus
+ on:input
+ on:change
+ on:keydown
+ on:keyup
+ {style}
+ {required}
+ {autocomplete}
+ {placeholder} />
+
+<style lang="scss">
+ .txt {
+ appearance: none;
+ background: transparent;
+ color: var(--text);
+ padding: 0.675em 1em;
+ border: 1px solid var(--links);
+ border-radius: 0.25rem;
+ cursor: text;
+ }
+</style>
M starkingdoms-client/src/config.ts => starkingdoms-client/src/config.ts +1 -0
@@ 7,6 7,7 @@ const CONFIG_URL = "https://configuration.starkingdoms.io";
export interface Config {
servers: { [id: string]: ConfigServer };
+ backplane: string;
}
export interface ConfigServer {
name: string;
M starkingdoms-client/src/hub.ts => starkingdoms-client/src/hub.ts +3 -1
@@ 247,7 247,9 @@ export async function hub_connect(
global.parts_map.set(id, part);
logger(`spawn part`);
- let part_sprite = PIXI.Sprite.from(part_texture_url(part.part_type));
+ let part_sprite = PIXI.Sprite.from(
+ part_texture_url(part.part_type, p.part.flags.attached),
+ );
global.rendering!.part_sprite_map.set(id, part_sprite);
global.rendering!.app.stage.addChild(part_sprite);
} else if (packet.t == PacketType.DespawnPart) {
M starkingdoms-client/src/jwt.ts => starkingdoms-client/src/jwt.ts +3 -0
@@ 16,6 16,9 @@
export function parseJwt(token: string) {
let base64Url = token.split(".")[1];
+ if (base64Url === undefined) {
+ return undefined;
+ }
let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
let jsonPayload = decodeURIComponent(
window
A starkingdoms-client/src/page_loaders/login.ts => starkingdoms-client/src/page_loaders/login.ts +10 -0
@@ 0,0 1,10 @@
+// DO NOT CHANGE THIS FILE!
+// It's only purpose is to initialize the Svelte component tree.
+// Actual code is in src/pages/Login.svelte.
+import Login from "../pages/Login.svelte";
+
+const page = new Login({
+ target: document.getElementById("mount")!,
+});
+
+export default page;
A starkingdoms-client/src/page_loaders/signup.ts => starkingdoms-client/src/page_loaders/signup.ts +10 -0
@@ 0,0 1,10 @@
+// DO NOT CHANGE THIS FILE!
+// It's only purpose is to initialize the Svelte component tree.
+// Actual code is in src/pages/Signup.svelte.
+import Signup from "../pages/Signup.svelte";
+
+const page = new Signup({
+ target: document.getElementById("mount")!,
+});
+
+export default page;
M starkingdoms-client/src/pages/Home.svelte => starkingdoms-client/src/pages/Home.svelte +14 -3
@@ 28,8 28,10 @@
if (window.localStorage.getItem("stk-token") != null) {
let token = window.localStorage.getItem("stk-token")!;
let token_parsed: any = parseJwt(token);
- is_logged_in = true;
- token_username = token_parsed.username;
+ if (token_parsed !== undefined) {
+ is_logged_in = true;
+ token_username = token_parsed.username;
+ }
}
const is_development = window.localStorage.getItem("stk-mode") === "debug";
@@ 94,7 96,16 @@
<span id="account-info" class="account-info">
{#if is_logged_in}
- Logged in as {token_username}! Saves will be stored on the server.
+ Logged in as {token_username}! Saves will be stored in your browser
+ during the alpha, but will be stored on the server soon!
+ <a
+ href="#"
+ on:click={() => {
+ window.localStorage.removeItem("stk-token");
+ window.location.reload();
+ }}>
+ Logout
+ </a>
{:else}
You are not logged in. Save data will be stored in your browser cache. <a
href="/login/">
A starkingdoms-client/src/pages/Login.svelte => starkingdoms-client/src/pages/Login.svelte +112 -0
@@ 0,0 1,112 @@
+<script lang="ts">
+ import { DEFAULT_CONFIG, loadConfig } from "../config.ts";
+ import createDebug from "debug";
+ import "../css/themes/catppuccin-mocha.scss";
+ import "../css/style.scss";
+ import { parseJwt } from "../jwt.ts";
+ import HeartIcon from "../icons/HeartIcon.svelte";
+ import Popup from "../components/ui/Popup.svelte";
+ import Button from "../components/ui/Button.svelte";
+ import TextInput from "../components/ui/TextInput.svelte";
+ import PasswordInput from "../components/ui/PasswordInput.svelte";
+
+ let config = DEFAULT_CONFIG;
+ // Top-level await. Sets the default config, and overwrites it when the new config is avail. Thanks reactivity!
+ (async () => {
+ config = await loadConfig();
+ })();
+
+ const logger = createDebug("main");
+ logger(
+ `Hello, world! StarKingdoms ${APP_VERSION} (${COMMIT_HASH}) at your service!`,
+ );
+ logger("Current view: Login.svelte");
+
+ if (window.localStorage.getItem("stk-token") != null) {
+ let token = window.localStorage.getItem("stk-token")!;
+ let jwt = parseJwt(token);
+ if (jwt !== undefined) {
+ window.location.href = "/";
+ }
+ }
+
+ let username = "";
+ let password = "";
+
+ let error: string | null = null;
+
+ async function login() {
+ try {
+ let resp = await fetch(`${config.backplane}/login`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ username: username,
+ password: password,
+ }),
+ });
+
+ let body = await resp.json();
+
+ if (!resp.ok) {
+ let r_error = body.errors[0];
+
+ if (r_error.code === "ERR_UNAUTHORIZED") {
+ error = "Invalid username or password";
+ } else {
+ error = JSON.stringify(body);
+ }
+
+ return;
+ }
+
+ window.localStorage.setItem("stk-token", body.token);
+ window.location.href = "/";
+ } catch (e: any) {
+ error = e.toString();
+ }
+ }
+</script>
+
+<Popup title="Login" centered style="max-width: 300px;" id="title-popup">
+ <form id="join-fm" class="form" on:submit|preventDefault={login}>
+ <label for="username" class="label">Username</label>
+ <TextInput
+ style="width: 100%; max-width: 100%;"
+ bind:value={username}
+ id="username"
+ required
+ autocomplete="off" />
+
+ <label for="password" class="label">Password</label>
+ <PasswordInput
+ style="width: 100%; max-width: 100%;"
+ bind:value={password}
+ id="password"
+ required
+ autocomplete="off" />
+
+ <Button style="width: 100%; max-width: 100%;">Login!</Button>
+
+ {#if error !== null}
+ <span class="account-info" style="color: var(--error)">
+ {error}
+ </span>
+ {/if}
+
+ <span class="account-info">
+ Don't have an account? <a href="/signup/">Create one!</a>
+ Changed your mind?
+ <a href="/">Back to the launchpad</a>
+ </span>
+ </form>
+</Popup>
+
+<span class="footer-left">
+ StarKingdoms Client {APP_VERSION} ({COMMIT_HASH})
+</span>
+<span class="footer-right">
+ Made with <HeartIcon class="footer-icon" /> by the StarKingdoms team
+</span>
A starkingdoms-client/src/pages/Signup.svelte => starkingdoms-client/src/pages/Signup.svelte +114 -0
@@ 0,0 1,114 @@
+<script lang="ts">
+ import { DEFAULT_CONFIG, loadConfig } from "../config.ts";
+ import createDebug from "debug";
+ import "../css/themes/catppuccin-mocha.scss";
+ import "../css/style.scss";
+ import { parseJwt } from "../jwt.ts";
+ import HeartIcon from "../icons/HeartIcon.svelte";
+ import Popup from "../components/ui/Popup.svelte";
+ import Button from "../components/ui/Button.svelte";
+ import TextInput from "../components/ui/TextInput.svelte";
+ import PasswordInput from "../components/ui/PasswordInput.svelte";
+
+ let config = DEFAULT_CONFIG;
+ // Top-level await. Sets the default config, and overwrites it when the new config is avail. Thanks reactivity!
+ (async () => {
+ config = await loadConfig();
+ })();
+
+ const logger = createDebug("main");
+ logger(
+ `Hello, world! StarKingdoms ${APP_VERSION} (${COMMIT_HASH}) at your service!`,
+ );
+ logger("Current view: Signup.svelte");
+
+ if (window.localStorage.getItem("stk-token") != null) {
+ let token = window.localStorage.getItem("stk-token")!;
+ let jwt = parseJwt(token);
+ if (jwt !== undefined) {
+ window.location.href = "/";
+ }
+ }
+
+ let username = "";
+ let password = "";
+
+ let error: string | null = null;
+
+ async function signup() {
+ try {
+ let resp = await fetch(`${config.backplane}/signup`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ username: username,
+ password: password,
+ }),
+ });
+
+ let body = await resp.json();
+
+ if (!resp.ok) {
+ let r_error = body.errors[0];
+
+ if (
+ r_error.code === "ERR_INTERNAL_ERROR" &&
+ r_error.message.startsWith("duplicate key value")
+ ) {
+ error = "Username already taken :(";
+ } else {
+ error = JSON.stringify(body);
+ }
+
+ return;
+ }
+
+ window.location.href = "/login/";
+ } catch (e: any) {
+ error = e.toString();
+ }
+ }
+</script>
+
+<Popup title="Sign up" centered style="max-width: 300px;" id="title-popup">
+ <form id="join-fm" class="form" on:submit|preventDefault={signup}>
+ <label for="username" class="label">Username</label>
+ <TextInput
+ style="width: 100%; max-width: 100%;"
+ bind:value={username}
+ id="username"
+ required
+ autocomplete="off" />
+
+ <label for="password" class="label">Password</label>
+ <PasswordInput
+ style="width: 100%; max-width: 100%;"
+ bind:value={password}
+ id="password"
+ required
+ autocomplete="off" />
+
+ <Button style="width: 100%; max-width: 100%;">Sign up!</Button>
+
+ {#if error !== null}
+ <span class="account-info" style="color: var(--error)">
+ {error}
+ </span>
+ {/if}
+
+ <span class="account-info">
+ Already have an account? <a href="/login/">Log in!</a>
+ Changed your mind?
+ <a href="/">Back to the launchpad</a>
+ </span>
+ </form>
+</Popup>
+
+<span class="footer-left">
+ StarKingdoms Client {APP_VERSION} ({COMMIT_HASH})
+</span>
+<span class="footer-right">
+ Made with <HeartIcon class="footer-icon" /> by the StarKingdoms team
+</span>
M starkingdoms-client/vite.config.ts => starkingdoms-client/vite.config.ts +2 -0
@@ 23,6 23,8 @@ export default defineConfig({
input: {
main: resolve(__dirname, "index.html"),
play: resolve(__dirname, "play/index.html"),
+ signup: resolve(__dirname, "signup/index.html"),
+ login: resolve(__dirname, "login/index.html"),
},
},
},