New game button

src/components/GameController.js

@@ -70,6 +70,14 @@ export const GameController = ({ availableItemList, boardConfig }) => {
     [c2c]
   );
 
+  const newGame = React.useCallback(() => {
+    loadGame({
+      items: [],
+      availableItems: [],
+      board: { size: 1000, scale: 0.5 },
+    });
+  }, [loadGame]);
+
   const loadTikTok = React.useCallback(() => {
     tiktok.availableItems = [];
     loadGame(tiktok);
@@ -141,6 +149,7 @@ export const GameController = ({ availableItemList, boardConfig }) => {
   return (
     <LeftPane>
       <Title onClick={logGame}>{t("Games")}</Title>
+      <button onClick={newGame}>New Game</button>
       <button onClick={loadTestGame}>Test Game</button>
       <button onClick={loadTikTok}>TikTok</button>
       <button onClick={loadCard}>Card</button>

src/components/NewItems.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import { useItems } from "../components/Board/Items";
 import { nanoid } from "nanoid";
 import { useTranslation } from "react-i18next";
@@ -14,7 +14,7 @@ const itemTemplates = {
   dice: {},
 };
 
-const NewItem = ({ type }) => {
+const NewItem = memo(({ type }) => {
   const { t } = useTranslation();
 
   const { pushItem } = useItems();
@@ -35,7 +35,9 @@ const NewItem = ({ type }) => {
       {t(type)}
     </button>
   );
-};
+});
+
+NewItem.displayName = "NewItem";
 
 const NewItems = () => {
   return (
@@ -49,4 +51,4 @@ const NewItems = () => {
   );
 };
 
-export default NewItems;
+export default memo(NewItems);