PlayerRoot.tsx

import { Client } from 'fusion/Client';
import { Session } from 'fusion/Session';
import { Socket } from 'fusion/Socket';
import { UI } from 'fusion/core';

import { LoginScreen } from 'this/client/components/screens/LoginScreen';

/**
 * Defines the root of the player UI.
 */
export class PlayerRoot extends UI.Component {

    protected handleComponentReady(): void {
        const client = this.getContext<Client>(Client);

        /**
         * Once client connects to server, register socket in context.
         */
        client.observe<Socket>(Client.Action.Connect).subscribe(action => {
            this.setContext(Socket, action.value);
        });

        /**
         * Once user logs in, register session in context.
         */
        client.observe<Session>(Client.Action.Login).subscribe(action => {
            this.setContext(Session, action.value);
        });
    }

    public render(): UI.Element[] {
        const session = this.getContext<Session>(Session);

        /**
         * If no session established yet, render login screen.
         */
        if (!session) {
            return [
                <LoginScreen/>
            ];
        }

        return [
            <HTMLElement tag='h1'>
                ok boomer
            </HTMLElement>
        ];
    }

    public theme(): string {
        return `
            :host {
                background-color: rgb(29, 15, 8);
                background-image: url("https://www.transparenttextures.com/patterns/redox-02.png");
                background-position: center;
                display: flex;
                flex-direction: column;
                height: 100%;
                overflow: auto;
                user-select: none;
                width: 100%;
            }
        `;
    }
}