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 (
-
- Mode:
+
+ Mode:
+
+ (Read the rules)
+
{
+ 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 (
+
Help
-
- Rules
-
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 (
Wikipedia
- ). The game is a race to find as many sets, 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 sets — triplets
+ of cards with a certain property — 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.
If you haven't played before, don't worry! We'll explain the rules
below.
+
+ Rules
+
@@ -210,7 +212,8 @@ function HelpPage() {
standard Set game. Currently this site lets you play the following
variants:
-
+
+
Junior
@@ -224,7 +227,8 @@ function HelpPage() {
-
+
+
Set-Chain
@@ -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.
-
+
+
UltraSet
@@ -296,7 +301,8 @@ function HelpPage() {
Note that you do not have to select the four cards in any particular
order while playing.
-
+
+
UltraSet-Chain
@@ -323,17 +329,19 @@ function HelpPage() {
-
+
+
Ultra9
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.)
-
+
+
MegaSet
@@ -357,7 +365,8 @@ function HelpPage() {
With 5 features, there are 35 = 243 cards in the deck. Be
prepared for a long game.
-
+
+
GhostSet
@@ -395,7 +404,8 @@ function HelpPage() {
UltraSet (that is, 3 pairs of cards that form sets with the same
additional card).
-
+
+
4Set
@@ -413,7 +423,7 @@ function HelpPage() {
the four features, the variants are either{" "}
all the same, all different, or form two pairs. In
other words, combinations like AAAA, ABCD{" "}
- and AABB form 4Sets, while AAAB and{" "}
+ and AABB form 4Sets, while ABBB and{" "}
ABCC do not. For example, the four cards shown above form
a 4Set, because each feature appears in all four variants.
@@ -460,7 +470,8 @@ function HelpPage() {
and there are 44 = 256 cards in the deck. If you are new to
this mode, we recommend starting with 4Set Junior.
-
+
+
4Set Junior
@@ -475,7 +486,8 @@ function HelpPage() {
-
+
+
4Set Junior-Chain
@@ -502,7 +514,8 @@ function HelpPage() {
-
+
+
Puzzle
@@ -514,7 +527,25 @@ function HelpPage() {
to find all sets on each board before you move to the
next board.
-
+
+
+ Ultra9 Puzzle
+
+
+ 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.
+
+
+
+ 4Set Junior Puzzle
+
+
+ A puzzle variation where you have to find junior 4Sets.
+
+
+
Shuffle
@@ -522,7 +553,8 @@ function HelpPage() {
difference being that all cards on the board are shuffled when a Set
is found.
-
+
+
Memory