Add game mode specialties.

main
Joshua Potter 2023-12-06 09:16:57 -07:00
parent c6538c884b
commit a75abbe67d
4 changed files with 72 additions and 5 deletions

View File

@ -3,11 +3,15 @@ import clsx from "clsx"
import type { SearchParams } from "../types/SearchParams" import type { SearchParams } from "../types/SearchParams"
import FilterIcon from "../icons/Filter" import BulletIcon from "../icons/Bullet"
import EnglishIcon from "../icons/English" 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 RightArrowIcon from "../icons/RightArrow"
import RisingGraphIcon from "../icons/RisingGraph" import RisingGraphIcon from "../icons/RisingGraph"
import { Button } from "./Button" import { Button } from "./Button"
import { Mode } from "../types/Mode"
interface FilterOption { interface FilterOption {
title: string title: string
@ -42,6 +46,33 @@ const filters: FilterOption[] = [
isEnabled: (p) => isEnabled: (p) =>
p.languages.includes("en-US") || p.languages.includes("en-GB"), 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 { enum Direction {
@ -74,8 +105,8 @@ export function FilterScroll({ params, onModal, onSelect }: FilterScrollProps) {
} }
return ( 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 <div
ref={viewport} ref={viewport}
className="flex items-center gap-x-12 overflow-hidden" className="flex items-center gap-x-12 overflow-hidden"
@ -93,7 +124,7 @@ export function FilterScroll({ params, onModal, onSelect }: FilterScrollProps) {
</div> </div>
))} ))}
</div> </div>
{/*<div <div
className={clsx( 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", "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" : "" isFlush[0] ? "hidden" : ""
@ -124,7 +155,7 @@ export function FilterScroll({ params, onModal, onSelect }: FilterScrollProps) {
> >
<RightArrowIcon className="h-3 w-3 fill-white" /> <RightArrowIcon className="h-3 w-3 fill-white" />
</Button> </Button>
</div>*/} </div>
</div> </div>
<Button className="flex gap-x-2 py-4" onClick={onModal}> <Button className="flex gap-x-2 py-4" onClick={onModal}>
<FilterIcon className="h-6 w-6 fill-white" /> <FilterIcon className="h-6 w-6 fill-white" />

View File

@ -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

View File

@ -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

View File

@ -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