add loading state and refactor

.eslintrc

@@ -18,5 +18,7 @@
     sourceType: "module",
   },
   plugins: ["react", "@typescript-eslint"],
-  rules: {},
+  rules: {
+    "@typescript-eslint/explicit-module-boundary-types": 0
+  },
 }

components/board.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { DragDropContext, DropResult } from "react-beautiful-dnd";
+import { GameState } from "../types/game";
+import useAutoMoveSensor from "../lib/useAutoMoveSensor";
+import { checkCorrect, getRandomItem, preloadImage } from "../lib/items";
+import NextItemList from "./next-item-list";
+import PlayedItemList from "./played-item-list";
+import styles from "../styles/board.module.scss";
+
+interface Props {
+  state: GameState;
+  setState: (state: GameState) => void;
+}
+
+export default function Board(props: Props) {
+  const { state, setState } = props;
+
+  async function onDragEnd(result: DropResult) {
+    const { source, destination } = result;
+
+    if (
+      !destination ||
+      state.next === null ||
+      (source.droppableId === "next" && destination.droppableId === "next")
+    ) {
+      return;
+    }
+
+    const item = { ...state.next };
+
+    if (source.droppableId === "next" && destination.droppableId === "played") {
+      const newDeck = [...state.deck];
+      const newPlayed = [...state.played];
+      const newNext = state.nextButOne;
+      const newNextButOne = getRandomItem(newDeck, newPlayed);
+      const newImageCache = [preloadImage(newNextButOne.image)];
+
+      const { correct, delta } = checkCorrect(
+        newPlayed,
+        item,
+        destination.index
+      );
+      newPlayed.splice(destination.index, 0, {
+        ...state.next,
+        played: { correct },
+      });
+
+      setState({
+        ...state,
+        deck: newDeck,
+        imageCache: newImageCache,
+        next: newNext,
+        nextButOne: newNextButOne,
+        played: newPlayed,
+        badlyPlaced: correct
+          ? null
+          : {
+              index: destination.index,
+              rendered: false,
+              delta,
+            },
+      });
+    } else if (
+      source.droppableId === "played" &&
+      destination.droppableId === "played"
+    ) {
+      const newPlayed = [...state.played];
+      const [item] = newPlayed.splice(source.index, 1);
+      newPlayed.splice(destination.index, 0, item);
+
+      setState({
+        ...state,
+        played: newPlayed,
+        badlyPlaced: null,
+      });
+    }
+  }
+
+  // Ensure that newly placed items are rendered as draggables before trying to
+  // move them to the right place if needed.
+  React.useLayoutEffect(() => {
+    if (
+      state.badlyPlaced &&
+      state.badlyPlaced.index !== null &&
+      !state.badlyPlaced.rendered
+    ) {
+      setState({
+        ...state,
+        badlyPlaced: { ...state.badlyPlaced, rendered: true },
+      });
+    }
+  }, [setState, state]);
+
+  console.log(state);
+
+  return (
+    <DragDropContext
+      onDragEnd={onDragEnd}
+      onDragUpdate={() => {
+        setTimeout(() => {
+          // debugger;
+        }, 1000);
+      }}
+      sensors={[useAutoMoveSensor.bind(null, state)]}
+    >
+      <div className={styles.wrapper}>
+        <div className={styles.top}>
+          <NextItemList next={state.next} />
+        </div>
+        <div id="bottom" className={styles.bottom}>
+          <PlayedItemList
+            badlyPlacedIndex={
+              state.badlyPlaced === null ? null : state.badlyPlaced.index
+            }
+            items={state.played}
+          />
+        </div>
+      </div>
+    </DragDropContext>
+  );
+}