ESLint

frontend/eslint.config.mjs

@@ -0,0 +1,21 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+  {
+    ignores: ["**/generated/**"]
+  },
+  {
+    rules: {
+        "@typescript-eslint/no-unused-vars": [
+            "error",
+            { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+        ],
+        "@typescript-eslint/no-explicit-any": "off",
+    }
+  }
+);

frontend/src/AppStateProvider.tsx

@@ -32,7 +32,7 @@ const appState: State<AppState> = combineState({
   roomName: noPersistence(() => window.location.hash.slice(1, 17)),
   name: stringLocalStorageState("name"),
   changeLogLastViewed: numberLocalStorageState("change_log_last_viewed"),
-  gameState: noPersistence<GameState>(() => null),
+  gameState: noPersistence<GameState | null>(() => null),
   headerMessages: noPersistence<string[]>(() => []),
   errors: noPersistence<string[]>(() => []),
   messages: noPersistence<Message[]>(() => []),

frontend/src/Card.tsx

@@ -148,6 +148,9 @@ const computeCanvasBounds = (font: string, dpr: number): TextMetrics => {
   c.style.display = "none";
   document.body.appendChild(c);
   const ctx = c.getContext("2d");
+  if (ctx === null) {
+    throw new Error("Could not get 2d context");
+  }
   ctx.scale(dpr, dpr);
   ctx.font = font;
   const text = "🂠";

frontend/src/Cards.tsx

@@ -37,7 +37,7 @@ const Cards = (props: IProps): JSX.Element => {
   const handleUnselect = (card: string) => () => {
     if (selectedCards !== undefined) {
       const index = selectedCards.indexOf(card);
-      if (index >= 0) {
+      if (index >= 0 && props.onSelect) {
         props.onSelect(ArrayUtils.minus(selectedCards, [card]));
       }
     }

frontend/src/Chat.tsx

@@ -31,17 +31,19 @@ const Chat = (props: IProps): JSX.Element => {
   const handleSubmit = (message: string): void => send({ Message: message });
 
   return (
-    !settings.hideChatBox && (
-      <div className="chat">
-        <div className="messages">
-          {props.messages.map((m, idx) => (
-            <ChatMessage message={m} key={idx} />
-          ))}
-          <div className="chat-anchor" ref={anchor} />
+    <>
+      {!settings.hideChatBox && (
+        <div className="chat">
+          <div className="messages">
+            {props.messages.map((m, idx) => (
+              <ChatMessage message={m} key={idx} />
+            ))}
+            <div className="chat-anchor" ref={anchor} />
+          </div>
+          <ChatInput onSubmit={handleSubmit} />
         </div>
-        <ChatInput onSubmit={handleSubmit} />
-      </div>
-    )
+      )}
+    </>
   );
 };
 

frontend/src/ChatMessage.tsx

@@ -17,7 +17,7 @@ const renderMessage = (message: Message): JSX.Element => {
     case "MadeBid":
       return (
         <span>
-          {message.data.actor_name} bid{" "}
+          {message.data?.actor_name} bid{" "}
           {ArrayUtil.range(variant.count, (i) => (
             <InlineCard card={variant.card} key={i} />
           ))}
@@ -26,7 +26,7 @@ const renderMessage = (message: Message): JSX.Element => {
     case "PlayedCards":
       return (
         <span>
-          {message.data.actor_name} played{" "}
+          {message.data?.actor_name} played{" "}
           {variant.cards.map((card, i) => (
             <InlineCard card={card} key={i} />
           ))}
@@ -119,11 +119,11 @@ const renderScoringMessage = (message: Message): JSX.Element => {
     }
     return (
       <span>
-        {message.data.actor_name} updated the scoring parameters: {changes}
+        {message.data?.actor_name} updated the scoring parameters: {changes}
       </span>
     );
   } else {
-    return null;
+    return <></>;
   }
 };
 

frontend/src/Confetti.tsx

@@ -37,7 +37,7 @@ const Confetti = (props: IProps): JSX.Element => {
             particleCount: particleCount,
             origin: { x: randomInRange(0.2, 0.8), y: Math.random() - 0.2 },
             angle: randomInRange(65, 115),
-          }).then(
+          })!.then(
             () => {},
             () => {},
           );

frontend/src/DebugInfo.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { AppStateContext } from "./AppStateProvider";
 
-export const DebugInfo = (_props: {}): JSX.Element => {
+export const DebugInfo = (_props: unknown): JSX.Element => {
   const appState = React.useContext(AppStateContext);
 
   return (

frontend/src/Draw.tsx

@@ -151,29 +151,29 @@ class Draw extends React.Component<IDrawProps, IDrawState> {
         />
         <BidArea
           bids={this.props.state.bids}
-          autobid={this.props.state.autobid}
+          autobid={this.props.state.autobid!}
           hands={this.props.state.hands}
           epoch={0}
           name={this.props.name}
           trump={trump}
-          landlord={landlord}
+          landlord={landlord!}
           players={this.props.state.propagated.players}
-          bidPolicy={this.props.state.propagated.bid_policy}
+          bidPolicy={this.props.state.propagated.bid_policy!}
           bidReinforcementPolicy={
-            this.props.state.propagated.bid_reinforcement_policy
+            this.props.state.propagated.bid_reinforcement_policy!
           }
-          jokerBidPolicy={this.props.state.propagated.joker_bid_policy}
+          jokerBidPolicy={this.props.state.propagated.joker_bid_policy!}
           numDecks={this.props.state.num_decks}
           header={
             <>
               <h2>
                 Bids ({this.props.state.deck.length} cards remaining in the
                 deck)
               </h2>
-              {this.props.state.removed_cards.length > 0 ? (
+              {this.props.state.removed_cards!.length > 0 ? (
                 <p>
                   Note:{" "}
-                  {this.props.state.removed_cards.map((c) => (
+                  {this.props.state.removed_cards!.map((c) => (
                     <InlineCard key={c} card={c} />
                   ))}{" "}
                   have been removed from the deck
@@ -212,7 +212,11 @@ class Draw extends React.Component<IDrawProps, IDrawState> {
                   this.props.state.deck.length > 0 ||
                   (this.props.state.bids.length === 0 &&
                     this.props.state.autobid === null &&
-                    !(landlord !== null && players[landlord].level === "NT")) ||
+                    !(
+                      landlord !== null &&
+                      landlord !== undefined &&
+                      players[landlord].level === "NT"
+                    )) ||
                   (landlord !== null && landlord !== playerId) ||
                   (landlord === null &&
                     ((this.props.state.propagated
@@ -235,7 +239,7 @@ class Draw extends React.Component<IDrawProps, IDrawState> {
                   this.props.state.deck.length > 0 ||
                   this.props.state.bids.length > 0 ||
                   this.props.state.autobid !== null ||
-                  this.props.state.revealed_cards >=
+                  (this.props.state.revealed_cards || 0) >=
                     this.props.state.kitty.length ||
                   (landlord !== null &&
                     landlord !== undefined &&

frontend/src/Exchange.tsx

@@ -190,7 +190,7 @@ class Exchange extends React.Component<IExchangeProps, IExchangeState> {
         </>
       ) : null;
 
-    const lastBid = this.props.state.bids[this.props.state.bids.length - 1];
+    const lastBid = this.props.state.bids![this.props.state.bids!.length - 1];
     const startGame = (
       <button
         onClick={this.startGame}
@@ -209,24 +209,24 @@ class Exchange extends React.Component<IExchangeProps, IExchangeState> {
       kittyTheftEnabled &&
       this.props.state.finalized &&
       this.props.state.autobid === null &&
-      (!isExchanger || lastBid.epoch + 1 !== this.props.state.epoch) ? (
+      (!isExchanger || lastBid.epoch! + 1 !== this.props.state.epoch) ? (
         <>
           <BidArea
-            bids={this.props.state.bids}
+            bids={this.props.state.bids!}
             autobid={this.props.state.autobid}
             hands={this.props.state.hands}
-            epoch={this.props.state.epoch}
+            epoch={this.props.state.epoch!}
             name={this.props.name}
-            landlord={this.props.state.propagated.landlord}
+            landlord={this.props.state.propagated.landlord!}
             players={this.props.state.propagated.players}
-            bidPolicy={this.props.state.propagated.bid_policy}
+            bidPolicy={this.props.state.propagated.bid_policy!}
             bidReinforcementPolicy={
-              this.props.state.propagated.bid_reinforcement_policy
+              this.props.state.propagated.bid_reinforcement_policy!
             }
-            jokerBidPolicy={this.props.state.propagated.joker_bid_policy}
+            jokerBidPolicy={this.props.state.propagated.joker_bid_policy!}
             numDecks={this.props.state.num_decks}
             header={
-              <h2>Bids (round {this.props.state.epoch + 1} of bidding)</h2>
+              <h2>Bids (round {this.props.state.epoch! + 1} of bidding)</h2>
             }
             suffixButtons={
               <>
@@ -274,7 +274,7 @@ class Exchange extends React.Component<IExchangeProps, IExchangeState> {
                 friend={friend}
                 trump={this.props.state.trump}
                 friend_selection_policy={
-                  this.props.state.propagated.friend_selection_policy
+                  this.props.state.propagated.friend_selection_policy!
                 }
                 num_decks={this.props.state.num_decks}
               />
@@ -300,10 +300,10 @@ class Exchange extends React.Component<IExchangeProps, IExchangeState> {
           name={this.props.name}
         />
         <Trump trump={this.props.state.trump} />
-        {this.props.state.removed_cards.length > 0 ? (
+        {(this.props.state.removed_cards || []).length > 0 ? (
           <p>
             Note:{" "}
-            {this.props.state.removed_cards.map((c) => (
+            {(this.props.state.removed_cards || []).map((c) => (
               <InlineCard key={c} card={c} />
             ))}{" "}
             have been removed from the deck

frontend/src/FriendSelect.tsx

@@ -40,7 +40,7 @@ const FriendSelect = (props: IProps): JSX.Element => {
     initial_skip: parseInt(select.value, 10),
   }));
 
-  const rank: string | null =
+  const rank: string | null | undefined =
     "Standard" in props.trump
       ? props.trump.Standard.number
       : props.trump.NoTrump.number;
@@ -75,7 +75,7 @@ const FriendSelect = (props: IProps): JSX.Element => {
       );
     },
     Unrestricted: (c: ICardInfo) => notTrumpFilter(c),
-    TrumpsIncluded: (c: ICardInfo) => true,
+    TrumpsIncluded: (_) => true,
   };
   const policyFilter: (c: ICardInfo) => boolean =
     policyFilters[props.friend_selection_policy];

frontend/src/Friends.tsx

@@ -39,7 +39,7 @@ const Friends = (props: IProps): JSX.Element => {
       </div>
     );
   } else {
-    return null;
+    return <></>;
   }
 };
 

frontend/src/Initialize.tsx

@@ -416,7 +416,7 @@ const ScoringSettings = (props: IScoringSettings): JSX.Element => {
           style={{ content: contentStyle }}
         >
           <GameScoringSettings
-            params={props.state.propagated.game_scoring_parameters}
+            params={props.state.propagated.game_scoring_parameters!}
             decks={props.decks}
           />
         </ReactModal>
@@ -570,7 +570,7 @@ const UncommonSettings = (props: IUncommonSettings): JSX.Element => {
         </label>
       </div>
       <TractorRequirementsE
-        tractorRequirements={props.state.propagated.tractor_requirements}
+        tractorRequirements={props.state.propagated.tractor_requirements!}
         numDecks={props.numDecksEffective}
         onChange={(req) => props.setTractorRequirements(req)}
       />
@@ -808,7 +808,7 @@ const Initialize = (props: IProps): JSX.Element => {
     props.state.propagated.num_decks > 0
       ? props.state.propagated.num_decks
       : Math.max(Math.floor(props.state.propagated.players.length / 2), 1);
-  const decks = [...props.state.propagated.special_decks];
+  const decks = [...(props.state.propagated.special_decks || [])];
   while (decks.length < decksEffective) {
     decks.push({
       exclude_big_joker: false,
@@ -1100,7 +1100,7 @@ const Initialize = (props: IProps): JSX.Element => {
             JSON.stringify(props.state.propagated),
           );
         });
-      } catch (err) {
+      } catch {
         localStorage.setItem(
           "gameSettingsInLocalStorage",
           JSON.stringify(props.state.propagated),
@@ -1345,7 +1345,7 @@ const Initialize = (props: IProps): JSX.Element => {
             <button
               className="normal"
               onClick={() => {
-                showPicker ? setShowPicker(false) : setShowPicker(true);
+                setShowPicker(!showPicker);
               }}
             >
               {showPicker ? "Hide" : "Pick"}

frontend/src/InlineCard.tsx

@@ -13,8 +13,8 @@ const InlineCardBase = styled.span`
   padding-right: 0.1em;
 `;
 
-function Suit(className: string): React.FunctionComponent<{}> {
-  const component = (props: {}): JSX.Element => {
+function Suit(className: string): React.FunctionComponent<object> {
+  const component = (props: object): JSX.Element => {
     const settings = React.useContext(SettingsContext);
     return (
       <InlineCardBase
@@ -37,7 +37,9 @@ const LittleJoker = Suit("🃟");
 const BigJoker = Suit("🃏");
 const Unknown = Suit("🂠");
 
-const suitComponent = (suitCard: ISuitCard): React.FunctionComponent<{}> => {
+const suitComponent = (
+  suitCard: ISuitCard,
+): React.FunctionComponent<object> => {
   switch (suitCard.suit) {
     case "diamonds":
       return Diamonds;

frontend/src/Kicker.tsx

@@ -29,7 +29,11 @@ const Kicker = (props: IProps): JSX.Element => {
         </select>
         <button
           className="normal"
-          onClick={() => props.onKick(selection)}
+          onClick={() => {
+            if (selection) {
+              props.onKick(selection);
+            }
+          }}
           disabled={selection === null}
         >
           Kick

frontend/src/KittySizeSelector.tsx

@@ -6,7 +6,7 @@ import WasmContext from "./WasmContext";
 interface IProps {
   numPlayers: number;
   decks: Deck[];
-  kittySize: number | null;
+  kittySize: number | null | undefined;
   onChange: (newKittySize: number | null) => void;
 }