Adventure Game

Tap to play in fullscreen

``` ```js // preview.js import { requestExpandedMode } from '@devvit/web/client'; document.addEventListener('DOMContentLoaded', () => { const playButton = document.getElementById('play-button'); playButton.addEventListener('click', async (event) => { try { await requestExpandedMode(event, 'game'); } catch (error) { console.error('Failed to enter expanded mode:', error); } }); }); ``` This screen is what users see inline; the button will request expanded mode into the `game` entry. [[Launch customization](https://developers.reddit.com/docs/capabilities/server/launch_screen_and_entry_points/launch_screen_customization)] 2. **Wire it as the default inline entry** in `devvit.json` (see example above with `\"default\"` and `\"inline\": true`). [[Splash migration](https://developers.reddit.com/docs/capabilities/server/launch_screen_and_entry_points/splash_migration)] 3. **Create the post using that entry**: ```ts import { reddit } from '@devvit/web/server'; await reddit.submitCustomPost({ subredditName: context.subredditName!, title: 'My Game', entry: 'default', // or omit to use default }); ``` If `entry` is omitted, `default` is used automatically. [[Multiple entry points](https://developers.reddit.com/docs/capabilities/server/launch_screen_and_entry_points/view_modes_entry_points#multiple-entry-points); [Splash migration](https://developers.reddit.com/docs/capabilities/server/launch_screen_and_entry_points/splash_migration)] --- ## Setting up expanded mode ### 1. Define an expanded entry In `devvit.json`, add an entry like `\"game\"` that points to your main game HTML and (optionally) a taller height: ```json \"game\": { \"entry\": \"index.html\", \"height\": \"tall\" } ``` [[Splash migration](https://developers.reddit.com/docs/capabilities/server/launch_screen_and_entry_points/splash_migration)] ### 2. Request expanded mode from inline From your inline script or React component, call `requestExpandedMode` in response to a user gesture: **Plain JS (from preview.js)** [[Launch customization](https://developers.reddit.com/docs/capabilities/server/launch_screen_and_entry_points/launch_screen_customization)] ```js import { requestExpandedMode } from '@devvit/web/client'; // Must be called from a trusted event (click/tap) await requestExpandedMode(event, 'game'); // 'game' is the entry name ``` **React example** [[Switching modes](https://developers.reddit.com/docs/capabilities/server/launch_screen_and_entry_points/view_modes_entry_points#switching-between-view-modes)] ```ts import { requestExpandedMode } from '@devvit/web/client'; const handleStartGame = async (event: React.MouseEvent) => { try { await requestExpandedMode(event.nativeEvent, 'game'); } catch (error) { console.error('Failed to enter expanded mode:', error); } }; ``` ### 3. (Optional) React to mode changes and exit You can detect whether you’re inline or expanded and respond to changes: ```ts import React, { useState, useEffect } from 'react'; import { getWebViewMode, requestExpandedMode, exitExpandedMode, addWebViewModeListener, removeWebViewModeListener, } from '@devvit/web/client'; export function GameApp() { const [mode, setMode] = useState(getWebViewMode()); const [gameStarted, setGameStarted] = useState(false); useEffect(() => { const handleModeChange = (newMode: 'inline' | 'expanded') => { setMode(newMode); if (newMode === 'inline' && gameStarted) { pauseGame(); } }; addWebViewModeListener(handleModeChange); return () => removeWebViewModeListener(handleModeChange); }, [gameStarted]); const handlePlayClick = async (event: React.MouseEvent) => { try { await requestExpandedMode(event.nativeEvent, 'game'); setGameStarted(true); } catch (error) { console.error('Could not enter expanded mode:', error); setGameStarted(true); // fallback inline } }; const handleExitClick = async (event: React.MouseEvent) => { try { await exitExpandedMode(event.nativeEvent); } catch (error) { console.error('Could not exit expanded mode:', error); } }; if (mode === 'inline') { return (

Adventure Game

Tap to play in fullscreen

); } return (

); } ``` [[Launch example](https://developers.reddit.com/docs/capabilities/server/launch_screen_and_entry_points/launch_screen_customization#complete-example)] --- ## Summary - **Inline mode**: default, in‑feed, must be fast, tap‑only, and respect scroll/gestures. - **Expanded mode**: full-screen/modal, entered only via user action. - **Entry points** (`devvit.json post.entrypoints`) map names like `default`, `game`, `leaderboard` to HTML files and heights. - Use `requestExpandedMode(event, 'entryName')` to go from inline to expanded, and `getWebViewMode` + listeners to adapt your UI.\n\n","url","link_url","/p/q94p2qfvrvydb_o3mc7s","versioned_link_url","/p/q94p2qfvrvydb_o3mc7s/31","yapping","**Examining Placement Options**\n\nI'm currently focused on the Reddit placement nuances during porting. I'm exploring how to incorporate a user-selectable \"View Mode\" option—inline or expanded—into the WebSim to Devvit conversion. The existing documentation provides the necessary information for the interface logic.\n\n\n**Implementing Launch Choices**\n\nI'm now integrating the \"Launch Mode\" selection into the UI. The user's choice—direct (inline) or button launch (expanded)—will be a pivotal porting feature. This feature will influence the `devvit.json` generation within `src/generator.js`. My current plan: a \"Launch Mode\" UI element, potentially during version selection, or as a new settings category, that links into `src/generator.js` logic to set up the appropriate entries in `devvit.json` accordingly.\n\n\n**Developing Entrypoint Logic**\n\nI'm now incorporating the \"Launch Mode\" selection. My plan involves: 1) Updating `index.html` with a dropdown menu within `#step-version`. 2) Modifying `src/main.js` to pass this selection to `generateDevvitZip`. 3) Adapting `src/generator.js` to process the selection and configure the appropriate entry points in `devvit.json`. 4) Modifying `src/templates/config.js` to handle entrypoint configuration. 5) Creating a template for `preview.html`. I'm going to start by handling the \"Button Launch\" case, generating `preview.html`, setting the dual entrypoints in `devvit.json`, and modifying `vite.config.ts` to build both html files. For \"Direct Launch\", current behaviour will remain.\n\n\n**Implementing Mode Logic**\n\nI've made progress on the launch mode functionality. I've updated the logic to read the dropdown value and pass it to `generateDevvitZip`. I'm working on refactoring `generateClientViteConfig` to accept multiple input options. I'm focusing on the \"expanded\" launch case now, generating the `launcher.html` file and ensuring `devvit.json` and `vite.config.ts` are correctly configured. I'm focusing on the implementation details for `launcher.html` now.\n\n\n**Structuring Launch Options**\n\nI'm now refining the launch mode implementation. I'm focusing on the `launcher.html` template. My plan is to map \"default\" to `preview.html` (inline) and \"game\" to `index.html`. I've confirmed that `@devvit/web` is already included. I'm currently working to make `launcher.html` a valid HTML file that Vite can build, so it can import the JS for launching the game. I plan to add a `

WebSim to Devvit Converter