Split a game across the fold: game on one side, controls on the other #1

erkamyaman · 2026-09-19T19:52:47Z

erkamyaman
Sep 19, 2026
Maintainer

A developer asked on Reddit whether the plugin could run their three.js game with the gameplay on one half of a foldable and a d-pad on the other, whether the phone is fully open or half-folded. It can, and here's how.

Screen.Recording.2026-09-19.at.22.48.40.mov

How it works ( Roughly )

Even when the phone is fully open, getFoldState() tells you where the fold is (hingeBounds) and which way it runs (hingeOrientation). Split your layout along that line and update it whenever the phone folds, unfolds or rotates:

import { Foldable } from '@erkamyaman/capacitor-foldable';

const layout = ({ hingeBounds, hingeOrientation }) => {
  const W = innerWidth, H = innerHeight;

  if (!hingeBounds) {
    // No fold (phone closed, or a regular phone): one screen, controls at the bottom
    return;
  }

  if (hingeOrientation === 'vertical') {
    // Book-style fold: game left of the fold, d-pad right of it
    const gameWidth = hingeBounds.x;
    const padStart = hingeBounds.x + hingeBounds.width;
  } else {
    // Laptop-style fold (or a Galaxy Z Flip): game above, d-pad below
    const gameHeight = hingeBounds.y;
    const padStart = hingeBounds.y + hingeBounds.height;
  }
};

layout(await Foldable.getFoldState());
Foldable.addListener('foldStateChange', layout);

dotnetdreamer · 2026-09-19T20:08:37Z

dotnetdreamer
Sep 19, 2026

cool, I will give it a try and come back

0 replies

erkamyaman · 2026-09-19T21:28:04Z

erkamyaman
Sep 19, 2026
Maintainer Author

Update: as of 8.1.0 you don't need JavaScript for this at all.

installFoldablePolyfill() now sets the fold's position on <html> whenever the device has a fold, flat or half-open:

--fold-left, --fold-top, --fold-width, --fold-height
a fold-vertical or fold-horizontal class

So the split is plain CSS:

/* fold runs down the middle: game left, controls right */
.fold-vertical .game { width: var(--fold-left); height: 100%; }
.fold-vertical .controls { left: calc(var(--fold-left) + var(--fold-width)); right: 0; height: 100%; }

/* fold runs across (or a Galaxy Z Flip): game on top, controls below */
.fold-horizontal .game { width: 100%; height: var(--fold-top); }
.fold-horizontal .controls { top: calc(var(--fold-top) + var(--fold-height)); bottom: 0; }

/* no fold: your normal single-screen layout */

0 replies

Navigation Menu

Uh oh!

Split a game across the fold: game on one side, controls on the other #1

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Split a game across the fold: game on one side, controls on the other #1

Uh oh!

erkamyaman Sep 19, 2026 Maintainer

How it works ( Roughly )

Replies: 2 comments

Uh oh!

dotnetdreamer Sep 19, 2026

Uh oh!

erkamyaman Sep 19, 2026 Maintainer Author

erkamyaman
Sep 19, 2026
Maintainer

dotnetdreamer
Sep 19, 2026

erkamyaman
Sep 19, 2026
Maintainer Author