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[];
}