Add rules of SendouQ

app/routes/play.tsx

@@ -0,0 +1,36 @@
+import clsx from "clsx";
+import { Link } from "react-router-dom";
+import { LinksFunction, NavLink, Outlet, useLocation } from "remix";
+import styles from "~/styles/play-layout.css";
+
+export const links: LinksFunction = () => {
+  return [{ rel: "stylesheet", href: styles }];
+};
+
+export default function PlayLayoutPage() {
+  const location = useLocation();
+
+  const playActive =
+    !location.pathname.includes("rules") &&
+    !location.pathname.includes("settings");
+
+  return (
+    <div className="container">
+      <div className="play-layout__link-container">
+        <NavLink className="play-layout__link" to="rules" end>
+          Rules
+        </NavLink>
+        <Link
+          className={clsx("play-layout__link", { active: playActive })}
+          to="/play"
+        >
+          Play
+        </Link>
+        <NavLink className="play-layout__link invisible" to="settings" end>
+          Settings
+        </NavLink>
+      </div>
+      <Outlet />
+    </div>
+  );
+}

app/routes/play/rules.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { MetaFunction } from "remix";
+import { makeTitle } from "~/utils";
+
+export const meta: MetaFunction = () => {
+  return {
+    title: makeTitle("Rules of SendouQ"),
+  };
+};
+
+export default function PlayRulesPage() {
+  return (
+    <article>
+      <h1 className="text-center">Rules of SendouQ</h1>
+      <div className="text-center text-sm">v.1.0</div>
+
+      <h2>Disconnections</h2>
+      <Paragraph>
+        Each team is allowed one replay per set due to a team member
+        disconnecting. Replay is only possible if ALL of the following are true:
+        <ol className="mt-2">
+          <li>
+            More than half was left in the clock (clock was 2:30 or higher at
+            the time of the DC)
+          </li>
+          <li>
+            The team without DC's objective counter was at 30 or higher at the
+            time of the disconnect
+          </li>
+          <li>Team with the disconnection stopped playing without delay</li>
+          <li>
+            Disconnection was unintentional (smacking your table and the Switch
+            popping out of the dock is not considered unintentional btw)
+          </li>
+        </ol>
+      </Paragraph>
+      <Paragraph>
+        For the replay same weapons and gear must be used by both teams. Team
+        who fails to do so loses the map.
+      </Paragraph>
+      <Paragraph>
+        If players disconnect from both teams a replay can be played without
+        using either team's one replay for the set (or even if there were no
+        replays left to use from either team).
+      </Paragraph>
+      <Paragraph>
+        Host disconnection can be replayed with the same conditions as above.
+      </Paragraph>
+
+      <h2>Time limits</h2>
+      <Paragraph>
+        Once a team has all 4 players in the room ready to play then the other
+        team has at most 10 minutes to join the room. Failure to do so means
+        that the set should be started with whatever players are currently in
+        the room.
+      </Paragraph>
+
+      <h2>Subbing</h2>
+      <Paragraph>
+        Subs are not allowed. If one or several players in a team can't play or
+        can't be reached then the set has to be played without them (3v4 etc.)
+        or forfeited.
+      </Paragraph>
+
+      <h2>Alting</h2>
+      <Paragraph>
+        You are only allowed to play SendouQ on one account. You are not allowed
+        to impersonate another player.
+      </Paragraph>
+
+      <h2>General conduct</h2>
+      <Paragraph>Treat everyone with respect.</Paragraph>
+    </article>
+  );
+}
+
+function Paragraph({ children }: { children: React.ReactNode }) {
+  return <p className="my-4">{children}</p>;
+}

app/styles/global.css

@@ -533,6 +533,10 @@ hr {
   margin-block: var(--s-4);
 }
 
+.text-center {
+  text-align: center;
+}
+
 .text-sm {
   font-size: var(--fonts-sm);
 }

app/styles/play-layout.css

@@ -0,0 +1,14 @@
+.play-layout__link-container {
+  display: flex;
+  justify-content: space-between;
+  margin-block-end: var(--s-2);
+}
+
+.play-layout__link {
+  font-size: var(--fonts-xs);
+  font-weight: var(--body);
+}
+
+.play-layout__link.active {
+  visibility: hidden;
+}