fix: add html5 example (#538)

rivet-gg · Oct 2, 2024 · 04d293b · 04d293b
1 parent f90ffb6
commit 04d293b
Show file tree

Hide file tree

Showing 27 changed files with 3,342 additions and 2 deletions.
diff --git a/examples/html5/.dockerignore b/examples/html5/.dockerignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/examples/html5/.gitignore b/examples/html5/.gitignore
@@ -0,0 +1 @@
+sdk/
diff --git a/examples/html5/.rivet/settings.json b/examples/html5/.rivet/settings.json
@@ -0,0 +1 @@
+{"game_server": {"deploy": {"dockerfile_path": "game_server.Dockerfile"}}}
diff --git a/examples/html5/README.md b/examples/html5/README.md
@@ -0,0 +1,25 @@
+# Sandbox
+
+## Running Locally
+
+```sh
+./scripts/run_local.sh
+```
+
+Visit http://localhost:8080
+
+## Running Remotely
+
+```sh
+./scripts/deploy.sh
+./scripts/run_remote.sh
+```
+
+Visit http://localhost:8080
+
+## Updating SDK
+
+```sh
+./scripts/gen_sdk.ts
+```
+
diff --git a/examples/html5/client/index.html b/examples/html5/client/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Rivet Modules E2E Test</title>
+	</head>
+	<body>
+		<h1>Rivet Modules E2E Test</h1>
+
+		<script type="module" src="./index.js"></script>
+
+    <div>
+      <button onclick="setEndpoint()">Set Endpoint</button>
+      <button onclick="setAdminToken()">Set Admin Token</button>
+      <button onclick="setGameVersion()">Set Game Version</button>
+    </div>
+    <div>
+      <button onclick="findOrCreateLobby()">Find Or Create Lobby</button>
+      <button onclick="fetchState()">Fetch State</button>
+      <button onclick="resetState()">Reset State</button>
+    </div>
+	</body>
+</html>
diff --git a/examples/html5/client/index.js b/examples/html5/client/index.js
@@ -0,0 +1,115 @@
+/// <reference path="./sdk/index.d.mts" />
+import { Rivet } from './sdk/index.mjs';
+
+const urlParams = new URLSearchParams(window.location.search);
+
+function getBackend() {
+  return new Rivet({ endpoint: localStorage.endpoint });
+}
+
+window.fetchState = async function() {
+  const { state } = await getBackend().lobbies.fetchLobbyManagerState({
+    adminToken: localStorage.adminToken
+  });
+  console.log('State', state);
+};
+
+window.resetState = async function() {
+  await getBackend().lobbies.resetLobbyManagerState({
+    adminToken: localStorage.adminToken
+  });
+};
+
+window.setEndpoint = function() {
+  localStorage.endpoint = prompt("Endpoint", localStorage.endpoint);
+};
+
+window.setAdminToken = function() {
+  localStorage.adminToken = prompt("Admin token", localStorage.adminToken);
+};
+
+window.setGameVersion = function() {
+  localStorage.gameVersion = prompt("Game version", localStorage.gameVersion);
+};
+
+window.findOrCreateLobby = async function() {
+  const regions = await getBackend().lobbies.listRegions({});
+
+  // const region = regions.regions[0].slug;
+  const region = 'atl';
+  const tags = {};
+  let res = await getBackend().lobbies.findOrCreate({
+    version: localStorage.gameVersion ?? "default",
+    regions: [region],
+    tags,
+    players: [{}],
+
+    createConfig: {
+      region,
+      tags,
+      maxPlayers: 8,
+      maxPlayersDirect: 8,
+    },
+  });
+
+  let { lobby, players } = res;
+
+	// Test lobby connection
+	while (true) {
+    try {
+      await connect(lobby, players);
+      break;
+    } catch (err) {
+      console.warn('failed', err);
+    }
+
+		await new Promise((resolve) => setTimeout(resolve, 500));
+	}
+
+  console.log('finished');
+}
+
+function connect(lobby, players) {
+  return new Promise((resolve, reject) => {
+    let protocol;
+    let hostname;
+    let port;
+    if (lobby.backend.server) {
+      protocol = lobby.backend.server.ports["game"].protocol;
+      hostname = lobby.backend.server.ports["game"].publicHostname;
+      port = lobby.backend.server.ports["game"].publicPort;
+    } else if (lobby.backend.localDevelopment) {
+      protocol = "http";
+      hostname = lobby.backend.localDevelopment.ports["game"].hostname;
+      port = lobby.backend.localDevelopment.ports["game"].port;
+    } else {
+      throw new Error("unknown backend");
+    }
+
+    console.log('connecting to', port);
+
+    const ws = new WebSocket(`${protocol}://${hostname}:${port}?token=${players[0].token}`);
+    ws.onopen = () => {
+      console.log('open');
+    };
+    ws.onerror = err => {
+      reject(err)
+    };
+    ws.onmessage = ev => {
+      let [event, data] = JSON.parse(ev.data);
+      if (event == 'init') {
+        console.log('init', data)
+        ws.send(JSON.stringify(["ping", 1]))
+      } else if (event == 'pong') {
+        console.log('pong');
+        ws.close();
+        resolve();
+      } else if (event == 'stats') {
+        // pass
+      } else {
+        console.warn('unknown event', event, data)
+      }
+    };
+  });
+}
+
diff --git a/examples/html5/deno.json b/examples/html5/deno.json
@@ -0,0 +1,20 @@
+{
+    "lint": {
+        "include": [
+            "src/"
+        ],
+        "exclude": [
+            "tests/"
+        ],
+        "rules": {
+            "exclude": [
+                "no-empty-interface",
+                "no-explicit-any",
+                "require-await"
+            ]
+        }
+    },
+    "fmt": {
+        "useTabs": true
+    }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"game_server": {"deploy": {"dockerfile_path": "game_server.Dockerfile"}}}