Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-03-21 18:04:39 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Tier list maker preset colors
Some checks failed
E2E Tests / e2e (push) Has been cancelled
Details
Tests and checks on push / run-checks-and-tests (push) Has been cancelled
Details
Updates translation progress / update-translation-progress-issue (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Kalle 2025-11-29 15:37:50 +02:00
parent b681a562be
commit 4df6149605
19 changed files with 113 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/features/tier-list-maker/components/TierRow.module.css
View File

@ -120,3 +120,43 @@
stroke-width: 3;
color: var(--text);
}
.colorPickerContainer {
display: flex;
flex-direction: column;
gap: var(--s-3);
align-items: center;
}
.presetColorsGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--s-2);
}
.colorButton {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s;
padding: 0;
}
.colorButton:hover {
transform: scale(1.1);
border-color: var(--text-lighter);
}
.colorButtonSelected {
border-color: var(--text);
box-shadow: 0 0 0 2px var(--bg);
}
.customColorLabel {
display: flex;
align-items: center;
gap: var(--s-2);
cursor: pointer;
}

34
app/features/tier-list-maker/components/TierRow.tsx
View File

@ -14,6 +14,7 @@ import { ChevronUpIcon } from "~/components/icons/ChevronUp";
import { TrashIcon } from "~/components/icons/Trash";
import { useTierListState } from "../contexts/TierListContext";
import {
PRESET_COLORS,
TIER_NAME_FONT_SIZE_BREAKPOINTS,
TIER_NAME_FONT_SIZE_MIN,
TIER_NAME_MAX_LENGTH,
@ -107,12 +108,33 @@ export function TierRow({ tier }: TierRowProps) {
className={styles.nameInput}
maxLength={TIER_NAME_MAX_LENGTH}
/>
<input
type="color"
value={tier.color}
onChange={(e) => handleChangeTierColor(tier.id, e.target.value)}
className="plain"
/>
<div className={styles.colorPickerContainer}>
<div className={styles.presetColorsGrid}>
{PRESET_COLORS.map((color) => (
<button
key={color}
type="button"
className={clsx(styles.colorButton, {
[styles.colorButtonSelected]: tier.color === color,
})}
style={{ backgroundColor: color }}
onClick={() => handleChangeTierColor(tier.id, color)}
aria-label={`Select color ${color}`}
/>
))}
</div>
<label className={styles.customColorLabel}>
<span className="text-xs">{t("tier-list-maker:custom")}</span>
<input
type="color"
value={tier.color}
onChange={(e) =>
handleChangeTierColor(tier.id, e.target.value)
}
className="plain"
/>
</label>
</div>
</div>
<div className="stack horizontal justify-end">
<SendouButton

13
app/features/tier-list-maker/tier-list-maker-constants.ts
View File

@ -13,6 +13,19 @@ export const TIER_NAME_FONT_SIZE_BREAKPOINTS = [
export const TIER_NAME_FONT_SIZE_MIN = "var(--fonts-xxs)";
export const PRESET_COLORS = [
"#ff4655",
"#ff8c42",
"#ffd23f",
"#bfe84d",
"#5dbb63",
"#8b0000",
"#90ee90",
"#4169e1",
"#9b59b6",
"#20b2aa",
];
export const DEFAULT_TIERS: TierListMakerTier[] = [
{ id: "tier-x", name: "X", color: "#ff4655" },
{ id: "tier-s", name: "S", color: "#ff8c42" },

3
locales/da/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/de/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/en/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "Allow duplicates",
"showTierHeaders": "Show tier headers",
"titlePlaceholder": "Click to add title...",
"by": "Made by"
"by": "Made by",
"custom": "Custom"
}

3
locales/es-ES/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/es-US/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/fr-CA/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/fr-EU/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/he/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/it/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/ja/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/ko/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/nl/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/pl/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/pt-BR/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/ru/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}

3
locales/zh/tier-list-maker.json
View File

@ -15,5 +15,6 @@
"allowDuplicates": "",
"showTierHeaders": "",
"titlePlaceholder": "",
"by": ""
"by": "",
"custom": ""
}