alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-07-10 05:24:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Delayed lobby start (#4184)

Browse Source 
Resolves #4169

## Description:

Adds a delayed lobby start option.
Utilizes the same system as for public lobbies.
The default for the option is for lobbies to take 3 seconds to start,
however this can easily be changed.

The current setting is controlled through an enable-disable slider,
however there are multiple other options for how to control this.
For example we could do a slider, an input field, a dropdown etc. And i
dont necessarily know if the currently implemented option is the best.

Furhtermore im not sure if i have used the language file completely
correctly. There is now a duplicate field for both private and public
lobby. However there is not category shared between the two. So i
decided to reuse the field from public for private games, as this
simplified the code a bit.

**Host video**

https://github.com/user-attachments/assets/6f3db6e4-7323-4fad-8544-efb8cef4d969

**Non-host video**

https://github.com/user-attachments/assets/ee02a072-1f42-4dde-a5d9-120fda862eb7

## Please complete the following:

- [X] I have added screenshots for all UI updates
- [X] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory


## Please put your Discord username so you can be contacted if a bug or
regression is found:
FrederikJA
This commit is contained in:
FrederikJA
2026-06-12 21:22:03 +02:00
committed by GitHub
parent d96c055df1
commit 19db66f424
10 changed files with 212 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/components/ToggleInputCard.ts
+2 -14
View File
@@ -1,19 +1,7 @@
import { LitElement, PropertyValues, html, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
import { translateText } from "../Utils";
const ACTIVE_CARD =
"bg-malibu-blue/20 border-malibu-blue/50 shadow-[var(--shadow-malibu-blue)]";
const INACTIVE_CARD =
"bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20";
const INPUT_CLASS =
"w-full text-center rounded bg-black/60 text-white text-sm font-bold border border-white/20 focus:outline-none focus:border-malibu-blue p-1 my-1";
const CARD_LABEL_CLASS =
"text-xs uppercase font-bold tracking-wider leading-tight break-words hyphens-auto";
function cardClass(active: boolean, extra = ""): string {
return `w-full h-full rounded-xl border cursor-pointer transition-all duration-200 active:scale-95 ${extra} ${active ? ACTIVE_CARD : INACTIVE_CARD}`;
}
import { CARD_LABEL_CLASS, INPUT_CLASS, cardClass } from "./InputCardStyles";
@customElement("toggle-input-card")
export class ToggleInputCard extends LitElement {
@@ -103,7 +91,7 @@ export class ToggleInputCard extends LitElement {
render() {
return html`
<div class="${cardClass(this.checked, "relative overflow-hidden")}">
<div class="${cardClass(this.checked)}">
<button
type="button"
aria-pressed=${this.checked}