mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-08-17 05:34:37 +00:00
Merge branch 'v29'
This commit is contained in:
evanpelle
+61
-92
@@ -43,7 +43,7 @@ import {
|
||||
} from "./Transport";
|
||||
import { UserSettingModal } from "./UserSettingModal";
|
||||
import "./UsernameInput";
|
||||
import { UsernameInput } from "./UsernameInput";
|
||||
import { genAnonUsername, UsernameInput } from "./UsernameInput";
|
||||
import {
|
||||
getDiscordAvatarUrl,
|
||||
incrementGamesPlayed,
|
||||
@@ -163,19 +163,12 @@ declare global {
|
||||
GIT_COMMIT: string;
|
||||
INSTANCE_ID: string;
|
||||
turnstile: any;
|
||||
enableAds: boolean;
|
||||
adsEnabled: boolean;
|
||||
PageOS: {
|
||||
session: {
|
||||
newPageView: () => void;
|
||||
};
|
||||
};
|
||||
fusetag: {
|
||||
registerZone: (id: string) => void;
|
||||
destroyZone: (id: string) => void;
|
||||
pageInit: (options?: any) => void;
|
||||
que: Array<() => void>;
|
||||
destroySticky: () => void;
|
||||
};
|
||||
ramp: {
|
||||
que: Array<() => void>;
|
||||
passiveMode: boolean;
|
||||
@@ -184,7 +177,7 @@ declare global {
|
||||
settings?: {
|
||||
slots?: any;
|
||||
};
|
||||
spaNewPage: (url: string) => void;
|
||||
spaNewPage: (url?: string) => void;
|
||||
};
|
||||
showPage?: (pageId: string) => void;
|
||||
}
|
||||
@@ -216,6 +209,7 @@ class Client {
|
||||
private usernameInput: UsernameInput | null = null;
|
||||
private flagInput: FlagInput | null = null;
|
||||
|
||||
private hostModal: HostPrivateLobbyModal;
|
||||
private joinModal: JoinPrivateLobbyModal;
|
||||
private publicLobby: PublicLobby;
|
||||
private userSettings: UserSettings = new UserSettings();
|
||||
@@ -433,57 +427,14 @@ class Client {
|
||||
) {
|
||||
console.warn("Matchmaking modal element not found");
|
||||
}
|
||||
const matchmakingButton = document.getElementById("matchmaking-button");
|
||||
const matchmakingButtonLoggedOut = document.getElementById(
|
||||
"matchmaking-button-logged-out",
|
||||
);
|
||||
|
||||
const updateMatchmakingButton = (loggedIn: boolean) => {
|
||||
if (!loggedIn) {
|
||||
matchmakingButton?.classList.add("hidden");
|
||||
matchmakingButtonLoggedOut?.classList.remove("hidden");
|
||||
} else {
|
||||
matchmakingButton?.classList.remove("hidden");
|
||||
matchmakingButtonLoggedOut?.classList.add("hidden");
|
||||
}
|
||||
};
|
||||
|
||||
if (matchmakingButton) {
|
||||
matchmakingButton.addEventListener("click", () => {
|
||||
if (this.usernameInput?.isValid()) {
|
||||
window.showPage?.("page-matchmaking");
|
||||
this.publicLobby.leaveLobby();
|
||||
} else {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("show-message", {
|
||||
detail: {
|
||||
message: this.usernameInput?.validationError,
|
||||
color: "red",
|
||||
duration: 3000,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (matchmakingButtonLoggedOut) {
|
||||
matchmakingButtonLoggedOut.addEventListener("click", () => {
|
||||
window.showPage?.("page-account");
|
||||
});
|
||||
}
|
||||
|
||||
const onUserMe = async (userMeResponse: UserMeResponse | false) => {
|
||||
// Check if user has actual authentication (discord or email), not just a publicId
|
||||
const loggedIn =
|
||||
userMeResponse !== false &&
|
||||
userMeResponse !== null &&
|
||||
typeof userMeResponse === "object" &&
|
||||
userMeResponse.user &&
|
||||
(userMeResponse.user.discord !== undefined ||
|
||||
userMeResponse.user.email !== undefined);
|
||||
updateMatchmakingButton(loggedIn);
|
||||
updateAccountNavButton(userMeResponse);
|
||||
const hasLinkedAccount =
|
||||
!crazyGamesSDK.isOnCrazyGames() &&
|
||||
((userMeResponse || null)?.player?.flares?.length ?? 0) > 0;
|
||||
console.log("ads enabled: ", hasLinkedAccount);
|
||||
window.adsEnabled = !hasLinkedAccount && !crazyGamesSDK.isOnCrazyGames();
|
||||
document.dispatchEvent(
|
||||
new CustomEvent("userMeResponse", {
|
||||
detail: userMeResponse,
|
||||
@@ -524,10 +475,10 @@ class Client {
|
||||
}
|
||||
});
|
||||
|
||||
const hostModal = document.querySelector(
|
||||
this.hostModal = document.querySelector(
|
||||
"host-lobby-modal",
|
||||
) as HostPrivateLobbyModal;
|
||||
if (!hostModal || !(hostModal instanceof HostPrivateLobbyModal)) {
|
||||
if (!this.hostModal || !(this.hostModal instanceof HostPrivateLobbyModal)) {
|
||||
console.warn("Host private lobby modal element not found");
|
||||
}
|
||||
const hostLobbyButton = document.getElementById("host-lobby-button");
|
||||
@@ -583,7 +534,11 @@ class Client {
|
||||
}
|
||||
|
||||
// Attempt to join lobby
|
||||
this.handleUrl();
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", () => this.handleUrl());
|
||||
} else {
|
||||
this.handleUrl();
|
||||
}
|
||||
|
||||
const onHashUpdate = () => {
|
||||
// Reset the UI to its initial state
|
||||
@@ -653,21 +608,38 @@ class Client {
|
||||
updateSliderProgress(slider);
|
||||
slider.addEventListener("input", () => updateSliderProgress(slider));
|
||||
});
|
||||
|
||||
this.initializeFuseTag();
|
||||
}
|
||||
|
||||
private handleUrl() {
|
||||
private async handleUrl() {
|
||||
// Wait for modal custom elements to be defined
|
||||
await Promise.all([
|
||||
customElements.whenDefined("join-private-lobby-modal"),
|
||||
customElements.whenDefined("host-lobby-modal"),
|
||||
]);
|
||||
|
||||
// Check if CrazyGames SDK is enabled first (no hash needed in CrazyGames)
|
||||
if (crazyGamesSDK.isOnCrazyGames()) {
|
||||
const lobbyId = crazyGamesSDK.getInviteGameId();
|
||||
const lobbyId = await crazyGamesSDK.getInviteGameId();
|
||||
console.log("got game id", lobbyId);
|
||||
if (lobbyId && GAME_ID_REGEX.test(lobbyId)) {
|
||||
console.log("game parsed successfully");
|
||||
// Wait 2 seconds to ensure all elements are actually loaded,
|
||||
// On low end-chromebooks the join modal was not registered in time.
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
window.showPage?.("page-join-private-lobby");
|
||||
this.joinModal?.open(lobbyId);
|
||||
console.log(`CrazyGames: joining lobby ${lobbyId} from invite param`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
crazyGamesSDK.isInstantMultiplayer().then((isInstant) => {
|
||||
if (isInstant) {
|
||||
console.log(
|
||||
`CrazyGames: joining instant multiplayer lobby from CrazyGames`,
|
||||
);
|
||||
this.hostModal.open();
|
||||
}
|
||||
});
|
||||
|
||||
const strip = () =>
|
||||
history.replaceState(
|
||||
@@ -790,7 +762,8 @@ class Client {
|
||||
: this.flagInput.getCurrentFlag(),
|
||||
},
|
||||
turnstileToken: await this.getTurnstileToken(lobby),
|
||||
playerName: this.usernameInput?.getCurrentUsername() ?? "",
|
||||
playerName:
|
||||
this.usernameInput?.getCurrentUsername() ?? genAnonUsername(),
|
||||
clientID: lobby.clientID,
|
||||
gameStartInfo: lobby.gameStartInfo ?? lobby.gameRecord?.info,
|
||||
gameRecord: lobby.gameRecord,
|
||||
@@ -848,7 +821,6 @@ class Client {
|
||||
if (startingModal && startingModal instanceof GameStartingModal) {
|
||||
startingModal.show();
|
||||
}
|
||||
this.gutterAds.hide();
|
||||
},
|
||||
() => {
|
||||
this.joinModal.close();
|
||||
@@ -859,6 +831,9 @@ class Client {
|
||||
(ad as HTMLElement).style.display = "none";
|
||||
});
|
||||
|
||||
if (window.PageOS?.session?.newPageView) {
|
||||
window.PageOS.session.newPageView();
|
||||
}
|
||||
crazyGamesSDK.loadingStop();
|
||||
crazyGamesSDK.gameplayStart();
|
||||
document.body.classList.add("in-game");
|
||||
@@ -909,8 +884,6 @@ class Client {
|
||||
document.body.classList.remove("in-game");
|
||||
|
||||
crazyGamesSDK.gameplayStop();
|
||||
|
||||
this.gutterAds.hide();
|
||||
this.publicLobby.leaveLobby();
|
||||
}
|
||||
|
||||
@@ -932,28 +905,6 @@ class Client {
|
||||
}
|
||||
}
|
||||
|
||||
private initializeFuseTag() {
|
||||
const tryInitFuseTag = (): boolean => {
|
||||
if (window.fusetag && typeof window.fusetag.pageInit === "function") {
|
||||
console.log("initializing fuse tag");
|
||||
window.fusetag.que.push(() => {
|
||||
window.fusetag.pageInit({
|
||||
blockingFuseIds: ["lhs_sticky_vrec", "rhs_sticky_vrec"],
|
||||
});
|
||||
});
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (tryInitFuseTag()) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
private async getTurnstileToken(
|
||||
lobby: JoinLobbyEvent,
|
||||
): Promise<string | null> {
|
||||
@@ -965,7 +916,8 @@ class Client {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (this.turnstileTokenPromise === null) {
|
||||
// Always request a new token on crazygames.
|
||||
if (this.turnstileTokenPromise === null || crazyGamesSDK.isOnCrazyGames()) {
|
||||
console.log("No prefetched turnstile token, getting new token");
|
||||
return (await getTurnstileToken())?.token ?? null;
|
||||
}
|
||||
@@ -981,6 +933,7 @@ class Client {
|
||||
const tokenTTL = 3 * 60 * 1000;
|
||||
if (Date.now() < token.createdAt + tokenTTL) {
|
||||
console.log("Prefetched turnstile token is valid");
|
||||
|
||||
return token.token;
|
||||
} else {
|
||||
console.log("Turnstile token expired, getting new token");
|
||||
@@ -989,11 +942,27 @@ class Client {
|
||||
}
|
||||
}
|
||||
|
||||
// Hide elements with no-crazygames class if on CrazyGames
|
||||
const hideCrazyGamesElements = () => {
|
||||
if (crazyGamesSDK.isOnCrazyGames()) {
|
||||
document.querySelectorAll(".no-crazygames").forEach((el) => {
|
||||
(el as HTMLElement).style.display = "none";
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize the client when the DOM is loaded
|
||||
const bootstrap = () => {
|
||||
initLayout();
|
||||
new Client().initialize();
|
||||
initNavigation();
|
||||
|
||||
// Hide elements immediately
|
||||
hideCrazyGamesElements();
|
||||
|
||||
// Also hide elements after a short delay to catch late-rendered components
|
||||
setTimeout(hideCrazyGamesElements, 100);
|
||||
setTimeout(hideCrazyGamesElements, 500);
|
||||
};
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
|
||||
Reference in New Issue
Block a user