vite please play nice with eslint

.eslintrc.cjs

@@ -1,31 +1,49 @@
+// -*- mode: web; -*-
 module.exports = {
-  "env": {
+  env: {
-    "browser": true,
+    browser: true,
-    "es2021": 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": [],
+  overrides: [],
-  "parser": "@typescript-eslint/parser",
+  parser: "@typescript-eslint/parser",
-  "parserOptions": {
+  parserOptions: {
-    "ecmaVersion": "latest",
+    ecmaVersion: "latest",
-    "sourceType": "module",
+    sourceType: "module",
-    "project": "./tsconfig.json",
+    project: "./tsconfig.json",
-    "tsconfigRootDir": __dirname,
+    tsconfigRootDir: __dirname,
   },
-  "plugins": [
+  plugins: ["react", "@typescript-eslint"],
-    "react",
+  // typescript-eslint disables a bunch of rules that tsc would catch, but vite refuses to
-    "@typescript-eslint"
+  // add compiler errors to output, so here we are
-  ],
+  rules: {
-  "rules": {},
+    "constructor-super": "error",
-  "settings": {
+    "getter-return": "error",
-    "react": {
+    "no-const-assign": "error",
-      "version": "detect",
+    "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",
     },
   },
-}
+};

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 = () => {
       <Container>
         <h1 className="text-center">Room code is: {roomCode}</h1>
       </Container>
+
+      {!isEmpty(categories) && <Gameboard categories={categories} />}
+
       <Stack
         direction="horizontal"
         gap={10}

src/display/Gameboard.tsx

@@ -0,0 +1,21 @@
+import { Container, Row, Col } from "react-bootstrap";
+
+import type { Category } from "../store/cluesSlice";
+
+interface Props {
+  categories: Category[];
+}
+
+const Gameboard = ({ categories }: Props) => {
+  return (
+    <Container fluid>
+      <Row>
+        {categories.map(({ name }) => (
+          <Col key={name}>{name}</Col>
+        ))}
+      </Row>
+    </Container>
+  );
+};
+
+export default Gameboard;

src/store/cluesSlice.ts

@@ -6,7 +6,7 @@ interface CluesState {
   categories: Category[];
 }
 
-interface Category {
+export interface Category {
   name: string;
   clues: Clue[];
 }