Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-26 05:12:19 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Tier list maker default to drag & drop and persist the choice

Browse Source
This commit is contained in:
Kalle
2026-09-22 20:11:09 +03:00
parent 7e322c3c1f
commit d0d8b893db
3 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/features/tier-list-maker/hooks/useTierList.ts
View File

@@ -5,6 +5,7 @@ import type {
} from "@dnd-kit/core";
import { arrayMove } from "@dnd-kit/sortable";
import * as React from "react";
import * as v from "valibot";
import { abilitiesShort } from "~/modules/in-game-lists/abilities";
import { modesShort } from "~/modules/in-game-lists/modes";
import { stageIds } from "~/modules/in-game-lists/stage-ids";
@@ -14,6 +15,8 @@ import {
subWeaponIds,
weaponIdToType,
} from "~/modules/in-game-lists/weapon-ids";
import { usePersistedState } from "~/modules/persisted-state/hooks";
import * as PersistedState from "~/modules/persisted-state/persisted-state";
import { useSearchParam } from "~/modules/search-params/hooks";
import { assertUnreachable } from "~/utils/types";
import { DEFAULT_TIERS } from "../tier-list-maker-constants";
@@ -27,6 +30,13 @@ import { addItemToTier, getNextNthForItem } from "../tier-list-maker-utils";
export type TierListPlacementMode = "track" | "click";
const placementModePersisted = PersistedState.define({
key: "tier-list-maker__placement-mode",
storage: "local",
schema: v.picklist(["track", "click"]),
default: "track" as TierListPlacementMode,
});
export function useTierList() {
const [itemType, setItemType] = useSearchParam(
tierListMakerSearchParams,
@@ -37,10 +47,11 @@ export function useTierList() {
useSearchParamTiersState();
const [activeItem, setActiveItem] = React.useState<TierListItem | null>(null);
const [placementMode, setPlacementMode] =
React.useState<TierListPlacementMode>("click");
const [placementMode, setPlacementMode] = usePersistedState(
placementModePersisted,
);
const [selectedTierId, setSelectedTierId] = React.useState<string | null>(
() => tiers.tiers[0]?.id ?? null,
() => (placementMode === "click" ? (tiers.tiers[0]?.id ?? null) : null),
);
const handleChangePlacementMode = (mode: TierListPlacementMode) => {

2
app/features/tier-list-maker/routes/tier-list-maker.tsx
View File

@@ -50,7 +50,7 @@ import type { TierListItem } from "../tier-list-maker-schemas";
import { tierListMakerPathWithState } from "../tier-list-maker-utils";
import styles from "./tier-list-maker.module.css";
const PLACEMENT_MODES: TierListPlacementMode[] = ["click", "track"];
const PLACEMENT_MODES: TierListPlacementMode[] = ["track", "click"];
export const meta: MetaFunction = (args) => {
return metaTags({

5
changelog/2026-09-22-tier-list-maker-drag-default.md Normal file
View File

@@ -0,0 +1,5 @@
---
navItem: tier-list-maker
type: feature
---
Tier list maker defaults to drag & drop and remembers your placement mode choice