diff --git a/app/components/Planner.tsx b/app/components/Planner.tsx index 7c7897015..fd745ae57 100644 --- a/app/components/Planner.tsx +++ b/app/components/Planner.tsx @@ -6,9 +6,9 @@ import { Tldraw, type TldrawApp, } from "@tldraw/tldraw"; -import clsx from "clsx"; import randomInt from "just-random-integer"; import * as React from "react"; +import invariant from "tiny-invariant"; import { useForceRefreshOnMount } from "~/hooks/useForceRefresh"; import { useTranslation } from "~/hooks/useTranslation"; import type { LanguageCode } from "~/modules/i18n"; @@ -18,7 +18,6 @@ import { modesShort } from "~/modules/in-game-lists/modes"; import { semiRandomId } from "~/utils/strings"; import { mainWeaponImageUrl, - modeImageUrl, outlinedMainWeaponImageUrl, stageMinimapImageUrlWithEnding, TLDRAW_URL, @@ -26,6 +25,12 @@ import { import { Button } from "./Button"; import { Image } from "./Image"; +export type StageBackgroundStyle = ModeShort | "TCO"; + +const BLUEPRINTS_AVAILABLE: Partial>> = { + TC: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], +}; + export default function Planner() { const { t } = useTranslation(["common", "weapons"]); const { i18n } = useTranslation(); @@ -107,10 +112,10 @@ export default function Planner() { ); const handleAddBackgroundImage = React.useCallback( - ({ stageId, modeShort }: { stageId: StageId; modeShort: ModeShort }) => { + ({ stageId, style }: { stageId: StageId; style: StageBackgroundStyle }) => { app.resetDocument(); handleAddImage({ - src: stageMinimapImageUrlWithEnding({ stageId, modeShort }), + src: stageMinimapImageUrlWithEnding({ stageId, style }), size: [1600, 900], isLocked: true, point: [65, 20], @@ -156,15 +161,27 @@ function StageBackgroundSelector({ }: { onAddBackground: ({ stageId, - modeShort, + style, }: { stageId: StageId; - modeShort: ModeShort; + style: StageBackgroundStyle; }) => void; }) { const { t } = useTranslation(["game-misc", "common"]); const [stageId, setStageId] = React.useState(stageIds[0]); - const [selectedMode, setSelectedMode] = React.useState("SZ"); + const [backgroundStyle, setBackgroundStyle] = + React.useState("SZ"); + + const imgExists = () => { + // normal background image + if (backgroundStyle.length === 2) return true; + + const stageIds = + BLUEPRINTS_AVAILABLE[backgroundStyle.replace("O", "") as ModeShort]; + invariant(stageIds); + + return stageIds.includes(stageId); + }; return (
@@ -182,40 +199,38 @@ function StageBackgroundSelector({ ); })} -
+ + {imgExists() ? ( + + ) : ( + {t("common:plans.noImg")} + )}
); } diff --git a/app/styles/plans.css b/app/styles/plans.css index 66151608d..4f3e33e15 100644 --- a/app/styles/plans.css +++ b/app/styles/plans.css @@ -47,33 +47,6 @@ button[data-state="closed"][aria-haspopup="dialog"] { transform: translate(-50%, -42%); } -.plans__mode-buttons { - display: flex; - width: 100%; - align-items: center; - justify-content: center; -} - -.plans__mode-button { - padding: 0; - padding: var(--s-1-5); - border: none; - border-radius: var(--rounded-full); - background-color: transparent; - color: var(--theme); - opacity: 1 !important; - outline: initial; -} - -.plans__mode-button.selected { - background-color: var(--bg-mode-active); -} - -.plans__mode-img:not(.selected) { - filter: var(--inactive-image-filter); - opacity: 0.6; -} - .plans__weapons-section { position: fixed; z-index: 10; @@ -99,3 +72,8 @@ button[data-state="closed"][aria-haspopup="dialog"] { color: var(--text-lighter); font-size: var(--fonts-xxxs); } + +.plans__no-img-text { + color: var(--theme-error); + font-size: var(--fonts-xs); +} diff --git a/app/utils/urls.ts b/app/utils/urls.ts index 8265ef4f5..99b5788d6 100644 --- a/app/utils/urls.ts +++ b/app/utils/urls.ts @@ -17,6 +17,7 @@ import type { } from "~/modules/in-game-lists/types"; import type navItems from "~/components/layout/nav-items.json"; import { type AuthErrorCode } from "~/modules/auth"; +import type { StageBackgroundStyle } from "~/components/Planner"; export const SPLATOON_2_SENDOU_IN_URL = "https://spl2.sendou.ink"; export const PLUS_SERVER_DISCORD_URL = "https://discord.gg/FW4dKrY"; @@ -164,11 +165,11 @@ export const stageImageUrl = (stageId: StageId) => `/static-assets/img/stages/${stageId}`; export const stageMinimapImageUrlWithEnding = ({ stageId, - modeShort, + style, }: { stageId: StageId; - modeShort: ModeShort; -}) => `/static-assets/img/stage-minimaps/${stageId}-${modeShort}.jpeg`; + style: StageBackgroundStyle; +}) => `/static-assets/img/stage-minimaps/${stageId}-${style}.jpeg`; export function resolveBaseUrl(url: string) { return new URL(url).host; diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 04e4be532..2c86b7f11 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -107,6 +107,8 @@ "weapon.category.SPLATANAS": "Splatanas", "plans.poweredBy": "Powered by {{name}}", + "plans.blueprint": "Blueprint", + "plans.noImg": "No image available", "articles.by": "by {{author}}", diff --git a/public/static-assets/img/stage-minimaps/0-TCO.jpeg b/public/static-assets/img/stage-minimaps/0-TCO.jpeg new file mode 100644 index 000000000..e07831be8 Binary files /dev/null and b/public/static-assets/img/stage-minimaps/0-TCO.jpeg differ diff --git a/public/static-assets/img/stage-minimaps/1-TCO.jpeg b/public/static-assets/img/stage-minimaps/1-TCO.jpeg new file mode 100644 index 000000000..8097d84fa Binary files /dev/null and b/public/static-assets/img/stage-minimaps/1-TCO.jpeg differ diff --git a/public/static-assets/img/stage-minimaps/10-TCO.jpeg b/public/static-assets/img/stage-minimaps/10-TCO.jpeg new file mode 100644 index 000000000..fb8de1b1b Binary files /dev/null and b/public/static-assets/img/stage-minimaps/10-TCO.jpeg differ diff --git a/public/static-assets/img/stage-minimaps/11-TCO.jpeg b/public/static-assets/img/stage-minimaps/11-TCO.jpeg new file mode 100644 index 000000000..94d7b92c9 Binary files /dev/null and b/public/static-assets/img/stage-minimaps/11-TCO.jpeg differ diff --git a/public/static-assets/img/stage-minimaps/2-TCO.jpeg b/public/static-assets/img/stage-minimaps/2-TCO.jpeg new file mode 100644 index 000000000..f16fa5d56 Binary files /dev/null and b/public/static-assets/img/stage-minimaps/2-TCO.jpeg differ diff --git a/public/static-assets/img/stage-minimaps/3-TCO.jpeg b/public/static-assets/img/stage-minimaps/3-TCO.jpeg new file mode 100644 index 000000000..3a9eeebb7 Binary files /dev/null and b/public/static-assets/img/stage-minimaps/3-TCO.jpeg differ diff --git a/public/static-assets/img/stage-minimaps/4-TCO.jpeg b/public/static-assets/img/stage-minimaps/4-TCO.jpeg new file mode 100644 index 000000000..0daf718f7 Binary files /dev/null and b/public/static-assets/img/stage-minimaps/4-TCO.jpeg differ diff --git a/public/static-assets/img/stage-minimaps/5-TCO.jpeg b/public/static-assets/img/stage-minimaps/5-TCO.jpeg new file mode 100644 index 000000000..fc47ebbc6 Binary files /dev/null and b/public/static-assets/img/stage-minimaps/5-TCO.jpeg differ diff --git a/public/static-assets/img/stage-minimaps/6-TCO.jpeg b/public/static-assets/img/stage-minimaps/6-TCO.jpeg new file mode 100644 index 000000000..15c4db6f9 Binary files /dev/null and b/public/static-assets/img/stage-minimaps/6-TCO.jpeg differ diff --git a/public/static-assets/img/stage-minimaps/7-TCO.jpeg b/public/static-assets/img/stage-minimaps/7-TCO.jpeg new file mode 100644 index 000000000..d71a07111 Binary files /dev/null and b/public/static-assets/img/stage-minimaps/7-TCO.jpeg differ diff --git a/public/static-assets/img/stage-minimaps/8-TCO.jpeg b/public/static-assets/img/stage-minimaps/8-TCO.jpeg new file mode 100644 index 000000000..9c73f8d6f Binary files /dev/null and b/public/static-assets/img/stage-minimaps/8-TCO.jpeg differ diff --git a/public/static-assets/img/stage-minimaps/9-TCO.jpeg b/public/static-assets/img/stage-minimaps/9-TCO.jpeg new file mode 100644 index 000000000..d31b577a7 Binary files /dev/null and b/public/static-assets/img/stage-minimaps/9-TCO.jpeg differ