Next.js Discord

Discord Forum

Flash Game Hosted on Ruffle – Full Width/Height Issue in Next.js (Backend Sanity)

Unanswered
Asian swamp eel posted this in #help-forum
Open in Discord
Asian swamp eelOP
Hello everyone,

I'm hosting a Flash game on my Next.js website using Ruffle. However, I'm facing an issue where the game container isn’t displaying at full viewport width and height as expected.

I fetch the SWF URL from a backend (using something like Sanity) and pass it to a custom FlashGamePlayer component.
The FlashGamePlayer component initializes Ruffle to load the SWF file.
I’ve set the container’s styles to use width: 100vw and height: 100vh, but the game still isn’t filling the screen properly.

FlashGamePage.jsx:

"use client";
import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import client from "@/client.config";
import FlashGamePlayer from "@/components/FlashGamePlayer";

export default function FlashGamePage() {
  const { slug } = useParams();
  const [game, setGame] = useState(null);

  useEffect(() => {
    if (!slug) return;

    const fetchGame = async () => {
      const query = `*[_type == "FlashGames" && slug.current == $slug][0] {
        gameFile {
          asset -> { url }
        }
      }`;

      try {
        const data = await client.fetch(query, { slug });
        if (data) {
          setGame(data);
          console.log("Game data fetched:", data);
        } else {
          console.error("Game not found");
        }
      } catch (error) {
        console.error("Error fetching game data:", error);
      }
    };

    fetchGame();
  }, [slug]);

  if (!game) {
    return <p>Game Loading [Stay Tuned]...</p>;
  }

  return (
    <div className="min-h-screen bg-gray-900 text-white p-4">
      {/* Flash Game */}
      {game.gameFile?.asset?.url ? (
        <FlashGamePlayer swfUrl={game.gameFile.asset.url} />
      ) : (
        <p className="text-red-500">SWF file URL missing!</p>
      )}
    </div>
  );
}

2 Replies

Asian swamp eelOP
FlashGamePlayer.jsx:

 
"use client";
import React, { useEffect, useRef } from "react";

export default function FlashGamePlayer({ swfUrl }) {
  const containerRef = useRef(null);

  // Fullscreen trigger
  const handleFullScreen = () => {
    if (containerRef.current?.requestFullscreen) {
      containerRef.current.requestFullscreen();
    }
  };

  useEffect(() => {
    const initRuffle = () => {
      if (window.RufflePlayer) {
        const ruffle = window.RufflePlayer.newest();
        const player = ruffle.createPlayer();

        if (containerRef.current) {
          containerRef.current.innerHTML = "";
          containerRef.current.appendChild(player);
          // Player ko container ke andar 100% fill karne ke liye
          player.style.width = "100%";
          player.style.height = "100%";
          player.load(swfUrl);
        }
      } else {
        setTimeout(initRuffle, 100);
      }
    };

    initRuffle();
  }, [swfUrl]);

  return (
    <div className="flex flex-col items-center">
      {/* Fullscreen Button */}
      <button
        onClick={handleFullScreen}
        className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded mb-2"
      >
        Fullscreen
      </button>

      {/* Container jisme Ruffle Player mount hoga */}
      <div
        ref={containerRef}
        style={{
          width: "100vw",   // Pure website width
          height: "100vh",  // Pure website height
        }}
        className="relative border border-gray-700 overflow-hidden"
      >
        <p className="flex justify-center items-center h-full">
          Agar game load na ho, to Ruffle enable hone ka yaqeeni banayein.
        </p>
      </div>

      {/* Fullscreen mode styling */}
      <style jsx global>{`
        :fullscreen {
          width: 100vw !important;
          height: 100vh !important;
          aspect-ratio: auto !important;
        }
      `}</style>
    </div>
  );
}
Asian swamp eelOP
since the issue fix with help of Ruffle Community !!! now i am closing this post !!!