Implemented amount to Item component

leaky-ships/components/Item.tsx

@@ -1,15 +1,19 @@
-import React from 'react'
+import classNames from 'classnames'
+import React, { CSSProperties } from 'react'
 
-function Item({ props: { icon, text, callback } }: {
+function Item({ props: { icon, text, amount, callback } }: {
     props: {
         icon: string,
         text: string,
+        amount?: number,
         callback: () => void
     }
 }) {
     return (
         <div className='item' onClick={callback}>
-            <img src={`/assets/${icon}.png`} alt={`${icon}.png`} />
+            <div className={classNames('container', { amount: amount })} style={amount ? { '--amount': JSON.stringify(amount.toString()) } as CSSProperties : {}}>
+                <img src={`/assets/${icon}.png`} alt={`${icon}.png`} />
+            </div>
             <span>{text}</span>
         </div>
     )

leaky-ships/components/Target.tsx

@@ -2,8 +2,9 @@ import { faCrosshairs } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { CSSProperties } from 'react';
 import classNames from 'classnames';
+import { TargetType } from '../interfaces';
 
-function Target({ props: { preview, type, edges, imply }, target: { x, y, show } }: { props: { preview?: boolean, type: string, edges: string[], imply: boolean }, target: { x: number, y: number, show: boolean } }) {
+function Target({ props: { preview, type, edges, imply }, target: { x, y, show } }: { props: { preview?: boolean, type: string, edges: string[], imply: boolean }, target: TargetType }) {
     return (
         <div className={classNames('hit-svg', preview ? 'target-preview' : 'target', type, { show: show }, ...edges, { imply: imply })} style={{ '--x': x, '--y': y } as CSSProperties}>
             <FontAwesomeIcon icon={faCrosshairs} />

leaky-ships/components/useGameEvent.tsx

@@ -1,9 +1,17 @@
 import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { hitReducer, initlialLastLeftTile, initlialTarget, initlialTargetPreview, initlialTargetPreviewPos, isHit } from '../helpers';
-import { HitType, LastLeftTileType, TargetListType, TargetModifierType, TargetPreviewPosType, TargetPreviewType, TargetType } from '../interfaces';
+import { HitType, ItemsType, LastLeftTileType, TargetListType, TargetModifierType, TargetPreviewPosType, TargetPreviewType, TargetType } from '../interfaces';
 import Item from './Item';
 import Target from './Target';
 
+export const modes = {
+    none: { xEnable: true, yEnable: true, type: 'none' },
+    radar: { xEnable: true, yEnable: true, type: 'radar' },
+    hTorpedo: { xEnable: true, yEnable: false, type: 'torpedo' },
+    vTorpedo: { xEnable: false, yEnable: true, type: 'torpedo' },
+    missle: { xEnable: false, yEnable: false, type: 'missle' }
+}
+
 function useGameEvent(count: number) {
     const [lastLeftTile, setLastLeftTile] = useState<LastLeftTileType>(initlialLastLeftTile);
     const [target, setTarget] = useState<TargetType>(initlialTarget);
@@ -16,14 +24,6 @@ function useGameEvent(count: number) {
     const [targetList, setTargetList] = useState<TargetListType[]>([])
     const [targetPreviewList, setTargetPreviewList] = useState<TargetListType[]>([])
 
-    const modes = useMemo(() => ({
-        none: { xEnable: true, yEnable: true, type: 'none' },
-        radar: { xEnable: true, yEnable: true, type: 'radar' },
-        hTorpedo: { xEnable: true, yEnable: false, type: 'torpedo' },
-        vTorpedo: { xEnable: false, yEnable: true, type: 'torpedo' },
-        missle: { xEnable: false, yEnable: false, type: 'missle' }
-    }), [])
-
     function modXY<T>(e: TargetType, mod: TargetModifierType) {
         const { show, ...pos } = e
         const { target, params } = mod
@@ -70,12 +70,12 @@ function useGameEvent(count: number) {
         }
         const fields = matrix.reduce((prev, curr) => [...prev, ...curr], [])
         return fields
-    }, [modes, mode])
+    }, [mode])
 
     const Targets = useCallback((targets: TargetListType[], preview?: boolean) => {
         const { type } = modes[mode]
         return targets.map(({ target, params }, i) => <Target key={i} props={{ type, preview, ...params }} target={target} />)
-    }, [modes, mode])
+    }, [mode])
 
     useEffect(() => {
         const result = scopeGrid.map(e => modXY(target, e))
@@ -176,13 +176,13 @@ function useGameEvent(count: number) {
     </>, [Targets, targetList, targetPreviewList])
 
     const eventBar = useMemo(() => {
-        const items = [
+        const items: ItemsType[] = [
-            { icon: 'burger-menu', text: 'Menu' },
+                { icon: 'burger-menu', text: 'Menu' },
-            { icon: 'radar', text: 'Radar scan', type: 'radar' },
+                { icon: 'radar', text: 'Radar scan', type: 'radar', amount: 1 },
-            { icon: 'missle', text: 'Fire torpedo', type: 'hTorpedo' },
+                { icon: 'missle', text: 'Fire torpedo', type: 'hTorpedo', amount: 1 },
-            { icon: 'scope', text: 'Fire missle', type: 'missle' },
+                { icon: 'scope', text: 'Fire missle', type: 'missle' },
-            { icon: 'gear', text: 'Settings' }
+                { icon: 'gear', text: 'Settings' }
-        ]
+            ]
         return (
             <div className='event-bar'>
                 {items.map((e, i) => (

leaky-ships/interfaces.ts

@@ -1,3 +1,5 @@
+import { modes } from "./components/useGameEvent";
+
 export type LastLeftTileType = {
     x: number,
     y: number
@@ -38,6 +40,12 @@ export type TargetModifierType = {
         imply: boolean
     }
 }
+export type ItemsType = {
+    icon: string,
+    text: string,
+    type?: keyof typeof modes,
+    amount?: number,
+}
 export type FieldType = {
     field: string,
     x: number,

leaky-ships/styles/App.scss

@@ -266,12 +266,31 @@ body {
     gap: .5rem;
     width: 128px;
 
-    img {
+    .container {
-      width: 64px;
+      img {
-      padding: 8px;
+        width: 64px;
-      @include pixelart;
+        padding: 8px;
-      background-color: white;
+        @include pixelart;
-      border-radius: 1rem;
+        background-color: white;
+        border-radius: 1rem;
+      }
+
+      &.amount {
+        position: relative;
+
+        &::after {
+          content: var(--amount);
+          position: absolute;
+          top: -6px;
+          right: -6px;
+          color: black;
+          background-color: white;
+          border: 1px solid black;
+          border-radius: 8px;
+          font-size: 16px;
+          padding: 2px 8px;
+        }
+      }
     }
 
     span {