Tattletail Web Game Loader with HTML and JavaScript

HTML

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#000000">

<title>Tattletail</title>

html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #000;
      color: #fff;
      font-family: Arial, sans-serif;
    }

#gameContainer {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      background: #000;
    }

#gameContainer canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

#loading-screen {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background: #000;
      padding: 25px;
      text-align: center;
    }

#title {
      font-family: Georgia, serif;
      font-size: clamp(32px, 7vw, 58px);
      letter-spacing: 7px;
      margin-bottom: 12px;
    }

#subtitle {
      color: #888;
      font-size: 11px;
      letter-spacing: 4px;
      margin-bottom: 45px;
    }

#loading-status {
      font-size: 14px;
      color: #ccc;
      margin-bottom: 15px;
    }

#progress-container {
      width: min(440px, 85vw);
      height: 8px;
      background: #292929;
      border: 1px solid #444;
      overflow: hidden;
    }

#progress-bar {
      width: 0%;
      height: 100%;
      background: #eee;
      transition: width .2s ease;
    }

#progress-text {
      color: #777;
      font-size: 12px;
      margin-top: 13px;
    }

#loading-detail {
      color: #555;
      font-size: 11px;
      margin-top: 9px;
      max-width: 85vw;
      overflow-wrap: anywhere;
    }

#error-panel {
      display: none;
      width: min(550px, 90vw);
      margin-top: 30px;
      padding: 20px;
      border: 1px solid #662222;
      background: #160707;
    }

#error-title {
      color: #ff7777;
      font-size: 15px;
      margin-bottom: 12px;
    }

#error-message {
      color: #ccc;
      font-size: 12px;
      line-height: 1.7;
      overflow-wrap: anywhere;
    }

#retry-button {
      margin-top: 18px;
      padding: 12px 30px;
      color: white;
      background: #222;
      border: 1px solid #666;
      cursor: pointer;
    }

#retry-button:hover {
      background: #444;
    }

#fullscreen-button {
      position: fixed;
      z-index: 50;
      top: 12px;
      right: 12px;
      display: none;
      padding: 10px 15px;
      color: white;
      background: #222;
      border: 1px solid #555;
      cursor: pointer;
    }
  </style>
</head>

<body>

<div id="title">TATTLETAIL</div>

<div id="subtitle">A NIGHT TO REMEMBER</div>

<div id="loading-status">
      Preparing game...
    </div>

<div id="progress-text">
      0.0 MB downloaded
    </div>

<div id="loading-detail">
      Initializing browser resources
    </div>

<div id="error-panel">
      <div id="error-title">
        GAME LOADING FAILED
      </div>

<button id="retry-button"
        onclick="location.reload()">
        RETRY
      </button>
    </div>

</div>

<button id="fullscreen-button">
    FULLSCREEN
  </button>

// ==========================================
    // GAME CONFIGURATION
    // ==========================================

const BASE =
      "https://raw.githack.com/genizy/web-port/main/tattletail/";

const PART_COUNT = 4;

const ESTIMATED_SIZE = 64246252;

const TOTAL_MEMORY = 251658240;

// ==========================================
    // ELEMENT REFERENCES
    // ==========================================

const loadingScreen =
      document.getElementById("loading-screen");

const loadingStatus =
      document.getElementById("loading-status");

const progressBar =
      document.getElementById("progress-bar");

const progressText =
      document.getElementById("progress-text");

const loadingDetail =
      document.getElementById("loading-detail");

const errorPanel =
      document.getElementById("error-panel");

const errorMessage =
      document.getElementById("error-message");

const gameContainer =
      document.getElementById("gameContainer");

const fullscreenButton =
      document.getElementById("fullscreen-button");

// ==========================================
    // STATE
    // ==========================================

let loadedBytes = 0;
    let gameInstance = null;
    let dataObjectUrl = null;
    let configObjectUrl = null;

// ==========================================
    // UTILITIES
    // ==========================================

function formatSize(bytes) {
      return (bytes / 1048576).toFixed(2) + " MB";
    }

function updateStatus(message, detail) {
      loadingStatus.textContent = message;

if (detail) {
        loadingDetail.textContent = detail;
      }
    }

function updateProgress(fileName) {
      const percentage = Math.min(
        100,
        loadedBytes / ESTIMATED_SIZE * 100
      );

progressBar.style.width =
        percentage.toFixed(1) + "%";

progressText.textContent =
        formatSize(loadedBytes) +
        " / approximately " +
        formatSize(ESTIMATED_SIZE) +
        " (" +
        percentage.toFixed(1) +
        "%)";

updateStatus(
        "Downloading game files...",
        "Current file: " + fileName
      );
    }

function showError(error) {
      console.error("TATTLETAIL ERROR:", error);

loadingStatus.textContent =
        "Unable to start the game";

errorPanel.style.display = "block";

errorMessage.textContent =
        error && error.message
          ? error.message
          : String(error);
    }

// ==========================================
    // UNITY LOADER
    // ==========================================

function loadUnityLoader() {
      return new Promise((resolve, reject) => {

updateStatus(
          "Loading Unity engine...",
          "Connecting to game engine"
        );

const script = document.createElement("script");

script.src =
          BASE + "Build/UnityLoader.js";

script.onload = () => {

if (
            typeof UnityLoader === "undefined" ||
            typeof UnityLoader.instantiate !== "function"
          ) {
            reject(new Error(
              "UnityLoader downloaded, but its instantiate function is missing."
            ));

return;
          }

console.log("UnityLoader successfully loaded.");

resolve();
        };

script.onerror = () => {
          reject(new Error(
            "UnityLoader.js could not be loaded from Raw.githack. Check CDN availability and the file path."
          ));
        };

document.head.appendChild(script);

});
    }

// ==========================================
    // GAME DATA DOWNLOAD
    // ==========================================

async function downloadPart(fileName) {

const url = BASE + fileName;

loadingDetail.textContent =
        "Requesting: " + fileName;

let response;

try {

response = await fetch(url, {
          method: "GET",
          mode: "cors",
          cache: "no-store"
        });

} catch (error) {

throw new Error(
          "Network or CORS failure for " +
          fileName + ": " + error.message
        );

}

if (!response.ok) {

throw new Error(
          fileName +
          " failed with HTTP " +
          response.status
        );

}

if (!response.body) {

throw new Error(
          "The browser could not read the response for " +
          fileName
        );

}

const reader = response.body.getReader();

const chunks = [];

let fileBytes = 0;

while (true) {

const result = await reader.read();

if (result.done) break;

chunks.push(result.value);

fileBytes += result.value.length;

loadedBytes += result.value.length;

updateProgress(fileName);

}

console.log(
        "Downloaded:",
        fileName,
        formatSize(fileBytes)
      );

return new Blob(chunks);

}

async function downloadGameData() {

loadedBytes = 0;

progressBar.style.width = "0%";

updateStatus(
        "Downloading Tattletail...",
        "Preparing four game-data segments"
      );

const parts = [];

for (let i = 1; i <= PART_COUNT; i++) {

parts.push(
          "Build/WebGL.data.unityweb.part" + i
        );

}

const downloadedParts =
        await Promise.all(
          parts.map(downloadPart)
        );

updateStatus(
        "Combining game files...",
        "Preparing Unity game data"
      );

const combinedBlob = new Blob(
        downloadedParts,
        {
          type: "application/octet-stream"
        }
      );

if (combinedBlob.size === 0) {
        throw new Error(
          "The combined game-data file is empty."
        );
      }

console.log(
        "Combined game data:",
        formatSize(combinedBlob.size)
      );

dataObjectUrl =
        URL.createObjectURL(combinedBlob);

progressBar.style.width = "100%";

return dataObjectUrl;

}

// ==========================================
    // RESIZING
    // ==========================================

function resizeGame() {

gameContainer.style.width =
        window.innerWidth + "px";

gameContainer.style.height =
        window.innerHeight + "px";

}

window.addEventListener(
      "resize",
      resizeGame
    );

// ==========================================
    // FULLSCREEN
    // ==========================================

fullscreenButton.addEventListener(
      "click",
      async () => {

try {

if (!document.fullscreenElement) {

await gameContainer.requestFullscreen();

} else {

await document.exitFullscreen();

}

} catch (error) {

console.error(
            "Fullscreen error:",
            error
          );

}

}
    );

document.addEventListener(
      "fullscreenchange",
      () => {

fullscreenButton.textContent =
          document.fullscreenElement
            ? "EXIT FULLSCREEN"
            : "FULLSCREEN";

resizeGame();

}
    );

// ==========================================
    // START UNITY
    // ==========================================

function startGame(dataUrl) {

updateStatus(
        "Starting Tattletail...",
        "Initializing Unity WebGL runtime"
      );

const config = {

companyName: "Waygetter Electronics",

productName: "Tattletail",

dataUrl: dataUrl,

wasmCodeUrl:
          "WebGL.wasm.code.unityweb",

wasmFrameworkUrl:
          "WebGL.wasm.framework.unityweb",

TOTAL_MEMORY: TOTAL_MEMORY,

graphicsAPI: [
          "WebGL 2.0",
          "WebGL 1.0"
        ],

webglContextAttributes: {
          preserveDrawingBuffer: false
        },

splashScreenStyle: "Dark",

backgroundColor: "#000000"

};

const configBlob = new Blob(
        [JSON.stringify(config)],
        {
          type: "application/json"
        }
      );

configObjectUrl =
        URL.createObjectURL(configBlob);

gameContainer.hidden = false;

resizeGame();

try {

gameInstance = UnityLoader.instantiate(
          "gameContainer",
          config,
          {
            url: configObjectUrl,

Module: {

onRuntimeInitialized: function() {

console.log(
                  "Tattletail runtime initialized."
                );

resizeGame();

loadingScreen.remove();

fullscreenButton.style.display =
                  "block";

}

}
        );

if (!gameInstance) {

throw new Error(
            "UnityLoader did not return a game instance."
          );

}

} catch (error) {

throw new Error(
          "Unity startup failed: " +
          error.message
        );

}

// ==========================================
    // INITIALIZATION
    // ==========================================

async function initializeGame() {

try {

updateStatus(
          "Preparing Tattletail...",
          "Step 1: Loading Unity"
        );

await loadUnityLoader();

updateStatus(
          "Unity engine loaded.",
          "Step 2: Downloading game data"
        );

const dataUrl =
          await downloadGameData();

updateStatus(
          "Game data downloaded.",
          "Step 3: Starting game"
        );

startGame(dataUrl);

} catch (error) {

showError(error);

}

// ==========================================
    // GLOBAL ERROR REPORTING
    // ==========================================

window.addEventListener(
      "error",
      function(event) {

console.error(
          "Browser error:",
          event.message,
          event.filename,
          event.lineno
        );

}
    );

window.addEventListener(
      "unhandledrejection",
      function(event) {

console.error(
          "Unhandled promise rejection:",
          event.reason
        );

}
    );

// ==========================================
    // BOOT
    // ==========================================

initializeGame();

</script>

</body>
</html>

CSS

JS

Tattletail Web Game Loader with HTML and JavaScript

Recommended

Comments 0