prettier update

.node-version

@@ -0,0 +1 @@
+22.3.0

frontend/package.json

@@ -51,8 +51,8 @@
     "copy-webpack-plugin": "^6.0.3",
     "css-loader": "^4.0.0",
     "css-minimizer-webpack-plugin": "^3.0.1",
-    "eslint": "^7.3.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint": "^9.16.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "^18.0.2",
     "eslint-plugin-import": "2",
     "eslint-plugin-node": "11",
@@ -63,8 +63,8 @@
     "hook-shell-script-webpack-plugin": "^0.1.4",
     "html-webpack-plugin": "^5.3.2",
     "mini-css-extract-plugin": "^1.6.0",
-    "prettier": "^2.0.2",
-    "prettier-eslint": "^11.0.0",
+    "prettier": "^3.4.1",
+    "prettier-eslint": "^16.3.0",
     "react-color": "^2.18.1",
     "rimraf": "^3.0.2",
     "terser-webpack-plugin": "^5.1.3",

frontend/src/AppStateProvider.tsx

@@ -50,7 +50,7 @@ export const AppStateContext = React.createContext<Context>({
 });
 
 export const SettingsContext = React.createContext<Settings>(
-  appState.loadDefault().settings
+  appState.loadDefault().settings,
 );
 
 export const AppStateConsumer = AppStateContext.Consumer;

frontend/src/AutoPlayButton.tsx

@@ -63,8 +63,8 @@ const AutoPlayButton = (props: IProps): JSX.Element => {
             playDescription !== null ? " (" + playDescription + ")" : ""
           }`
         : autoplay !== null
-        ? "Don't autoplay selected cards"
-        : "Autoplay selected cards"}
+          ? "Don't autoplay selected cards"
+          : "Autoplay selected cards"}
     </button>
   );
 };

frontend/src/Card.tsx

@@ -42,7 +42,7 @@ const Card = (props: IProps): JSX.Element => {
           suit={classNames(
             "unknown",
             settings.fourColor ? "four-color" : null,
-            settings.darkMode ? "dark-mode" : null
+            settings.darkMode ? "dark-mode" : null,
           )}
           backgroundColor={settings.darkMode ? "#000" : "#fff"}
         />
@@ -103,7 +103,7 @@ const Card = (props: IProps): JSX.Element => {
           suit={classNames(
             cardInfo.typ,
             settings.fourColor ? "four-color" : null,
-            settings.darkMode ? "dark-mode" : null
+            settings.darkMode ? "dark-mode" : null,
           )}
           colorOverride={
             settings.suitColorOverrides[cardInfo.typ as keyof ISuitOverrides]
@@ -178,7 +178,7 @@ interface ICardCanvasProps {
 }
 
 const getCardBounds = (
-  height: number
+  height: number,
 ): { metrics: TextMetrics; height: number; width: number } => {
   const font = `${height}px solid`;
   if (!(font in cardBoundsCache)) {
@@ -189,12 +189,12 @@ const getCardBounds = (
   const effectiveHeight = Math.round(
     textMetrics.actualBoundingBoxAscent +
       textMetrics.actualBoundingBoxDescent +
-      2
+      2,
   );
   const effectiveWidth = Math.round(
     textMetrics.actualBoundingBoxRight +
       Math.min(textMetrics.actualBoundingBoxLeft, 0) +
-      2
+      2,
   );
   return {
     metrics: textMetrics,

frontend/src/Cards.tsx

@@ -18,7 +18,7 @@ interface IProps {
 
 const Cards = (props: IProps): JSX.Element => {
   const [highlightedSuit, setHighlightedSuit] = React.useState<string | null>(
-    null
+    null,
   );
 
   const { hands, selectedCards, notifyEmpty } = props;
@@ -46,7 +46,7 @@ const Cards = (props: IProps): JSX.Element => {
   const cardsInHand =
     props.playerId in hands.hands
       ? Object.entries(hands.hands[props.playerId]).flatMap(([c, ct]) =>
-          Array(ct).fill(c)
+          Array(ct).fill(c),
         )
       : [];
 
@@ -64,7 +64,7 @@ const Cards = (props: IProps): JSX.Element => {
           g.cards.map((c) => ({
             card: c,
             suit: g.suit,
-          }))
+          })),
         )
       : [];
 
@@ -75,7 +75,7 @@ const Cards = (props: IProps): JSX.Element => {
     g.cards.map((c) => ({
       card: c,
       suit: g.suit,
-    }))
+    })),
   );
 
   if (!separateCardsBySuit) {
@@ -128,7 +128,7 @@ const Cards = (props: IProps): JSX.Element => {
                 className={classNames(
                   !disableSuitHighlights && highlightedSuit === c.suit
                     ? "highlighted"
-                    : null
+                    : null,
                 )}
                 onClick={handleSelect(c.card)}
                 card={c.card}

frontend/src/ChatMessage.tsx

@@ -59,7 +59,7 @@ const renderScoringMessage = (message: Message): JSX.Element => {
       changes.push(
         <span key={changes.length}>
           step size: {variant.parameters.step_size_per_deck}分 per deck
-        </span>
+        </span>,
       );
     }
     if (
@@ -68,7 +68,7 @@ const renderScoringMessage = (message: Message): JSX.Element => {
       changes.push(
         <span key={changes.length}>
           non-leveling steps: {variant.parameters.deadzone_size}{" "}
-        </span>
+        </span>,
       );
     }
     if (
@@ -79,7 +79,7 @@ const renderScoringMessage = (message: Message): JSX.Element => {
         <span key={changes.length}>
           steps to turnover:{" "}
           {variant.parameters.num_steps_to_non_landlord_turnover}{" "}
-        </span>
+        </span>,
       );
     }
     for (const k in variant.parameters.step_adjustments) {
@@ -88,15 +88,15 @@ const renderScoringMessage = (message: Message): JSX.Element => {
         changes.push(
           <span key={changes.length}>
             step size adjustment for {k} decks set to {adj}{" "}
-          </span>
+          </span>,
         );
       }
     }
     for (const k in variant.old_parameters.step_adjustments) {
       const adj = variant.parameters.step_adjustments[k];
       if (adj === undefined || adj === null || adj === 0) {
         changes.push(
-          <span key={changes.length}>adjustment for {k} decks removed </span>
+          <span key={changes.length}>adjustment for {k} decks removed </span>,
         );
       }
     }
@@ -109,11 +109,11 @@ const renderScoringMessage = (message: Message): JSX.Element => {
         "BonusLevelForSmallerLandlordTeam"
       ) {
         changes.push(
-          <span key={changes.length}>small-team bonus enabled</span>
+          <span key={changes.length}>small-team bonus enabled</span>,
         );
       } else {
         changes.push(
-          <span key={changes.length}>small-team bonus disabled</span>
+          <span key={changes.length}>small-team bonus disabled</span>,
         );
       }
     }

frontend/src/Confetti.tsx

@@ -39,7 +39,7 @@ const Confetti = (props: IProps): JSX.Element => {
             angle: randomInRange(65, 115),
           }).then(
             () => {},
-            () => {}
+            () => {},
           );
         }
       }, 500);

frontend/src/DebugInfo.tsx

@@ -13,7 +13,7 @@ export const DebugInfo = (_props: {}): JSX.Element => {
           roomName: appState.state.roomName,
         },
         null,
-        2
+        2,
       )}
     </pre>
   );

frontend/src/Draw.tsx

@@ -47,7 +47,7 @@ class Draw extends React.Component<IDrawProps, IDrawState> {
       if (this.props.playDrawCardSound) {
         if (this.drawCardAudio === null) {
           this.drawCardAudio = new Audio(
-            "434472_dersuperanton_taking-card.mp3"
+            "434472_dersuperanton_taking-card.mp3",
           );
         }
         // eslint-disable-next-line
@@ -95,7 +95,7 @@ class Draw extends React.Component<IDrawProps, IDrawState> {
         () => {
           this.drawCard();
         },
-        this.props.autodrawSpeedMs !== null ? this.props.autodrawSpeedMs : 250
+        this.props.autodrawSpeedMs !== null ? this.props.autodrawSpeedMs : 250,
       );
     }
     this.could_draw = canDraw;

frontend/src/FriendSelect.tsx

@@ -86,7 +86,7 @@ const FriendSelect = (props: IProps): JSX.Element => {
       cardOptions.push({
         label: `${c.number}${c.typ}`,
         value: c.value,
-      })
+      }),
     );
 
   return (

frontend/src/IconButton.tsx

@@ -7,7 +7,9 @@ const Button = styled.button`
   margin: 0;
   border: 0;
   background-color: transparent;
-  transition: opacity 100ms ease-in-out, color 150ms ease-in-out,
+  transition:
+    opacity 100ms ease-in-out,
+    color 150ms ease-in-out,
     transform 100ms ease-in-out;
   color: #111;
   &:hover {
@@ -16,7 +18,7 @@ const Button = styled.button`
 `;
 
 const IconButton = (
-  props: React.ComponentProps<typeof Button>
+  props: React.ComponentProps<typeof Button>,
 ): JSX.Element => {
   return <Button className="icon-button" {...props} />;
 };