aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Implemented amount to Item component

Browse source
This commit is contained in:
aronmal 2023-01-13 08:49:09 +01:00
parent 313f4b40c9
commit 3535a6f259
Signed by: aronmal
GPG key ID: 816B7707426FC612
5 changed files with 60 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

10
leaky-ships/components/Item.tsx
View file

@ -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>
)

3
leaky-ships/components/Target.tsx
View file

@ -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} />

36
leaky-ships/components/useGameEvent.tsx
View file

@ -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 = [
{ 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 (
<div className='event-bar'>
{items.map((e, i) => (

8
leaky-ships/interfaces.ts
View file

@ -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,

31
leaky-ships/styles/App.scss
View file

@ -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 {