feuerwerk/src/editor/App.ts

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 { isDragFrame } from './framePreview';
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<SignedIn> {
  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<SignedIn>((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<void> {
  const auth = new HttpAuthStore(API_ENDPOINT);
  setUpProjectFiles(app.renderer);

  const openSession = async (): Promise<void> => {
    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 but a drag's frame (#394): in a large project the walk over all assets
    // costs milliseconds, and the command that ends the drag asks again.
    state.on('project', () => {
      if (!isDragFrame()) preloadProjectFiles(state.project);
    });
    const editor = new Editor(
      app,
      root,
      state,
      new CelUploadStore(
        new HttpProjectStore(API_ENDPOINT),
        pixelCels,
        new HttpFileStore(API_ENDPOINT, 'pixels'),
      ),
      new HttpFileStore<UploadedTexture, StoredTexture>(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<void> => {
    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();
}