diff --git a/app/components/layout/nav-items.json b/app/components/layout/nav-items.json index f1772835e..f0c73ffd5 100644 --- a/app/components/layout/nav-items.json +++ b/app/components/layout/nav-items.json @@ -124,5 +124,14 @@ "invert(99%) sepia(3%) saturate(615%) hue-rotate(199deg) brightness(115%) contrast(88%)", "invert(23%) sepia(90%) saturate(2049%) hue-rotate(329deg) brightness(95%) contrast(107%)" ] + }, + { + "name": "links", + "url": "links", + "prefetch": true, + "filters": [ + "invert(76%) sepia(19%) saturate(6678%) hue-rotate(55deg) brightness(106%) contrast(122%)", + "invert(99%) sepia(57%) saturate(1676%) hue-rotate(333deg) brightness(86%) contrast(79%)" + ] } ] diff --git a/app/features/links/links.json b/app/features/links/links.json new file mode 100644 index 000000000..269dc94fe --- /dev/null +++ b/app/features/links/links.json @@ -0,0 +1,67 @@ +[ + { + "title": "Salmon Run.ink", + "url": "https://www.salmonrun.ink", + "description": "website that aims to educate players to optimise their Salmon Run gameplay for best results" + }, + { + "title": "Inkipedia", + "url": "https://splatoonwiki.org", + "description": "Splatoon wiki. Useful for looking up random information about the game" + }, + { + "title": "Lean's Home", + "url": "https://leanny.github.io", + "description": "Lean's datamines provide the most comprehensive collection of collectables and parameters. Also includes the gear seed checker" + }, + { + "title": "Splatoon Stronghold", + "url": "https://www.splatoonstronghold.com", + "description": "provides competitive Splatoon resouces to longtimers and newcomers a like" + }, + { + "title": "stat.ink", + "url": "https://stat.ink", + "description": "upload matches you play to stat.ink to track your stats" + }, + { + "title": "Community Callouts List", + "url": "https://drive.google.com/drive/folders/1qJ2j1VtQnHWvJEqf0Qv0L0WiLHADV0Bv", + "description": "if you want to learn precise callouts this list contains some for all maps" + }, + { + "title": "Splashtag Creator", + "url": "https://seymourschlong.github.io/splashtags/", + "description": "create your own splashtags featuring in-game as well as custom assets" + }, + { + "title": "Yaga's Weapon Kit Generator", + "url": "https://yagaa.itch.io/yagas-weapon-kit-generator", + "description": "create your own dream weapon kit images" + }, + { + "title": "Splatoon3.ink", + "url": "https://splatoon3.ink/", + "description": "view rotations and Splatnet gear rotation without needing the phone app" + }, + { + "title": "Tableturf Battle Server", + "url": "https://discord.gg/fRT8ydhhxT", + "description": "a server dedicated to Tableturf Battle with a lot of helpful resources and events! Also a good place to find opponents to play" + }, + { + "title": "Inkopolis Crosswalk", + "url": "https://discord.gg/45DsKetYNM", + "description": "a server dedicated to making it easier for players to find the resources they need in order to improve, find teams, find events, and meet new people" + }, + { + "title": "splat_zone jp", + "url": "https://www.youtube.com/channel/UCLN8s9Ogn71QcCYIPtb9mtw", + "description": "subscribe to watch Area Cup which is considered one of the highest level tournaments in Japan and the world" + }, + { + "title": "Fluid Priorities and Roles", + "url": "https://docs.google.com/document/d/1t97IZrN0pI_ceUtJrB-8clapCp1P3oddyFzSQ2lGICg", + "description": "outlines how FLC thinks about the game regarding team compositions and player roles" + } +] diff --git a/app/features/links/routes/links.tsx b/app/features/links/routes/links.tsx new file mode 100644 index 000000000..73f39de17 --- /dev/null +++ b/app/features/links/routes/links.tsx @@ -0,0 +1,56 @@ +import { Main } from "~/components/Main"; +import { useSetTitle } from "~/hooks/useSetTitle"; +import { useTranslation } from "~/hooks/useTranslation"; +import type { SendouRouteHandle } from "~/utils/remix"; +import { LINKS_PAGE, navIconUrl } from "~/utils/urls"; +import links from "../links.json"; +import { DiscordIcon } from "~/components/icons/Discord"; +import { YouTubeIcon } from "~/components/icons/YouTube"; + +export const handle: SendouRouteHandle = { + breadcrumb: () => ({ + imgPath: navIconUrl("links"), + href: LINKS_PAGE, + type: "IMAGE", + }), +}; + +export default function LinksPage() { + const { t } = useTranslation(["common"]); + useSetTitle(t("common:pages.links")); + + return ( +
+
+ {links + .sort((a, b) => a.title.localeCompare(b.title)) + .map((link) => { + const isDiscord = link.url.includes("discord"); + const isYoutube = link.url.includes("youtube"); + + return ( +
+

+ + {link.title} + {isDiscord ? ( + + ) : null} + {isYoutube ? ( + + ) : null} + +

+
{link.description}
+
+ ); + })} +
+
+ ); +} diff --git a/app/styles/common.css b/app/styles/common.css index a7a85859f..035193b0f 100644 --- a/app/styles/common.css +++ b/app/styles/common.css @@ -1119,6 +1119,18 @@ dialog::backdrop { margin-left: 0.25em; } +.discord-icon { + width: 1rem; + display: inline; + fill: #7289da; +} + +.youtube-icon { + width: 1rem; + display: inline; + fill: #f00; +} + #nprogress .bar { margin-top: 3rem !important; background: var(--theme) !important; diff --git a/app/utils/urls.ts b/app/utils/urls.ts index 5c76891d1..7514998f8 100644 --- a/app/utils/urls.ts +++ b/app/utils/urls.ts @@ -84,6 +84,7 @@ export const ANALYZER_URL = "/analyzer"; export const OBJECT_DAMAGE_CALCULATOR_URL = "/object-damage-calculator"; export const VODS_PAGE = "/vods"; export const LEADERBOARDS_PAGE = "/leaderboards"; +export const LINKS_PAGE = "/links"; export const BLANK_IMAGE_URL = "/static-assets/img/blank.gif"; export const COMMON_PREVIEW_IMAGE = diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 6dadc81d9..458662756 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -19,6 +19,7 @@ "pages.vods": "Videos", "pages.xsearch": "Top Search", "pages.leaderboards": "Leaderboards", + "pages.links": "Links", "header.profile": "Profile", "header.logout": "Log out", diff --git a/public/static-assets/img/layout/links.avif b/public/static-assets/img/layout/links.avif new file mode 100644 index 000000000..299031530 Binary files /dev/null and b/public/static-assets/img/layout/links.avif differ diff --git a/public/static-assets/img/layout/links.png b/public/static-assets/img/layout/links.png new file mode 100644 index 000000000..165d9e68f Binary files /dev/null and b/public/static-assets/img/layout/links.png differ diff --git a/remix.config.js b/remix.config.js index 585f63810..06dfba898 100644 --- a/remix.config.js +++ b/remix.config.js @@ -95,6 +95,8 @@ module.exports = { ); route("/leaderboards", "features/leaderboards/routes/leaderboards.tsx"); + + route("/links", "features/links/routes/links.tsx"); }); }, serverModuleFormat: "cjs",