diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss index e8bb254d..ccda269a 100644 --- a/components/WeaponUnit/index.scss +++ b/components/WeaponUnit/index.scss @@ -3,11 +3,16 @@ flex-direction: column; gap: 4px; min-height: 139px; + position: relative; @media (max-width: $medium-screen) { min-height: auto; } + &:hover .Button { + display: block; + } + &.editable .WeaponImage:hover { border: $hover-stroke; box-shadow: $hover-shadow; @@ -66,6 +71,16 @@ display: none; } + .Button { + background: white; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.14); + display: none; + position: absolute; + left: $unit; + top: $unit; + z-index: 3; + } + h3 { color: $grey-00; font-size: $font-button; diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx index f8541653..c171fe8d 100644 --- a/components/WeaponUnit/index.tsx +++ b/components/WeaponUnit/index.tsx @@ -2,9 +2,13 @@ import React, { useEffect, useState } from 'react' import classnames from 'classnames' import SearchModal from '~components/SearchModal' +import WeaponModal from '~components/WeaponModal' import UncapIndicator from '~components/UncapIndicator' -import PlusIcon from '~public/icons/Add.svg' +import Button from '~components/Button' +import { ButtonType } from '~utils/enums' + +import PlusIcon from '~public/icons/Add.svg' import './index.scss' interface Props { @@ -53,6 +57,14 @@ const WeaponUnit = (props: Props) => { props.updateUncap(props.gridWeapon.id, props.position, uncap) } + function canBeModified(gridWeapon: GridWeapon) { + const weapon = gridWeapon.object + + console.log(`${weapon.name.en}: ${weapon.series} ${weapon.ax > 0 || (weapon.series) && [2, 3, 8, 22, 25].includes(weapon.series)}`) + return weapon.ax > 0 || + (weapon.series) && [2, 3, 8, 22, 25].includes(weapon.series) + } + const image = (
{weapon?.name.en} @@ -61,18 +73,27 @@ const WeaponUnit = (props: Props) => { ) const editableImage = ( - - {image} - +
+ + {image} + +
) + console.log(gridWeapon?.object) return (
+ { (props.editable && gridWeapon && canBeModified(gridWeapon)) ? + +
+
+
: '' } { (props.editable) ? editableImage : image } { (gridWeapon) ?