diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 018f7fb..f394a5c 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,31 +1,49 @@ +// -*- mode: web; -*- module.exports = { - "env": { - "browser": true, - "es2021": true + env: { + browser: true, + es2021: true, }, - "extends": [ + extends: [ "eslint:recommended", "plugin:react/recommended", "plugin:react/jsx-runtime", "plugin:@typescript-eslint/recommended", - "plugin:@typescript-eslint/recommended-requiring-type-checking" + "plugin:@typescript-eslint/recommended-requiring-type-checking", ], - "overrides": [], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaVersion": "latest", - "sourceType": "module", - "project": "./tsconfig.json", - "tsconfigRootDir": __dirname, + overrides: [], + parser: "@typescript-eslint/parser", + parserOptions: { + ecmaVersion: "latest", + sourceType: "module", + project: "./tsconfig.json", + tsconfigRootDir: __dirname, }, - "plugins": [ - "react", - "@typescript-eslint" - ], - "rules": {}, - "settings": { - "react": { - "version": "detect", + plugins: ["react", "@typescript-eslint"], + // typescript-eslint disables a bunch of rules that tsc would catch, but vite refuses to + // add compiler errors to output, so here we are + rules: { + "constructor-super": "error", + "getter-return": "error", + "no-const-assign": "error", + "no-dupe-args": "error", + "no-dupe-class-members": "error", + "no-dupe-keys": "error", + "no-func-assign": "error", + "no-import-assign": "error", + "no-new-symbol": "error", + "no-obj-calls": "error", + "no-redeclare": "error", + "no-setter-return": "error", + "no-this-before-super": "error", + "no-undef": "error", + "no-unreachable": "error", + "no-unsafe-negation": "error", + "valid-typeof": "error", + }, + settings: { + react: { + version: "detect", }, }, -} +}; diff --git a/src/Display.tsx b/src/Display.tsx index 990dc4f..e88eb92 100644 --- a/src/Display.tsx +++ b/src/Display.tsx @@ -1,15 +1,19 @@ import { useEffect } from "react"; import { Stack, Container } from "react-bootstrap"; +import { isEmpty } from "lodash"; import { socket } from "./socket"; import { useAppSelector } from "./hooks"; import { selectRoomCode } from "./store/socketSlice"; import { selectContestants } from "./store/displaySlice"; +import { selectCategories } from "./store/cluesSlice"; import ContestantWidget from "./ContestantWidget"; +import Gameboard from "./display/Gameboard"; const Display = () => { const roomCode = useAppSelector(selectRoomCode); const contestants = useAppSelector(selectContestants); + const categories = useAppSelector(selectCategories); useEffect(() => { socket.emit("new-game"); @@ -20,6 +24,9 @@ const Display = () => {

Room code is: {roomCode}

+ + {!isEmpty(categories) && } + { + return ( + + + {categories.map(({ name }) => ( + {name} + ))} + + + ); +}; + +export default Gameboard; diff --git a/src/store/cluesSlice.ts b/src/store/cluesSlice.ts index a102ee8..d57988c 100644 --- a/src/store/cluesSlice.ts +++ b/src/store/cluesSlice.ts @@ -6,7 +6,7 @@ interface CluesState { categories: Category[]; } -interface Category { +export interface Category { name: string; clues: Clue[]; }