borggames.github.io/access.html at main · BorgGames/borggames.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="canonical" href="https://legacy.borg.games/access" />

    <link rel="shortcut icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <title>Remote Play - Borg Games</title>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        a[href] { color: white; }
        #launcher { text-align: initial; }
        #game-list-section { margin: 16px 0; }
        #game-list-section h2 { margin-bottom: 8px; }
        .game-entry { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
        .game-entry button { font-size: 18px; }
    </style>
</head>

<body style="text-align: center; background: #1e1e1e; color: #cedada;">
    <noscript><h1>Cloud gaming requires JavaScript</h1></noscript>

    <div class="video-container">
        <video autoplay disablePictureInPicture></video>
        <h1 id="game-status"></h1>
        <div class="popup">
            <input type="checkbox" id="popup" checked="checked" style="display: none">
            <label for="popup" class="alert-message"></label>
        </div>
    </div>

    <div id="launcher">
        <div id="no-key" style="display: none;">
            <h2>No access key provided.</h2>
            <p>Open this link from the Borg app on your gaming PC.</p>
        </div>
        <div id="game-list-section" style="display: none;">
            <h2>Select a game</h2>
            <div id="game-list"></div>
        </div>
        <div id="connecting" style="display: none;">
            <h2 id="connect-status">Connecting…</h2>
        </div>
    </div>

    <h3 style="display: inline-block;"><a href="/about">© Borg Queen, LLC 2024</a></h3>

    <script type="module">
        import * as util from './js/streaming-client/built/util.js';
        import { Ephemeral } from './js/ephemeral.js';
        import { GameID } from './js/gid.js';
        import { getIceServers, updateIceServers } from './js/ice.js';
        import { ACCESS_KEY, GAME_URI, parseOffer, connect } from './js/access.js';

        updateIceServers().catch(console.error);

        const launcherUI = document.getElementById('launcher');
        const noKeyEl = document.getElementById('no-key');
        const gameListSection = document.getElementById('game-list-section');
        const gameListEl = document.getElementById('game-list');
        const connectingEl = document.getElementById('connecting');
        const connectStatus = document.getElementById('connect-status');
        const videoContainer = document.querySelector('.video-container');
        const video = document.querySelector('video');
        const statusEl = document.getElementById('game-status');

        if (!ACCESS_KEY) {
            noKeyEl.style.display = 'block';
        } else {
            main();
        }

        async function main() {
            connectingEl.style.display = 'block';
            connectStatus.innerText = 'Looking for PC…';

            let nodes;
            try {
                nodes = await Ephemeral.getNodes(null, ACCESS_KEY);
            } catch (e) {
                connectStatus.innerText = 'Failed to connect: ' + e.message;
                return;
            }

            if (nodes.length === 0) {
                connectStatus.innerText = 'PC not found. Make sure the Borg app is running.';
                return;
            }

            const node = nodes[0];
            const { sdp, games } = parseOffer(node);

            if (GAME_URI) {
                // Direct launch: game specified in URL — show button for user gesture
                const exe = GameID.tryGetExe(GAME_URI);
                if (!exe) {
                    connectStatus.innerText = 'Invalid game URI: ' + GAME_URI;
                    return;
                }
                const gameTitle = games.find(g => g.uri === GAME_URI)?.title ?? exe;
                connectingEl.style.display = 'none';
                showGameList([{ uri: GAME_URI, title: gameTitle }], node);
            } else if (games.length > 0) {
                // Show game list from offer metadata
                connectingEl.style.display = 'none';
                showGameList(games, node);
            } else {
                connectStatus.innerText = 'No game specified. Use a game-specific share link from the Borg app.';
            }
        }

        function showGameList(games, node) {
            gameListSection.style.display = 'block';
            gameListEl.innerHTML = '';
            for (const game of games) {
                const exe = GameID.tryGetExe(game.uri);
                if (!exe) continue;
                const entry = document.createElement('div');
                entry.className = 'game-entry';
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.innerText = game.title;
                btn.addEventListener('click', () => {
                    gameListSection.style.display = 'none';
                    connectingEl.style.display = 'block';
                    launch(game.title, exe, node);
                });
                entry.appendChild(btn);
                gameListEl.appendChild(entry);
            }
        }

        async function launch(gameTitle, exe, node) {
            const sessionId = crypto.randomUUID();
            connectStatus.innerText = 'Launching…';

            launcherUI.style.display = 'none';
            videoContainer.style.display = 'block';

            const timeout = util.timeout(1000 * 60 * 5);
            window.history.pushState('session', '', `#session=${sessionId}`);

            try {
                const code = await connect(video, statusEl, exe, sessionId, node, timeout, gameTitle);
                if (code !== 0 && code !== 'cancelled')
                    alert(code instanceof Error ? (code.message || String(code)) : `Exit code: ${code}`);
            } catch (e) {
                console.error(e);
                alert(e);
            } finally {
                window.history.back();
                launcherUI.style.display = '';
                videoContainer.style.display = '';
                video.src = '';
                video.load();
                connectingEl.style.display = 'none';
                connectStatus.innerText = '';
                document.title = 'Remote Play - Borg Games';
            }
        }
    </script>
</body>

</html>