half radar implementation

leaky-ships/components/Target.tsx

@@ -3,11 +3,29 @@ 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: { preview, type, edges, imply }, target: { x, y, show } }: { props: { preview?: boolean, type: string, edges: string[], imply: boolean }, target: TargetType }) {
+function Target({ props: {
+    preview,
+    type,
+    edges,
+    imply,
+    x,
+    y,
+    show
+} }: {
+    props: {
+        preview?: 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 }
     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} />
+        <div className={classNames('hit-svg', preview ? 'target-preview' : 'target', type, { show: show }, ...edges, { edge: !isRadar || !preview }, { imply: imply })} style={style as CSSProperties}>
+            <FontAwesomeIcon icon={!isRadar ? faCrosshairs : faRadar} />
         </div>
     )
 }

leaky-ships/components/useGameEvent.tsx

@@ -5,8 +5,8 @@ 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' },
+    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' }
@@ -74,7 +74,7 @@ function useGameEvent(count: number) {
 
     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} />)
+        return targets.map(({ target, params }, i) => <Target key={i} props={{ type, preview, ...params, ...target }} />)
     }, [mode])
 
     useEffect(() => {
@@ -162,7 +162,7 @@ function useGameEvent(count: number) {
         // early return to start cooldown only when about to show up
         const autoTimeout = setTimeout(() => {
             setAppearOK(!targetPreview.show)
-        }, 500);
+        }, 600);
 
         // or abort if movement is repeated early
         return () => {
@@ -177,12 +177,12 @@ function useGameEvent(count: number) {
 
     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: 'gear', text: 'Settings' }
-            ]
+            { 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) => (

leaky-ships/styles/App.scss

@@ -168,6 +168,29 @@ body {
       @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;
+
+      &.imply {
+        box-shadow: 0 0 6px 6px #fff4;
+      }
+
+      &.target-preview {
+        --color: lawngreen;
+        background-color: #0001;
+        border: 5px dashed var(--color);
+      }
+
+      svg {
+        padding: 12.5%;
+      }
+    }
+
     &.show {
       opacity: 1;
     }
@@ -192,15 +215,15 @@ body {
       border-bottom: 2px solid var(--color);
     }
 
-    &.imply.left {
+    &.edge.imply.left {
       border-left: 2px dashed white;
     }
 
-    &.imply.right {
+    &.edge.imply.right {
       border-right: 2px dashed white;
     }
 
-    &.imply.top {
+    &.edge.imply.top {
       border-top: 2px dashed white;
     }