Cgb

.eslintrc.js

@@ -1,22 +1,37 @@
 module.exports = {
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
   env: {
     browser: true,
     es2021: true
   },
   extends: [
     'plugin:react/recommended',
     'standard-with-typescript',
-    'plugin:react-hooks/recommended'
+    'plugin:react-hooks/recommended',
+    'prettier'
   ],
   overrides: [],
   parserOptions: {
     ecmaVersion: 'latest',
-    sourceType: 'module'
+    sourceType: 'module',
+    project: ['./tsconfig.json'] // Specify it only for TypeScript files
   },
   plugins: ['react', 'react-hooks'],
   rules: {
     'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn'
+    'react-hooks/exhaustive-deps': 'error',
+    '@typescript-eslint/consistent-type-imports': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    'no-extra-boolean-cast': 'off',
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+    '@typescript-eslint/no-confusing-void-expression': 'off',
+    '@typescript-eslint/no-misused-promises': 'off'
   }
   // eslint-disable-next-line semi
 };

Cargo.toml

@@ -11,6 +11,7 @@ crate-type = ["cdylib", "rlib"]
 
 [dependencies]
 bitfield = "0.14.0"
+console_error_panic_hook = "0.1.7"
 console_log = { version = "1", features = ["color"] }
 # ggez = "0.9.0-rc0"
 log = "0.4.17"
@@ -21,4 +22,4 @@ wasm-bindgen = "0.2.84"
 wee_alloc = "0.4.5"
 
 [package.metadata.wasm-pack.profile.release]
-wasm-opt = ["-Oz", "--enable-mutable-globals"]
+wasm-opt = ["-Oz", "--enable-mutable-globals"]

README.md

@@ -2,4 +2,13 @@
 Gameboy emulator written in Rust
 
 [![Actions Status](https://github.com/caklimas/rust-gameboy/workflows/Unit%20Tests/badge.svg)](https://github.com/caklimas/rust-gameboy/actions)
-[![Actions Status](https://github.com/caklimas/rust-gameboy/workflows/Deployment/badge.svg)](https://github.com/caklimas/rust-gameboy/actions)
+[![Actions Status](https://github.com/caklimas/rust-gameboy/workflows/Deployment/badge.svg)](https://github.com/caklimas/rust-gameboy/actions)
+
+## Running Locally
+Run the following commands
+
+1. `cd src`
+2. `wasm-pack build`
+3. `cd ..`
+4. `yarn`
+5. `yarn start:dev`

js/components/App/App.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { Gameboy } from '../Gameboy/Gameboy';
-import RomLoader from '../RomLoader/RomLoader';
+import { RomLoader } from '../RomLoader/RomLoader';
 
 const StyledApp = styled.div`
   background-color: black;

js/components/Controls/AbButtons/AbButtons.tsx

@@ -1,17 +1,16 @@
-import { connect } from "react-redux";
-import styled from "styled-components";
-import { getInput } from "../../../helpers/input";
-import { State } from "../../../redux/state/state";
-import { ButtonState } from "../../../redux/state/buttons";
-import { setButtons } from "../../../redux/actions/buttons";
-import { DirectionState } from "../../../redux/state/direction";
-import { RustGameboy } from "../../../redux/state/rustGameboy";
-import ControlButton from "../ControlButton/ControlButton";
-import { mediaMinMd } from "../../../constants/screenSizes";
-import GridCell from "../../GridCell/GridCell";
-import { Emulator } from "gameboy";
-
-type Props = StateProps & DispatchProps;
+import { Emulator } from 'gameboy';
+import { useSelector, useDispatch } from 'react-redux';
+import { useCallback } from 'react';
+import styled from 'styled-components';
+import { getInput } from '../../../helpers/input';
+import { State } from '../../../redux/state/state';
+import { ButtonState } from '../../../redux/state/buttons';
+import { setButtons } from '../../../redux/actions/buttons';
+import { DirectionState } from '../../../redux/state/direction';
+import { RustGameboy } from '../../../redux/state/rustGameboy';
+import ControlButton from '../ControlButton/ControlButton';
+import { mediaMinMd } from '../../../constants/screenSizes';
+import GridCell from '../../GridCell/GridCell';
 
 interface StateProps {
   buttons: ButtonState;
@@ -20,11 +19,7 @@ interface StateProps {
   rustGameboy: RustGameboy;
 }
 
-interface DispatchProps {
-  setButtons(buttons: ButtonState): void;
-}
-
-type ButtonKey = "a" | "b";
+type ButtonKey = 'a' | 'b';
 
 const StyledAbControls = styled.div`
   bottom: 90px;
@@ -40,60 +35,65 @@ const StyledAbControls = styled.div`
   }
 `;
 
-const AbButtons = (props: Props) => {
+export function AbButtons() {
+  const dispatch = useDispatch();
+  const stateProps = useSelector<State, StateProps>((state) => ({
+    buttons: state.buttons,
+    direction: state.direction,
+    emulator: state.gameboy.emulator!,
+    rustGameboy: state.rustGameboy
+  }));
+
+  const handleTouch = useCallback(
+    (
+      _e: React.TouchEvent<HTMLElement>,
+      buttonKey: ButtonKey,
+      pressed: boolean
+    ) => {
+      const updatedState = { ...stateProps.buttons, [buttonKey]: pressed };
+      const input = getInput(
+        stateProps.rustGameboy,
+        updatedState,
+        stateProps.direction
+      );
+      dispatch(setButtons(updatedState));
+      stateProps.emulator.update_controls(input);
+
+      if (pressed) {
+        window.navigator.vibrate(10);
+      }
+    },
+    [
+      dispatch,
+      stateProps.buttons,
+      stateProps.direction,
+      stateProps.emulator,
+      stateProps.rustGameboy
+    ]
+  );
+
   return (
     <StyledAbControls>
       <GridCell column={2} row={1}>
         <ControlButton
-          pressed={props.buttons.a}
+          pressed={stateProps.buttons.a}
           text="A"
           type="circle"
-          onTouchStart={(e) => handleTouch(e, props, "a", true)}
-          onTouchEnd={(e) => handleTouch(e, props, "a", false)}
-          onTouchCancel={(e) => handleTouch(e, props, "a", false)}
+          onTouchStart={(e) => handleTouch(e, 'a', true)}
+          onTouchEnd={(e) => handleTouch(e, 'a', false)}
+          onTouchCancel={(e) => handleTouch(e, 'a', false)}
         />
       </GridCell>
       <GridCell column={1} row={2}>
         <ControlButton
-          pressed={props.buttons.b}
+          pressed={stateProps.buttons.b}
           text="B"
           type="circle"
-          onTouchStart={(e) => handleTouch(e, props, "b", true)}
-          onTouchEnd={(e) => handleTouch(e, props, "b", false)}
-          onTouchCancel={(e) => handleTouch(e, props, "b", false)}
+          onTouchStart={(e) => handleTouch(e, 'b', true)}
+          onTouchEnd={(e) => handleTouch(e, 'b', false)}
+          onTouchCancel={(e) => handleTouch(e, 'b', false)}
         />
       </GridCell>
     </StyledAbControls>
   );
-};
-
-const handleTouch = (
-  e: React.TouchEvent<HTMLElement>,
-  props: Props,
-  buttonKey: ButtonKey,
-  pressed: boolean
-) => {
-  const updatedState = { ...props.buttons, [buttonKey]: pressed };
-  const input = getInput(props.rustGameboy, updatedState, props.direction);
-  props.setButtons(updatedState);
-  props.emulator.update_controls(input);
-
-  if (pressed) {
-    window.navigator.vibrate(10);
-  }
-};
-
-const mapStateToProps = (state: State): StateProps => {
-  return {
-    buttons: state.buttons,
-    direction: state.direction,
-    emulator: state.gameboy.emulator!,
-    rustGameboy: state.rustGameboy,
-  };
-};
-
-const mapDispatchToProps = (dispatch: any): DispatchProps => ({
-  setButtons: (buttons: ButtonState) => dispatch(setButtons(buttons)),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(AbButtons);
+}

js/components/Controls/AllButtons/AllButtons.tsx

@@ -1,14 +1,13 @@
-import { Emulator } from "gameboy";
-import { connect } from "react-redux";
-import { getInput } from "../../../helpers/input";
-import { setButtons } from "../../../redux/actions/buttons";
-import { ButtonState } from "../../../redux/state/buttons";
-import { DirectionState } from "../../../redux/state/direction";
-import { RustGameboy } from "../../../redux/state/rustGameboy";
-import { State } from "../../../redux/state/state";
-import ControlButton from "../ControlButton/ControlButton";
-
-type Props = StateProps & DispatchProps;
+import { Emulator } from 'gameboy';
+import { useDispatch, useSelector } from 'react-redux';
+import { getInput } from '../../../helpers/input';
+import { setButtons } from '../../../redux/actions/buttons';
+import { ButtonState } from '../../../redux/state/buttons';
+import { DirectionState } from '../../../redux/state/direction';
+import { RustGameboy } from '../../../redux/state/rustGameboy';
+import { State } from '../../../redux/state/state';
+import ControlButton from '../ControlButton/ControlButton';
+import { useCallback } from 'react';
 
 interface StateProps {
   buttons: ButtonState;
@@ -17,53 +16,53 @@ interface StateProps {
   rustGameboy: RustGameboy;
 }
 
-interface DispatchProps {
-  setButtons(buttons: ButtonState): void;
-}
+export function AllButtons() {
+  const dispatch = useDispatch();
+  const stateProps = useSelector<State, StateProps>((state) => ({
+    buttons: state.buttons,
+    direction: state.direction,
+    emulator: state.gameboy.emulator!,
+    rustGameboy: state.rustGameboy
+  }));
 
-const mapStateToProps = (state: State): StateProps => ({
-  buttons: state.buttons,
-  direction: state.direction,
-  emulator: state.gameboy.emulator!,
-  rustGameboy: state.rustGameboy,
-});
+  const handleTouch = useCallback(
+    (e: React.TouchEvent<HTMLElement>, pressed: boolean) => {
+      const updatedState = {
+        ...stateProps.buttons,
+        a: pressed,
+        b: pressed,
+        start: pressed,
+        select: pressed
+      };
+      const input = getInput(
+        stateProps.rustGameboy,
+        updatedState,
+        stateProps.direction
+      );
+      dispatch(setButtons(updatedState));
+      stateProps.emulator.update_controls(input);
 
-const mapDispatchToProps = (dispatch: any): DispatchProps => ({
-  setButtons: (buttons: ButtonState) => dispatch(setButtons(buttons)),
-});
+      if (pressed) {
+        window.navigator.vibrate(10);
+      }
+    },
+    [
+      dispatch,
+      stateProps.buttons,
+      stateProps.direction,
+      stateProps.emulator,
+      stateProps.rustGameboy
+    ]
+  );
 
-const AllButtons = (props: Props) => {
   return (
     <ControlButton
       pressed={false}
       text="All"
       type="start-select"
-      onTouchStart={(e) => handleTouch(e, props, true)}
-      onTouchEnd={(e) => handleTouch(e, props, false)}
-      onTouchCancel={(e) => handleTouch(e, props, false)}
+      onTouchStart={(e) => handleTouch(e, true)}
+      onTouchEnd={(e) => handleTouch(e, false)}
+      onTouchCancel={(e) => handleTouch(e, false)}
     />
   );
-};
-
-const handleTouch = (
-  e: React.TouchEvent<HTMLElement>,
-  props: Props,
-  pressed: boolean
-) => {
-  const updatedState = {
-    ...props.buttons,
-    a: pressed,
-    b: pressed,
-    start: pressed,
-    select: pressed,
-  };
-  const input = getInput(props.rustGameboy, updatedState, props.direction);
-  props.setButtons(updatedState);
-  props.emulator.update_controls(input);
-
-  if (pressed) {
-    window.navigator.vibrate(10);
-  }
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(AllButtons);
+}

js/components/Controls/ControlButton/ControlButton.tsx

@@ -1,7 +1,7 @@
-import styled from "styled-components";
-import Button from "react-bootstrap/Button";
+import styled from 'styled-components';
+import Button from 'react-bootstrap/Button';
 
-type ButtonType = "circle" | "directional" | "start-select";
+type ButtonType = 'circle' | 'directional' | 'start-select';
 
 const StyledButton = styled(Button)`
   font-size: 15px;
@@ -38,21 +38,19 @@ const ControlButton = ({
   text,
   onTouchStart,
   onTouchEnd,
-  onTouchCancel,
+  onTouchCancel
 }: Props) => {
   const getVariant = (pressed: boolean): string =>
-    pressed ? "primary" : "secondary";
+    pressed ? 'primary' : 'secondary';
 
   const getButtonComponent = () => {
     switch (type) {
-      case "circle":
+      case 'circle':
         return CircleButton;
-      case "directional":
+      case 'directional':
         return DirectionalButton;
-      case "start-select":
+      case 'start-select':
         return StartSelectButton;
-      default:
-        throw new Error(`Invalid button type ${type}`);
     }
   };