mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-25 08:08:35 +00:00
Improve player panel (#2060)
## Description: Fixes #2015 Improved the Player Panel UI for better usability and appearance. **Screenshots** <img width="334" height="523" alt="2" src="https://github.com/user-attachments/assets/bd0afaac-07df-4abc-a20f-208a0783e558" /> <img width="337" height="523" alt="3" src="https://github.com/user-attachments/assets/f712ad77-4546-487b-9a9c-2c535b8a45f7" /> **Future Plan** Add a modal for sending gold and troops to other players from the Player Panel. <img width="343" height="494" alt="sending troops" src="https://github.com/user-attachments/assets/9c9c21db-e13a-426f-93e9-b477a9db442a" /> ## 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 - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: abodcraft1 --------- Co-authored-by: evanpelle <evanpelle@gmail.com>
This commit is contained in:
co-authored by
evanpelle
parent
715775065d
commit
175d492b99
@@ -0,0 +1,33 @@
|
||||
import { html, LitElement } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
export type DividerSpacing = "sm" | "md" | "lg";
|
||||
@customElement("ui-divider")
|
||||
export class Divider extends LitElement {
|
||||
@property({ type: String })
|
||||
spacing: DividerSpacing = "md";
|
||||
|
||||
@property({ type: String })
|
||||
color: string = "bg-zinc-700/80";
|
||||
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
|
||||
render() {
|
||||
const spacingClasses: Record<DividerSpacing, string> = {
|
||||
sm: "my-0.5",
|
||||
md: "my-1",
|
||||
lg: "my-2",
|
||||
} as const;
|
||||
const spacing = spacingClasses[this.spacing] ?? spacingClasses.md;
|
||||
|
||||
const colorClass = this.color || "bg-zinc-700/80";
|
||||
|
||||
return html`<div
|
||||
role="separator"
|
||||
aria-hidden="true"
|
||||
class="${spacing} h-px ${colorClass}"
|
||||
></div>`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user