Working torpedo

leaky-ships/components/Gamefield/Gamefield.tsx

@@ -13,8 +13,8 @@ import {
   initlialTargetPreview,
   initlialMouseCursor,
   overlapsWithAnyBorder,
-  isHit,
-  composeTargetTiles,
+  isAlreadyHit,
+  targetList,
 } from "@lib/utils/helpers"
 import { CSSProperties, useCallback } from "react"
 import { useEffect, useReducer, useState } from "react"
@@ -33,22 +33,26 @@ function Gamefield() {
 
   const settingTarget = useCallback(
     (isGameTile: boolean, x: number, y: number) => {
-      if (!isGameTile || isHit(x, y, hits).length) return
-      setTarget((t) => {
-        if (t.x === x && t.y === y && t.show) {
-          DispatchHits({
-            type: "fireMissile",
-            payload: { hit: (x + y) % 2 !== 0, x, y },
-          })
-          return { preview: false, show: false, x, y }
-        } else {
-          const target = { show: true, x, y }
-          if (overlapsWithAnyBorder(target, mode)) return t
-          return target
-        }
-      })
+      const list = targetList(targetPreview, mode)
+      if (
+        !isGameTile ||
+        !list.filter(({ x, y }) => !isAlreadyHit(x, y, hits)).length
+      )
+        return
+      if (target.show && target.x == x && target.y == y) {
+        DispatchHits({
+          type: "fireMissile",
+          payload: list.map(({ x, y }) => ({
+            hit: isAlreadyHit(x, y, hits),
+            x,
+            y,
+          })),
+        })
+        setTarget((t) => ({ ...t, show: false }))
+      } else if (!overlapsWithAnyBorder(targetPreview, mode))
+        setTarget({ show: true, x, y })
     },
-    [hits, mode]
+    [hits, mode, targetPreview]
   )
 
   useEffect(() => {

leaky-ships/interfaces/frontend.ts

@@ -30,12 +30,12 @@ export interface Hit extends Position {
 }
 
 interface fireMissile {
-  type: "fireMissile"
+  type: "fireMissile" | "htorpedo" | "vtorpedo"
   payload: {
     x: number
     y: number
     hit: boolean
-  }
+  }[]
 }
 interface removeMissile {
   type: "removeMissile"

leaky-ships/lib/utils/helpers.ts

@@ -28,8 +28,10 @@ export function fieldIndex(count: number, x: number, y: number) {
 }
 export function hitReducer(formObject: Hit[], action: HitDispatch) {
   switch (action.type) {
-    case "fireMissile": {
-      const result = [...formObject, action.payload]
+    case "fireMissile":
+    case "htorpedo":
+    case "vtorpedo": {
+      const result = [...formObject, ...action.payload]
       return result
     }
 
@@ -61,8 +63,8 @@ function isBorder(x: number, y: number, count: number) {
   return x < 2 || x > count + 1 || y < 2 || y > count + 1
 }
 
-export function isHit(x: number, y: number, hits: Hit[]) {
-  return hits.filter((h) => h.x === x && h.y === y)
+export function isAlreadyHit(x: number, y: number, hits: Hit[]) {
+  return !!hits.filter((h) => h.x === x && h.y === y).length
 }
 
 function isSet(x: number, y: number, targetList: TargetList[], show: boolean) {
@@ -72,7 +74,7 @@ function isSet(x: number, y: number, targetList: TargetList[], show: boolean) {
   )
 }
 
-function targetList(
+export function targetList(
   { x: targetX, y: targetY }: Position,
   mode: number
 ): TargetList[] {
@@ -103,7 +105,7 @@ function targetList(
 }
 
 export function overlapsWithAnyBorder(target: Position, mode: number) {
-  return targetList(target, mode).filter(({ x, y }) => isBorder(x, y, count))
+  return !!targetList(target, mode).filter(({ x, y }) => isBorder(x, y, count))
     .length
 }
 
@@ -118,7 +120,7 @@ export function composeTargetTiles(
     return {
       ...targetItem,
       show,
-      imply: !!isHit(x, y, hits).length,
+      imply: isAlreadyHit(x, y, hits),
     }
   })
 }