From 5be618e6e7de75589d7c2c24377c45a25f9d61c3 Mon Sep 17 00:00:00 2001
From: Eugene Toder <eltoder@gmail.com>
Date: Sat, 10 Jan 2026 19:35:04 -0500
Subject: [PATCH] Link to rules when starting the game

---
 src/components/GameSettings.js | 22 +++++----
 src/components/ScrollToHash.js | 20 +++++++++
 src/game.js                    | 23 ----------
 src/pages/HelpPage.js          | 82 +++++++++++++++++++++++-----------
 4 files changed, 91 insertions(+), 56 deletions(-)
 create mode 100644 src/components/ScrollToHash.js

diff --git a/src/components/GameSettings.js b/src/components/GameSettings.js
index 7507281..b653c0f 100644
--- a/src/components/GameSettings.js
+++ b/src/components/GameSettings.js
@@ -9,10 +9,12 @@ import { makeStyles } from "@material-ui/core/styles";
 import firebase from "../firebase";
 import { modes } from "../game";
 import useStorage from "../hooks/useStorage";
+import InternalLink from "./InternalLink";
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles({
   settings: { display: "flex", justifyContent: "space-evenly" },
-}));
+  modeSelector: { display: "flex", alignItems: "baseline", marginRight: "1em" },
+});
 
 const practiceModeTip =
   "Practice mode is only available in private games. " +
@@ -37,21 +39,25 @@ function GameSettings({ game, gameId, userId }) {
 
   return (
     <div className={classes.settings}>
-      <div style={{ display: "flex", alignItems: "baseline" }}>
-        <Typography style={{ marginRight: "0.6em" }}>Mode:</Typography>
+      <div className={classes.modeSelector}>
+        <Typography style={{ marginRight: "0.5em" }}>Mode:</Typography>
         <Select
           value={gameMode}
           disabled={userId !== game.host}
           onChange={handleChangeMode}
         >
-          {Object.entries(modes).map(([key, { name, description }]) => (
+          {Object.entries(modes).map(([key, { name }]) => (
             <MenuItem key={key} value={key}>
-              <Tooltip key={key} arrow placement="left" title={description}>
-                <Typography>{name}</Typography>
-              </Tooltip>
+              <Typography>{name}</Typography>
             </MenuItem>
           ))}
         </Select>
+        <InternalLink
+          to={`/help#rules-${gameMode}`}
+          style={{ marginLeft: "0.5em" }}
+        >
+          (Read the rules)
+        </InternalLink>
       </div>
       <Tooltip arrow placement="left" title={practiceModeTip}>
         <FormControlLabel
diff --git a/src/components/ScrollToHash.js b/src/components/ScrollToHash.js
new file mode 100644
index 0000000..66153ee
--- /dev/null
+++ b/src/components/ScrollToHash.js
@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+function ScrollToHash({ isLoading = false, options }) {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (isLoading || !location.hash) return;
+    const id = location.hash.slice(1);
+    const timer = setTimeout(
+      () => document.getElementById(id)?.scrollIntoView(options),
+      0
+    );
+    return () => clearTimeout(timer);
+  }, [isLoading, location.key, location.hash, options]);
+
+  return null;
+}
+
+export default ScrollToHash;
diff --git a/src/game.js b/src/game.js
index 39ca918..7027a23 100644
--- a/src/game.js
+++ b/src/game.js
@@ -490,7 +490,6 @@ export const modes = {
   normal: {
     name: "Normal",
     color: "purple",
-    description: "Find 3 cards that form a Set.",
     setType: "Set",
     traits: 4,
     chain: 0,
@@ -499,8 +498,6 @@ export const modes = {
   junior: {
     name: "Junior",
     color: "green",
-    description:
-      "A simplified version that only uses cards with solid shading.",
     setType: "Set",
     traits: 3,
     chain: 0,
@@ -509,7 +506,6 @@ export const modes = {
   setchain: {
     name: "Set-Chain",
     color: "teal",
-    description: "In every Set you have to use 1 card from the previous Set.",
     setType: "Set",
     traits: 4,
     chain: 1,
@@ -518,8 +514,6 @@ export const modes = {
   ultraset: {
     name: "UltraSet",
     color: "pink",
-    description:
-      "Find 4 cards such that the first pair and the second pair form a Set with the same additional card.",
     setType: "UltraSet",
     traits: 4,
     chain: 0,
@@ -528,8 +522,6 @@ export const modes = {
   ultrachain: {
     name: "UltraSet-Chain",
     color: "orange",
-    description:
-      "In every UltraSet you have to use 2 cards from the previous Set.",
     setType: "UltraSet",
     traits: 4,
     chain: 2,
@@ -538,8 +530,6 @@ export const modes = {
   ultra9: {
     name: "Ultra9",
     color: "deepOrange",
-    description:
-      "Same as UltraSet, but only 9 cards are dealt at a time, unless they don't contain any sets.",
     setType: "UltraSet",
     traits: 4,
     chain: 0,
@@ -548,7 +538,6 @@ export const modes = {
   megaset: {
     name: "MegaSet",
     color: "lime",
-    description: "Each card has 5 traits instead of 4.",
     setType: "Set",
     traits: 5,
     chain: 0,
@@ -557,8 +546,6 @@ export const modes = {
   ghostset: {
     name: "GhostSet",
     color: "lightBlue",
-    description:
-      "Find 3 disjoint pairs of cards such that the cards that complete them to Sets themselves form a Set.",
     setType: "GhostSet",
     traits: 4,
     chain: 0,
@@ -567,7 +554,6 @@ export const modes = {
   "4set": {
     name: "4Set",
     color: "amber",
-    description: "Find 4 cards that form a 4Set.",
     setType: "4Set",
     traits: 4,
     chain: 0,
@@ -576,7 +562,6 @@ export const modes = {
   "4setjr": {
     name: "4Set Junior",
     color: "amber",
-    description: "Find 4 cards that form a 4Set.",
     setType: "4Set",
     traits: 3,
     chain: 0,
@@ -585,8 +570,6 @@ export const modes = {
   "4setjrchain": {
     name: "4Set Jr-Chain",
     color: "red",
-    description:
-      "In every 4Set you have to use 2 cards from the previous 4Set.",
     setType: "4Set",
     traits: 3,
     chain: 2,
@@ -595,7 +578,6 @@ export const modes = {
   puzzle: {
     name: "Puzzle",
     color: "cyan",
-    description: "Find all Sets on the board before moving to the next board.",
     setType: "Set",
     traits: 4,
     chain: 0,
@@ -605,8 +587,6 @@ export const modes = {
   ultra9puzzle: {
     name: "Ultra9 Puzzle",
     color: "orange",
-    description:
-      "Find all UltraSets on the board before moving to the next board.",
     setType: "UltraSet",
     traits: 4,
     chain: 0,
@@ -616,7 +596,6 @@ export const modes = {
   "4setjrpuzzle": {
     name: "4Set Jr-Puzzle",
     color: "indigo",
-    description: "Find all 4Sets on the board before moving to the next board.",
     setType: "4Set",
     traits: 3,
     chain: 0,
@@ -626,7 +605,6 @@ export const modes = {
   shuffle: {
     name: "Shuffle",
     color: "blue",
-    description: "Cards are shuffled after each Set.",
     setType: "Set",
     traits: 4,
     chain: 0,
@@ -636,7 +614,6 @@ export const modes = {
   memory: {
     name: "Memory",
     color: "red",
-    description: "Cards are dealt face down and are turned up 3 at a time.",
     setType: "Set",
     traits: 4,
     chain: 0,
diff --git a/src/pages/HelpPage.js b/src/pages/HelpPage.js
index 31e0eaa..766eb7e 100644
--- a/src/pages/HelpPage.js
+++ b/src/pages/HelpPage.js
@@ -7,6 +7,7 @@ import Paper from "@material-ui/core/Paper";
 import Typography from "@material-ui/core/Typography";
 
 import InternalLink from "../components/InternalLink";
+import ScrollToHash from "../components/ScrollToHash";
 import SetCard from "../components/SetCard";
 import { SettingsContext } from "../context";
 import { BASE_RATING, SCALING_FACTOR } from "../game";
@@ -31,30 +32,31 @@ function HelpPage() {
 
   return (
     <Container>
+      <ScrollToHash />
       <Typography variant="h4" align="center" style={{ marginTop: 24 }}>
         Help
       </Typography>
 
       <Paper style={{ padding: "1rem", maxWidth: 720, margin: "12px auto" }}>
-        <Typography variant="h5" gutterBottom>
-          Rules
-        </Typography>
         <Typography variant="body1" gutterBottom>
           Welcome to Set with Forks! This web app allows you to play Set, the
           popular real-time card game designed by Marsha Falco in 1974 (
           <Link href="https://en.wikipedia.org/wiki/Set_(card_game)">
             Wikipedia
           </Link>
-          ). The game is a race to find as many <em>sets</em>, or three-card
-          triplets with a certain property, as possible from among the cards in
-          the playing area. In this online variant, this is as simple as
-          clicking on the three cards when you find a set, and the computer will
-          handle all the details of dealing cards and keeping score.
+          ). The game is a race to find as many <em>sets</em> &mdash; triplets
+          of cards with a certain property &mdash; as possible from the cards on
+          the board. In this online variant, this is as simple as clicking on
+          the three cards when you find a set, and the computer will handle all
+          the details of dealing cards and keeping score.
         </Typography>
         <Typography variant="body1" gutterBottom>
           If you haven't played before, don't worry! We'll explain the rules
           below.
         </Typography>
+        <Typography id="rules-normal" variant="h5" gutterBottom>
+          Rules
+        </Typography>
         <Typography component="div" align="center" gutterBottom>
           <SetCard value="1120" />
           <SetCard value="2011" />
@@ -210,7 +212,8 @@ function HelpPage() {
           standard Set game. Currently this site lets you play the following
           variants:
         </Typography>
-        <Typography variant="h6" gutterBottom>
+
+        <Typography id="rules-junior" variant="h6" gutterBottom>
           Junior
         </Typography>
         <Typography variant="body1" gutterBottom>
@@ -224,7 +227,8 @@ function HelpPage() {
           <SetCard value="011" />
           <SetCard value="122" />
         </Typography>
-        <Typography variant="h6" gutterBottom>
+
+        <Typography id="rules-setchain" variant="h6" gutterBottom>
           Set-Chain
         </Typography>
         <Typography variant="body1" gutterBottom>
@@ -253,7 +257,8 @@ function HelpPage() {
           the first set, and the first card in the third set is the second card
           from the second set.
         </Typography>
-        <Typography variant="h6" gutterBottom>
+
+        <Typography id="rules-ultraset" variant="h6" gutterBottom>
           UltraSet
         </Typography>
         <Typography variant="body1" gutterBottom>
@@ -296,7 +301,8 @@ function HelpPage() {
           Note that you do not have to select the four cards in any particular
           order while playing.
         </Typography>
-        <Typography variant="h6" gutterBottom>
+
+        <Typography id="rules-ultrachain" variant="h6" gutterBottom>
           UltraSet-Chain
         </Typography>
         <Typography variant="body1" gutterBottom>
@@ -323,17 +329,19 @@ function HelpPage() {
           <SetCard value="2220" />
           <SetCard value="2011" />
         </Typography>
-        <Typography variant="h6" gutterBottom>
+
+        <Typography id="rules-ultra9" variant="h6" gutterBottom>
           Ultra9
         </Typography>
         <Typography variant="body1" gutterBottom>
           Ultra9 follows the same rules as UltraSet, but 9 cards are dealt
           instead of 12. This makes the game harder because there are many fewer
-          UltraSets on the board. In the very rare case that there are no
-          UltraSets among the 9 cards, 3 additional cards are dealt. (There is
-          always an UltraSet in any 10 cards.)
+          UltraSets on the board (on average around 5 vs around 19). In the very
+          rare case that there are no UltraSets among the 9 cards, 3 additional
+          cards are dealt. (There is always an UltraSet in any 10 cards.)
         </Typography>
-        <Typography variant="h6" gutterBottom>
+
+        <Typography id="rules-megaset" variant="h6" gutterBottom>
           MegaSet
         </Typography>
         <Typography variant="body1" gutterBottom>
@@ -357,7 +365,8 @@ function HelpPage() {
           With 5 features, there are 3<sup>5</sup> = 243 cards in the deck. Be
           prepared for a long game.
         </Typography>
-        <Typography variant="h6" gutterBottom>
+
+        <Typography id="rules-ghostset" variant="h6" gutterBottom>
           GhostSet
         </Typography>
         <Typography variant="body1" gutterBottom>
@@ -395,7 +404,8 @@ function HelpPage() {
           UltraSet (that is, 3 pairs of cards that form sets with the same
           additional card).
         </Typography>
-        <Typography variant="h6" gutterBottom>
+
+        <Typography id="rules-4set" variant="h6" gutterBottom>
           4Set
         </Typography>
         <Typography variant="body1" gutterBottom>
@@ -413,7 +423,7 @@ function HelpPage() {
           the four features, the variants are either{" "}
           <strong>all the same, all different, or form two pairs</strong>. In
           other words, combinations like <code>AAAA</code>, <code>ABCD</code>{" "}
-          and <code>AABB</code> form 4Sets, while <code>AAAB</code> and{" "}
+          and <code>AABB</code> form 4Sets, while <code>ABBB</code> and{" "}
           <code>ABCC</code> do not. For example, the four cards shown above form
           a 4Set, because each feature appears in all four variants.
         </Typography>
@@ -460,7 +470,8 @@ function HelpPage() {
           and there are 4<sup>4</sup> = 256 cards in the deck. If you are new to
           this mode, we recommend starting with 4Set Junior.
         </Typography>
-        <Typography variant="h6" gutterBottom>
+
+        <Typography id="rules-4setjr" variant="h6" gutterBottom>
           4Set Junior
         </Typography>
         <Typography variant="body1" gutterBottom>
@@ -475,7 +486,8 @@ function HelpPage() {
           <SetCard value="022" />
           <SetCard value="133" />
         </Typography>
-        <Typography variant="h6" gutterBottom>
+
+        <Typography id="rules-4setjrchain" variant="h6" gutterBottom>
           4Set Junior-Chain
         </Typography>
         <Typography variant="body1" gutterBottom>
@@ -502,7 +514,8 @@ function HelpPage() {
           <SetCard value="123" />
           <SetCard value="110" />
         </Typography>
-        <Typography variant="h6" gutterBottom>
+
+        <Typography id="rules-puzzle" variant="h6" gutterBottom>
           Puzzle
         </Typography>
         <Typography variant="body1" gutterBottom>
@@ -514,7 +527,25 @@ function HelpPage() {
           to find <strong>all sets</strong> on each board before you move to the
           next board.
         </Typography>
-        <Typography variant="h6" gutterBottom>
+
+        <Typography id="rules-ultra9puzzle" variant="h6" gutterBottom>
+          Ultra9 Puzzle
+        </Typography>
+        <Typography variant="body1" gutterBottom>
+          A puzzle variation where you have to find UltraSets. It is based on
+          Ultra9 (9 cards on the board), because the average number of UltraSets
+          on the board for Ultra9 is around 5, while for regular UltraSet it is
+          around 19.
+        </Typography>
+
+        <Typography id="rules-4setjrpuzzle" variant="h6" gutterBottom>
+          4Set Junior Puzzle
+        </Typography>
+        <Typography variant="body1" gutterBottom>
+          A puzzle variation where you have to find junior 4Sets.
+        </Typography>
+
+        <Typography id="rules-shuffle" variant="h6" gutterBottom>
           Shuffle
         </Typography>
         <Typography variant="body1" gutterBottom>
@@ -522,7 +553,8 @@ function HelpPage() {
           difference being that all cards on the board are shuffled when a Set
           is found.
         </Typography>
-        <Typography variant="h6" gutterBottom>
+
+        <Typography id="rules-memory" variant="h6" gutterBottom>
           Memory
         </Typography>
         <Typography variant="body1" gutterBottom>