Back to the gameOWNER’S BUILD GUIDE
YOUR GAME. YOUR PLATFORM.

From digital deck
to your own app.

This version supports shared-device play and remote rooms. The frontend is HTML, CSS, and JavaScript; the server is a Cloudflare-compatible Worker with a D1 database. Remote play needs this backend and cannot run from static files alone.

Download the complete multiplayer source package

Play remotely

  1. Select Play remotely. Enter your name, tone, and session length, then create a room.
  2. Copy the invite link and share it with your players. Guests enter their names and join from their own devices.
  3. Open your preferred voice or video call. Everyone accepts the listening agreement and marks ready.
  4. The host begins. Everyone sees the same card; only the active player can finish or pass their turn.
  5. Mark ready between stages, or choose the Connection close. Every remaining player gets a closing invitation.

Remote rooms support 2–8 players. Use separate browser profiles to test multiple players on one computer. The game refreshes its shared state about every three seconds. Refreshing and rejoining from the same browser preserves your seat. Choosing Leave releases your seat permanently for that room.

A host can hand control to another connected player. An absent host is replaced after about 60 seconds without a heartbeat, on the next connected player’s update. A host can skip an offline turn or remove offline players during check-ins. Background tabs may appear offline if the browser suspends them.

What server do you need?

Recommended: Cloudflare Workers + D1. Workers runs the game API and serves the app; D1 stores rooms and shared progress. No dedicated server, VPS, or WordPress installation is needed. The free tier can support initial testing; Workers Paid starts at a $5/month minimum, with usage charges above included allowances. Monitor Workers and D1 usage as play grows.

Eight players polling every three seconds produce approximately 9,600 sync requests per hour, plus actions and page assets. This is an estimate. Rooms expire after 24 hours; expired records are physically cleared during subsequent room creations. Answers and audio are not stored.

Option A · Deploy on your own Cloudflare account

  1. Download and unzip the multiplayer source. Install Node.js 24 LTS. Open Terminal in the unzipped project folder.
  2. Install the project dependencies and the Cloudflare deployment tool:
npm ci
npm install --save-dev wrangler
npm test
npm run build
npx wrangler login
  1. Copy wrangler.example.jsonc to wrangler.jsonc. Create your D1 database:
npx wrangler d1 create its-not-science-rooms
  1. Copy the returned database ID into wrangler.jsonc in place of REPLACE_WITH_YOUR_D1_DATABASE_ID. Keep the binding named DB.
  2. Apply the migrations locally and launch the local development server:
npx wrangler d1 migrations apply its-not-science-rooms --local
npx wrangler dev
  1. Open the address printed by Wrangler. Test two browser profiles: create, join, mark ready, begin, pass, refresh, and rejoin. Stop the local server when finished.
  2. Apply the schema to the hosted database, then deploy:
npx wrangler d1 migrations apply its-not-science-rooms --remote
npx wrangler deploy
  1. Open the deployment URL on two devices and repeat the room test.
  2. In your Worker’s domain settings, add your domain and follow the DNS instructions Cloudflare provides.

Edit public/deck.js for the cards, public/style.css for styling, and worker/rooms.js for remote rules. Run npm run build and deploy again after changes. Generate a new migration with npm run db:generate when you intentionally change db/schema.ts; never rewrite an applied migration.

The current Sites publication remains private to its owner. Room invitations do not override site access. Grant players site access through the sharing controls, or deploy this source to your public domain. Do not embed the private Sites URL in a public WordPress page.

Option B · Elementor with the same game engine

The reliable starting point is to let Elementor control the surrounding page while this standalone app controls gameplay. An iframe keeps the game’s CSS isolated from your WordPress theme.

  1. Make a staging backup. Work on a draft page first.
  2. Host the app files. Deploy the Worker and D1 backend using Option A. Verify your public app URL works directly, for example https://play.YOUR-DOMAIN.com/. A standard PHP-only WordPress server cannot run this backend.
  3. Create a WordPress page. Name it “Play It’s Not Science.” Open it in Elementor. Use a full-width layout or Canvas if you want no theme header/footer.
  4. Add an HTML widget. Paste the embed below. Replace the example URL with your actual app URL.
<iframe
  src="https://play.YOUR-DOMAIN.com/"
  title="It's Not Science connection card game"
  style="display:block;width:100%;height:100dvh;min-height:850px;border:0;"
  loading="eager">
</iframe>
  1. Check responsive behavior. Set the surrounding Elementor container to full width with zero padding. The iframe scrolls internally if needed. Adjust its minimum height for your page.
  2. Test outside the editor. Preview the WordPress page in a new tab and test a complete session. If embedding is blocked, check your host’s Content-Security-Policy frame-ancestors and X-Frame-Options configuration. A same-origin folder is the simplest arrangement.
  3. Publish the page. Add it to your navigation. Update gameplay in the source and redeploy the app. If embedded browser storage is blocked, provide an “Open game in a new tab” link.

Do not paste the entire HTML document into an HTML widget. Use the iframe, or have a developer turn the engine into a WordPress plugin with a shortcode and properly enqueued scripts. The iframe version does not make individual cards editable in Elementor.

Using Elementor MCP to carry out the setup

No Elementor MCP connection was available for this build. Its installation, authentication, and exact tools depend on the MCP server you choose. The steps below describe a capability-checked workflow, not invented MCP commands.

  1. Connect your chosen Elementor/WordPress MCP server to your coding assistant using that server’s own documentation. Use a staging site and permissions limited to that site.
  2. Ask the assistant to list its available tools and confirm whether it can read pages, create a draft page, add an HTML widget, and configure responsive containers. File upload may require SFTP separately.
  3. Deploy the Worker app using Option A. Confirm its public URL works before embedding.
  4. Give the assistant the instruction below, replacing the URL with the verified location.
  5. Review the draft visually and test the game. Then explicitly tell the assistant to publish the reviewed page.
Create a draft Elementor page named “Play It’s Not Science.”
First inspect the installed Elementor version and your available tools.
Use a full-width page with one container, zero padding, and one HTML
widget containing an iframe to [VERIFIED APP URL].
Give the iframe the title “It's Not Science connection card game”,
width 100%, height 100dvh, min-height 850px, border 0.
Use the brand palette #F7F3EB, #2F2F2F, #C97A7E, #6C4A6E, #4FB286
for any surrounding page elements. Preserve the hosted game engine.
Do not recreate the game as static Elementor cards.
Check desktop and mobile. Keep the page as a draft for my review.
If a needed tool is unavailable, report which step I must do manually.

How the code is organized

Before expanding the product

This release has no built-in voice/video, accounts, paid decks, or late joining after a game starts. Remote play uses periodic synchronization rather than WebSockets. For a large public launch, add edge bot protection, monitor costs, and load-test expected concurrency. A later WebSocket version could reduce polling for larger audiences.

Reference documentation