mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-24 06:53:44 +00:00
RyanandGitHub
d76a0c4009
## Description: - rips out some duped code, making tables use the same layout, where the only thing different is the row content. - updated text to be emojis to save space - updated columns to be as wide as they need to be - updated cells to have left/right thin borders to read easier - added more supported column types - removed the + button to always show everyone, where the current player is either at the bottom or in the top 5 - added a cogwheel to change options - can select different options for each menu type (player/team stats) <img width="582" height="630" alt="image" src="https://github.com/user-attachments/assets/e54dc3d5-eb2c-4bab-8732-06bea68aec45" /> works fine on mobile, will probably need some future love though (has h-scroll, so all options can be seen by scrolling): ## 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: w.o.n
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import { ColumnPicker } from "../src/client/hud/layers/ColumnPicker";
|
|
import { COLUMN_DEFS } from "../src/client/hud/layers/lib/StatsColumns";
|
|
import type { ColumnId } from "../src/client/StatsConstants";
|
|
|
|
describe("ColumnPicker", () => {
|
|
it("renders its popup outside the sidebar overflow container", async () => {
|
|
const sidebar = document.createElement("div");
|
|
const picker = new ColumnPicker();
|
|
picker.columns = COLUMN_DEFS;
|
|
picker.selected = ["tiles"];
|
|
sidebar.appendChild(picker);
|
|
document.body.appendChild(sidebar);
|
|
await picker.updateComplete;
|
|
|
|
picker.querySelector("button")?.click();
|
|
await picker.updateComplete;
|
|
|
|
const popup = document.body.querySelector(".column-picker-popover");
|
|
expect(popup).not.toBeNull();
|
|
expect(sidebar.contains(popup)).toBe(false);
|
|
expect(popup?.querySelectorAll('input[type="checkbox"]')).toHaveLength(
|
|
COLUMN_DEFS.length,
|
|
);
|
|
|
|
let selection: readonly ColumnId[] | null = null;
|
|
picker.addEventListener("columns-changed", (event) => {
|
|
selection = (event as CustomEvent<ColumnId[]>).detail;
|
|
});
|
|
(popup?.querySelectorAll("input")[1] as HTMLInputElement).click();
|
|
expect(selection).toEqual(["tiles", "gold"]);
|
|
|
|
sidebar.remove();
|
|
expect(document.body.querySelector(".column-picker-popover")).toBeNull();
|
|
});
|
|
});
|