Add game mode specialties.

assets/js/react/components/FilterScroll.tsx

@@ -3,11 +3,15 @@ import clsx from "clsx"
 
 import type { SearchParams } from "../types/SearchParams"
 
-import FilterIcon from "../icons/Filter"
+import BulletIcon from "../icons/Bullet"
 import EnglishIcon from "../icons/English"
+import FilterIcon from "../icons/Filter"
+import LightningIcon from "../icons/Lightning"
+import RabbitIcon from "../icons/Rabbit"
 import RightArrowIcon from "../icons/RightArrow"
 import RisingGraphIcon from "../icons/RisingGraph"
 import { Button } from "./Button"
+import { Mode } from "../types/Mode"
 
 interface FilterOption {
   title: string
@@ -42,6 +46,33 @@ const filters: FilterOption[] = [
     isEnabled: (p) =>
       p.languages.includes("en-US") || p.languages.includes("en-GB"),
   },
+  {
+    title: "Rapid Specialty",
+    Icon: RabbitIcon,
+    enable: (p) => {
+      p.modes = [Mode.RAPID]
+      return p
+    },
+    isEnabled: (p) => p.modes.length === 1 && p.modes.includes(Mode.RAPID),
+  },
+  {
+    title: "Blitz Specialty",
+    Icon: LightningIcon,
+    enable: (p) => {
+      p.modes = [Mode.BLITZ]
+      return p
+    },
+    isEnabled: (p) => p.modes.length === 1 && p.modes.includes(Mode.BLITZ),
+  },
+  {
+    title: "Bullet Specialty",
+    Icon: BulletIcon,
+    enable: (p) => {
+      p.modes = [Mode.BULLET]
+      return p
+    },
+    isEnabled: (p) => p.modes.length === 1 && p.modes.includes(Mode.BULLET),
+  },
 ]
 
 enum Direction {
@@ -74,8 +105,8 @@ export function FilterScroll({ params, onModal, onSelect }: FilterScrollProps) {
   }
 
   return (
-    <div className="flex items-center gap-x-8 w-full">
+    <div className="flex items-center gap-x-8">
-      <div className="relative flex overflow-hidden w-full">
+      <div className="relative flex flex-grow overflow-hidden">
         <div
           ref={viewport}
           className="flex items-center gap-x-12 overflow-hidden"
@@ -93,7 +124,7 @@ export function FilterScroll({ params, onModal, onSelect }: FilterScrollProps) {
             </div>
           ))}
         </div>
-        {/*<div
+        <div
           className={clsx(
             "pointer-events-none absolute top-1/2 -translate-y-1/2 bg-gradient-to-r from-white to-transparent to-90% py-4 pr-60",
             isFlush[0] ? "hidden" : ""
@@ -124,7 +155,7 @@ export function FilterScroll({ params, onModal, onSelect }: FilterScrollProps) {
           >
             <RightArrowIcon className="h-3 w-3 fill-white" />
           </Button>
-        </div>*/}
+        </div>
       </div>
       <Button className="flex gap-x-2 py-4" onClick={onModal}>
         <FilterIcon className="h-6 w-6 fill-white" />

assets/js/react/icons/Bullet.tsx

@@ -0,0 +1,14 @@
+import * as React from "react"
+
+const SvgComponent = ({ ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <path d="M297.236 327.676 184.324 214.763 35.455 363.632l-13.606-13.605L0 371.876l13.605 13.605 112.913 112.914h.001L140.124 512l21.849-21.849-13.605-13.606zM479.49 12.536c-3.024 1.166-70.873 27.806-141.442 93.595l67.821 67.821c65.787-70.565 92.429-138.417 93.595-141.441L512 0l-32.51 12.536zM306.914 118.696l-45.368 45.368-55.052 29.17 112.271 112.271 29.17-55.05 45.368-45.369z" />
+  </svg>
+)
+
+export default SvgComponent

assets/js/react/icons/Lightning.tsx

@@ -0,0 +1,13 @@
+import * as React from "react"
+
+const SvgComponent = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" {...props}>
+    <path
+      d="M30.8 2.29a.49.49 0 0 0-.45-.29H16.42a.5.5 0 0 0-.42.23l-10.71 17a.49.49 0 0 0 .41.77h7.67L6.6 33.25a.52.52 0 0 0 .46.75h3a.5.5 0 0 0 .37-.16L28 14.85a.5.5 0 0 0-.37-.85h-6.74l9.83-11.18a.49.49 0 0 0 .08-.53Z"
+      className="clr-i-solid clr-i-solid-path-1"
+    />
+    <path fill="none" d="M0 0h36v36H0z" />
+  </svg>
+)
+
+export default SvgComponent

assets/js/react/icons/Rabbit.tsx

@@ -0,0 +1,9 @@
+import * as React from "react"
+
+const SvgComponent = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" {...props}>
+    <path d="M23.961 5.99a6.144 6.144 0 0 0-1.03.065c-4.414-1.996-5.841-4.914-7.812-4.914-1.705 0-1.62 3.149 4.884 6.521l-.035.046c-.496.68-6.986-3.097-8.985-3.093-2.692.006 1.257 6.368 7.689 5.369.61-.095-.302.909-.227 1.48.023.176.065.345.123.506-6.275-.164-10.188.982-12.463 2.774-1.616-.903-1.672-4.089-3.337-3.265-1.77.876-.679 5.582.831 7.142-1.022 4.432 2.247 9.722 4.846 11.331h20.509c1.112-.789.487-1.41 0-1.997-.602-.725-2.461-1.199-3.993-.998-2.23-.908 5.444-5.973.027-11.95 1.021.058 2.186-.023 3.2-.342l.071.049.045-.086c.931-.313 1.723-.836 2.137-1.648.51-.998-3.303-6.922-6.479-6.989zm.996 4.983a.998.998 0 1 1 0-1.996.998.998 0 0 1 0 1.996z" />
+  </svg>
+)
+
+export default SvgComponent