From ed00f43af3b4f60cbad3855d83723371fe8c5d5e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jan 2023 04:51:41 -0800
Subject: [PATCH] Fix empty state for weapons

---
 components/WeaponUnit/index.scss   |   4 ++++
 components/WeaponUnit/index.tsx    |  19 ++++++++++++++++---
 public/images/placeholder-grid.png | Bin 0 -> 615 bytes
 public/images/placeholder-main.png | Bin 0 -> 1135 bytes
 4 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 public/images/placeholder-grid.png
 create mode 100644 public/images/placeholder-main.png

diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss
index 830c1559..349bb8a3 100644
--- a/components/WeaponUnit/index.scss
+++ b/components/WeaponUnit/index.scss
@@ -156,6 +156,10 @@
       position: relative;
       width: 100%;
       z-index: 2;
+
+      &.Placeholder {
+        opacity: 0;
+      }
     }
 
     .icon {
diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx
index fba0d827..d320e60f 100644
--- a/components/WeaponUnit/index.tsx
+++ b/components/WeaponUnit/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
-import classnames from 'classnames'
+import classNames from 'classnames'
 
 import SearchModal from '~components/SearchModal'
 import WeaponModal from '~components/WeaponModal'
@@ -36,7 +36,7 @@ const WeaponUnit = (props: Props) => {
   const locale =
     router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
-  const classes = classnames({
+  const classes = classNames({
     WeaponUnit: true,
     mainhand: props.unitType == 0,
     grid: props.unitType == 1,
@@ -73,6 +73,12 @@ const WeaponUnit = (props: Props) => {
     setImageUrl(imgSrc)
   }
 
+  function placeholderImageUrl() {
+    return props.unitType == 0
+      ? '/images/placeholder-main.png'
+      : '/images/placeholder-grid.png'
+  }
+
   function awakeningImage() {
     if (
       props.gridWeapon &&
@@ -366,7 +372,14 @@ const WeaponUnit = (props: Props) => {
           {ultimaImages()}
         </div>
       </div>
-      <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
+      <img
+        alt={weapon?.name.en}
+        className={classNames({
+          GridImage: true,
+          Placeholder: imageUrl === '',
+        })}
+        src={imageUrl !== '' ? imageUrl : placeholderImageUrl()}
+      />
       {props.editable ? (
         <span className="icon">
           <PlusIcon />
diff --git a/public/images/placeholder-grid.png b/public/images/placeholder-grid.png
new file mode 100644
index 0000000000000000000000000000000000000000..d47aea090d4b9b2aad1e4d34482400dfe844b2b5
GIT binary patch
literal 615
zcmeAS@N?(olHy`uVBq!ia0y~yV3Yu|7jUov$?FNl3P6gpz$3Dlfq`2Xgc%uT%>k)k
zEDmyaVpw-h<|UBBlJ4m1$iT3%pZiZDD^Tu_r;B4q1>@T*j*JWnJPZpn|7W~jqWO+p
s(PH;+HiZIq1tkdu<xw;oL*O$b-#nJZE@zy8>41U3)78&qol`;+0KfKIr~m)}

literal 0
HcmV?d00001

diff --git a/public/images/placeholder-main.png b/public/images/placeholder-main.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f88e6ec35f5b439a8d4381045c8c7c465ab681e
GIT binary patch
literal 1135
zcmeAS@N?(olHy`uVBq!ia0vp^Cm0wQmvFEFStXKL+(3%6z$3Dlfq`2Xgc%uT&5-~K
zG8PB9J29*~C-V}>VM%xNb!1@J*w6hZkrl{g@pN$vsbGA2nUV2;f&hc!_J0@mO%}W0
z%^>?DElvNytM~(x6$Drs6*yQN6*!n21vr`<1X!9zg+@bSG))YXtWdyUf1Pc0_q3K~
QVEMq{>FVdQ&MBb@0Ne+{o&W#<

literal 0
HcmV?d00001