Skip to content

Commit 7481a64

Browse files
sojs-codersojs-coder
committed
minor fixes
1 parent f9e53a1 commit 7481a64

3 files changed

Lines changed: 155 additions & 126 deletions

File tree

‎src/lib/components/Info.svelte‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<script lang="ts">
2+
import { SessionState, State, waitForTooling } from "$lib/state.js";
3+
import { browser } from "$app/environment";
4+
import { page } from "$app/state";
5+
import { onMount } from "svelte";
6+
7+
let stateFulState = $state(State);
8+
let stateFulSessionState = $state(SessionState);
9+
let plays = $state(SessionState.plays);
10+
onMount(async () => {
11+
await waitForTooling();
12+
stateFulState = State;
13+
stateFulSessionState = SessionState;
14+
plays = SessionState.plays;
15+
})
16+
</script>
17+
18+
<div class="information">
19+
<b>Running Information:</b><br />
20+
Browser: {browser ? navigator.userAgent : "<SSR_HOST>"}<br />
21+
Host: {browser ? window.location.hostname : "<SSR_HOST>"}<br />
22+
DevMode: {stateFulSessionState.devMode}<br />
23+
AdBlock Enabled: {stateFulSessionState.adBlockEnabled}<br />
24+
Ads Enabled: {stateFulSessionState.adsEnabled}<br />
25+
Current Server: {stateFulState.currentServer.name} (Loaded {stateFulState
26+
.servers.length})<br />
27+
<table
28+
style="width:100%; margin: 10px 0; border-collapse: collapse; font-size: 12px;"
29+
>
30+
<thead>
31+
<tr>
32+
<th style="border-bottom: 1px solid #ccc; text-align: left;"
33+
>Server</th
34+
>
35+
<th style="border-bottom: 1px solid #ccc; text-align: left;"
36+
>Status</th
37+
>
38+
<th style="border-bottom: 1px solid #ccc; text-align: left;"
39+
>Ping (ms)</th
40+
>
41+
<th style="border-bottom: 1px solid #ccc; text-align: left;"
42+
>Check</th
43+
>
44+
</tr>
45+
</thead>
46+
<tbody>
47+
{#each stateFulSessionState.serverResponses as r}
48+
<tr>
49+
<td>{r.server.name}</td>
50+
<td>{r.success ? "Success" : "Failed"}</td>
51+
<td>{r.time.toFixed(2)}</td>
52+
<td>{r.reason}</td>
53+
</tr>
54+
{/each}
55+
</tbody>
56+
</table>
57+
AHost: {State.isAHost()} (Loaded {State.aHosts.length})<br />
58+
<table
59+
style="width:100%; margin: 10px 0; border-collapse: collapse; font-size: 12px;"
60+
>
61+
<thead>
62+
<tr>
63+
<th style="border-bottom: 1px solid #ccc; text-align: left;"
64+
>AHost Hostname</th
65+
>
66+
<th style="border-bottom: 1px solid #ccc; text-align: left;"
67+
>ACode</th
68+
>
69+
</tr>
70+
</thead>
71+
<tbody>
72+
{#each State.aHosts as h}
73+
<tr>
74+
<td
75+
>{h.hostname}{h.hostname &&
76+
browser &&
77+
h.hostname == page.url.hostname
78+
? " (Active)"
79+
: " (Inactive)"}</td
80+
>
81+
<td>{h.acode}</td>
82+
</tr>
83+
{/each}
84+
</tbody>
85+
</table>
86+
<br />
87+
Games Loaded: {stateFulState.games.length} ({stateFulState.pinnedGames
88+
.length} pinned) - rendered {stateFulState.homeView}<br />
89+
Version: {stateFulState.version}<br />
90+
Logged In: {stateFulSessionState.loggedIn}<br />
91+
SSR: {stateFulSessionState.ssr}<br />
92+
<table
93+
style="width:100%; margin: 10px 0; border-collapse: collapse; font-size: 12px;"
94+
>
95+
<thead>
96+
<tr>
97+
<th style="border-bottom: 1px solid #ccc; text-align: left;"
98+
>AWS Ready</th
99+
>
100+
<th style="border-bottom: 1px solid #ccc; text-align: left;"
101+
>Identity ID</th
102+
>
103+
<th style="border-bottom: 1px solid #ccc; text-align: left;"
104+
>Access Key ID</th
105+
>
106+
<th style="border-bottom: 1px solid #ccc; text-align: left;"
107+
>Credentials Expires</th
108+
>
109+
</tr>
110+
</thead>
111+
<tbody>
112+
<tr>
113+
<td>{stateFulSessionState.awsReady ? "Yes" : "No"}</td>
114+
<td title={stateFulSessionState.credentials?.identityId || "-"}
115+
>{stateFulSessionState.credentials?.identityId.slice(
116+
0,
117+
10,
118+
) + "..." || "-"}</td
119+
>
120+
<td title={stateFulSessionState.credentials?.accessKeyId || "-"}
121+
>{stateFulSessionState.credentials?.accessKeyId.slice(
122+
0,
123+
6,
124+
) + "..." || "-"}</td
125+
>
126+
<td
127+
>{SessionState.credentials?.expiration?.toLocaleTimeString() ||
128+
"-"}</td
129+
>
130+
</tr>
131+
</tbody>
132+
</table>
133+
Plays: {plays.toLocaleString()} ({stateFulState.localPlays.toLocaleString()}
134+
local)<br />
135+
</div>
136+
137+
<style>
138+
.information {
139+
margin-top: 10px;
140+
font-size: 12px;
141+
color: #999;
142+
max-width: 600px;
143+
margin: auto;
144+
text-align: left;
145+
font-family: "Courier New", Courier, monospace;
146+
}
147+
</style>

‎src/lib/state.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@ type StateType = {
3939
function saveState() {
4040
// Skip on server-side rendering
4141
if (SessionState.ssr) return;
42-
const { servers, aHosts, isAHost, ...serializable } = State;
42+
43+
// Things we don't want to save
44+
const { servers, aHosts, version, games, isAHost, ...serializable } = State;
4345
localStorage.setItem("ccported_state", JSON.stringify(serializable));
4446
}
4547

@@ -155,7 +157,7 @@ async function testServer(server: Server): Promise<void> {
155157
iframe.style.display = 'none';
156158
iframe.src = `https://${server.hostname}/test_availability.html`;
157159
document.body.appendChild(iframe);
158-
160+
let iframeLoaded = false;
159161
await Promise.race([
160162
new Promise<void>((resolve) => {
161163
const messageHandler = (event: MessageEvent) => {
@@ -178,12 +180,14 @@ async function testServer(server: Server): Promise<void> {
178180
}
179181

180182
window.removeEventListener("message", messageHandler);
183+
iframeLoaded = true;
181184
resolve();
182185
};
183186
window.addEventListener("message", messageHandler);
184187
}),
185188
new Promise<void>((resolve) => {
186189
setTimeout(() => {
190+
if (iframeLoaded) return; //Got response already
187191
SessionState.serverResponses.push({ server, success: false, time: end - start, reason: `Timeout waiting for Iframe` });
188192
resolve();
189193
}, 3000);

‎src/routes/+page.svelte‎

Lines changed: 2 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import CardGrid from "$lib/components/CardGrid.svelte";
33
import Locked from "$lib/components/Locked.svelte";
44
import Navigation from "$lib/components/Navigation.svelte";
5+
import Info from "$lib/components/Info.svelte";
56
import { initializeTooling, SessionState, State } from "$lib/state.js";
67
import { onMount } from "svelte";
78
import type { PageData } from "./$types.js";
@@ -68,121 +69,7 @@
6869
<a href="/tos/privacy_policy">Privacy Policy</a> |
6970
<a href="/tos/terms_of_service">Terms of Service</a>
7071
</p>
71-
<div class="information">
72-
<!-- none of this information is statefull, therefore none of it will update. this is intended behavior -->
73-
<b>Running Information:</b><br />
74-
Browser: {browser ? navigator.userAgent : "<SSR_HOST>"}<br />
75-
Host: {browser ? window.location.hostname : "<SSR_HOST>"}<br />
76-
DevMode: {SessionState.devMode}<br />
77-
AdBlock Enabled: {adblockEnabled}<br />
78-
Ads Enabled: {adsEnabled}<br />
79-
Current Server: {State.currentServer.name} (Loaded {State.servers
80-
.length})<br />
81-
<table
82-
style="width:100%; margin: 10px 0; border-collapse: collapse; font-size: 12px;"
83-
>
84-
<thead>
85-
<tr>
86-
<th style="border-bottom: 1px solid #ccc; text-align: left;"
87-
>Server</th
88-
>
89-
<th style="border-bottom: 1px solid #ccc; text-align: left;"
90-
>Status</th
91-
>
92-
<th style="border-bottom: 1px solid #ccc; text-align: left;"
93-
>Ping (ms)</th
94-
>
95-
<th style="border-bottom: 1px solid #ccc; text-align: left;"
96-
>Check</th
97-
>
98-
</tr>
99-
</thead>
100-
<tbody>
101-
{#each sResponses as r}
102-
<tr>
103-
<td>{r.server.name}</td>
104-
<td>{r.success ? "Success" : "Failed"}</td>
105-
<td>{r.time.toFixed(2)}</td>
106-
<td>{r.reason}</td>
107-
</tr>
108-
{/each}
109-
</tbody>
110-
</table>
111-
AHost: {State.isAHost()} (Loaded {State.aHosts.length})<br />
112-
<table
113-
style="width:100%; margin: 10px 0; border-collapse: collapse; font-size: 12px;"
114-
>
115-
<thead>
116-
<tr>
117-
<th style="border-bottom: 1px solid #ccc; text-align: left;"
118-
>AHost Hostname</th
119-
>
120-
<th style="border-bottom: 1px solid #ccc; text-align: left;"
121-
>ACode</th
122-
>
123-
</tr>
124-
</thead>
125-
<tbody>
126-
{#each State.aHosts as h}
127-
<tr>
128-
<td
129-
>{h.hostname}{h.hostname &&
130-
browser &&
131-
h.hostname == page.url.hostname
132-
? " (Active)"
133-
: " (Inactive)"}</td
134-
>
135-
<td>{h.acode}</td>
136-
</tr>
137-
{/each}
138-
</tbody>
139-
</table>
140-
<br />
141-
Games Loaded: {games.length} ({State.pinnedGames.length} pinned) - rendered
142-
{State.homeView}<br />
143-
Version: {State.version}<br />
144-
Logged In: {SessionState.loggedIn}<br />
145-
SSR: {SessionState.ssr}<br />
146-
<table
147-
style="width:100%; margin: 10px 0; border-collapse: collapse; font-size: 12px;"
148-
>
149-
<thead>
150-
<tr>
151-
<th style="border-bottom: 1px solid #ccc; text-align: left;"
152-
>AWS Ready</th
153-
>
154-
<th style="border-bottom: 1px solid #ccc; text-align: left;"
155-
>Identity ID</th
156-
>
157-
<th style="border-bottom: 1px solid #ccc; text-align: left;"
158-
>Access Key ID</th
159-
>
160-
<th style="border-bottom: 1px solid #ccc; text-align: left;"
161-
>Credentials Expires</th
162-
>
163-
</tr>
164-
</thead>
165-
<tbody>
166-
<tr>
167-
<td>{SessionState.awsReady ? "Yes" : "No"}</td>
168-
<td title={SessionState.credentials?.identityId || "-"}
169-
>{SessionState.credentials?.identityId.slice(0, 10) +
170-
"..." || "-"}</td
171-
>
172-
<td title={SessionState.credentials?.accessKeyId || "-"}
173-
>{SessionState.credentials?.accessKeyId.slice(0, 6) +
174-
"..." || "-"}</td
175-
>
176-
<td
177-
>{SessionState.credentials?.expiration?.toLocaleTimeString() ||
178-
"-"}</td
179-
>
180-
</tr>
181-
</tbody>
182-
</table>
183-
Plays: {SessionState.plays.toLocaleString()} ({State.localPlays.toLocaleString()}
184-
local)<br />
185-
</div>
72+
<Info />
18673
</footer>
18774

18875
<style>
@@ -192,13 +79,4 @@
19279
margin: 20px 0;
19380
font-size: 14px;
19481
}
195-
.information {
196-
margin-top: 10px;
197-
font-size: 12px;
198-
color: #999;
199-
max-width: 600px;
200-
margin: auto;
201-
text-align: left;
202-
font-family: "Courier New", Courier, monospace;
203-
}
20482
</style>

0 commit comments

Comments
 (0)