Separated display and room characteristics: updated context, created default value

src/constants.ts

@@ -1,3 +1,4 @@
+import { ContextData } from "./types/context";
 import { PeriodFormat } from "./types/time";
 
 export const lessonPeriods: readonly PeriodFormat[] = [
@@ -18,3 +19,18 @@ export const WeekDays = [
   "Saturday",
   "Sunday",
 ] as const;
+
+// It will look like Windows 11 logo, lol
+export const defaultState: ContextData = {
+  map: [
+    { x: 5, y: 5 },
+    { x: 110, y: 5 },
+    { x: 5, y: 110 },
+    { x: 110, y: 110 },
+  ].map((coordinates) => ({ coordinates, size: { w: 100, h: 100 } })),
+  char: Array(4)
+    .fill(0)
+    .map(() => ({
+      free: true,
+    })),
+};

src/context.tsx

@@ -1,12 +1,11 @@
 import { createContext, FC, useContext, useState } from "react";
-import { ContextData, ContextValue } from "./types";
+import { defaultState } from "./constants";
-
+import { ContextData, ContextValue } from "./types/context";
-const defaultState: ContextData = { x: 0 };
 
 const Context = createContext<ContextValue | undefined>(undefined);
 
 export const RoomContextProvider: FC = ({ children }) => {
-  const [state, setState] = useState(defaultState);
+  const [state, setState] = useState<ContextData>(defaultState);
 
   return (
     <Context.Provider value={{ state, setState }}>{children}</Context.Provider>

src/types/context.ts

@@ -1,10 +1,12 @@
 import { Dispatch, SetStateAction } from "react";
+import { RoomDisplay, RoomState } from "./room";
 
 export interface ContextData {
-  // TODO: describe state
+  map: RoomDisplay[];
+  char: RoomState[];
 }
 
-export interface ContextValue {
+export type ContextValue = {
   state: ContextData;
   setState: Dispatch<SetStateAction<ContextData>>;
-}
+};

src/types/room.ts

@@ -1,5 +1,8 @@
-export type RoomT = {
+export interface RoomDisplay {
   coordinates: { x: number; y: number };
   size: { w: number; h: number };
+}
+
+export interface RoomState {
   free: boolean;
-};
+}