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()} - {weapon?.name.en} + {weapon?.name.en} {props.editable ? ( diff --git a/public/images/placeholder-grid.png b/public/images/placeholder-grid.png new file mode 100644 index 00000000..d47aea09 Binary files /dev/null and b/public/images/placeholder-grid.png differ diff --git a/public/images/placeholder-main.png b/public/images/placeholder-main.png new file mode 100644 index 00000000..8f88e6ec Binary files /dev/null and b/public/images/placeholder-main.png differ