From 69b0f0090ebd1a61da23c3ddd0d64b25f4a25410 Mon Sep 17 00:00:00 2001 From: El-Magico777 Date: Tue, 15 Jul 2025 19:08:42 +0200 Subject: [PATCH 1/2] feat: Implement prominent Discord button with icon --- src/client/Main.ts | 7 +++++++ src/client/components/baseComponents/Button.ts | 16 +++++++++++++--- src/client/index.html | 14 +++++++------- src/client/styles/components/button.css | 15 ++++++++++++++- 4 files changed, 41 insertions(+), 11 deletions(-) diff --git a/src/client/Main.ts b/src/client/Main.ts index ab636db0c..18fa9cc3b 100644 --- a/src/client/Main.ts +++ b/src/client/Main.ts @@ -107,6 +107,13 @@ class Client { "logout-discord", ) as OButton; + const joinDiscordButton = document.getElementById( + "join-discord-button", + ) as OButton; + joinDiscordButton.addEventListener("click", () => { + window.open("https://discord.gg/w8HXjhaBkU", "_blank"); + }); + this.usernameInput = document.querySelector( "username-input", ) as UsernameInput; diff --git a/src/client/components/baseComponents/Button.ts b/src/client/components/baseComponents/Button.ts index 019d9adbd..7bcf10d4e 100644 --- a/src/client/components/baseComponents/Button.ts +++ b/src/client/components/baseComponents/Button.ts @@ -11,6 +11,7 @@ export class OButton extends LitElement { @property({ type: Boolean }) block = false; @property({ type: Boolean }) blockDesktop = false; @property({ type: Boolean }) disable = false; + @property({ type: String }) iconSrc = ""; createRenderRoot() { return this; @@ -28,9 +29,18 @@ export class OButton extends LitElement { })} ?disabled=${this.disable} > - ${`${this.translationKey}` === "" - ? `${this.title}` - : `${translateText(this.translationKey)}`} + + ${this.iconSrc + ? html`icon` + : ""} + ${`${this.translationKey}` === "" + ? `${this.title}` + : `${translateText(this.translationKey)}`} + `; } diff --git a/src/client/index.html b/src/client/index.html index b9d8b653a..18cecf4ed 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -205,6 +205,13 @@ block > + +
@@ -326,13 +333,6 @@ > Wiki - - Join the Discord! -
Date: Tue, 15 Jul 2025 19:17:51 +0200 Subject: [PATCH 2/2] feat: Temporarily comment out Discord login/logout buttons and fix HTML comment --- src/client/Main.ts | 90 ++++++++++++++++++++++--------------------- src/client/index.html | 4 ++ 2 files changed, 51 insertions(+), 43 deletions(-) diff --git a/src/client/Main.ts b/src/client/Main.ts index 18fa9cc3b..4045d32d7 100644 --- a/src/client/Main.ts +++ b/src/client/Main.ts @@ -30,7 +30,7 @@ import { NewsButton } from "./components/NewsButton"; import "./components/baseComponents/Button"; import { OButton } from "./components/baseComponents/Button"; import "./components/baseComponents/Modal"; -import { discordLogin, getUserMe, isLoggedIn, logOut } from "./jwt"; +import { isLoggedIn } from "./jwt"; import "./styles.css"; export interface JoinLobbyEvent { @@ -100,12 +100,16 @@ class Client { console.warn("Dark mode button element not found"); } - const loginDiscordButton = document.getElementById( - "login-discord", - ) as OButton; - const logoutDiscordButton = document.getElementById( - "logout-discord", - ) as OButton; + // const loginDiscordButton = document.getElementById( + // "login-discord", + // ) as OButton; + // const logoutDiscordButton = document.getElementById( + // "logout-discord", + // ) as OButton; + + // const logoutDiscordButton = document.getElementById( + // "logout-discord", + // ) as OButton; const joinDiscordButton = document.getElementById( "join-discord-button", @@ -163,42 +167,42 @@ class Client { hlpModal.open(); }); - if (isLoggedIn() === false) { - // Not logged in - loginDiscordButton.disable = false; - loginDiscordButton.translationKey = "main.login_discord"; - loginDiscordButton.addEventListener("click", discordLogin); - logoutDiscordButton.hidden = true; - } else { - // JWT appears to be valid - loginDiscordButton.disable = true; - loginDiscordButton.translationKey = "main.checking_login"; - logoutDiscordButton.hidden = false; - logoutDiscordButton.addEventListener("click", () => { - // Log out - logOut(); - loginDiscordButton.disable = false; - loginDiscordButton.translationKey = "main.login_discord"; - loginDiscordButton.hidden = false; - loginDiscordButton.addEventListener("click", discordLogin); - logoutDiscordButton.hidden = true; - }); - // Look up the discord user object. - // TODO: Add caching - getUserMe().then((userMeResponse) => { - if (userMeResponse === false) { - // Not logged in - loginDiscordButton.disable = false; - loginDiscordButton.translationKey = "main.login_discord"; - loginDiscordButton.addEventListener("click", discordLogin); - logoutDiscordButton.hidden = true; - return; - } - loginDiscordButton.translationKey = "main.logged_in"; - loginDiscordButton.hidden = true; - const { user, player } = userMeResponse; - }); - } + // if (isLoggedIn() === false) { + // // Not logged in + // loginDiscordButton.disable = false; + // loginDiscordButton.translationKey = "main.login_discord"; + // loginDiscordButton.addEventListener("click", discordLogin); + // logoutDiscordButton.hidden = true; + // } else { + // // JWT appears to be valid + // loginDiscordButton.disable = true; + // loginDiscordButton.translationKey = "main.checking_login"; + // logoutDiscordButton.hidden = false; + // logoutDiscordButton.addEventListener("click", () => { + // // Log out + // logOut(); + // loginDiscordButton.disable = false; + // loginDiscordButton.translationKey = "main.login_discord"; + // loginDiscordButton.hidden = false; + // loginDiscordButton.addEventListener("click", discordLogin); + // logoutDiscordButton.hidden = true; + // }); + // // Look up the discord user object. + // // TODO: Add caching + // getUserMe().then((userMeResponse) => { + // if (userMeResponse === false) { + // // Not logged in + // loginDiscordButton.disable = false; + // loginDiscordButton.translationKey = "main.login_discord"; + // loginDiscordButton.addEventListener("click", discordLogin); + // logoutDiscordButton.hidden = true; + // return; + // } + // loginDiscordButton.translationKey = "main.logged_in"; + // loginDiscordButton.hidden = true; + // const { user, player } = userMeResponse; + // }); + // } const settingsModal = document.querySelector( "user-setting", diff --git a/src/client/index.html b/src/client/index.html index 18cecf4ed..77c4d0138 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -190,13 +190,16 @@
+ +