Game Logic

.gitignore

@@ -1,4 +1,6 @@
 node_modules/
 yarn-error.log
 
-/public/
+/public/
+
+/.cache/

.storybook/webpack.config.js

@@ -1,13 +1,8 @@
+const { rules } = require('../webpack.custom');
+
 module.exports = ({ config }) => {
   config.module.rules.push(
-    {
-      test: /\.(ts|tsx)$/,
-      use: [
-        {
-          loader: require.resolve('awesome-typescript-loader'),
-        },
-      ],
-    },
+    ...rules,
     {
       test: /\.scss$/,
       loaders: [
@@ -22,7 +17,7 @@ module.exports = ({ config }) => {
         },
         require.resolve('sass-loader')
       ],
-    }
+    },
   );
   config.resolve.extensions.push('.ts', '.tsx');
   return config;

gatsby-config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  siteMetadata: {
+    title: `Revier-Derby`,
+  },
+  plugins: [
+    'gatsby-plugin-sass',
+  ],
+};

gatsby-node.js

@@ -0,0 +1,13 @@
+const { rules } = require('./webpack.custom');
+
+exports.onCreateWebpackConfig = ({
+  actions,
+}) => {
+  actions.setWebpackConfig({
+    module: {
+      rules,
+    },
+  })
+}
+
+exports.resolvableExtensions = () => [`.ts`, `.tsx`];

package.json

@@ -11,10 +11,14 @@
     "apollo-client": "^2.6.3",
     "apollo-link-http": "^1.5.15",
     "classnames": "^2.2.6",
+    "gatsby": "^2.13.6",
     "graphql": "^14.4.2",
     "graphql-tag": "^2.10.1",
+    "isomorphic-fetch": "^2.2.1",
     "node-sass": "^4.12.0",
-    "react": "^16.8.6"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-helmet": "^5.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.5.0",
@@ -27,13 +31,17 @@
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.0.0",
+    "gatsby-plugin-sass": "^2.1.0",
+    "npm-run-all": "^4.1.5",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "typescript": "^3.5.2"
   },
   "scripts": {
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -o public --quiet",
-    "build": "yarn build-storybook"
+    "build-storybook": "build-storybook -o public/components --quiet",
+    "start": "gatsby develop",
+    "build-gatsby": "gatsby build",
+    "build": "run-p --aggregate-output -n build-storybook build-gatsby"
   }
 }

src/assets/categories.ts

@@ -1,8 +1,20 @@
+import CompareArrows from '@material-ui/icons/CompareArrows';
+import EuroSymbol from '@material-ui/icons/EuroSymbol';
+import LocalFlorist from '@material-ui/icons/LocalFlorist';
+import LocalHospital from '@material-ui/icons/LocalHospital';
+
 export const categories = {
-    "arbeit-wirtschaft": "Arbeit & Wirtschaft",
-    "bildung": "Bildung",
-    "gesundheit": "Gesundheit",
-    "umwelt": "Umwelt",
+  "arbeit-wirtschaft": "Arbeit & Wirtschaft",
+  "bildung": "Bildung",
+  "gesundheit": "Gesundheit",
+  "umwelt": "Umwelt",
 };
 
+export const categoryIcons = {
+  "arbeit-wirtschaft": CompareArrows,
+  "bildung": LocalFlorist,
+  "gesundheit": EuroSymbol,
+  "umwelt": LocalHospital,
+}
+
 export type Category = keyof typeof categories;

src/components/playerCard.jsx

@@ -6,6 +6,7 @@ import Avatar from "@material-ui/core/es/Avatar";
 import Typography from "@material-ui/core/es/Typography";
 
 import unicoat from "../assets/unicoat.png";
+import { locationsMap } from "../assets/locations";
 import styles from "./playerCard.module.scss";
 
 const PlayerCard = ({ player }) => (
@@ -16,8 +17,8 @@ const PlayerCard = ({ player }) => (
         {player.name}
       </Typography>
     </Grid>
-    <img className={styles.crest} src={unicoat} />
-    <Typography variant="h5">{player.location}</Typography>
+    <img className={styles.crest} src={unicoat} alt="" />
+    <Typography variant="h5">{locationsMap[player.location]}</Typography>
   </Paper>
 );
 

src/components/playerStatus.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import Grid from "@material-ui/core/es/Grid";
-import Avatar from "@material-ui/core/es/Avatar";
 import Typography from "@material-ui/core/es/Typography";
 import * as classNames from "classnames";
 

src/hooks/actions.ts

@@ -0,0 +1,119 @@
+import { User, QuestionMeta, Result } from './controller';
+import { Category } from '../assets/categories';
+
+interface ResetAction {
+    type: "RESET",
+}
+interface SetUserAction {
+    type: "SET_USER",
+    payload: User,
+}
+interface SetOpponentAction {
+    type: "SET_OPPONENT",
+    payload: User,
+}
+interface NextStepAction {
+    type: "NEXT_STEP",
+}
+interface StartRoundAction {
+    type: "START_ROUND",
+}
+interface StartGameAction {
+    type: "START_GAME",
+}
+interface SetCategoryAction {
+    type: "SET_CATEGORY",
+    payload: Category,
+}
+interface SetQuestionAction {
+    type: "SET_QUESTION",
+    payload: QuestionMeta,
+}
+interface SetAnswerAction {
+    type: "SET_ANSWER",
+    payload: string,
+}
+interface SetResultAction {
+    type: "SET_RESULT",
+    payload: Result,
+}
+interface AddPointsAction {
+    type: "ADD_POINTS",
+    payload: boolean,
+}
+
+export type Action =
+    | ResetAction
+    | NextStepAction
+    | StartGameAction
+    | StartRoundAction
+    | SetUserAction
+    | SetOpponentAction
+    | SetCategoryAction
+    | SetQuestionAction
+    | SetAnswerAction
+    | SetResultAction
+    | AddPointsAction;
+
+export const createActions = (dispatch: (action: Action) => void) => {
+    const resetData = () => dispatch({ type: "RESET" });
+
+    const setUser = (name: string, location: string) => {
+        dispatch({
+            type: "SET_USER",
+            payload: { name, location },
+        });
+    };
+
+    const setOpponent = (name: string, location: string) => {
+        dispatch({
+            type: "SET_OPPONENT",
+            payload: { name, location },
+        });
+    }
+
+    const setCategory = (category: Category) => {
+        dispatch({
+            type: "SET_CATEGORY",
+            payload: category,
+        });
+    }
+
+    const setQuestion = (question: QuestionMeta) => {
+        dispatch({
+            type: "SET_QUESTION",
+            payload: question,
+        });
+    }
+
+    const setResult = (result: Result) => {
+        dispatch({
+            type: "SET_RESULT",
+            payload: result,
+        })
+    }
+
+    const addPoints = (won: boolean) => {
+        dispatch({
+            type: "ADD_POINTS",
+            payload: won,
+        });
+    }
+
+    const nextStep = () => dispatch({ type: "NEXT_STEP" });
+    const startRound = () => dispatch({ type: "START_ROUND" });
+    const startGame = () => dispatch({ type: "START_GAME" });
+
+    return {
+        resetData,
+        nextStep,
+        startGame,
+        startRound,
+        setCategory,
+        setUser,
+        setOpponent,
+        setQuestion,
+        setResult,
+        addPoints,
+    }
+};