New frontpage drawing (#582)

* Aligned * Optimize loading * Bigger top nav * Chunkier top nav icon
2026-03-21 18:04:39 -05:00 · 2021-07-10 13:21:26 +03:00 · 2021-07-10 13:21:26 +03:00 · 58543532ca
commit 58543532ca
parent d12d0461c5
9 changed files with 89 additions and 117 deletions
--- a/components/layout/BeautifulDrawingByBorzoic.tsx
+++ b/components/layout/BeautifulDrawingByBorzoic.tsx
@ -1,10 +1,6 @@
-import {
-  Box,
-  Image,
-  useColorMode,
-  useColorModePreference,
-} from "@chakra-ui/react";
-import { useState } from "react";
+import { Image as ChakraImage, useColorMode } from "@chakra-ui/react";
+import randomColor from "randomcolor";
+import { useEffect, useState } from "react";

 interface HSL {
  h: number;
@ -352,68 +348,56 @@ function getFilters(hex: string) {
  return result.filter;
 }

-// https://leanny.github.io/colors
-const COLOR_OPTIONS: [alphaColorHex: string, bravoColorHex: string][] = [
-  ["#2922b5", "#5eb604"],
-  ["#3b362", "#b1008d"],
-  ["#25b100", "#571db1"],
-  ["#7b0393", "#43ba05"],
-  ["#cae6e", "#f75900"],
-  ["#d9c100", "#7ac9"],
-  ["#ce8003", "#9208b2"],
-  ["#dea801", "#4717a9"],
-  ["#bbc905", "#830b9c"],
-  ["#7edc", "#e1a307"],
-  ["#d60e6e", "#311aa8"],
-  ["#cf0466", "#17a80d"],
-  ["#cb0856", "#199b8"],
-  ["#de0b64", "#bfd002"],
-  ["#4a14aa", "#fb5c03"],
-  ["#5f0fb4", "#8b672"],
-  ["#dea801", "#4717a9"],
-];
-
-const BeautifulDrawingOfBorzoic = ({
-  type,
-  colorIndex,
-  setColorIndex,
-}: {
-  type: "girl" | "boy";
-  colorIndex: number;
-  setColorIndex: (newIndex: number) => void;
-}) => {
+const BeautifulDrawingOfBorzoic = ({ type }: { type: "girl" | "boy" }) => {
+  const [hexCode, setHexCode] = useState(randomColor());
  const { colorMode } = useColorMode();
+  const [drawingImgSrc, setDrawingImgSrc] = useState(
+    `/layout/new_${type}_${colorMode}.png`
+  );
+  const [drawingLoaded, setDrawingLoaded] = useState(false);
+
+  const handleColorChange = () => setHexCode(randomColor());
+
+  useEffect(() => {
+    const loadImage = (imageUrl: string): Promise<string> => {
+      return new Promise((resolve, reject) => {
+        const loadImg = new Image();
+        loadImg.src = imageUrl;
+        loadImg.onload = () => setTimeout(() => resolve(imageUrl));
+        loadImg.onerror = (err) => reject(err);
+      });
+    };
+
+    loadImage(`/layout/new_${type}_${colorMode}.png`)
+      .then((src) => setDrawingImgSrc(src))
+      .catch((err) => console.error("Failed to load images", err));
+  }, [type, colorMode]);

  return (
-    <Box
-      position="relative"
-      onClick={() =>
-        setColorIndex(
-          colorIndex === COLOR_OPTIONS.length - 1 ? 0 : colorIndex + 1
-        )
-      }
-      onMouseEnter={() =>
-        setColorIndex(
-          colorIndex === COLOR_OPTIONS.length - 1 ? 0 : colorIndex + 1
-        )
-      }
-    >
-      <Image
+    <>
+      <ChakraImage
        src={`/layout/new_${type}_bg.png`}
-        maxW={80}
-        position="absolute"
-        top="0"
-        left="0"
-        filter={getFilters(COLOR_OPTIONS[colorIndex][type === "girl" ? 0 : 1])}
+        filter={getFilters(hexCode)}
+        height={["150px", "240px", "300px", "360px"]}
+        gridColumn={type === "girl" ? "2 / 3" : "1 / 2"}
+        justifySelf={type === "girl" ? "flex-start" : "flex-end"}
+        gridRow="1"
        alt=""
+        visibility={drawingLoaded ? "visible" : "hidden"}
      />
-      <Image
-        src={`/layout/new_${type}_${colorMode}.png`}
-        maxW={80}
-        position="absolute"
+      <ChakraImage
+        onClick={handleColorChange}
+        onMouseEnter={handleColorChange}
+        src={drawingImgSrc}
+        height={["150px", "240px", "300px", "360px"]}
+        gridColumn={type === "girl" ? "2 / 3" : "1 / 2"}
+        justifySelf={type === "girl" ? "flex-start" : "flex-end"}
+        gridRow="1"
+        zIndex="10"
        alt=""
+        onLoad={() => setDrawingLoaded(true)}
      />
-    </Box>
+    </>
  );
 };

--- a/components/layout/ColorModeSwitcher.tsx
+++ b/components/layout/ColorModeSwitcher.tsx
@ -18,6 +18,7 @@ const ColorModeSwitcher = ({ isMobile }: { isMobile?: boolean }) => {
      }
      borderRadius={isMobile ? "50%" : "0"}
      size={isMobile ? "lg" : "sm"}
+      height="50px"
      mx={2}
      display={isMobile ? "flex" : ["none", null, null, "flex"]}
    />
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@ -48,11 +48,10 @@ const Header = ({ openNav }: { openNav: () => void }) => {
              : { bg: "black", color: "white" }
          }
          borderRadius="0"
-          size="sm"
          display={["flex", null, null, "none"]}
        />
      </Flex>
-      <Flex justify="center" align="center" fontSize="sm" color="white.300">
+      <Flex justify="center" align="center" color="white.300">
        <Link href="/">{isSmall ? "s.ink" : "sendou.ink"}</Link>{" "}
        {activeNavItem && (
          <>
@ -64,8 +63,8 @@ const Header = ({ openNav }: { openNav: () => void }) => {
              className={
                activeNavItem.code === "splatoon3" ? "rounded" : undefined
              }
-              height={24}
-              width={24}
+              height={36}
+              width={36}
              priority
              alt={`${activeNavItem.name} icon`}
            />
@ -87,7 +86,7 @@ const Header = ({ openNav }: { openNav: () => void }) => {
            borderRadius="0"
            size="xs"
            px={2}
-            height="30px"
+            height="50px"
            mr="0.5rem"
            display={["none", null, null, "inline-block"]}
          >
@ -110,7 +109,7 @@ const Header = ({ openNav }: { openNav: () => void }) => {
          borderRadius="0"
          size="xs"
          px={2}
-          height="30px"
+          height="50px"
          ml="0.5rem"
        >
          {user ? "Log out" : "Log in"}
--- a/components/layout/LanguageSwitcher.tsx
+++ b/components/layout/LanguageSwitcher.tsx
@ -52,6 +52,7 @@ export const LanguageSwitcher = ({ isMobile }: { isMobile?: boolean }) => {
        }
        borderRadius={isMobile ? "50%" : "0"}
        size={isMobile ? "lg" : "sm"}
+        height="50px"
        display={isMobile ? "flex" : ["none", null, null, "flex"]}
      />
      <MenuList bg={secondaryBgColor} color={textColor}>
--- a/package-lock.json
+++ b/package-lock.json
@ -28,6 +28,7 @@
        "next-auth": "^3.27.0",
        "next-seo": "^4.26.0",
        "nprogress": "^0.2.0",
+        "randomcolor": "^0.6.2",
        "react": "^17.0.2",
        "react-color": "^2.19.3",
        "react-datepicker": "^4.1.1",
@ -57,6 +58,7 @@
        "@types/jest": "^26.0.23",
        "@types/node": "^15.12.4",
        "@types/nprogress": "^0.2.0",
+        "@types/randomcolor": "^0.5.5",
        "@types/react": "^17.0.11",
        "@types/react-color": "^3.0.4",
        "@types/react-datepicker": "^3.1.8",
@ -3221,6 +3223,12 @@
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
    },
+    "node_modules/@types/randomcolor": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@types/randomcolor/-/randomcolor-0.5.5.tgz",
+      "integrity": "sha512-PywdYff3F8lGO3BggkCXaPFH0Ue/2Y7xliihoQNkxCGPJ4w7VTMfgcmSMIE6gOVAEu9Wx42JRSuRREVG3AUrtg==",
+      "dev": true
+    },
    "node_modules/@types/react": {
      "version": "17.0.11",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.11.tgz",
@ -11946,6 +11954,11 @@
        "safe-buffer": "^5.1.0"
      }
    },
+    "node_modules/randomcolor": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/randomcolor/-/randomcolor-0.6.2.tgz",
+      "integrity": "sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A=="
+    },
    "node_modules/randomfill": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
@ -17390,6 +17403,12 @@
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
    },
+    "@types/randomcolor": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@types/randomcolor/-/randomcolor-0.5.5.tgz",
+      "integrity": "sha512-PywdYff3F8lGO3BggkCXaPFH0Ue/2Y7xliihoQNkxCGPJ4w7VTMfgcmSMIE6gOVAEu9Wx42JRSuRREVG3AUrtg==",
+      "dev": true
+    },
    "@types/react": {
      "version": "17.0.11",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.11.tgz",
@ -24491,6 +24510,11 @@
        "safe-buffer": "^5.1.0"
      }
    },
+    "randomcolor": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/randomcolor/-/randomcolor-0.6.2.tgz",
+      "integrity": "sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A=="
+    },
    "randomfill": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
--- a/package.json
+++ b/package.json
@ -42,6 +42,7 @@
    "next-auth": "^3.27.0",
    "next-seo": "^4.26.0",
    "nprogress": "^0.2.0",
+    "randomcolor": "^0.6.2",
    "react": "^17.0.2",
    "react-color": "^2.19.3",
    "react-datepicker": "^4.1.1",
@ -71,6 +72,7 @@
    "@types/jest": "^26.0.23",
    "@types/node": "^15.12.4",
    "@types/nprogress": "^0.2.0",
+    "@types/randomcolor": "^0.5.5",
    "@types/react": "^17.0.11",
    "@types/react-color": "^3.0.4",
    "@types/react-datepicker": "^3.1.8",
--- a/pages/demo.tsx
+++ b/pages/demo.tsx
@ -2,25 +2,15 @@

 import { Box } from "@chakra-ui/layout";
 import BeautifulDrawingOfBorzoic from "components/layout/BeautifulDrawingByBorzoic";
-import { useState } from "react";

 const DemoPage = () => {
-  const [colorIndex, setColorIndex] = useState(0);
  return (
    <>
      <Box>
-        <BeautifulDrawingOfBorzoic
-          type="boy"
-          colorIndex={colorIndex}
-          setColorIndex={setColorIndex}
-        />
+        <BeautifulDrawingOfBorzoic type="boy" />
      </Box>
      <Box ml="24rem">
-        <BeautifulDrawingOfBorzoic
-          type="girl"
-          colorIndex={colorIndex}
-          setColorIndex={setColorIndex}
-        />
+        <BeautifulDrawingOfBorzoic type="girl" />
      </Box>
    </>
  );
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -1,46 +1,16 @@
-import { Box, Flex, Heading, useColorMode } from "@chakra-ui/react";
-import { Trans } from "@lingui/macro";
+import { Box, Grid } from "@chakra-ui/react";
 import MyLink from "components/common/MyLink";
-import Video from "components/common/Video";
+import BeautifulDrawingOfBorzoic from "components/layout/BeautifulDrawingByBorzoic";
 import NavButtons from "components/layout/NavButtons";
-import { useMyTheme } from "hooks/common";
-import Image from "next/image";

 const HomePage = () => {
-  const { gray } = useMyTheme();
-  const { colorMode } = useColorMode();
-
  return (
    <>
-      <Heading
-        color={gray}
-        letterSpacing="0.25rem"
-        fontSize="xl"
-        textAlign="center"
-      >
-        Competitive Splatoon Hub
-      </Heading>
-      <Flex justify="center">
-        <Image
-          className="rgb"
-          src={`/layout/posterGirl_${colorMode}.png`}
-          width={481}
-          height={400}
-          priority
-          alt=""
-        />
-      </Flex>
-
-      <Box fontSize="sm" textAlign="right">
-        <Trans>
-          All art by{" "}
-          <MyLink href="https://twitter.com/borzoic_" isExternal>
-            borzoic
-          </MyLink>
-        </Trans>
-      </Box>
-      <NavButtons />
-      <Box textAlign="center" mt={6}>
+      <Grid templateColumns="1fr 1fr">
+        <BeautifulDrawingOfBorzoic type="boy" />
+        <BeautifulDrawingOfBorzoic type="girl" />
+      </Grid>
+      <Box textAlign="center" mt={10} mb={8}>
        The goal of sendou.ink is to provide useful tools and resources for
        Splatoon players. It&apos;s an{" "}
        <MyLink isExternal href="https://github.com/Sendouc/sendou.ink">
@ -57,6 +27,7 @@ const HomePage = () => {
        </MyLink>
        .
      </Box>
+      <NavButtons />
    </>
  );
 };
--- a/pages/styles.css
+++ b/pages/styles.css
@ -30,7 +30,7 @@ header {
  display: grid;
  row-gap: 1.5rem;
  column-gap: 1.5rem;
-  grid-template-rows: 37px 1fr 100px;
+  grid-template-rows: 50px 1fr 100px;
  grid-template-columns: auto 1fr;
  min-height: 100vh;
 }