Big rework for mutliple different events

This commit is contained in:
aronmal 2023-01-14 16:28:03 +01:00
parent eb5e3de267
commit 7e989d8b60
Signed by: aronmal
GPG key ID: 816B7707426FC612
9 changed files with 163 additions and 222 deletions

View file

@ -1,24 +1,24 @@
import { CSSProperties, Dispatch, SetStateAction } from 'react';
import { borderCN, cornerCN, fieldIndex, isHit } from '../helpers';
import { HitDispatchType, HitType, LastLeftTileType, TargetPreviewPosType, TargetType } from '../interfaces';
import { borderCN, cornerCN, fieldIndex } from '../helpers';
import { LastLeftTileType, TargetPreviewPosType } from '../interfaces';
function BorderTiles({ props: { count, setTarget, setTargetPreviewPos, hits, DispatchHits, setLastLeftTile } }: {
type TilesType = {
key: number,
isGameTile: boolean,
classNameString: string,
x: number,
y: number
}
function BorderTiles({ props: { count, settingTarget, setTargetPreviewPos, setLastLeftTile } }: {
props: {
count: number,
setTarget: Dispatch<SetStateAction<TargetType>>,
settingTarget: (isGameTile: boolean, x: number, y: number) => void,
setTargetPreviewPos: Dispatch<SetStateAction<TargetPreviewPosType>>,
hits: HitType[],
DispatchHits: Dispatch<HitDispatchType>,
setLastLeftTile: Dispatch<SetStateAction<LastLeftTileType>>
}
}) {
let tilesProperties: {
key: number,
isGameTile: boolean,
classNameString: string,
x: number,
y: number
}[] = [];
let tilesProperties: TilesType[] = [];
for (let y = 0; y < count + 2; y++) {
for (let x = 0; x < count + 2; x++) {
@ -41,20 +41,7 @@ function BorderTiles({ props: { count, setTarget, setTargetPreviewPos, hits, Dis
key={key}
className={classNameString}
style={{ '--x': x, '--y': y } as CSSProperties}
onClick={() => {
if (!isGameTile || isHit(hits, x, y).length)
return;
setTargetPreviewPos(e => ({ ...e, shouldShow: false }))
setTarget(t => {
if (t.x === x && t.y === y && t.show) {
DispatchHits({ type: 'fireMissle', payload: { hit: (x + y) % 2 !== 0, x, y } });
return { show: false, x, y };
} else {
return { show: true, x, y };
}
});
}}
onClick={() => settingTarget(isGameTile, x, y)}
onMouseEnter={() => setTargetPreviewPos({ x, y, shouldShow: isGameTile })}
onMouseLeave={() => setLastLeftTile({ x, y })}
></div>

View file

@ -14,10 +14,9 @@ function Gamefield() {
targets,
eventBar,
setLastLeftTile,
setTarget,
settingTarget,
setTargetPreviewPos,
hits,
DispatchHits
hits
} = useGameEvent(count);
return (
@ -25,7 +24,7 @@ function Gamefield() {
{/* <Bluetooth /> */}
<div id="game-frame" style={{ '--i': count } as CSSProperties}>
{/* Bordes */}
<BorderTiles props={{ count, setTarget, setTargetPreviewPos, hits, DispatchHits, setLastLeftTile }} />
<BorderTiles props={{ count, settingTarget, setTargetPreviewPos, setLastLeftTile }} />
{/* Collumn lettes and row numbers */}
<Labeling count={count} />
@ -38,6 +37,7 @@ function Gamefield() {
{/* Fog images */}
{/* <FogImages /> */}
{targets}
{/* <span id='dev-debug' style={{gridArea: '1 / 12 / 1 / 15', backgroundColor: 'red', zIndex: 3} as CSSProperties}>Debug</span> */}
</div>
{eventBar}
</div>

View file

@ -2,32 +2,34 @@ import { faCrosshairs } from '@fortawesome/pro-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { CSSProperties } from 'react';
import classNames from 'classnames';
import { TargetType } from '../interfaces';
import { faRadar } from '@fortawesome/pro-thin-svg-icons';
function Target({ props: {
function GamefieldPointer({ props: {
preview,
type,
edges,
imply,
x,
y,
show
show,
type,
edges,
imply
} }: {
props: {
preview?: boolean,
preview: boolean,
x: number,
y: number,
show: boolean,
type: string,
edges: string[],
imply: boolean,
} & TargetType
}
}) {
const isRadar = type === 'radar'
const style = !isRadar ? { '--x': x, '--y': y } : { '--x1': x - 1, '--x2': x + 2, '--y1': y - 1, '--y2': y + 2 }
const style = !(isRadar && !edges.filter(s => s).length) ? { '--x': x, '--y': y } : { '--x1': x - 1, '--x2': x + 2, '--y1': y - 1, '--y2': y + 2 }
return (
<div className={classNames('hit-svg', preview ? 'target-preview' : 'target', type, { show: show }, ...edges, { edge: !isRadar || !preview }, { imply: imply })} style={style as CSSProperties}>
<div className={classNames('hit-svg', { preview: preview }, 'target', type, { show: show }, ...edges, { imply: imply })} style={style as CSSProperties}>
<FontAwesomeIcon icon={!isRadar ? faCrosshairs : faRadar} />
</div>
)
}
export default Target
export default GamefieldPointer

View file

@ -76,7 +76,7 @@ function Homepage() {
return (
<div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows, '--bg-color-1': colors[count % colors.length], '--bg-color-2': colors[(count + 1) % colors.length] } as CSSProperties}>
{Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))}
{Array.from(Array(params.quantity), (_tile, index) => createTile(index))}
</div>
)
}, [params, position, active, count])

View file

@ -81,7 +81,7 @@ function Homepage2() {
<div className="center-div">
<h1 className={classNames('headline', (!active ? 'active' : 'inactive'))}>{sentences[count % sentences.length]}</h1>
</div>
{Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))}
{Array.from(Array(params.quantity), (_tile, index) => createTile(index))}
</div >
)
}, [params, position, active, action, count])

View file

@ -1,152 +1,111 @@
import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
import { hitReducer, initlialLastLeftTile, initlialTarget, initlialTargetPreview, initlialTargetPreviewPos, isHit } from '../helpers';
import { HitType, ItemsType, LastLeftTileType, TargetListType, TargetModifierType, TargetPreviewPosType, TargetPreviewType, TargetType } from '../interfaces';
import { HitType, ItemsType, LastLeftTileType, ModeType, TargetPreviewPosType, TargetType } from '../interfaces';
import Item from './Item';
import Target from './Target';
export const modes = {
none: { xEnable: false, yEnable: false, type: 'none' },
radar: { xEnable: false, yEnable: false, type: 'radar' },
hTorpedo: { xEnable: true, yEnable: false, type: 'torpedo' },
vTorpedo: { xEnable: false, yEnable: true, type: 'torpedo' },
missle: { xEnable: false, yEnable: false, type: 'missle' }
}
import GamefieldPointer from './GamefieldPointer';
function useGameEvent(count: number) {
const [lastLeftTile, setLastLeftTile] = useState<LastLeftTileType>(initlialLastLeftTile);
const [target, setTarget] = useState<TargetType>(initlialTarget);
const [eventReady, setEventReady] = useState(false);
const [appearOK, setAppearOK] = useState(false);
const [targetPreview, setTargetPreview] = useState<TargetPreviewType>(initlialTargetPreview);
const [targetPreview, setTargetPreview] = useState<TargetType>(initlialTargetPreview);
const [targetPreviewPos, setTargetPreviewPos] = useState<TargetPreviewPosType>(initlialTargetPreviewPos);
const [hits, DispatchHits] = useReducer(hitReducer, [] as HitType[]);
const [mode, setMode] = useState<keyof typeof modes>('none')
const [targetList, setTargetList] = useState<TargetListType[]>([])
const [targetPreviewList, setTargetPreviewList] = useState<TargetListType[]>([])
// const [mode, setMode] = useState<[number, string]>([0, ''])
const [mode, setMode] = useState(0)
function modXY<T>(e: TargetType, mod: TargetModifierType) {
const { show, ...pos } = e
const { target, params } = mod
return {
target: {
show,
x: pos.x + (target.x ?? 0),
y: pos.y + (target.y ?? 0)
},
params
}
}
const modes = useMemo<ModeType[]>(() => [
{ pointerGrid: Array.from(Array(3), () => Array.from(Array(3))), type: 'radar' },
{ pointerGrid: Array.from(Array(3), () => Array.from(Array(1))), type: 'htorpedo' },
{ pointerGrid: Array.from(Array(1), () => Array.from(Array(3))), type: 'vhtorpedo' },
{ pointerGrid: [[{ x: 0, y: 0 }]], type: 'missle' }
], [])
const isSet = useCallback((x: number, y: number) => targetList.filter(({ target }) => x === target.x && y === target.y).length && target.show, [targetList, target])
const scopeGrid = useMemo(() => {
const { xEnable, yEnable } = modes[mode]
const matrix: TargetModifierType[][] = []
let y = 0
let x = 0
const yLength = (yEnable ? 2 : 0)
const xLength = (xEnable ? 2 : 0)
for (let i = 0; i <= yLength; i++) {
for (let i2 = 0; i2 <= xLength; i2++) {
y = i + (yEnable ? -1 : 0);
x = i2 + (xEnable ? -1 : 0);
(matrix[i] ??= [])[i2] = {
target: {
x,
y,
},
params: {
edges: [
i2 === 0 ? 'left' : '',
i2 === xLength ? 'right' : '',
i === 0 ? 'top' : '',
i === yLength ? 'bottom' : '',
],
imply: false
}
}
const settingTarget = useCallback((isGameTile: boolean, x: number, y: number) => {
if (!isGameTile || isHit(hits, x, y).length)
return;
setTargetPreviewPos(e => ({ ...e, shouldShow: false }))
setTarget(t => {
if (t.x === x && t.y === y && t.show) {
DispatchHits({ type: 'fireMissle', payload: { hit: (x + y) % 2 !== 0, x, y } });
return { preview: false, show: false, x, y };
} else {
return { preview: false, show: true, x, y };
}
}
const fields = matrix.reduce((prev, curr) => [...prev, ...curr], [])
return fields
}, [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 }} />)
}, [mode])
useEffect(() => {
const result = scopeGrid.map(e => modXY(target, e))
.filter(({ target: { x, y } }) => {
const border = [
x < 2,
x > count,
y < 2,
y > count,
].reduce((prev, curr) => prev || curr, false)
return !border
}).map(field => {
const { target, params } = field
const { x, y } = target
if (isHit(hits, x, y).length)
return { ...field, params: { ...params, imply: true } }
return field
})
setTargetList(e => {
if (JSON.stringify(e) === JSON.stringify(result))
return e
return result
})
}, [scopeGrid, target, count, hits]);
}, [])
useEffect(() => {
const result = scopeGrid.map(e => modXY(targetPreview, e))
.filter(({ target: { x, y } }) => {
const border = [
x < 2,
x > count + 1,
y < 2,
y > count + 1,
].reduce((prev, curr) => prev || curr, false)
return !border
}).map(field => {
const { target, params } = field
const { x, y } = target
if (isHit(hits, x, y).length || isSet(x, y))
return { ...field, params: { ...params, imply: true } }
return field
const targetList = useCallback((target: TargetType) => {
const { pointerGrid, type } = modes[mode]
const xLength = pointerGrid.length
const yLength = pointerGrid[0].length
const { x: targetX, y: targetY } = target
return pointerGrid.map((arr, i) => {
return arr.map((_, i2) => {
const relativeX = -Math.floor(xLength / 2) + i;
const relativeY = -Math.floor(yLength / 2) + i2;
const x = targetX + (relativeX ?? 0)
const y = targetY + (relativeY ?? 0)
return {
x,
y,
type,
edges: [
i === 0 ? 'left' : '',
i === xLength - 1 ? 'right' : '',
i2 === 0 ? 'top' : '',
i2 === yLength - 1 ? 'bottom' : '',
]
}
})
if (!targetPreviewPos.shouldShow)
return
setTargetPreviewList(e => {
if (JSON.stringify(e) === JSON.stringify(result))
return e
return result
})
}, [scopeGrid, targetPreview, count, hits, isSet, targetPreviewPos.shouldShow]);
.reduce((prev, curr) => [...prev, ...curr], [])
}, [mode, modes])
const isSet = useCallback((x: number, y: number) => !!targetList(target).filter(field => x === field.x && y === field.y).length && target.show, [target, targetList])
const composeTargetTiles = useCallback((target: TargetType) => {
const { preview, show } = target
const result = targetList(target).map(({ x, y, type, edges }) => {
return {
preview,
x,
y,
show,
type,
edges,
imply: !!isHit(hits, x, y).length || (!!isSet(x, y) && preview),
// isborder: x < 2 || x > count + 1 || y < 2 || y > count + 1
}
})
// .filter(({ isborder }) => !isborder)
return result
}, [count, hits, isSet, targetList])
// if (!targetPreviewPos.shouldShow)
// return
// handle visibility and position change of targetPreview
useEffect(() => {
const { show, x, y } = targetPreview;
// if mouse has moved too quickly and last event was entering and leaving the same field, it must have gone outside the grid
const hasLeft = x === lastLeftTile.x && y === lastLeftTile.y
const isSet = x === target.x && y === target.y && target.show
if (show && !appearOK)
setTargetPreview(e => ({ ...e, show: false }));
if (!show && targetPreviewPos.shouldShow && eventReady && appearOK && !isHit(hits, x, y).length && !hasLeft)
if (!show && targetPreviewPos.shouldShow && eventReady && appearOK && !isHit(hits, x, y).length && !isSet && !hasLeft)
setTargetPreview(e => ({ ...e, show: true }));
}, [targetPreview, targetPreviewPos.shouldShow, hits, eventReady, appearOK, lastLeftTile])
}, [targetPreview, targetPreviewPos.shouldShow, hits, eventReady, appearOK, lastLeftTile, target])
// enable targetPreview event again after 200 mil. sec.
useEffect(() => {
const { x: newX, y: newY } = targetPreviewPos;
setEventReady(false);
if (targetPreview.show || !appearOK)
return;
const autoTimeout = setTimeout(() => {
setTargetPreview(e => ({ ...e, x: newX, y: newY }));
setTargetPreview(e => ({ ...e, x: targetPreviewPos.x, y: targetPreviewPos.y }));
setEventReady(true);
setAppearOK(true);
}, 300);
@ -155,14 +114,14 @@ function useGameEvent(count: number) {
return () => {
clearTimeout(autoTimeout);
}
}, [targetPreviewPos, targetPreview.show, appearOK]);
}, [appearOK, targetPreview.show, targetPreviewPos.x, targetPreviewPos.y]);
// approve targetPreview new position after 200 mil. sec.
useEffect(() => {
// early return to start cooldown only when about to show up
const autoTimeout = setTimeout(() => {
setAppearOK(!targetPreview.show)
}, 600);
}, targetPreview.show ? 500 : 300);
// or abort if movement is repeated early
return () => {
@ -170,23 +129,23 @@ function useGameEvent(count: number) {
}
}, [targetPreview.show]);
const targets = useMemo(() => <>
{Targets(targetPreviewList, true)}
{Targets(targetList)}
</>, [Targets, targetList, targetPreviewList])
const targets = useMemo(() => [
...composeTargetTiles(target).map((props, i) => <GamefieldPointer key={'t' + i} props={props} />),
...composeTargetTiles(targetPreview).map((props, i) => <GamefieldPointer key={'p' + i} props={props} />)
], [composeTargetTiles, target, targetPreview])
const eventBar = useMemo(() => {
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: 'radar', text: 'Radar scan', mode: 0, amount: 1 },
{ icon: 'missle', text: 'Fire torpedo', mode: 1, amount: 1 },
{ icon: 'scope', text: 'Fire missle', mode: 2 },
{ icon: 'gear', text: 'Settings' }
]
return (
<div className='event-bar'>
{items.map((e, i) => (
<Item key={i} props={{ ...e, callback: () => { setMode(e.type as any); setTarget(e => ({ ...e, show: false })) } }} />
<Item key={i} props={{ ...e, callback: () => { e.mode !== undefined ? setMode(e.mode) : {}; setTarget(e => ({ ...e, show: false })) } }} />
))}
</div>
)
@ -195,10 +154,9 @@ function useGameEvent(count: number) {
targets,
eventBar,
setLastLeftTile,
setTarget,
settingTarget,
setTargetPreviewPos,
hits,
DispatchHits
hits
}
}

View file

@ -40,11 +40,13 @@ export const initlialLastLeftTile = {
y: 0
};
export const initlialTarget = {
preview: false,
show: false,
x: 2,
y: 2
};
export const initlialTargetPreview = {
preview: true,
show: false,
x: 2,
y: 2

View file

@ -1,15 +1,9 @@
import { modes } from "./components/useGameEvent";
export type LastLeftTileType = {
x: number,
y: number
}
export type TargetType = {
show: boolean,
x: number,
y: number
};
export type TargetPreviewType = {
preview: boolean,
show: boolean,
x: number,
y: number
@ -20,30 +14,19 @@ export type TargetPreviewPosType = {
y: number
}
export type TargetListType = {
target: {
show: boolean,
x: number,
y: number,
},
params: {
edges: string[],
imply: boolean
}
x: number,
y: number,
type: string,
edges: string[]
}
export type TargetModifierType = {
target: {
x: number,
y: number,
},
params: {
edges: string[],
imply: boolean
}
export type ModeType = {
pointerGrid: any[][],
type: string
}
export type ItemsType = {
icon: string,
text: string,
type?: keyof typeof modes,
mode?: number,
amount?: number,
}
export type FieldType = {

View file

@ -159,35 +159,42 @@ body {
--color: red;
color: var(--color);
opacity: 0;
&.preview {
--color: orange;
}
}
&.target-preview {
--color: orange;
color: var(--color);
&.preview {
opacity: 0;
@include transition(.5s);
}
&.radar {
--color: limegreen;
border: 5px solid var(--color);
grid-column-start: var(--x1) !important;
grid-column-end: var(--x2) !important;
grid-row-start: var(--y1) !important;
grid-row-end: var(--y2) !important;
svg {
opacity: 0;
}
&:not(.left):not(.right):not(.top):not(.bottom) {
// border: 5px solid var(--color);
grid-area: var(--y1) /var(--x1) /var(--y2) /var(--x2);
svg {
opacity: 1;
padding: 12.5%;
}
}
&.imply {
box-shadow: 0 0 6px 6px #fff4;
}
&.target-preview {
&.preview {
--color: lawngreen;
background-color: #0001;
border: 5px dashed var(--color);
}
svg {
padding: 12.5%;
// border: 5px dashed var(--color);
}
}
@ -215,20 +222,22 @@ body {
border-bottom: 2px solid var(--color);
}
&.edge.imply.left {
border-left: 2px dashed white;
}
&.imply {
&.left {
border-left: 2px dashed white;
}
&.edge.imply.right {
border-right: 2px dashed white;
}
&.right {
border-right: 2px dashed white;
}
&.edge.imply.top {
border-top: 2px dashed white;
}
&.top {
border-top: 2px dashed white;
}
&.imply.bottom {
border-bottom: 2px dashed white;
&.bottom {
border-bottom: 2px dashed white;
}
}
&.left.top {