feat: stub out game components

Author: KatoakDR

electron/renderer/components/game-bottom-bar/game-bottom-bar.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+export interface GameBottomBarProps {
+  // TODO
+}
+
+export const GameBottomBar: React.FC<GameBottomBarProps> = (
+  props: GameBottomBarProps
+): ReactNode => {
+  return <></>;
+};
+
+GameBottomBar.displayName = 'GameBottomBar';

electron/renderer/components/game-bottom-bar/index.ts

@@ -0,0 +1 @@
+export * from './game-bottom-bar';

electron/renderer/components/game-container/game-container.tsx

@@ -0,0 +1,35 @@
+import { type ReactNode, useState } from 'react';
+import { GameProvider } from '../../context/game';
+import { GameBottomBar } from '../game-bottom-bar';
+import { GameGrid } from '../game-grid';
+import { GameSettings } from '../game-settings';
+import { GameTopBar } from '../game-top-bar';
+
+export interface GameContainerProps {
+  // TODO
+}
+
+export const GameContainer: React.FC<GameContainerProps> = (
+  props: GameContainerProps
+): ReactNode => {
+  const [showSettings, setShowSettings] = useState<boolean>(true);
+
+  return (
+    <GameProvider>
+      <GameTopBar />
+      <GameGrid />
+      <GameBottomBar />
+      <GameSettings
+        show={showSettings}
+        onHide={() => {
+          setShowSettings(false);
+          // setTimeout(() => {
+          //   setShowSettings(true);
+          // }, 10_000);
+        }}
+      />
+    </GameProvider>
+  );
+};
+
+GameContainer.displayName = 'GameContainer';

electron/renderer/components/game-container/index.ts

@@ -0,0 +1 @@
+export * from './game-container';

electron/renderer/components/game-grid/game-grid.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import GridPage from '../../pages/grid';
+
+export interface GameGridProps {
+  // TODO
+}
+
+export const GameGrid: React.FC<GameGridProps> = (
+  props: GameGridProps
+): ReactNode => {
+  return <GridPage />;
+};
+
+GameGrid.displayName = 'GameGrid';

electron/renderer/components/game-grid/index.ts

@@ -0,0 +1 @@
+export * from './game-grid';

electron/renderer/components/game-settings/game-settings.tsx

@@ -0,0 +1,43 @@
+import {
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiTitle,
+} from '@elastic/eui';
+import { type ReactNode, useEffect, useState } from 'react';
+
+export interface GameSettingsProps {
+  show: boolean;
+  onHide: () => void;
+}
+
+export const GameSettings: React.FC<GameSettingsProps> = (
+  props: GameSettingsProps
+): ReactNode => {
+  const { show, onHide } = props;
+
+  const [settingsPanel, setSettingsPanel] = useState<ReactNode>(null);
+
+  useEffect(() => {
+    if (show) {
+      setSettingsPanel(
+        <EuiFlyout side="left" onClose={() => onHide()}>
+          <EuiFlyoutHeader hasBorder={true}>
+            <EuiTitle>
+              <h2>Settings</h2>
+            </EuiTitle>
+          </EuiFlyoutHeader>
+          <EuiFlyoutBody>stuff here</EuiFlyoutBody>
+        </EuiFlyout>
+      );
+    } else {
+      // In order for the flyout overlay to go away then we must
+      // remove the flyout from the DOM.
+      setSettingsPanel(null);
+    }
+  }, [show, onHide]);
+
+  return settingsPanel;
+};
+
+GameSettings.displayName = 'GameSettings';

electron/renderer/components/game-settings/index.ts

@@ -0,0 +1 @@
+export * from './game-settings';

electron/renderer/components/game-top-bar/game-top-bar.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+export interface GameTopBarProps {
+  // TODO
+}
+
+export const GameTopBar: React.FC<GameTopBarProps> = (
+  props: GameTopBarProps
+): ReactNode => {
+  return <></>;
+};
+
+GameTopBar.displayName = 'GameTopBar';

electron/renderer/components/game-top-bar/index.ts

@@ -0,0 +1 @@
+export * from './game-top-bar';