feat: various improvements

NieR-Rein-Guide · Dec 29, 2022 · 9f16308 · 9f16308
1 parent 667d96b
commit 9f16308
Show file tree

Hide file tree

Showing 9 changed files with 416 additions and 422 deletions.
diff --git a/src/components/CharacterInfo.tsx b/src/components/CharacterInfo.tsx
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
@@ -28,7 +28,7 @@ export default function Footer(): JSX.Element {
         <div className="flex gap-x-8 justify-center mt-8 max-w-xl mx-auto">
           {FOOTER_NAVIGATION.map((social) => (
             <Link href={social.href} key={social.label} passHref>
-              <a className="flex text-beige hover:text-beige-accent transition-colors no-underline">
+              <a className="flex text-beige text-center hover:text-beige-accent transition-colors no-underline">
                 {social.label}
               </a>
             </Link>

diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
@@ -7,8 +7,6 @@ import Lottie from "react-lottie-player";
 import logoData from "../../lottie/logo.json";
 import { useEffect, useState } from "react";
 import SVG from "react-inlinesvg";
-import { FormControlLabel, Switch } from "@mui/material";
-import { useSettingsStore } from "../../store/settings";
 import axios from "axios";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import SettingsModal from "@components/SettingsModal";
@@ -20,12 +18,6 @@ export default function Header(): JSX.Element {
   const [isAnimating, setIsAnimating] = useState(false);
   const [animationPosition] = useState(defaultAnimationPosition);
   const [release, setRelease] = useState(null);
-  const showUnreleasedContent = useSettingsStore(
-    (state) => state.showUnreleasedContent
-  );
-  const setShowUnreleasedContent = useSettingsStore(
-    (state) => state.setShowUnreleasedContent
-  );
 
   function start() {
     setIsAnimating(true);
@@ -77,9 +69,9 @@ export default function Header(): JSX.Element {
                 passHref
               >
                 <a title="See releases" className="hover:underline">
-                  {release.tag_name} -{" "}
-                  <span className="md:text-sm">
-                    Published{" "}
+                  {release.tag_name}
+                  <span className="hidden sm:inline md:text-sm">
+                    - Published{" "}
                     {formatDistanceToNow(new Date(release.published_at), {
                       addSuffix: true,
                     })}

diff --git a/src/components/NewCostumes.tsx b/src/components/NewCostumes.tsx
@@ -43,7 +43,7 @@ export default function NewCostumes({ costumes }) {
                     costumes.length - 1 === index ? "col-span-2" : ""
                   )}
                 >
-                  <div className="flex items-center justify-between gap-x-2 text-xl mb-2">
+                  <div className="flex flex-col md:flex-row items-center justify-between gap-x-2 text-xl mb-2">
                     <div className="flex gap-x-2 flex-1">
                       <div className="flex items-center gap-x-2">
                         <div className="w-8">

diff --git a/src/components/NewWeapons.tsx b/src/components/NewWeapons.tsx
@@ -37,7 +37,7 @@ export default function NewWeapons({ weapons }: { weapons: weapon[] }) {
             .map((weapon) => (
               <SwiperSlide key={weapon.weapon_id}>
                 <div className="relative">
-                  <div className="flex items-center justify-between gap-x-2 text-xl mb-2">
+                  <div className="flex flex-col md:flex-row items-center justify-between gap-x-2 text-xl mb-2">
                     <div className="flex gap-x-2 flex-1">
                       <div className="flex items-center gap-x-2">
                         <div className="w-8">

diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
@@ -1,10 +1,4 @@
-import {
-  Button,
-  FormControlLabel,
-  IconButton,
-  Modal,
-  Switch,
-} from "@mui/material";
+import { Button, Modal, Switch } from "@mui/material";
 import { useSettingsStore } from "@store/settings";
 import { useState } from "react";
 import { FiSettings } from "react-icons/fi";
@@ -53,14 +47,19 @@ export default function SettingsModal() {
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
-        <div className="bg-grey-dark p-8 absolute bordered top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-xl space-y-8">
-          <div className="mb-4">
-            <h3 className="flex items-center gap-x-2 text-3xl">
-              <FiSettings /> Settings
-            </h3>
-            <p className="text-grey-detail text-xs">
-              Settings are saved locally.
-            </p>
+        <div className="bg-grey-dark p-8 absolute bordered top-0 left-0 md:top-1/2 md:left-1/2 transform md:-translate-x-1/2 md:-translate-y-1/2 w-full md:max-w-xl space-y-8 overflow-y-auto pt-12 md:pt-8">
+          <div className="flex items-center justify-between mb-4">
+            <div>
+              <h3 className="flex items-center gap-x-2 text-3xl">
+                <FiSettings /> Settings
+              </h3>
+              <p className="text-grey-detail text-xs">
+                Settings are saved locally.
+              </p>
+            </div>
+            <button className="btn" onClick={() => setIsOpen(false)}>
+              Close
+            </button>
           </div>
           <div className="flex flex-col sm:flex-row justify-between">
             <label htmlFor="spoilers" className="text-beige cursor-pointer">

diff --git a/src/components/characters/CharacterRows.tsx b/src/components/characters/CharacterRows.tsx
@@ -1,6 +1,5 @@
 import { CDN_URL } from "@config/constants";
 import React from "react";
-import Link from "next/link";
 import slug from "slugg";
 import { character } from "@prisma/client";
 import { useSettingsStore } from "@store/settings";
@@ -15,32 +14,26 @@ function CharacterDiamond({
 }): JSX.Element {
   return (
     <Tooltip title={character.name}>
-      <Link
-        href={`/characters/${slug(character.name)}`}
-        passHref
-        scroll={false}
-      >
-        <a className="relative">
-          <div
-            className={`pointer-events-auto overflow-hidden iso-bg ${
-              active ? "active" : ""
-            }`}
-          >
-            <img
-              style={{
-                minWidth: "74px",
-                maxWidth: "74px",
-                minHeight: "74px",
-                maxHeight: "74px",
-              }}
-              className="select-none object-none"
-              alt={character.name}
-              title={character.name}
-              src={`${CDN_URL}${character.image_path}`}
-            />
-          </div>
-        </a>
-      </Link>
+      <a href={`/characters/${slug(character.name)}`} className="relative">
+        <div
+          className={`pointer-events-auto overflow-hidden iso-bg ${
+            active ? "active" : ""
+          }`}
+        >
+          <img
+            style={{
+              minWidth: "74px",
+              maxWidth: "74px",
+              minHeight: "74px",
+              maxHeight: "74px",
+            }}
+            className="select-none object-none"
+            alt={character.name}
+            title={character.name}
+            src={`${CDN_URL}${character.image_path}`}
+          />
+        </div>
+      </a>
     </Tooltip>
   );
 }
@@ -60,7 +53,7 @@ export default function CharacterRows({
   const secondRow: character[] = [];
 
   characters.forEach((character, index) => {
-    if (index % 2 == 1) {
+    if (index % 2 === 1) {
       firstRow.push(character);
     } else {
       secondRow.push(character);
@@ -73,7 +66,7 @@ export default function CharacterRows({
 
   return (
     <div className="overflow-auto sm:self-center hidden xl:inline">
-      <div className="relative h-28 mt-8 mx-20">
+      <div className="relative h-28 mt-8 mx-20 transform -translate-x-14">
         <div className="flex gap-6 pointer-events-none">
           {firstRow.map((character) => (
             <React.Fragment key={character.character_id}>

diff --git a/src/components/pages/costume.tsx b/src/components/pages/costume.tsx
@@ -72,6 +72,7 @@ export default function CostumePage({
   const [currentCostume, setCurrentCostume] = useState<
     Costume | costume | null
   >(selectedCostume || costumes[0]);
+  console.log(selectedCostume, currentCostume);
   const showUnreleasedContent = useSettingsStore(
     (state) => state.showUnreleasedContent
   );
@@ -138,36 +139,16 @@ export default function CostumePage({
               onChange={(value) => setAscendLevel(value)}
             />
           </div>
-          {/* <div className="hidden md:flex flex-col justify-between">
-            <p className="text-beige">Ascend Lv. {ascendLevel}</p>
-            <Rating
-              name="ascend-levels"
-              max={4}
-              value={ascendLevel}
-              defaultValue={4}
-              onChange={(e, newValue) => {
-                if (typeof newValue !== "number") {
-                  console.log(newValue);
-                  console.log(ascendLevel);
-                  setAscendLevel(1);
-                  console.log(ascendLevel);
-                }
-                setAscendLevel(newValue);
-              }}
-              getLabelText={(value: number) => `Ascend level ${value}`}
-              precision={1}
-              icon={<AscendFull />}
-              emptyIcon={<AscendEmpty />}
-            />
-          </div> */}
           <CostumeSelect costumes={selectCostumes} />
         </div>
       </nav>
 
-      <CharacterRows
-        characters={characters}
-        currentCharacter={currentCharacter}
-      />
+      <div>
+        <CharacterRows
+          characters={characters}
+          currentCharacter={currentCharacter}
+        />
+      </div>
 
       <div className="hidden md:block">
         <CharacterCostumes
@@ -182,31 +163,21 @@ export default function CostumePage({
       </div>
 
       {costumes.length > 0 && (
-        <div>
-          {(!showUnreleasedContent &&
-            new Date() < new Date(currentCostume.release_time) && (
-              <div
-                key="hidden"
-                className="bg-grey-lighter text-beige hover:bg-opacity-90 transition-colors w-full border-b border-beige-inactive border-opacity-50 p-0 md:p-8 text-center"
-              >
-                Costume hidden.
-              </div>
-            )) || (
-            <CostumeDetails
-              key="details"
-              character={currentCharacter}
-              costume={currentCostume}
-              abilities={abilities[currentCostume.costume_id].sort(
-                (a, b) => a[0].ability_slot - b[0].ability_slot
-              )}
-              skill={skills[currentCostume.costume_id]}
-              stats={stats[currentCostume.costume_id]}
-              rankBonus={rankBonus}
-              ascendLevel={ascendLevel}
-              skillLevel={skillLevel}
-            />
-          )}
-        </div>
+        <CostumeDetails
+          key="details"
+          character={currentCharacter}
+          costume={currentCostume}
+          abilities={
+            abilities?.[currentCostume.costume_id]?.sort(
+              (a, b) => a[0].ability_slot - b[0].ability_slot
+            ) || []
+          }
+          skill={skills[currentCostume.costume_id]}
+          stats={stats[currentCostume.costume_id]}
+          rankBonus={rankBonus}
+          ascendLevel={ascendLevel}
+          skillLevel={skillLevel}
+        />
       )}
     </Layout>
   );

diff --git a/src/pages/characters/[[...costume]].tsx b/src/pages/characters/[[...costume]].tsx
@@ -164,10 +164,14 @@ export async function getStaticProps(context) {
     (a, b) => -b.character.name.localeCompare(a.character.name)
   );
 
-  const selectedCostume = selectedCostumes.find((ch) => {
+  let selectedCostume = selectedCostumes.find((ch) => {
     return ch.slug === slug(costume);
   });
 
+  if (!selectedCostume) {
+    selectedCostume = selectedCostumes[0];
+  }
+
   const stats = {};
   const abilities = {};
   const skills = {};