diff --git a/leaky-ships/components/Item.tsx b/leaky-ships/components/Item.tsx
index be562dd..9218365 100644
--- a/leaky-ships/components/Item.tsx
+++ b/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 (
diff --git a/leaky-ships/components/useGameEvent.tsx b/leaky-ships/components/useGameEvent.tsx
index 72c1f46..849a557 100644
--- a/leaky-ships/components/useGameEvent.tsx
+++ b/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
(initlialLastLeftTile);
const [target, setTarget] = useState(initlialTarget);
@@ -16,14 +24,6 @@ function useGameEvent(count: number) {
const [targetList, setTargetList] = useState([])
const [targetPreviewList, setTargetPreviewList] = useState([])
- 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(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) => )
- }, [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 = [
- { icon: 'burger-menu', text: 'Menu' },
- { icon: 'radar', text: 'Radar scan', type: 'radar' },
- { icon: 'missle', text: 'Fire torpedo', type: 'hTorpedo' },
- { icon: 'scope', text: 'Fire missle', type: 'missle' },
- { icon: 'gear', text: 'Settings' }
- ]
+ const items: ItemsType[] = [
+ { icon: 'burger-menu', text: 'Menu' },
+ { icon: 'radar', text: 'Radar scan', type: 'radar', amount: 1 },
+ { icon: 'missle', text: 'Fire torpedo', type: 'hTorpedo', amount: 1 },
+ { icon: 'scope', text: 'Fire missle', type: 'missle' },
+ { icon: 'gear', text: 'Settings' }
+ ]
return (
{items.map((e, i) => (
diff --git a/leaky-ships/interfaces.ts b/leaky-ships/interfaces.ts
index ff01788..83bd8ec 100644
--- a/leaky-ships/interfaces.ts
+++ b/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,
diff --git a/leaky-ships/styles/App.scss b/leaky-ships/styles/App.scss
index d40b522..bea03e9 100644
--- a/leaky-ships/styles/App.scss
+++ b/leaky-ships/styles/App.scss
@@ -266,12 +266,31 @@ body {
gap: .5rem;
width: 128px;
- img {
- width: 64px;
- padding: 8px;
- @include pixelart;
- background-color: white;
- border-radius: 1rem;
+ .container {
+ img {
+ width: 64px;
+ padding: 8px;
+ @include pixelart;
+ 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 {