@mpgd/cli 0.9.0 → 0.10.1

package/templates/phaser-game/src/platform/devvitEntrypoint.ts

@@ -1,57 +1,132 @@
 import {
   requestDevvitExpandedMode,
-  startDevvitWebSurface,
+  startDevvitWebView,
+  type DevvitInlineModeContext,
 } from '@mpgd/adapter-devvit/web';
 
-await startDevvitWebSurface({
-  async mountInlinePreview() {
-    await import('./devvitInlinePreview.css');
-    renderInlinePreview();
+await startDevvitWebView({
+  async mountInlineMode(context) {
+    await import('./devvitInlineMode.css');
+    renderInlineLaunchScreen(context);
   },
-  async loadExpandedGame() {
+  async loadGameplay() {
     await import('../main');
   },
   onModeUnavailable(error) {
     if (!(error instanceof ReferenceError)) {
-      console.warn('[devvit] web view mode unavailable; loading the game surface.', error);
+      console.warn('[devvit] web view mode unavailable; loading gameplay.', error);
     }
   },
 });
 
-function renderInlinePreview(): void {
-  const preview = document.createElement('main');
-  preview.className = 'devvit-preview';
+function renderInlineLaunchScreen(
+  context: DevvitInlineModeContext,
+  errorMessage?: string,
+): void {
+  const launchScreen = document.createElement('main');
+  launchScreen.className = 'devvit-launch-screen';
 
   const eyebrow = document.createElement('p');
-  eyebrow.className = 'devvit-preview__eyebrow';
-  eyebrow.textContent = 'Ready to play';
+  eyebrow.className = 'devvit-launch-screen__eyebrow';
+  eyebrow.textContent = 'Inline mode';
 
   const title = document.createElement('h1');
   title.textContent = '__GAME_TITLE__';
 
   const description = document.createElement('p');
-  description.className = 'devvit-preview__description';
-  description.textContent = 'Open the expanded view to start the game.';
-
-  const button = document.createElement('button');
-  button.className = 'devvit-preview__button';
-  button.type = 'button';
-  button.textContent = 'Play';
-  button.addEventListener('click', async (event) => {
-    try {
-      await requestDevvitExpandedMode(event, 'game');
-    } catch (error) {
-      console.error('[devvit] expanded game surface request failed.', error);
-    }
+  description.className = 'devvit-launch-screen__description';
+  description.textContent = 'Play directly in the post or open expanded mode.';
+
+  const actions = document.createElement('div');
+  actions.className = 'devvit-launch-screen__actions';
+
+  const playInlineButton = document.createElement('button');
+  playInlineButton.className = 'devvit-launch-screen__button';
+  playInlineButton.type = 'button';
+  playInlineButton.textContent = 'Play here';
+
+  const expandButton = document.createElement('button');
+  expandButton.className =
+    'devvit-launch-screen__button devvit-launch-screen__button--secondary';
+  expandButton.type = 'button';
+  expandButton.textContent = 'Open expanded mode';
+
+  const status = document.createElement('p');
+  status.className = 'devvit-launch-screen__status';
+  status.setAttribute('aria-live', 'polite');
+  status.textContent = errorMessage ?? '';
+
+  playInlineButton.addEventListener('click', () => {
+    setBusy(true, 'Loading gameplay…');
+    const loading = mountGameplayDocument();
+
+    void context.startGameplay()
+      .then(() => {
+        loading.remove();
+      })
+      .catch((error: unknown) => {
+        console.error('[devvit] inline mode gameplay failed to load.', error);
+        renderInlineLaunchScreen(context, 'Gameplay could not start. Try again.');
+      });
   });
+  expandButton.addEventListener('click', (event) => {
+    setBusy(true, 'Opening expanded mode…');
+
+    void requestDevvitExpandedMode(event, 'game')
+      .then(() => {
+        setBusy(false, '');
+      })
+      .catch((error: unknown) => {
+        console.error('[devvit] expanded mode request failed.', error);
+        setBusy(false, 'Expanded mode is unavailable. Try again.');
+      });
+  });
+
+  actions.append(playInlineButton, expandButton);
+  launchScreen.append(eyebrow, title, description, actions, status);
+  const body = requireDocumentBody();
+
+  body.classList.remove('devvit-inline-mode-gameplay');
+  body.classList.add('devvit-inline-mode-host');
+  delete body.dataset.mpgdPreserveBrowserTouchGestures;
+  body.replaceChildren(launchScreen);
+
+  function setBusy(busy: boolean, message: string): void {
+    playInlineButton.disabled = busy;
+    expandButton.disabled = busy;
+    status.textContent = message;
+  }
+}
+
+function mountGameplayDocument(): HTMLElement {
+  const body = requireDocumentBody();
+  const app = document.createElement('main');
+  const game = document.createElement('div');
+  const loading = document.createElement('p');
+
+  app.id = 'app';
+  game.id = 'game';
+  loading.className = 'devvit-inline-gameplay-loading';
+  loading.setAttribute('aria-live', 'polite');
+  loading.setAttribute('role', 'status');
+  loading.textContent = 'Loading gameplay…';
+  game.append(loading);
+  app.append(game);
+
+  body.classList.remove('devvit-inline-mode-host');
+  body.classList.add('devvit-inline-mode-gameplay');
+  body.dataset.mpgdPreserveBrowserTouchGestures = 'true';
+  body.replaceChildren(app);
+
+  return loading;
+}
 
-  preview.append(eyebrow, title, description, button);
+function requireDocumentBody(): HTMLElement {
   const body = document.body;
 
   if (body === null) {
-    throw new Error('Devvit inline preview requires a document body.');
+    throw new Error('Devvit inline mode requires a document body.');
   }
 
-  body.classList.add('devvit-preview-host');
-  body.replaceChildren(preview);
+  return body;
 }

package/templates/phaser-game/src/platform/devvitInlineMode.css

@@ -0,0 +1,133 @@
+body.devvit-inline-mode-host {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+  background: #0f172a;
+}
+
+body.devvit-inline-mode-gameplay {
+  overflow-y: auto;
+  overscroll-behavior-y: auto;
+}
+
+body.devvit-inline-mode-gameplay #game {
+  position: relative;
+}
+
+body.devvit-inline-mode-gameplay #game,
+body.devvit-inline-mode-gameplay canvas {
+  touch-action: pan-y !important;
+}
+
+.devvit-inline-gameplay-loading {
+  position: fixed;
+  z-index: 1;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  margin: 0;
+  background: #0f172a;
+  color: #cbd5e1;
+  font: 700 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
+  pointer-events: none;
+}
+
+.devvit-launch-screen,
+.devvit-launch-screen * {
+  box-sizing: border-box;
+}
+
+.devvit-launch-screen {
+  min-height: 100vh;
+  display: grid;
+  place-content: center;
+  justify-items: start;
+  gap: 0.75rem;
+  padding: clamp(1.25rem, 5vw, 3rem);
+  background:
+    radial-gradient(circle at 85% 15%, rgb(56 189 248 / 0.2), transparent 38%),
+    linear-gradient(145deg, #0f172a, #172554);
+  color: #f8fafc;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+
+.devvit-launch-screen__eyebrow,
+.devvit-launch-screen__description,
+.devvit-launch-screen__status,
+.devvit-launch-screen h1 {
+  margin: 0;
+}
+
+.devvit-launch-screen__eyebrow {
+  color: #7dd3fc;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.devvit-launch-screen h1 {
+  max-width: 18ch;
+  font-size: clamp(2rem, 9vw, 4.5rem);
+  line-height: 0.95;
+}
+
+.devvit-launch-screen__description {
+  max-width: 36rem;
+  color: #cbd5e1;
+  line-height: 1.5;
+}
+
+.devvit-launch-screen__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.devvit-launch-screen__button {
+  min-height: 2.75rem;
+  padding: 0.65rem 1.25rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  color: #082f49;
+  background: #7dd3fc;
+  font: inherit;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.devvit-launch-screen__button--secondary {
+  border-color: #7dd3fc;
+  color: #e0f2fe;
+  background: rgb(15 23 42 / 0.64);
+}
+
+.devvit-launch-screen__button:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+.devvit-launch-screen__button:focus-visible {
+  outline: 3px solid #f8fafc;
+  outline-offset: 3px;
+}
+
+.devvit-launch-screen__status {
+  min-height: 1.5em;
+  color: #fda4af;
+  font-size: 0.875rem;
+}
+
+@media (hover: hover) {
+  .devvit-launch-screen__button:not(:disabled):hover {
+    filter: brightness(1.1);
+  }
+}
+
+@media (max-width: 420px) {
+  .devvit-launch-screen__actions,
+  .devvit-launch-screen__button {
+    width: 100%;
+  }
+}

package/templates/phaser-game/src/runtime/createGame.ts

@@ -7,6 +7,7 @@ import { starterContextKey, type StarterContext } from './gameContext';
 
 export function createStarterGame(input: {
   readonly mountId: string;
+  readonly preserveBrowserTouchGestures?: boolean;
   readonly context: StarterContext;
 }): Phaser.Game {
   const game = new Phaser.Game({
@@ -15,6 +16,11 @@ export function createStarterGame(input: {
     width: 960,
     height: 540,
     backgroundColor: '#07111f',
+    input: {
+      touch: {
+        capture: input.preserveBrowserTouchGestures !== true,
+      },
+    },
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_BOTH,

package/templates/phaser-game/src/platform/devvitInlinePreview.css

@@ -1,75 +0,0 @@
-body.devvit-preview-host {
-  min-width: 320px;
-  min-height: 100vh;
-  margin: 0;
-  background: #0f172a;
-}
-
-.devvit-preview,
-.devvit-preview * {
-  box-sizing: border-box;
-}
-
-.devvit-preview {
-  min-height: 100vh;
-  display: grid;
-  place-content: center;
-  justify-items: start;
-  gap: 0.75rem;
-  padding: clamp(1.25rem, 5vw, 3rem);
-  background:
-    radial-gradient(circle at 85% 15%, rgb(56 189 248 / 0.2), transparent 38%),
-    linear-gradient(145deg, #0f172a, #172554);
-  color: #f8fafc;
-  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
-}
-
-.devvit-preview__eyebrow,
-.devvit-preview__description,
-.devvit-preview h1 {
-  margin: 0;
-}
-
-.devvit-preview__eyebrow {
-  color: #7dd3fc;
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-
-.devvit-preview h1 {
-  max-width: 18ch;
-  font-size: clamp(2rem, 9vw, 4.5rem);
-  line-height: 0.95;
-}
-
-.devvit-preview__description {
-  max-width: 36rem;
-  color: #cbd5e1;
-  line-height: 1.5;
-}
-
-.devvit-preview__button {
-  min-height: 2.75rem;
-  margin-top: 0.5rem;
-  padding: 0.65rem 1.25rem;
-  border: 0;
-  border-radius: 999px;
-  color: #082f49;
-  background: #7dd3fc;
-  font: inherit;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.devvit-preview__button:focus-visible {
-  outline: 3px solid #f8fafc;
-  outline-offset: 3px;
-}
-
-@media (hover: hover) {
-  .devvit-preview__button:hover {
-    filter: brightness(1.1);
-  }
-}