From abd7ac6243f5b7d18e58ee9e6f157b036cf02646 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 4 Mar 2024 21:34:37 +0200
Subject: [PATCH] SendouQ how to play page Closes #1556

---
 app/features/sendouq/q.css             |  19 +++
 app/features/sendouq/routes/q.info.tsx | 211 ++++++++++++++++++++++---
 app/features/sendouq/routes/q.tsx      |  15 +-
 app/utils/urls.ts                      |   1 +
 content/articles/sendouq-faq.md        |   2 +
 locales/en/q.json                      |   2 +
 vite.config.ts                         |   2 +-
 7 files changed, 227 insertions(+), 25 deletions(-)

diff --git a/app/features/sendouq/q.css b/app/features/sendouq/q.css
index 6019ff936..8f028bd68 100644
--- a/app/features/sendouq/q.css
+++ b/app/features/sendouq/q.css
@@ -544,3 +544,22 @@
 .q-info__container p {
   margin-block: var(--s-2);
 }
+
+.q-info__table-of-contents ul {
+  padding-left: 0;
+}
+
+.q-info__table-of-contents li {
+  list-style: none;
+  font-size: var(--fonts-sm);
+  font-weight: var(--semi-bold);
+}
+
+.q-info__table-of-contents li:has(button) {
+  margin-block-start: var(--s-2);
+}
+
+.q-info__table-of-contents li:not(:has(button)) {
+  margin-inline-start: var(--s-2);
+  font-size: var(--fonts-xs);
+}
diff --git a/app/features/sendouq/routes/q.info.tsx b/app/features/sendouq/routes/q.info.tsx
index 19d190ef5..4e6860d40 100644
--- a/app/features/sendouq/routes/q.info.tsx
+++ b/app/features/sendouq/routes/q.info.tsx
@@ -13,10 +13,12 @@ import "../q.css";
 import { Image } from "~/components/Image";
 import { MATCHES_COUNT_NEEDED_FOR_LEADERBOARD } from "~/features/leaderboards/leaderboards-constants";
 import { USER_LEADERBOARD_MIN_ENTRIES_FOR_LEVIATHAN } from "~/features/mmr/mmr-constants";
+import { Button } from "~/components/Button";
 
 export default function SendouQInfoPage() {
   return (
     <Main className="q-info__container">
+      <TableOfContents />
       <GeneralInfo />
       <BeforeJoining />
       <JoiningTheQueue />
@@ -28,10 +30,115 @@ export default function SendouQInfoPage() {
   );
 }
 
+function TableOfContents() {
+  const handleTitleClick = (id: string) => () => {
+    const element = document.getElementById(id);
+    if (!element) return;
+
+    const pos = element.getBoundingClientRect().top;
+    const headerOffset = 45;
+    window.scrollTo({
+      top: pos + window.scrollY - headerOffset,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <nav className="q-info__table-of-contents">
+      <h2>Table of contents</h2>
+      <ul>
+        <li>
+          <Button onClick={handleTitleClick("general-info")} variant="minimal">
+            General info
+          </Button>
+        </li>
+
+        <li>
+          <Button
+            onClick={handleTitleClick("before-joining")}
+            variant="minimal"
+          >
+            Before joining
+          </Button>
+        </li>
+        <li>Make a sendou.ink account</li>
+        <li>Select your map pool</li>
+        <li>Weapon pool</li>
+        <li>Voice chat</li>
+        <li>Avoiding Splattercolor Screen</li>
+        <li>Bio</li>
+        <li>Friend code</li>
+        <li>Reading rules</li>
+
+        <li>
+          <Button
+            onClick={handleTitleClick("joining-the-queue")}
+            variant="minimal"
+          >
+            Joining the queue
+          </Button>
+        </li>
+        <li>Joining solo</li>
+        <li>Joining with 1-3 mates</li>
+
+        <li>
+          <Button
+            onClick={handleTitleClick("finding-a-group")}
+            variant="minimal"
+          >
+            Finding a group
+          </Button>
+        </li>
+        <li>Plus Server icons</li>
+        <li>Adding a note</li>
+        <li>Inactivity</li>
+        <li>Group managers</li>
+
+        <li>
+          <Button
+            onClick={handleTitleClick("finding-an-opponent")}
+            variant="minimal"
+          >
+            Finding an opponent
+          </Button>
+        </li>
+        <li>Rechallenging</li>
+
+        <li>
+          <Button
+            onClick={handleTitleClick("playing-the-match")}
+            variant="minimal"
+          >
+            Playing the match
+          </Button>
+        </li>
+        <li>Canceling the match</li>
+        <li>Enemy not reporting</li>
+        <li>Private note</li>
+        <li>Joining again with the same group</li>
+        <li>Stats</li>
+
+        <li>
+          <Button onClick={handleTitleClick("other-topics")} variant="minimal">
+            Other topics
+          </Button>
+        </li>
+        <li>Ranking algorithm</li>
+        <li>Ranking tiers</li>
+        <li>Rank history</li>
+        <li>Team ranking</li>
+        <li>Ranked tournaments</li>
+        <li>SendouQ Season Finale</li>
+        <li>Off-season</li>
+      </ul>
+    </nav>
+  );
+}
+
 function GeneralInfo() {
   return (
     <section>
-      <h2>General info</h2>
+      <h2 id="general-info">General info</h2>
       <p>
         SendouQ is a community made matchmaking system. It features leaderboards
         and a season system. Everyone is free to join no matter if they are new
@@ -47,7 +154,7 @@ function GeneralInfo() {
 function BeforeJoining() {
   return (
     <section>
-      <h2>Before joining</h2>
+      <h2 id="before-joining">Before joining</h2>
       <h3>Make a sendou.ink account</h3>
       <p>
         Click “log in” on the front page (mobile) or top right (desktop). Agree
@@ -64,7 +171,7 @@ function BeforeJoining() {
         way. Prefer means you like this mode over neutral modes. These choices
         later affect what modes you will be playing. In SendouQ you might play a
         set with SZ/TC/RM/CB or only TC or TC/RM or any other combination. It
-        all depends on what people have chosen.
+        all depends on what players in that match have chosen.
       </p>
       <p>
         For each mode that you didn&apos;t avoid also choose 7 maps. Again the
@@ -96,7 +203,7 @@ function BeforeJoining() {
         accessibility reasons. Toggling this option means screen will be banned
         in all sets you play. But also note that groups challenging your group
         will see that screen would be banned in your set so it&apos;s not
-        adviced to select this option unnecessarily.
+        advised to select this option unnecessarily.
       </p>
       <h3>Bio</h3>
       <p>
@@ -124,7 +231,7 @@ function BeforeJoining() {
 function JoiningTheQueue() {
   return (
     <section>
-      <h2>Joining the queue</h2>
+      <h2 id="joining-the-queue">Joining the queue</h2>
       <h3>Joining solo</h3> <p>Click “Join solo” on the SendouQ front page.</p>
       <h3>Joining with 1-3 mates</h3>
       <p>
@@ -141,12 +248,12 @@ function JoiningTheQueue() {
 function FindingAGroup() {
   return (
     <section>
-      <h2>Finding a group</h2>
+      <h2 id="finding-a-group">Finding a group</h2>
       <p>
         <p>
           If you didn&apos;t join with a full group of 4 next you will join a
           screen where the aim is to get a full group. You do this by getting
-          other people join your group or morphing with other groups. Click the
+          other people join your group or merging with other groups. Click the
           “Invite” button for any group you would like to group up with
           considering the weapons, skill level and other factors. There is no
           downside in sending more invites so it&apos;s not advised to only send
@@ -182,6 +289,13 @@ function FindingAGroup() {
         marked inactive and hidden. Click the prompt that you are still looking
         to be visible again.
       </p>
+      <h3>Group managers</h3>
+      <p>
+        Only the group owner or manager can send invites. When groups merge then
+        the previous owner and manager will have it in the new group as well.
+        Group owner can give the manager role by clicking the star icon and
+        selecting &quot;Give manager&quot;.
+      </p>
     </section>
   );
 }
@@ -189,10 +303,21 @@ function FindingAGroup() {
 function FindingAnOpponent() {
   return (
     <section>
-      <p>TODO</p>
-      <h2>Finding an opponent</h2>
+      <h2 id="finding-an-opponent">Finding an opponent</h2>
+      <p>
+        Like with finding a group you will get presented a list of groups you
+        can challenge. Typically choosing a group with similar skill level might
+        result in the best match but you are free to challenge group of any
+        level (and they are free to not accept). You will also see the modes the
+        set would have before deciding on challenging/accepting.
+      </p>
       <h3>Rechallenging</h3>
-      <p>TODO</p>
+      <p>
+        Sometimes it can take a while for a group to accept your challenge. If
+        you don&apos;t have a strong preference about modes you might consider
+        &quot;Rechallenging&quot; the team on their mode preferences. In some
+        cases it might help you get into a match faster.
+      </p>
     </section>
   );
 }
@@ -200,16 +325,58 @@ function FindingAnOpponent() {
 function PlayingTheMatch() {
   return (
     <section>
-      <p>TODO, info about hosting & how to join a room in S3</p>
-      <h2>Playing the match</h2>
+      <h2 id="playing-the-match">Playing the match</h2>
+      <p>
+        When you have a match it&apos;s time to join the room. The person who
+        first volunteers in the match chat will host the room. Use the pool and
+        password provided. As host remember to use the Y button (letter icon) to
+        send invites periodically as if people joined the pool after you by
+        default they don&apos;t see the room. As a player joining the room the
+        room will appear in the &quot;letter tab&quot;. Press X to refresh the
+        view and if you are not seeing it then ask the host to send you an
+        invite.
+      </p>
+      <p>
+        Then just play matches till either team has reached 4 wins and report
+        the score. Your SP will be adjusted after both teams report the score.
+      </p>
       <h3>Canceling the match</h3>
-      <p>TODO</p>
+      <p>
+        Match can be canceled if both teams agree to (read the rules). Click the
+        cancel button to request canceling the match. If the other team agrees
+        then they can also click it to confirm and lock the match.
+      </p>
+      <h3>Enemy not reporting</h3>
+      <p>
+        As the first measure contact the opponent and politely remind them to.
+        If that is not working then come to the helpdesk channel on our Discord
+        to get help from admin.
+      </p>
       <h3>Private note</h3>
-      <p>TODO</p>
+      <p>
+        After the set you can leave private notes about your teammates. If you
+        had good experience with someone why not leave a positive reminder so
+        you remember to group up with them in future as well? Likewise if you
+        did not have such a good time playing with someone you can leave a
+        negative note. The sentiment affects their sorting in the group up
+        phase. Clicking their avatar in the group up phase will show what you
+        wrote about them.
+      </p>
       <h3>Joining again with the same group</h3>
-      <p>TODO</p>
+      <p>
+        As a group owner you can use the &quot;Look again with same group&quot;
+        to instantly join the queue with the same roster. Note that this button
+        should only be used if you checked with all your mates that they can
+        still play another set.
+      </p>
       <h3>Stats</h3>
-      <p>TODO</p>
+      <p>
+        While reporting the score you can also report weapons. You can view
+        statistics on your user profile. You can for example see your win rate
+        with different weapons on each stage by clicking its row on the
+        &quot;Stages&quot; tab or view your winrates with different mates on the
+        &quot;Teammates&quot; tab.
+      </p>
     </section>
   );
 }
@@ -217,7 +384,7 @@ function PlayingTheMatch() {
 function OtherTopics() {
   return (
     <section>
-      <h2>Other topics</h2>
+      <h2 id="other-topics">Other topics</h2>
       <h3>Ranking algorithm</h3>
       <p>
         The ranking algorithm used is called OpenSkill. Most common question
@@ -235,6 +402,10 @@ function OtherTopics() {
         </a>{" "}
         on a longer explanation.
       </p>
+      <p>
+        Only the whole set&apos;s result matters so points gained/lost are the
+        same whether the set ends 4-3 or 4-0.
+      </p>
       <h3>Ranking tiers</h3>
       <p>
         <Link to={TIERS_PAGE}>
@@ -255,8 +426,8 @@ function OtherTopics() {
         There is also a tier recalculation in the first week of the season that
         can change your ranking tier significantly. When there are less than{" "}
         {USER_LEADERBOARD_MIN_ENTRIES_FOR_LEVIATHAN} entries on the leaderboard
-        tiers are calculated based everyone&apos;s powers. After crossing that
-        threshold tiers switch being calculated based on players on the
+        tiers are calculated based on everyone&apos;s powers. After crossing
+        that threshold tiers switch being calculated based on players on the
         leaderboard only.
       </p>
       <h3>Rank history</h3>
@@ -287,7 +458,7 @@ function OtherTopics() {
         on sendou.ink. If on the registration page it has the “Ranked” badge
         then you know it is a ranked tournament. In ranked tournaments each set
         is counted as a SendouQ set. Ranking changes are applied when the
-        tournament ends and is finalised by the TO.
+        tournament ends and is finalized by the TO.
       </p>
       <p>
         If you sub around then note that only the people who played in the set
diff --git a/app/features/sendouq/routes/q.tsx b/app/features/sendouq/routes/q.tsx
index c8457f1af..b16aaf21c 100644
--- a/app/features/sendouq/routes/q.tsx
+++ b/app/features/sendouq/routes/q.tsx
@@ -44,6 +44,7 @@ import { assertUnreachable } from "~/utils/types";
 import {
   LEADERBOARDS_PAGE,
   LOG_IN_URL,
+  SENDOUQ_INFO_PAGE,
   SENDOUQ_LOOKING_PAGE,
   SENDOUQ_LOOKING_PREVIEW_PAGE,
   SENDOUQ_PAGE,
@@ -220,7 +221,6 @@ export default function QPage() {
         ) : null}
         <Clocks />
       </div>
-      <QLinks />
       {data.season ? (
         <>
           {data.groupInvitedTo === null ? (
@@ -285,6 +285,7 @@ export default function QPage() {
           )}
         </>
       ) : null}
+      <QLinks />
     </Main>
   );
 }
@@ -460,9 +461,9 @@ function QLinks() {
     <div className="stack sm">
       <QLink
         navIcon="articles"
-        url={SENDOUQ_RULES_PAGE}
-        title={t("q:front.nav.rules.title")}
-        subText={t("q:front.nav.rules.description")}
+        url={SENDOUQ_INFO_PAGE}
+        title={t("q:front.nav.info.title")}
+        subText={t("q:front.nav.info.description")}
       />
       {user ? (
         <QLink
@@ -492,6 +493,12 @@ function QLinks() {
           subText={t("q:front.nav.mySeason.description")}
         />
       ) : null}
+      <QLink
+        navIcon="articles"
+        url={SENDOUQ_RULES_PAGE}
+        title={t("q:front.nav.rules.title")}
+        subText={t("q:front.nav.rules.description")}
+      />
     </div>
   );
 }
diff --git a/app/utils/urls.ts b/app/utils/urls.ts
index da17afb19..00d9b3487 100644
--- a/app/utils/urls.ts
+++ b/app/utils/urls.ts
@@ -100,6 +100,7 @@ export const LEADERBOARDS_PAGE = "/leaderboards";
 export const LINKS_PAGE = "/links";
 export const SENDOUQ_PAGE = "/q";
 export const SENDOUQ_RULES_PAGE = "/q/rules";
+export const SENDOUQ_INFO_PAGE = "/q/info";
 export const SENDOUQ_SETTINGS_PAGE = "/q/settings";
 export const SENDOUQ_PREPARING_PAGE = "/q/preparing";
 export const SENDOUQ_LOOKING_PAGE = "/q/looking";
diff --git a/content/articles/sendouq-faq.md b/content/articles/sendouq-faq.md
index 358632e6d..121691311 100644
--- a/content/articles/sendouq-faq.md
+++ b/content/articles/sendouq-faq.md
@@ -4,6 +4,8 @@ date: 2023-09-28
 author: Joy
 ---
 
+Update 5th February 2024: Check the new [SendouQ info page](https://sendou.ink/q/info).
+
 ## What is SendouQ?
 
 SendouQ is a third-party matchmaking service for Splatoon 3, offering a more competitive alternative to the in-game matchmaking. Matches are conducted in a first-to-4 format, with maps and modes selected by the players. The service is free and open to all players.
diff --git a/locales/en/q.json b/locales/en/q.json
index e8060aba5..befa4bb2d 100644
--- a/locales/en/q.json
+++ b/locales/en/q.json
@@ -30,6 +30,8 @@
   "front.upcomingSeason.date": "Join Season {{nth}} starting {{date}}",
   "front.nav.rules.title": "Rules",
   "front.nav.rules.description": "Read these before playing",
+  "front.nav.info.title": "Info",
+  "front.nav.info.description": "What is SendouQ and how to use it",
   "front.nav.settings.title": "Settings",
   "front.nav.settings.description": "Map preferences, weapon pool, voice chat & sounds",
   "front.nav.leaderboards.title": "Leaderboards",
diff --git a/vite.config.ts b/vite.config.ts
index cc8eb0068..3fe44fbc4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -209,7 +209,7 @@ export default defineConfig({
           route("/play", "features/sendouq/routes/play.tsx");
           route("/q", "features/sendouq/routes/q.tsx");
           route("/q/rules", "features/sendouq/routes/q.rules.tsx");
-          // route("/q/info", "features/sendouq/routes/q.info.tsx");
+          route("/q/info", "features/sendouq/routes/q.info.tsx");
           route("/q/looking", "features/sendouq/routes/q.looking.tsx");
           route("/q/preparing", "features/sendouq/routes/q.preparing.tsx");
           route("/q/match/:id", "features/sendouq/routes/q.match.$id.tsx");