import type { Application } from 'pixi.js'; import type { AuthStore, SignedIn } from '../core/store/AuthStore'; import { HttpAuthStore } from '../core/store/HttpAuthStore'; import { HttpFileStore } from '../core/store/HttpFileStore'; import { HttpProjectStore } from '../core/store/HttpProjectStore'; import { HttpReleaseStore } from '../core/store/HttpReleaseStore'; import { HttpSnapshotStore } from '../core/store/HttpSnapshotStore'; import { HttpUsersStore } from '../core/store/HttpUsersStore'; import type { StoredTexture, UploadedTexture } from '../core/store/TextureStore'; import { loadPhysics } from '../runtime/physics/engine'; import { projectPictureFactory } from '../viewport/generatedPictures'; import { preloadProjectFiles, setUpProjectFiles } from '../viewport/projectFiles'; import { textureLibrary } from '../viewport/TextureLibrary'; import type { VStack } from '../ui'; import { pixelCels } from '../viewport/PixelCels'; import { LoginScreen } from './auth/LoginScreen'; import { installLoginHook } from './auth/loginHook'; import { consoleLog } from './console/log'; import { installDebugHook } from './debugHook'; import { Editor } from './Editor'; import { startPlugins } from './plugins/startPlugins'; import { CelUploadStore } from './pixelart/celUploadStore'; import { EditorState } from './state'; const API_ENDPOINT = '/game-maker/api/index.php'; /** * Shows the sign-in screen until somebody is signed in, and answers with their name. Returns * right away when the session from an earlier visit is still good – which is what lets a * deployment replace the editor under an open tab without asking for the password again. */ async function signedInUser(app: Application, root: VStack, auth: AuthStore): Promise { const existing = await auth.session(); if (existing !== null) return existing; let done: (account: SignedIn) => void = () => {}; const screen = new LoginScreen(auth, (account) => done(account)); const removeHook = installLoginHook(app, screen); const account = await new Promise((resolve) => { done = resolve; root.add(screen, 1); root.resize(app.screen.width, app.screen.height); screen.focusFirstField(); }); removeHook(); root.removeChild(screen); // The editor sizes `root` itself once it is built, but `resize` lays out only when the size // changed – and the sign-in screen has already set it to the size of the window. Forgetting the // size here is what makes that call count again; without it the whole editor sits unlaid-out in // the corner. root.resize(0, 0); screen.destroy({ children: true }); return account; } /** * Wires state, stores and the editor composition together and opens the first project. * * Signing out does not reload the page (#177): it takes the editor down and puts the sign-in * screen back, in the same canvas with the same renderer. So this is a loop rather than a straight * line – every round is one account's session. Only the first round is awaited, because the caller * has more to set up once the editor is up; the rounds after it run on their own. */ export async function startEditor(app: Application, root: VStack): Promise { const auth = new HttpAuthStore(API_ENDPOINT); setUpProjectFiles(app.renderer); const openSession = async (): Promise => { const { user, role } = await signedInUser(app, root, auth); // Who is signed in goes into the window title: the toolbar is crowded enough, and the title is // also what tells two tabs on two accounts apart. document.title = `Game Maker – ${user}`; const state = new EditorState(); // Drawn pictures (#185) are looked up in the project this session holds; the next session // installs its own, which is also what lets go of everything the old one had drawn. textureLibrary.setPictureFactory(projectPictureFactory(() => state.project)); // Asked on every change, which is cheap – a file that is held or on its way is skipped. state.on('project', () => preloadProjectFiles(state.project)); const editor = new Editor( app, root, state, new CelUploadStore( new HttpProjectStore(API_ENDPOINT), pixelCels, new HttpFileStore(API_ENDPOINT, 'pixels'), ), new HttpFileStore(API_ENDPOINT, 'textures'), new HttpFileStore(API_ENDPOINT, 'fonts'), new HttpFileStore(API_ENDPOINT, 'sounds'), new HttpSnapshotStore(API_ENDPOINT), new HttpReleaseStore(API_ENDPOINT), { user, role, users: new HttpUsersStore(API_ENDPOINT), logOut: () => void endSession(editor).catch((error: unknown) => { console.error('[auth] Signing out failed:', error); }), // Straight through to the store: the server checks the old password, and the session this // tab holds is the one it keeps – so there is nothing to do here afterwards. changePassword: (current, next) => auth.changePassword(current, next), }, ); installDebugHook(app, state, editor); // Before the project, not after it (#119): which plugins run is written in the project file, // and `boot()` hands that list over before it reads the file into the model. await startPlugins(API_ENDPOINT, state, editor); await editor.boot(); loadPhysics().catch((error: unknown) => console.error('[physics] Rapier could not be loaded:', error)); }; /** * Ends the session the Logout button belongs to: the editor writes what is unsaved and lets go * of everything, then the server drops the session, and the sign-in screen comes back. The * editor goes first, so its last save still travels with a session the server accepts. */ const endSession = async (editor: Editor): Promise => { await editor.dispose(); document.title = 'Game Maker'; // The console panel is page-wide, the lines in it are not: what one account's project printed // is none of the next one's business. consoleLog.clear(); try { await auth.logOut(); } catch (error) { console.error('[auth] Signing out did not reach the server:', error); } await openSession(); }; await openSession(); }