Skip to content

Bigger discord button #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
El-Magico777 wants to merge 2 commits into from
Closed

Bigger discord button #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
69b0f00
feat: Implement prominent Discord button with icon
El-Magico777 Jul 15, 2025
bfeacb5
feat: Temporarily comment out Discord login/logout buttons and fix HT…
El-Magico777 Jul 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 53 additions & 42 deletions src/client/Main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -100,12 +100,23 @@ class Client {
console.warn("Dark mode button element not found");
}

const loginDiscordButton = document.getElementById(
"login-discord",
) as OButton;
const logoutDiscordButton = document.getElementById(
"logout-discord",
// 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",
) as OButton;
joinDiscordButton.addEventListener("click", () => {
window.open("https://discord.gg/w8HXjhaBkU", "_blank");
});

this.usernameInput = document.querySelector(
"username-input",
Expand Down Expand Up @@ -156,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",
Expand Down
16 changes: 13 additions & 3 deletions src/client/components/baseComponents/Button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -28,9 +29,18 @@ export class OButton extends LitElement {
})}
?disabled=${this.disable}
>
${`${this.translationKey}` === ""
? `${this.title}`
: `${translateText(this.translationKey)}`}
<span class="c-button__content">
${this.iconSrc
? html`<img
src="${this.iconSrc}"
alt="icon"
class="c-button__icon"
/>`
: ""}
${`${this.translationKey}` === ""
? `${this.title}`
: `${translateText(this.translationKey)}`}
</span>
</button>
`;
}
Expand Down
18 changes: 11 additions & 7 deletions src/client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,20 +190,31 @@
<!-- Main container with responsive padding -->
<main class="flex justify-center flex-grow">
<div class="container pt-12">
<!--
<o-button
id="login-discord"
title="Initializing..."
disable="true"
block
></o-button>
-->

<!--
<o-button
id="logout-discord"
title="Log out"
translationKey="main.log_out"
visible="false"
block
></o-button>
-->

<o-button
id="join-discord-button"
translationKey="main.join_discord"
block
iconSrc="/images/DiscordIcon.svg"
></o-button>

<div class="container__row">
<flag-input class="w-[20%] md:w-[15%]"></flag-input>
Expand Down Expand Up @@ -326,13 +337,6 @@
>
Wiki
</a>
<a
target="_blank"
href="https://discord.gg/w8HXjhaBkU"
class="t-link"
>
<span data-i18n="main.join_discord"> Join the Discord! </span>
</a>
</div>
<div class="l-footer__col t-text-white">
<a
Expand Down
15 changes: 14 additions & 1 deletion src/client/styles/components/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
color: #fff;
cursor: pointer;
outline: none;
display: inline-block;
display: inline-block; /* Revert to inline-block for the button itself */
font-size: 16px;
border: 1px solid transparent;
text-align: center;
Expand All @@ -16,6 +16,19 @@
}
}

.c-button__content {
display: flex;
align-items: center;
justify-content: center;
}

.c-button__icon {
/* Styles for the icon */
width: 24px;
height: 24px;
margin-right: 8px;
}

.c-button:hover,
.c-button:active,
.c-button:focus {
Expand Down
Loading