2025-11-30 20:31:21 +01:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Godot MatrixRTC Widget</title>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<script type="module">
|
2025-12-01 14:05:41 +01:00
|
|
|
// TODO use the url where the matrixrtc-sdk.js file from dist is hosted
|
|
|
|
|
import { createMatrixRTCSdk } from "http://localhost:8123/matrixrtc-sdk.js";
|
2025-11-30 20:31:21 +01:00
|
|
|
|
|
|
|
|
try {
|
2025-12-08 09:41:01 +01:00
|
|
|
window.matrixRTCSdk = await createMatrixRTCSdk(
|
|
|
|
|
"com.github.toger5.godot-game",
|
|
|
|
|
);
|
2025-12-01 20:39:40 +01:00
|
|
|
console.info("createMatrixRTCSdk was created!");
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error("createMatrixRTCSdk", e);
|
|
|
|
|
}
|
|
|
|
|
const sdk = window.matrixRTCSdk;
|
2025-12-02 11:31:56 +01:00
|
|
|
|
|
|
|
|
// This is the main bridging interface to godot
|
|
|
|
|
window.matrixRTCSdkGodot = {
|
|
|
|
|
dataObs: sdk.data$,
|
|
|
|
|
memberObs: sdk.members$,
|
|
|
|
|
// join: sdk.join, // lets stick with autojoin for now
|
|
|
|
|
sendData: sdk.sendData,
|
|
|
|
|
leave: sdk.leave,
|
|
|
|
|
connectedObs: sdk.connected$,
|
|
|
|
|
};
|
|
|
|
|
|
2025-12-01 20:39:40 +01:00
|
|
|
console.info("matrixRTCSdk join ", sdk);
|
2025-12-02 11:31:56 +01:00
|
|
|
const connectionState = sdk.join();
|
|
|
|
|
console.info("matrixRTCSdk joined");
|
2025-11-30 20:31:21 +01:00
|
|
|
|
2025-12-01 20:39:40 +01:00
|
|
|
const div = document.getElementById("data");
|
|
|
|
|
div.innerHTML = "<h3>Data:</h3>";
|
2025-12-01 13:49:33 +01:00
|
|
|
|
2025-12-01 20:39:40 +01:00
|
|
|
sdk.data$.subscribe((data) => {
|
|
|
|
|
const child = document.createElement("p");
|
|
|
|
|
child.innerHTML = JSON.stringify(data);
|
|
|
|
|
div.appendChild(child);
|
|
|
|
|
// TODO forward to godot
|
|
|
|
|
});
|
2025-12-01 13:49:33 +01:00
|
|
|
|
2025-12-01 20:39:40 +01:00
|
|
|
sdk.members$.subscribe((memberObjects) => {
|
|
|
|
|
// reset div
|
|
|
|
|
const div = document.getElementById("members");
|
|
|
|
|
div.innerHTML = "<h3>Members:</h3>";
|
2025-12-01 13:49:33 +01:00
|
|
|
|
2025-12-01 20:39:40 +01:00
|
|
|
// create member list
|
2025-12-02 11:31:56 +01:00
|
|
|
const members = memberObjects.map((member) => member.membership.sender);
|
2025-12-01 20:39:40 +01:00
|
|
|
console.info("members changed", members);
|
|
|
|
|
for (const m of members) {
|
|
|
|
|
console.info("member", m);
|
|
|
|
|
const child = document.createElement("p");
|
|
|
|
|
child.innerHTML = m;
|
|
|
|
|
div.appendChild(child);
|
|
|
|
|
}
|
|
|
|
|
});
|
2025-12-02 11:31:56 +01:00
|
|
|
|
2025-12-01 20:39:40 +01:00
|
|
|
sdk.connected$.subscribe((connected) => {
|
|
|
|
|
console.info("connected changed", connected);
|
|
|
|
|
const div = document.getElementById("connect_status");
|
|
|
|
|
div.innerHTML = connected ? "Connected" : "Disconnected";
|
|
|
|
|
});
|
2025-12-01 13:49:33 +01:00
|
|
|
|
2025-12-02 11:31:56 +01:00
|
|
|
let engine = new Engine($GODOT_CONFIG);
|
|
|
|
|
engine.startGame();
|
2025-11-30 20:31:21 +01:00
|
|
|
</script>
|
2025-12-01 13:49:33 +01:00
|
|
|
<!--// TODO use it as godot HTML template-->
|
2025-12-02 11:31:56 +01:00
|
|
|
<script src="$GODOT_URL"></script>
|
2025-11-30 20:31:21 +01:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<canvas id="canvas"></canvas>
|
2025-12-02 11:31:56 +01:00
|
|
|
<div
|
|
|
|
|
id="overlay"
|
|
|
|
|
style="position: absolute; top: 0; right: 0; background-color: #ffffff10"
|
|
|
|
|
>
|
|
|
|
|
<div id="connect_status"></div>
|
2026-01-05 19:35:09 +01:00
|
|
|
<button onclick="window.matrixRTCSdk.leave()">Leave</button>
|
|
|
|
|
<button onclick="window.matrixRTCSdk.sendData({ prop: 'Hello, world!' })">
|
2025-12-02 11:31:56 +01:00
|
|
|
Send Text
|
|
|
|
|
</button>
|
|
|
|
|
<div id="members"></div>
|
|
|
|
|
<div id="data"></div>
|
|
|
|
|
</div>
|
2025-11-30 20:31:21 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
