Update extra weapons section

* ExtraContainer split into ExtraContainerItem * Updated Guidebook result item, grid and unit * Updated extra weapons grid and weapon grid
2023-06-30 22:14:08 -07:00 · 2023-06-30 22:14:08 -07:00 · 877cb4491e
commit 877cb4491e
parent c0392a1bab
13 changed files with 161 additions and 136 deletions
--- a/components/extra/ExtraContainer/index.module.scss
+++ b/components/extra/ExtraContainer/index.module.scss
@ -1,50 +1,18 @@
-.ExtraContainer {
+.container {
  background: var(--extra-purple-bg);
  border-radius: $card-corner;
  display: flex;
+  margin: $unit-4x auto 0;
  flex-direction: column;
-  position: relative;
-  left: $unit;
-  margin: 20px auto;
-  max-width: calc($grid-width + 20px);
+  max-width: calc($grid-width + $unit-2x);
  width: 100%;
+  // gap: $unit;

-  .ContainerItem {
-    display: grid;
-    grid-template-columns: 1.19fr 3fr;
-    gap: $unit-2x;
-    padding: $unit-2x $unit-2x $unit-2x;
+  & > * {
+    border-bottom: 2px solid var(--background);

-    &.Disabled {
-      grid-template-columns: 1fr;
-
-      .Header {
-        flex-direction: row;
-        justify-content: space-between;
-      }
-    }
-
-    .Header {
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-      gap: $unit;
-      justify-content: center;
-      min-height: $unit-4x;
-      width: 100%;
-
-      & > h3 {
-        color: var(--extra-purple-text);
-        font-size: $font-small;
-        font-weight: $medium;
-        line-height: 1.2;
-        font-weight: 500;
-        text-align: center;
-      }
-    }
-
-    &:not(:first-child) {
-      border-top: 1px solid var(--extra-purple-card-bg);
+    &:last-child {
+      border-bottom: none;
    }
  }
 }
--- a/components/extra/ExtraContainer/index.tsx
+++ b/components/extra/ExtraContainer/index.tsx
@ -1,11 +1,10 @@
 import React, { PropsWithChildren } from 'react'
 import styles from './index.module.scss'

-// Props
 interface Props {}

-const ExtraContainer = ({ children, ...props }: PropsWithChildren<Props>) => {
-  return <div className="ExtraContainer">{children}</div>
+const ExtraContainer = (props: PropsWithChildren<Props>) => {
+  return <section className={styles.container}>{props.children}</section>
 }

 export default ExtraContainer
--- a/components/extra/ExtraContainerItem/index.module.scss
+++ b/components/extra/ExtraContainerItem/index.module.scss
@ -0,0 +1,47 @@
+.item {
+  position: relative;
+
+  .header {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: $unit;
+    justify-content: center;
+    min-height: $unit-4x;
+    width: 100%;
+
+    & > h3 {
+      color: var(--extra-purple-text);
+      font-size: $font-small;
+      font-weight: $medium;
+      line-height: 1.2;
+      font-weight: 500;
+      text-align: center;
+    }
+  }
+
+  .content {
+    display: grid;
+    grid-template-columns: 1.19fr 3fr;
+    gap: $unit-2x;
+    padding: $unit-2x $unit-2x $unit-2x;
+
+    @include breakpoint(phone) {
+      grid-template-columns: auto;
+      grid-template-rows: auto 1fr;
+    }
+
+    &.Disabled {
+      grid-template-columns: 1fr;
+
+      .Header {
+        flex-direction: row;
+        justify-content: space-between;
+      }
+    }
+
+    &:not(:first-child) {
+      border-top: 1px solid var(--extra-purple-card-bg);
+    }
+  }
+}
--- a/components/extra/ExtraContainerItem/index.tsx
+++ b/components/extra/ExtraContainerItem/index.tsx
@ -0,0 +1,35 @@
+import React, { PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import styles from './index.module.scss'
+
+// Props
+interface Props {
+  title: string
+  className?: string
+}
+
+const ExtraContainerItem = ({
+  title,
+  children,
+  ...props
+}: PropsWithChildren<Props>) => {
+  const classes = classNames(
+    {
+      [styles.item]: true,
+    },
+    props.className?.split(' ').map((c) => styles[c])
+  )
+
+  return (
+    <div className={classes}>
+      <div className={styles.content}>
+        <header className={styles.header}>
+          <h3>{title}</h3>
+        </header>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default ExtraContainerItem
--- a/components/extra/ExtraWeaponsGrid/index.module.scss
+++ b/components/extra/ExtraWeaponsGrid/index.module.scss
@ -1,26 +1,14 @@
-.ExtraWeapons {
-  #ExtraWeaponGrid {
-    display: grid;
-    gap: $unit-3x;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+.grid {
+  display: grid;
+  gap: $unit-3x;
+  grid-template-columns: repeat(3, minmax(0, 1fr));

-    @include breakpoint(tablet) {
-      gap: $unit-2x;
-    }
+  @include breakpoint(tablet) {
+    gap: $unit-2x;
+  }

-    @include breakpoint(phone) {
-      gap: $unit;
-    }
-
-    .WeaponUnit {
-      .WeaponImage {
-        background: var(--extra-purple-card-bg);
-
-        .icon svg {
-          fill: var(--extra-purple-secondary);
-        }
-      }
-    }
+  @include breakpoint(phone) {
+    gap: $unit;
  }

  .ExtraGrid.Weapons {
--- a/components/extra/ExtraWeaponsGrid/index.tsx
+++ b/components/extra/ExtraWeaponsGrid/index.tsx
@ -30,18 +30,11 @@ const ExtraWeaponsGrid = ({
  updateObject,
  updateUncap,
 }: Props) => {
-  const { t } = useTranslation('common')
-
-  const classes = classNames({
-    ExtraWeapons: true,
-    ContainerItem: true,
-  })
-
-  const extraWeapons = (
-    <ul id="ExtraWeaponGrid">
+  return (
+    <ul className={styles.grid}>
      {Array.from(Array(EXTRA_WEAPONS_COUNT)).map((x, i) => {
        const itemClasses = classNames({
-          Empty: grid[offset + i] === undefined,
+          [styles.empty]: grid[offset + i] === undefined,
        })

        return (
@ -60,15 +53,6 @@ const ExtraWeaponsGrid = ({
      })}
    </ul>
  )
-
-  return (
-    <div className={classes}>
-      <div className="Header">
-        <h3>{t('extra_weapons')}</h3>
-      </div>
-      {extraWeapons}
-    </div>
-  )
 }

 export default ExtraWeaponsGrid
--- a/components/extra/GuidebookResult/index.module.scss
+++ b/components/extra/GuidebookResult/index.module.scss
@ -1,14 +1,15 @@
-.GuidebookResult {
+.result {
  border-radius: 6px;
  display: flex;
  gap: $unit;
  padding: $unit * 1.5;
+  align-items: center;

  &:hover {
    background: var(--button-contained-bg);
    cursor: pointer;

-    .Info h5 {
+    .info h5 {
      color: var(--text-primary);
    }
  }
@ -21,7 +22,7 @@
    width: 90px;
  }

-  .Info {
+  .info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
--- a/components/extra/GuidebookResult/index.tsx
+++ b/components/extra/GuidebookResult/index.tsx
@ -16,12 +16,12 @@ const GuidebookResult = (props: Props) => {
  const guidebook = props.data

  return (
-    <li className="GuidebookResult" onClick={props.onClick}>
+    <li className={styles.result} onClick={props.onClick}>
      <img
        alt={guidebook.name[locale]}
        src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/guidebooks/book_${guidebook.granblue_id}.png`}
      />
-      <div className="Info">
+      <div className={styles.info}>
        <h5>{guidebook.name[locale]}</h5>
        <p>{guidebook.description[locale]}</p>
      </div>
--- a/components/extra/GuidebookUnit/index.module.scss
+++ b/components/extra/GuidebookUnit/index.module.scss
@ -1,4 +1,4 @@
-.GuidebookUnit {
+.unit {
  align-items: center;
  display: flex;
  flex-direction: column;
@ -24,7 +24,7 @@
    opacity: 1;
  }

-  &.editable .GuidebookImage:hover {
+  &.editable .guidebookImage:hover {
    border: $hover-stroke;
    box-shadow: $hover-shadow;
    cursor: pointer;
@ -57,7 +57,7 @@
    text-align: center;
  }

-  .GuidebookImage {
+  .guidebookImage {
    background: var(--extra-purple-card-bg);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: $unit;
@ -74,7 +74,7 @@
      width: 100%;
      z-index: 2;

-      &.Placeholder {
+      &.placeholder {
        opacity: 0;
      }
    }
@ -92,7 +92,7 @@
    }
  }

-  .GuidebookName {
+  .name {
    font-size: $font-name;
    line-height: 1.2;

@ -101,7 +101,7 @@
    }
  }

-  .GuidebookDescription {
+  .guidebookDescription {
    font-size: $font-small;
    line-height: 1.2;
    text-align: center;
--- a/components/extra/GuidebookUnit/index.tsx
+++ b/components/extra/GuidebookUnit/index.tsx
@ -50,10 +50,11 @@ const GuidebookUnit = ({

  // Classes
  const classes = classNames({
-    GuidebookUnit: true,
-    editable: editable,
-    filled: guidebook !== undefined,
-    empty: guidebook == undefined,
+    unit: true,
+    [styles.unit]: true,
+    [styles.editable]: editable,
+    [styles.filled]: guidebook !== undefined,
+    [styles.empty]: guidebook == undefined,
  })

  const buttonClasses = classNames({
@ -114,8 +115,10 @@ const GuidebookUnit = ({
          <ContextMenu onOpenChange={handleContextMenuOpenChange}>
            <ContextMenuTrigger asChild>
              <Button
+                active={contextMenuOpen}
+                floating={true}
                leftAccessoryIcon={<SettingsIcon />}
-                className={buttonClasses}
+                className="options"
                onClick={handleButtonClicked}
              />
            </ContextMenuTrigger>
@ -165,17 +168,17 @@ const GuidebookUnit = ({

  // Methods: Core element rendering
  const imageElement = (
-    <div className="GuidebookImage" onClick={openSearchModal}>
+    <div className={styles.guidebookImage} onClick={openSearchModal}>
      <img
        alt={guidebook?.name[locale]}
        className={classNames({
-          GridImage: true,
-          Placeholder: imageUrl === '',
+          [styles.image]: true,
+          [styles.placeholder]: imageUrl === '',
        })}
        src={imageUrl !== '' ? imageUrl : placeholderImageUrl}
      />
      {editable ? (
-        <span className="icon">
+        <span className={styles.icon}>
          <PlusIcon />
        </span>
      ) : (
@ -189,7 +192,7 @@ const GuidebookUnit = ({
      <div className={classes}>
        {contextMenu()}
        {imageElement}
-        <h3 className="GuidebookName">{guidebook?.name[locale]}</h3>
+        <h3 className={styles.name}>{guidebook?.name[locale]}</h3>
      </div>
      {searchModal()}
    </>
--- a/components/extra/GuidebooksGrid/index.module.scss
+++ b/components/extra/GuidebooksGrid/index.module.scss
@ -1,5 +1,5 @@
-.Guidebooks {
-  #GuidebooksGrid {
+.guidebooks {
+  .grid {
    display: grid;
    gap: $unit-3x;
    grid-template-columns: repeat(3, minmax(0, 1fr));
--- a/components/extra/GuidebooksGrid/index.tsx
+++ b/components/extra/GuidebooksGrid/index.tsx
@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { useTranslation } from 'next-i18next'
-import Switch from '~components/common/Switch'
-import GuidebookUnit from '../GuidebookUnit'
 import classNames from 'classnames'
+import GuidebookUnit from '../GuidebookUnit'

 import type { SearchableObject } from '~types'

@ -28,12 +27,12 @@ const GuidebooksGrid = ({
  const { t } = useTranslation('common')

  const classes = classNames({
-    Guidebooks: true,
-    ContainerItem: true,
+    [styles.guidebooks]: true,
+    [styles.containerItem]: true,
  })

  const guidebooks = (
-    <ul id="GuidebooksGrid">
+    <ul className={styles.grid}>
      {Array.from(Array(EXTRA_WEAPONS_COUNT)).map((x, i) => {
        const itemClasses = classNames({
          Empty: grid && grid[i] === undefined,
@ -54,14 +53,7 @@ const GuidebooksGrid = ({
    </ul>
  )

-  const guidebookElement = (
-    <div className={classes}>
-      <div className="Header">
-        <h3>{t('sephira_guidebooks')}</h3>
-      </div>
-      {guidebooks}
-    </div>
-  )
+  const guidebookElement = <div className={classes}>{guidebooks}</div>

  return guidebookElement
 }
--- a/components/weapon/WeaponGrid/index.tsx
+++ b/components/weapon/WeaponGrid/index.tsx
@ -12,6 +12,7 @@ import Alert from '~components/common/Alert'
 import WeaponUnit from '~components/weapon/WeaponUnit'
 import ExtraWeaponsGrid from '~components/extra/ExtraWeaponsGrid'
 import ExtraContainer from '~components/extra/ExtraContainer'
+import ExtraContainerItem from '~components/extra/ExtraContainerItem'
 import GuidebooksGrid from '~components/extra/GuidebooksGrid'
 import WeaponConflictModal from '~components/weapon/WeaponConflictModal'

@ -379,23 +380,30 @@ const WeaponGrid = (props: Props) => {
    if (appState.party.raid && appState.party.raid.group.extra) {
      return (
        <ExtraContainer>
-          {appState.party.raid && appState.party.raid.group.extra && (
-            <ExtraWeaponsGrid
-              grid={appState.grid.weapons.allWeapons}
-              editable={props.editable}
-              offset={numWeapons}
-              removeWeapon={removeWeapon}
-              updateObject={receiveWeaponFromSearch}
-              updateUncap={initiateUncapUpdate}
-            />
-          )}
+          <ExtraContainerItem title={t('extra_weapons')} className="weapons">
+            {appState.party.raid && appState.party.raid.group.extra && (
+              <ExtraWeaponsGrid
+                grid={appState.grid.weapons.allWeapons}
+                editable={props.editable}
+                offset={numWeapons}
+                removeWeapon={removeWeapon}
+                updateObject={receiveWeaponFromSearch}
+                updateUncap={initiateUncapUpdate}
+              />
+            )}
+          </ExtraContainerItem>
          {appState.party.raid && appState.party.raid.group.guidebooks && (
-            <GuidebooksGrid
-              grid={appState.party.guidebooks}
-              editable={props.editable}
-              removeGuidebook={removeGuidebook}
-              updateObject={receiveGuidebookFromSearch}
-            />
+            <ExtraContainerItem
+              title={t('sephira_guidebooks')}
+              className="guidebooks"
+            >
+              <GuidebooksGrid
+                grid={appState.party.guidebooks}
+                editable={props.editable}
+                removeGuidebook={removeGuidebook}
+                updateObject={receiveGuidebookFromSearch}
+              />
+            </ExtraContainerItem>
          )}
        </ExtraContainer>
      )