mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactoring

Browse source
This commit is contained in:
ad044 2020-12-14 01:58:17 +04:00
parent 0ec4ce57e4
commit 6c3374de01
15 changed files with 219 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/MainScene/Lain.tsx
View file

@ -117,10 +117,10 @@ const Lain = () => {
const lainAnimationDispatch = {
standing: <LainStanding />,
move_left: <LainMoveLeft />,
move_right: <LainMoveRight />,
move_up: <LainMoveUp />,
move_down: <LainMoveDown />,
site_left: <LainMoveLeft />,
site_right: <LainMoveRight />,
site_up: <LainMoveUp />,
site_down: <LainMoveDown />,
select_level_down: <LainMoveDown />,
select_level_up: <LainMoveUp />,
throw_node: <LainThrowNode />,

10
src/components/MainScene/LevelSelection.tsx
View file

@ -24,15 +24,7 @@ const LevelSelection = () => {
const upArrowTex = useLoader(THREE.TextureLoader, upArrow);
const downArrowTex = useLoader(THREE.TextureLoader, downArrow);
const selectedLevelIdx = useLevelSelectionStore(
(state) => state.selectedLevelIdx
);
const selectedLevel = useLevelSelectionStore(
useCallback((state) => state.availableLevels[selectedLevelIdx], [
selectedLevelIdx,
])
)
const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel)
.toString()
.padStart(2, "0");

10
src/core/StateManagers/EventManager.tsx
View file

@ -61,9 +61,7 @@ const EventManager = () => {
const siteTransformState = useSiteStore((state) => state.transformState);
const activeLevel = useLevelStore((state) => state.activeLevel);
const mainSubscene = useMainSceneStore((state) => state.subscene);
const levelSelectionIdx = useLevelSelectionStore(
(state) => state.selectedLevelIdx
);
const selectedLevel = useLevelSelectionStore((state) => state.selectedLevel);
const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
const activePauseComponent = usePauseStore(
useCallback((state) => state.componentMatrix[pauseMatrixIdx], [
@ -150,7 +148,7 @@ const EventManager = () => {
siteTransformState: siteTransformState,
nodeMatrixIndices: nodeMatrixIndices,
activeLevel: activeLevel,
levelSelectionIdx: levelSelectionIdx,
selectedLevel: selectedLevel,
pauseMatrixIdx: pauseMatrixIdx,
activePauseComponent: activePauseComponent,
unlockedNodes: unlockedNodes,
@ -191,6 +189,7 @@ const EventManager = () => {
activeBootElement,
activeLevel,
activeMediaComponent,
activePauseComponent,
activeSSknComponent,
authorizeUserActiveLetterTexOffset,
authorizeUserBgLettersPos,
@ -198,12 +197,13 @@ const EventManager = () => {
currentBootSubscene,
currentScene,
inputCooldown,
levelSelectionIdx,
mainSubscene,
nodeMatrixIndices,
pauseMatrixIdx,
rightSideComponentIdx,
selectedLevel,
siteTransformState,
unlockedNodes,
wordPosStateIdx,
]
);

8
src/core/StateManagers/GreenTextManager.tsx
View file

@ -68,10 +68,10 @@ const GreenTextManager = (props: StateManagerProps) => {
newLevel: string
) => {
switch (event) {
case "move_up":
case "move_down":
case "move_left":
case "move_right":
case "site_up":
case "site_down":
case "site_left":
case "site_right":
return {
action: toggleAndSetGreenText,
value: [newActiveNodeId, newActiveHudId, newLevel, 3903.704],

8
src/core/StateManagers/LainManager.tsx
View file

@ -8,10 +8,10 @@ const LainManager = (props: StateManagerProps) => {
const dispatchObject = useCallback(
(event: string) => {
switch (event) {
case "move_up":
case "move_down":
case "move_left":
case "move_right":
case "site_up":
case "site_down":
case "site_left":
case "site_right":
case "select_level_up":
case "select_level_down":
return {

5
src/core/StateManagers/LevelManager.tsx
View file

@ -8,8 +8,8 @@ const LevelManager = (props: StateManagerProps) => {
const dispatchObject = useCallback(
(event: string, newLevel: string) => {
switch (event) {
case "move_up":
case "move_down":
case "site_up":
case "site_down":
return {
action: setActiveLevel,
value: newLevel,
@ -31,6 +31,7 @@ const LevelManager = (props: StateManagerProps) => {
if (props.eventState) {
const eventAction = props.eventState.event;
const newLevel = props.eventState.newLevel;
const dispatchedObject = dispatchObject(eventAction, newLevel);
if (dispatchedObject) {

8
src/core/StateManagers/LevelSelectionManager.tsx
View file

@ -6,8 +6,8 @@ const LevelSelectionManager = (props: StateManagerProps) => {
const toggleLevelSelection = useLevelSelectionStore(
(state) => state.toggleLevelSelection
);
const setSelectedLevelIdx = useLevelSelectionStore(
(state) => state.setSelectedLevelIdx
const setSelectedLevel = useLevelSelectionStore(
(state) => state.setSelectedLevel
);
const dispatchObject = useCallback(
@ -21,7 +21,7 @@ const LevelSelectionManager = (props: StateManagerProps) => {
case "level_selection_up":
case "level_selection_down":
return {
action: setSelectedLevelIdx,
action: setSelectedLevel,
value: newSelectedLevelIdx,
};
case "select_level_up":
@ -31,7 +31,7 @@ const LevelSelectionManager = (props: StateManagerProps) => {
};
}
},
[setSelectedLevelIdx, toggleLevelSelection]
[setSelectedLevel, toggleLevelSelection]
);
useEffect(() => {

8
src/core/StateManagers/MiddleRingManager.tsx
View file

@ -142,15 +142,15 @@ const MiddleRingManager = (props: any) => {
const dispatchObject = useCallback(
(event: string) => {
switch (event) {
case "move_up":
case "site_up":
case "select_level_up":
return { action: moveUp };
case "select_level_down":
case "move_down":
case "site_down":
return { action: moveDown };
case "move_left":
case "site_left":
return { action: rotate, value: ["left"] };
case "move_right":
case "site_right":
return { action: rotate, value: ["right"] };
}
},

8
src/core/StateManagers/NodeHUDManager.tsx
View file

@ -43,10 +43,10 @@ const NodeHUDManager = (props: StateManagerProps) => {
const dispatchObject = useCallback(
(event: string, targetNodeHudId: string) => {
switch (event) {
case "move_up":
case "move_down":
case "move_left":
case "move_right":
case "site_up":
case "site_down":
case "site_left":
case "site_right":
return {
action: moveAndChangeNode,
value: [targetNodeHudId],

10
src/core/StateManagers/NodeManager.tsx
View file

@ -64,10 +64,12 @@ const NodeManager = (props: StateManagerProps) => {
newNodeMatIdx: number
) => {
switch (event) {
case "move_up":
case "move_down":
case "move_left":
case "move_right":
case "site_up":
case "site_down":
case "site_left":
case "site_right":
case "select_level_up":
case "select_level_down":
return {
action: updateActiveNode,
value: [

8
src/core/StateManagers/SiteManager.tsx
View file

@ -8,8 +8,8 @@ const SiteManager = (props: StateManagerProps) => {
const dispatchObject = useCallback(
(event: string, newSitePosY: number, newSiteRotY: number) => {
switch (event) {
case "move_up":
case "move_down":
case "site_up":
case "site_down":
case "select_level_up":
case "select_level_down":
return {
@ -17,8 +17,8 @@ const SiteManager = (props: StateManagerProps) => {
value: [newSitePosY, "posY"],
actionDelay: 1300,
};
case "move_left":
case "move_right":
case "site_left":
case "site_right":
return {
action: setTransformState,
value: [newSiteRotY, "rotY"],

8
src/core/StateManagers/YellowTextManager.tsx
View file

@ -193,17 +193,17 @@ const YellowTextManager = (props: StateManagerProps) => {
newLevel: string
) => {
switch (event) {
case "move_up":
case "site_up":
return {
action: animateYellowTextWithMove,
value: [0, -1.5, newActiveHudId, newActiveNodeId, newLevel, 1300],
};
case "move_down":
case "site_down":
return {
action: animateYellowTextWithMove,
value: [0, 1.5, newActiveHudId, newActiveNodeId, newLevel, 1300],
};
case "move_left":
case "site_left":
return {
action: animateYellowTextWithMove,
value: [
@ -215,7 +215,7 @@ const YellowTextManager = (props: StateManagerProps) => {
1100,
],
};
case "move_right":
case "site_right":
return {
action: animateYellowTextWithMove,
value: [

100
src/core/mainSceneEventHandler.ts
View file

@ -1,8 +1,6 @@
import node_matrices from "../resources/node_matrices.json";
import site_a from "../resources/site_a.json";
import level_y_values from "../resources/level_y_values.json";
import nodeSelector from "./nodeSelector";
import unlocked_nodes from "../resources/unlocked_nodes.json";
const hudAssocs = {
"00": "fg_hud_1",
@ -24,7 +22,7 @@ const handleMainSceneEvent = (gameContext: any) => {
const keyPress = gameContext.keyPress;
const subscene = gameContext.mainSubscene;
const levelSelectionIdx = gameContext.levelSelectionIdx;
const selectedLevel = gameContext.selectedLevel;
const pauseMatrixIdx = gameContext.pauseMatrixIdx;
const activePauseComponent = gameContext.activePauseComponent;
const unlockedNodes = gameContext.unlockedNodes;
@ -32,14 +30,15 @@ const handleMainSceneEvent = (gameContext: any) => {
const nodeColIdx = gameContext.nodeMatrixIndices.colIdx;
const nodeRowIdx = gameContext.nodeMatrixIndices.rowIdx;
const nodeMatIdx = gameContext.nodeMatrixIndices.matrixIdx;
const level = gameContext.activeLevel;
const level = parseInt(gameContext.activeLevel);
const siteRotY = gameContext.siteTransformState.rotY;
const sitePosY = gameContext.siteTransformState.posY;
let newActiveNodeId;
let newNodeMatIdx = gameContext.nodeMatrixIndices.matrixIdx;
let newNodeColIdx = gameContext.nodeMatrixIndices.colIdx;
let newNodeRowIdx = gameContext.nodeMatrixIndices.rowIdx;
let newLevel = gameContext.activeLevel;
let newLevel = parseInt(gameContext.activeLevel);
let newSiteRotY = gameContext.siteTransformState.rotY;
let newSitePosY = gameContext.siteTransformState.posY;
let newScene = gameContext.scene;
@ -52,7 +51,7 @@ const handleMainSceneEvent = (gameContext: any) => {
case "DOWN":
case "UP":
selectedNodeData = nodeSelector({
keyPress: keyPress,
action: `site_${keyPress.toLowerCase()}`,
nodeMatIdx: nodeMatIdx,
nodeColIdx: nodeColIdx,
nodeRowIdx: nodeRowIdx,
@ -64,6 +63,7 @@ const handleMainSceneEvent = (gameContext: any) => {
if (selectedNodeData) {
event = selectedNodeData.event;
newActiveNodeId = selectedNodeData.newActiveNodeId;
newNodeMatIdx = selectedNodeData.newNodeMatIdx;
newNodeColIdx = selectedNodeData.newNodeColIdx;
newNodeRowIdx = selectedNodeData.newNodeRowIdx;
@ -77,8 +77,8 @@ const handleMainSceneEvent = (gameContext: any) => {
// in this case we have to check the type of the blue orb
// and dispatch an action depending on that, so we have to precalculate the
// new active blue orb here.
const newActiveNodeId =
newLevel +
newActiveNodeId =
gameContext.activeLevel +
node_matrices[newNodeMatIdx.toString() as keyof typeof node_matrices][
newNodeRowIdx as number
][newNodeColIdx as number];
@ -109,12 +109,6 @@ const handleMainSceneEvent = (gameContext: any) => {
return { event: "toggle_pause" };
}
const newActiveNodeId =
newLevel +
node_matrices[newNodeMatIdx.toString() as keyof typeof node_matrices][
newNodeRowIdx as number
][newNodeColIdx as number];
const newActiveHudId =
hudAssocs[`${newNodeRowIdx}${newNodeColIdx}` as keyof typeof hudAssocs];
@ -125,7 +119,7 @@ const handleMainSceneEvent = (gameContext: any) => {
newNodeMatIdx: newNodeMatIdx,
newSitePosY: newSitePosY,
newSiteRotY: newSiteRotY,
newLevel: newLevel,
newLevel: newLevel.toString().padStart(2, "0"),
newScene: newScene,
newActiveNodeId: newActiveNodeId,
newActiveHudId: newActiveHudId,
@ -133,17 +127,17 @@ const handleMainSceneEvent = (gameContext: any) => {
} else if (subscene === "level_selection") {
switch (keyPress) {
case "UP":
if (levelSelectionIdx + 1 <= 23)
if (selectedLevel + 1 <= 21)
return {
event: `level_selection_up`,
newSelectedLevelIdx: levelSelectionIdx + 1,
newSelectedLevelIdx: selectedLevel + 1,
};
break;
case "DOWN":
if (levelSelectionIdx - 1 >= 0)
if (selectedLevel - 1 >= 0)
return {
event: `level_selection_down`,
newSelectedLevelIdx: levelSelectionIdx - 1,
newSelectedLevelIdx: selectedLevel - 1,
};
break;
case "X":
@ -161,27 +155,67 @@ const handleMainSceneEvent = (gameContext: any) => {
newLevel: newLevel,
};
case "CIRCLE":
const oldLevel = newLevel;
newLevel = (levelSelectionIdx + 1).toString().padStart(2, "0");
if (oldLevel === newLevel) break;
else if (newLevel < oldLevel) {
const selectedNodeData = nodeSelector({
action: "select_level",
nodeMatIdx: nodeMatIdx,
nodeColIdx: nodeColIdx,
nodeRowIdx: nodeRowIdx,
level: selectedLevel,
siteRotY: siteRotY,
sitePosY: sitePosY,
unlockedNodes: unlockedNodes,
});
if (level === selectedLevel) break;
else if (selectedLevel < level && selectedNodeData) {
return {
event: "select_level_down",
newLevel: newLevel,
newSitePosY:
level_y_values[newLevel as keyof typeof level_y_values],
newLevel: selectedLevel.toString().padStart(0, "2"),
newSitePosY: -selectedNodeData.newSitePosY,
newActiveNodeId: selectedNodeData.newActiveNodeId,
newNodeMatIdx: selectedNodeData.newNodeMatIdx,
newNodeColIdx: selectedNodeData.newNodeColIdx,
newNodeRowIdx: selectedNodeData.newNodeRowIdx,
newActiveHudId:
hudAssocs[
`${selectedNodeData.newNodeRowIdx}${selectedNodeData.newNodeColIdx}` as keyof typeof hudAssocs
],
};
} else {
} else if (selectedLevel > level && selectedNodeData) {
return {
event: "select_level_up",
newLevel: newLevel,
newSitePosY: -level_y_values[
newLevel as keyof typeof level_y_values
],
newActiveNodeId: "2022",
newActiveHudId: "fg_hud_1",
newLevel: selectedLevel.toString().padStart(0, "2"),
newSitePosY: -selectedNodeData.newSitePosY,
newActiveNodeId: selectedNodeData.newActiveNodeId,
newNodeMatIdx: selectedNodeData.newNodeMatIdx,
newNodeColIdx: selectedNodeData.newNodeColIdx,
newNodeRowIdx: selectedNodeData.newNodeRowIdx,
newActiveHudId:
hudAssocs[
`${selectedNodeData.newNodeRowIdx}${selectedNodeData.newNodeColIdx}` as keyof typeof hudAssocs
],
};
}
// if (oldLevel === newLevel) break;
// else if (newLevel < oldLevel) {
// return {
// event: "select_level_down",
// newLevel: newLevel,
// newSitePosY:
// level_y_values[newLevel as keyof typeof level_y_values],
// };
// } else {
// return {
// event: "select_level_up",
// newLevel: newLevel,
// newSitePosY: -level_y_values[
// newLevel as keyof typeof level_y_values
// ],
// newActiveNodeId: "2022",
// newActiveHudId: "fg_hud_1",
// };
// }
}
} else if (subscene === "pause") {
switch (keyPress) {

135
src/core/nodeSelector.ts
View file

@ -2,25 +2,26 @@ import node_matrices from "../resources/node_matrices.json";
import site_a from "../resources/site_a.json";
import { SiteType } from "../components/MainScene/Site";
import unlocked_nodes from "../resources/unlocked_nodes.json";
import level_y_values from "../resources/level_y_values.json";
type NodeSelectorContext = {
keyPress: string;
action: string;
nodeMatIdx: number;
nodeColIdx: number;
nodeRowIdx: number;
level: string;
level: number;
siteRotY: number;
sitePosY: number;
unlockedNodes: typeof unlocked_nodes;
};
const getNodeId = (
level: string,
level: number,
nodeMatIdx: number,
nodeRowIdx: number,
nodeColIdx: number
) =>
level +
level.toString().padStart(2, "0") +
node_matrices[nodeMatIdx.toString() as keyof typeof node_matrices][
nodeRowIdx
][nodeColIdx];
@ -59,10 +60,62 @@ const tryRow = (row: number, triedRows: number[]) => {
return possibleRows.find((elem) => !triedRows.includes(elem));
};
const findNodeAfterLevelSelection = (
unlockedNodes: typeof unlocked_nodes,
targetLevel: number,
nodeMatIdx: number,
nodeRowIdx: number,
nodeColIdx: number
) => {
let newNodeRowIdx = nodeRowIdx;
let newNodeMatIdx = nodeMatIdx;
let newNodeColIdx = nodeColIdx;
let triedCols: number[] = [];
let newNodeId = getNodeId(
targetLevel,
newNodeMatIdx,
newNodeRowIdx,
newNodeColIdx
);
while (!isNodeVisible(newNodeId, unlockedNodes)) {
if (triedCols.length < 4) {
triedCols.push(newNodeColIdx);
const colToTry = tryCol(newNodeColIdx, triedCols);
if (colToTry !== undefined) {
newNodeColIdx = colToTry;
}
} else {
newNodeRowIdx++;
triedCols = [];
newNodeColIdx = 0;
}
newNodeId = getNodeId(
targetLevel,
newNodeMatIdx,
newNodeRowIdx,
newNodeColIdx
);
}
return {
newLevel: targetLevel,
newNodeId: newNodeId,
newNodeRowIdx: newNodeRowIdx,
newNodeColIdx: newNodeColIdx,
newSitePosY:
level_y_values[
targetLevel.toString().padStart(0, "2") as keyof typeof level_y_values
],
};
};
const findNodeVertical = (
direction: string,
unlockedNodes: typeof unlocked_nodes,
level: string,
level: number,
nodeMatIdx: number,
nodeRowIdx: number,
nodeColIdx: number
@ -80,10 +133,10 @@ const findNodeVertical = (
if (newNodeRowIdx > 2) {
newNodeRowIdx = 0;
newLevel = (parseInt(level) - 1).toString().padStart(2, "0");
newLevel = level - 1;
}
let newNodeId = getNodeId(
newNodeId = getNodeId(
newLevel,
newNodeMatIdx,
newNodeRowIdx,
@ -100,7 +153,7 @@ const findNodeVertical = (
} else {
if (newNodeRowIdx === 2) {
newNodeRowIdx = 0;
newLevel = (parseInt(level) - 1).toString().padStart(2, "0");
newLevel = level - 1;
} else {
newNodeRowIdx++;
triedCols = [];
@ -121,10 +174,10 @@ const findNodeVertical = (
if (newNodeRowIdx < 0) {
newNodeRowIdx = 2;
newLevel = (parseInt(level) + 1).toString().padStart(2, "0");
newLevel = level + 1;
}
let newNodeId = getNodeId(
newNodeId = getNodeId(
newLevel,
newNodeMatIdx,
newNodeRowIdx,
@ -141,7 +194,7 @@ const findNodeVertical = (
} else {
if (newNodeRowIdx === 0) {
newNodeRowIdx = 2;
newLevel = (parseInt(level) + 1).toString().padStart(2, "0");
newLevel = level + 1;
} else {
newNodeRowIdx--;
triedCols = [];
@ -164,10 +217,10 @@ const findNodeVertical = (
};
};
const findNode = (
const findNodeHorizontal = (
direction: string,
unlockedNodes: typeof unlocked_nodes,
level: string,
level: number,
nodeMatIdx: number,
nodeRowIdx: number,
nodeColIdx: number
@ -188,12 +241,7 @@ const findNode = (
newNodeMatIdx = nodeMatIdx + 1 > 8 ? 1 : nodeMatIdx + 1;
}
let newNodeId = getNodeId(
level,
newNodeMatIdx,
newNodeRowIdx,
newNodeColIdx
);
newNodeId = getNodeId(level, newNodeMatIdx, newNodeRowIdx, newNodeColIdx);
while (!isNodeVisible(newNodeId, unlockedNodes)) {
if (triedRows.length < 3) {
@ -227,12 +275,7 @@ const findNode = (
newNodeMatIdx = nodeMatIdx - 1 < 1 ? 8 : nodeMatIdx - 1;
}
let newNodeId = getNodeId(
level,
newNodeMatIdx,
newNodeRowIdx,
newNodeColIdx
);
newNodeId = getNodeId(level, newNodeMatIdx, newNodeRowIdx, newNodeColIdx);
while (!isNodeVisible(newNodeId, unlockedNodes)) {
if (triedRows.length < 3) {
@ -266,12 +309,13 @@ const findNode = (
const nodeSelector = (context: NodeSelectorContext) => {
let newNodeData;
const move = context.keyPress.toLowerCase();
let move;
switch (context.keyPress) {
case "LEFT":
case "RIGHT":
newNodeData = findNode(
switch (context.action) {
case "site_left":
case "site_right":
move = context.action === "site_left" ? "left" : "right";
newNodeData = findNodeHorizontal(
move,
context.unlockedNodes,
context.level,
@ -285,7 +329,8 @@ const nodeSelector = (context: NodeSelectorContext) => {
const siteRotYModifier = move === "left" ? Math.PI / 4 : -Math.PI / 4;
return {
event: didMove ? `move_${move}` : "change_node",
event: didMove ? context.action : "change_node",
newActiveNodeId: newNodeData.newNodeId,
newNodeMatIdx: newNodeData.newNodeMatIdx,
newNodeRowIdx: newNodeData.newNodeRowIdx,
newNodeColIdx: newNodeData.newNodeColIdx,
@ -297,8 +342,10 @@ const nodeSelector = (context: NodeSelectorContext) => {
};
}
break;
case "DOWN":
case "UP":
case "site_up":
case "site_down":
move = context.action === "site_up" ? "up" : "down";
newNodeData = findNodeVertical(
move,
context.unlockedNodes,
@ -312,7 +359,8 @@ const nodeSelector = (context: NodeSelectorContext) => {
const didMove = context.level !== newNodeData.newLevel;
const sitePosYModifier = move === "up" ? -1.5 : 1.5;
return {
event: didMove ? `move_${move}` : "change_node",
event: didMove ? context.action : "change_node",
newActiveNodeId: newNodeData.newNodeId,
newNodeMatIdx: context.nodeMatIdx,
newNodeRowIdx: newNodeData.newNodeRowIdx,
newNodeColIdx: newNodeData.newNodeColIdx,
@ -324,6 +372,25 @@ const nodeSelector = (context: NodeSelectorContext) => {
};
}
break;
case "select_level":
newNodeData = findNodeAfterLevelSelection(
context.unlockedNodes,
context.level,
context.nodeMatIdx,
context.nodeRowIdx,
context.nodeColIdx
);
if (newNodeData) {
return {
newActiveNodeId: newNodeData.newNodeId,
newNodeMatIdx: context.nodeMatIdx,
newNodeRowIdx: newNodeData.newNodeRowIdx,
newNodeColIdx: newNodeData.newNodeColIdx,
newSitePosY: newNodeData.newSitePosY,
newLevel: newNodeData.newLevel,
};
}
}
};

10
src/store.ts
View file

@ -13,10 +13,9 @@ type PauseState = {
};
type LevelSelectionState = {
availableLevels: number[];
selectedLevelIdx: number;
selectedLevel: number;
levelSelectionToggled: number;
setSelectedLevelIdx: (to: number) => void;
setSelectedLevel: (to: number) => void;
toggleLevelSelection: () => void;
};
@ -471,10 +470,9 @@ export const useGateStore = create<GateState>((set) => ({
}));
export const useLevelSelectionStore = create<LevelSelectionState>((set) => ({
availableLevels: Array.from({ length: 24 }, (x, i) => i + 1),
selectedLevelIdx: 3,
selectedLevel: 4,
levelSelectionToggled: 0,
setSelectedLevelIdx: (to) => set(() => ({ selectedLevelIdx: to })),
setSelectedLevel: (to) => set(() => ({ selectedLevel: to })),
toggleLevelSelection: () =>
set((state) => ({
levelSelectionToggled: Number(!state.levelSelectionToggled),