first commit

components/draughts/settings/DraughtsSettingsContext.jsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useDisclosure } from '@chakra-ui/react';
+import { ComputerDifficulty } from './constants/computer-difficulty';
+import { Players } from '@draughts/core';
+
+export const DraughtsSettingsContext = createContext();
+
+export const useDraughtsSettings = () => useContext(DraughtsSettingsContext);
+
+export function DraughtsSettingsProvider(props) {
+  const settingsModal = useDisclosure();
+
+  const [userPlayer, setUserPlayer] = useState(props.userPlayer);
+  const [computerDifficulty, setComputerDifficulty] = useState(
+    props.computerDifficulty
+  );
+
+  const updateSettings = (newSettings) => {
+    setUserPlayer(newSettings.userPlayer);
+    setComputerDifficulty(newSettings.computerDifficulty);
+  };
+
+  return (
+    <DraughtsSettingsContext.Provider
+      value={{ computerDifficulty, settingsModal, updateSettings, userPlayer }}
+    >
+      {props.children}
+    </DraughtsSettingsContext.Provider>
+  );
+}
+
+export const DraughtsSettingsProviderProps = {
+  computerDifficulty: PropTypes.oneOf(Object.values(ComputerDifficulty)),
+  userPlayer: PropTypes.oneOf(Object.values(Players)),
+};
+
+DraughtsSettingsProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  ...DraughtsSettingsProviderProps,
+};

components/draughts/settings/constants/computer-difficulty.js

@@ -0,0 +1,5 @@
+export const ComputerDifficulty = {
+  EASY: 'e',
+  HARD: 'h',
+  MEDIUM: 'm',
+};

components/draughts/settings/views/DraughtsMenu.jsx

@@ -0,0 +1,30 @@
+import { SettingsIcon, RepeatIcon } from '@chakra-ui/icons';
+import { Button, VStack } from '@chakra-ui/react';
+import { useDraughtsGame } from '../../game/DraughtsGameContext';
+import { useDraughtsSettings } from '../DraughtsSettingsContext';
+import { DraughtsSettingsModal } from './DraughtsSettingsModal';
+
+export function DraughtsMenuView() {
+  const { restartGame } = useDraughtsGame();
+  const { settingsModal } = useDraughtsSettings();
+
+  return (
+    <VStack>
+      <DraughtsSettingsModal />
+      <Button
+        onClick={() => settingsModal.onOpen()}
+        rightIcon={<SettingsIcon />}
+        size="xs"
+      >
+        Buka Setting
+      </Button>
+      <Button
+        onClick={() => restartGame()}
+        rightIcon={<RepeatIcon />}
+        size="xs"
+      >
+        Mulai Lagi
+      </Button>
+    </VStack>
+  );
+}

components/draughts/settings/views/DraughtsSettingsModal.jsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import {
+  Modal,
+  Button,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  FormControl,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  HStack,
+  Select,
+  Divider,
+} from '@chakra-ui/react';
+import { useDraughtsGame } from '../../game/DraughtsGameContext';
+import { useDraughtsSettings } from '../DraughtsSettingsContext';
+import { ComputerDifficulty } from '../constants/computer-difficulty';
+import { Players } from '@draughts/core';
+
+export function DraughtsSettingsModal() {
+  const { restartGame } = useDraughtsGame();
+  const {
+    userPlayer,
+    updateSettings,
+    computerDifficulty,
+    settingsModal: { isOpen, onClose },
+  } = useDraughtsSettings();
+
+  const [computerDifficultySelection, setComputerDifficultySelection] =
+    useState(computerDifficulty);
+  const [userPlayerSelection, setUserPlayerSelection] = useState(userPlayer);
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Settings</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <FormControl as="fieldset">
+            <FormLabel as="legend">Pilih Warna</FormLabel>
+            <RadioGroup
+              onChange={setUserPlayerSelection}
+              value={userPlayerSelection}
+            >
+              <HStack>
+                <Radio value={`${Players.WHITE}`}>Putih</Radio>
+                <Radio value={`${Players.BLACK}`}>Hitam</Radio>
+              </HStack>
+            </RadioGroup>
+          </FormControl>
+          <Divider marginY={5} />
+          <FormControl>
+            <FormLabel htmlFor="computerDifficulty">
+              Computer difficulty
+            </FormLabel>
+            <Select
+              id="computerDifficulty"
+              onChange={(event) => {
+                setComputerDifficultySelection(event.target.value);
+              }}
+              value={computerDifficultySelection}
+            >
+              <option value={ComputerDifficulty.EASY}>Easy</option>
+              <option value={ComputerDifficulty.MEDIUM}>Medium</option>
+              <option value={ComputerDifficulty.HARD}>Hard</option>
+            </Select>
+          </FormControl>
+        </ModalBody>
+        <ModalFooter>
+          <Button mr={3} colorScheme="blue" onClick={onClose}>
+            Kembali Ke Permainan
+          </Button>
+          <Button
+            onClick={() => {
+              restartGame();
+              updateSettings({
+                computerDifficulty: computerDifficultySelection,
+                userPlayer: userPlayerSelection,
+              });
+              onClose();
+            }}
+          >
+            Mulai Permainan Baru
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}