initial minimap design and flight path improvements
This commit is contained in:
parent
fbb1435517
commit
eeafca0714
|
Before Width: | Height: | Size: 213 B After Width: | Height: | Size: 213 B |
3
src/assets/icons/danger.svg
Normal file
3
src/assets/icons/danger.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="80" height="80px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.7605 15.92L15.3605 4.4C14.5005 2.85 13.3105 2 12.0005 2C10.6905 2 9.50047 2.85 8.64047 4.4L2.24047 15.92C1.43047 17.39 1.34047 18.8 1.99047 19.91C2.64047 21.02 3.92047 21.63 5.60047 21.63H18.4005C20.0805 21.63 21.3605 21.02 22.0105 19.91C22.6605 18.8 22.5705 17.38 21.7605 15.92ZM11.2505 9C11.2505 8.59 11.5905 8.25 12.0005 8.25C12.4105 8.25 12.7505 8.59 12.7505 9V14C12.7505 14.41 12.4105 14.75 12.0005 14.75C11.5905 14.75 11.2505 14.41 11.2505 14V9ZM12.7105 17.71C12.6605 17.75 12.6105 17.79 12.5605 17.83C12.5005 17.87 12.4405 17.9 12.3805 17.92C12.3205 17.95 12.2605 17.97 12.1905 17.98C12.1305 17.99 12.0605 18 12.0005 18C11.9405 18 11.8705 17.99 11.8005 17.98C11.7405 17.97 11.6805 17.95 11.6205 17.92C11.5605 17.9 11.5005 17.87 11.4405 17.83C11.3905 17.79 11.3405 17.75 11.2905 17.71C11.1105 17.52 11.0005 17.26 11.0005 17C11.0005 16.74 11.1105 16.48 11.2905 16.29C11.3405 16.25 11.3905 16.21 11.4405 16.17C11.5005 16.13 11.5605 16.1 11.6205 16.08C11.6805 16.05 11.7405 16.03 11.8005 16.02C11.9305 15.99 12.0705 15.99 12.1905 16.02C12.2605 16.03 12.3205 16.05 12.3805 16.08C12.4405 16.1 12.5005 16.13 12.5605 16.17C12.6105 16.21 12.6605 16.25 12.7105 16.29C12.8905 16.48 13.0005 16.74 13.0005 17C13.0005 17.26 12.8905 17.52 12.7105 17.71Z" fill="#292D32"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
src/assets/icons/drone.svg
Normal file
3
src/assets/icons/drone.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="50" height="50" viewBox="0 0 85 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M41.4046 4.94922V25.5621M41.4046 69.8417L41.4046 25.5621M41.4046 69.8417L63.2589 75.9492M41.4046 69.8417L19.0536 75.9492M4.6496 36.2503L41.4046 25.5621M41.4046 25.5621L79.6496 36.2503" stroke="black" stroke-width="9" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 354 B |
4
src/assets/icons/enemy.svg
Normal file
4
src/assets/icons/enemy.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="111" height="111" viewBox="0 0 111 111" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="55.3208" cy="55.3203" r="24" stroke="black" stroke-width="6"/>
|
||||
<rect x="4.24264" y="55.3203" width="72.2348" height="72.2348" transform="rotate(-45 4.24264 55.3203)" stroke="black" stroke-width="6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 319 B |
8
src/assets/icons/enemySelected.svg
Normal file
8
src/assets/icons/enemySelected.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="117" height="114" viewBox="0 0 117 114" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="58.3208" cy="56.3203" r="24" stroke="black" stroke-width="6"/>
|
||||
<rect x="7.24264" y="56.3203" width="72.2348" height="72.2348" transform="rotate(-45 7.24264 56.3203)" stroke="black" stroke-width="6"/>
|
||||
<path d="M113.935 2.11603L92.6216 23.4289" stroke="black" stroke-width="6"/>
|
||||
<path d="M24.313 90.3278L3 111.641" stroke="black" stroke-width="6"/>
|
||||
<path d="M3 2.11603L24.313 23.4289" stroke="black" stroke-width="6"/>
|
||||
<path d="M92.6216 90.3278L113.935 111.641" stroke="black" stroke-width="6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 613 B |
BIN
src/assets/minimap-bg.jpg
Normal file
BIN
src/assets/minimap-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 805 KiB |
@ -1,9 +1,9 @@
|
||||
import Element from 'src/components/Element/Element';
|
||||
import type { Widget } from 'src/types/widget';
|
||||
import type { VehicleWidget as VehicleWidgetType } from 'src/types/widget';
|
||||
|
||||
// widget.type must be 'vehicle'
|
||||
type VehicleWidgetProps = {
|
||||
widget: Widget;
|
||||
widget: VehicleWidgetType;
|
||||
};
|
||||
|
||||
const VehicleWidget = ({ widget }: VehicleWidgetProps) => {
|
||||
@ -15,10 +15,11 @@ const VehicleWidget = ({ widget }: VehicleWidgetProps) => {
|
||||
id={widget.id}
|
||||
className={className}
|
||||
style={{
|
||||
height: widget.h,
|
||||
width: widget.w,
|
||||
height: ~~widget.h,
|
||||
width: ~~widget.w,
|
||||
top: widget.y,
|
||||
left: widget.x,
|
||||
transform: `rotate(${-widget.rotation + Math.PI * 0.5}rad)`,
|
||||
}}
|
||||
>
|
||||
<Element key={widget.id} element={widget.elements[0]}>
|
||||
|
||||
@ -5,92 +5,58 @@ import {
|
||||
getOwnship,
|
||||
updateShipPosition,
|
||||
} from 'src/redux/slices/minimapSlice';
|
||||
import { OWNSHIP_TRAJECTORY } from 'src/utils/constants';
|
||||
import type { VehicleWidget } from 'src/types/widget';
|
||||
import { SHIP_BOUNDS } from 'src/utils/constants';
|
||||
|
||||
const useMoveShips = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const ownship = useAppSelector(getOwnship);
|
||||
const drones = useAppSelector(getDrones);
|
||||
|
||||
const updatePosition = (ship: VehicleWidget) => {
|
||||
let dx = Math.cos(ship.rotation) * ship.speed;
|
||||
let dy = Math.sin(ship.rotation) * ship.speed;
|
||||
if (ship.x <= SHIP_BOUNDS.left) dx = Math.abs(dx);
|
||||
else if (ship.x >= SHIP_BOUNDS.right) dx = -Math.abs(dx);
|
||||
if (ship.y <= SHIP_BOUNDS.top) dy = -Math.abs(dy);
|
||||
else if (ship.y >= SHIP_BOUNDS.bottom) dy = Math.abs(dy);
|
||||
const newRotation = Math.atan2(dy, dx);
|
||||
|
||||
dispatch(
|
||||
updateShipPosition(ship.id, ship.x + dx, ship.y - dy, newRotation),
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log('drones', drones);
|
||||
}, [drones.length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!ownship) return;
|
||||
if (!ownship || ownship.type !== 'vehicle') return;
|
||||
|
||||
// update ownship position every 500ms (0.5s)
|
||||
const timer = setInterval(() => {
|
||||
if (
|
||||
ownship.x + OWNSHIP_TRAJECTORY.xSpeed <= OWNSHIP_TRAJECTORY.end[0] &&
|
||||
ownship.y - OWNSHIP_TRAJECTORY.ySpeed >= OWNSHIP_TRAJECTORY.end[1]
|
||||
) {
|
||||
// only update ownship position if within bounds
|
||||
dispatch(
|
||||
updateShipPosition(
|
||||
ownship.id,
|
||||
ownship.x + OWNSHIP_TRAJECTORY.xSpeed,
|
||||
ownship.y - OWNSHIP_TRAJECTORY.ySpeed,
|
||||
),
|
||||
);
|
||||
}
|
||||
}, 500);
|
||||
updatePosition(ownship);
|
||||
}, 100);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [ownship, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!drones) return;
|
||||
if (!drones || drones.some((widget) => widget.type !== 'vehicle')) return;
|
||||
|
||||
// random drone movement every 1500ms (1.5s)
|
||||
// random drone movement every 100ms
|
||||
const timer = setInterval(() => {
|
||||
const bounds = {
|
||||
left: 400,
|
||||
right: 1920,
|
||||
top: 1080,
|
||||
bottom: 50,
|
||||
};
|
||||
const droneMove = {
|
||||
x: 5,
|
||||
y: 0,
|
||||
};
|
||||
|
||||
drones.forEach((drone) => {
|
||||
droneMove.x = Math.floor(Math.random() * 10) - 5;
|
||||
droneMove.y = Math.floor(Math.random() * 10) - 5;
|
||||
|
||||
if (!drone) return;
|
||||
|
||||
// only move drone if within defined bounds
|
||||
if (
|
||||
drone.x + droneMove.x < bounds.left ||
|
||||
drone.x + droneMove.x > bounds.right
|
||||
) {
|
||||
droneMove.x = -droneMove.x;
|
||||
}
|
||||
if (
|
||||
drone.y + droneMove.y < bounds.bottom ||
|
||||
drone.y + droneMove.y > bounds.top
|
||||
) {
|
||||
droneMove.y = -droneMove.y;
|
||||
}
|
||||
|
||||
dispatch(
|
||||
updateShipPosition(
|
||||
drone.id,
|
||||
drone.x + droneMove.x,
|
||||
drone.y + droneMove.y,
|
||||
),
|
||||
);
|
||||
updatePosition(drone as VehicleWidget);
|
||||
});
|
||||
}, 1500);
|
||||
}, 100);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
|
||||
// dependencies omitted because drones array is changing too frequently
|
||||
// some warning/issue of selector returning different values despite same parameters
|
||||
/* eslint-disable-next-line react-hooks/exhaustive-deps */
|
||||
}, [drones.length]);
|
||||
}, [drones[0], drones.length]);
|
||||
};
|
||||
|
||||
export default useMoveShips;
|
||||
|
||||
@ -1,3 +1,29 @@
|
||||
<svg width="50" height="50" viewBox="0 0 85 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M41.4046 4.94922V25.5621M41.4046 69.8417L41.4046 25.5621M41.4046 69.8417L63.2589 75.9492M41.4046 69.8417L19.0536 75.9492M4.6496 36.2503L41.4046 25.5621M41.4046 25.5621L79.6496 36.2503" stroke="black" stroke-width="9" stroke-linecap="round"/>
|
||||
<svg width="80" height="81" viewBox="0 0 80 81" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_55_1109)">
|
||||
<g filter="url(#filter0_d_55_1109)">
|
||||
<mask id="path-1-outside-1_55_1109" maskUnits="userSpaceOnUse" x="0" y="18.5" width="80" height="45" fill="black">
|
||||
<rect fill="white" y="18.5" width="80" height="45"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M37 23.5C37 21.8431 38.3431 20.5 40 20.5C41.6569 20.5 43 21.8431 43 23.5V37.7368L76.1574 40.3545C77.1977 40.4367 78 41.3048 78 42.3483V43.5C78 44.0523 77.5523 44.5 77 44.5H43V52.1923L53 54.5V56.5H42.25L40.9363 60.0031C40.6119 60.8683 39.3881 60.8683 39.0637 60.0031L37.75 56.5H27V54.5L37 52.1923V44.5H3C2.44772 44.5 2 44.0523 2 43.5V42.3483C2 41.3048 2.80231 40.4367 3.8426 40.3545L37 37.7368V23.5Z"/>
|
||||
</mask>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M37 23.5C37 21.8431 38.3431 20.5 40 20.5C41.6569 20.5 43 21.8431 43 23.5V37.7368L76.1574 40.3545C77.1977 40.4367 78 41.3048 78 42.3483V43.5C78 44.0523 77.5523 44.5 77 44.5H43V52.1923L53 54.5V56.5H42.25L40.9363 60.0031C40.6119 60.8683 39.3881 60.8683 39.0637 60.0031L37.75 56.5H27V54.5L37 52.1923V44.5H3C2.44772 44.5 2 44.0523 2 43.5V42.3483C2 41.3048 2.80231 40.4367 3.8426 40.3545L37 37.7368V23.5Z" fill="#141414"/>
|
||||
<path d="M43 37.7368H41V39.5852L42.8426 39.7306L43 37.7368ZM76.1574 40.3545L76.3148 38.3607H76.3148L76.1574 40.3545ZM43 44.5V42.5H41V44.5H43ZM43 52.1923H41V53.7833L42.5503 54.1411L43 52.1923ZM53 54.5H55V52.909L53.4497 52.5512L53 54.5ZM53 56.5V58.5H55V56.5H53ZM42.25 56.5V54.5H40.864L40.3773 55.7978L42.25 56.5ZM40.9363 60.0031L42.809 60.7054V60.7054L40.9363 60.0031ZM39.0637 60.0031L40.9363 59.3009L40.9363 59.3009L39.0637 60.0031ZM37.75 56.5L39.6227 55.7978L39.136 54.5H37.75V56.5ZM27 56.5H25V58.5H27V56.5ZM27 54.5L26.5503 52.5512L25 52.909V54.5H27ZM37 52.1923L37.4497 54.1411L39 53.7833V52.1923H37ZM37 44.5H39V42.5H37V44.5ZM3.8426 40.3545L3.68519 38.3607H3.68519L3.8426 40.3545ZM37 37.7368L37.1574 39.7306L39 39.5852V37.7368H37ZM40 18.5C37.2386 18.5 35 20.7386 35 23.5H39C39 22.9477 39.4477 22.5 40 22.5V18.5ZM45 23.5C45 20.7386 42.7614 18.5 40 18.5V22.5C40.5523 22.5 41 22.9477 41 23.5H45ZM45 37.7368V23.5H41V37.7368H45ZM76.3148 38.3607L43.1574 35.743L42.8426 39.7306L76 42.3483L76.3148 38.3607ZM80 42.3483C80 40.2613 78.3954 38.525 76.3148 38.3607L76 42.3483H80ZM80 43.5V42.3483H76V43.5H80ZM77 46.5C78.6569 46.5 80 45.1569 80 43.5H76C76 42.9477 76.4477 42.5 77 42.5V46.5ZM43 46.5H77V42.5H43V46.5ZM45 52.1923V44.5H41V52.1923H45ZM53.4497 52.5512L43.4497 50.2435L42.5503 54.1411L52.5503 56.4488L53.4497 52.5512ZM55 56.5V54.5H51V56.5H55ZM42.25 58.5H53V54.5H42.25V58.5ZM42.809 60.7054L44.1227 57.2022L40.3773 55.7978L39.0637 59.3009L42.809 60.7054ZM37.191 60.7054C38.1643 63.3009 41.8357 63.3009 42.809 60.7054L39.0637 59.3009C39.3881 58.4357 40.6119 58.4357 40.9363 59.3009L37.191 60.7054ZM35.8773 57.2022L37.191 60.7054L40.9363 59.3009L39.6227 55.7978L35.8773 57.2022ZM27 58.5H37.75V54.5H27V58.5ZM25 54.5V56.5H29V54.5H25ZM36.5503 50.2435L26.5503 52.5512L27.4497 56.4488L37.4497 54.1411L36.5503 50.2435ZM35 44.5V52.1923H39V44.5H35ZM3 46.5H37V42.5H3V46.5ZM0 43.5C0 45.1569 1.34315 46.5 3 46.5V42.5C3.55228 42.5 4 42.9477 4 43.5H0ZM0 42.3483V43.5H4V42.3483H0ZM3.68519 38.3607C1.60461 38.525 0 40.2613 0 42.3483H4H4L3.68519 38.3607ZM36.8426 35.743L3.68519 38.3607L4 42.3483L37.1574 39.7306L36.8426 35.743ZM35 23.5V37.7368H39V23.5H35Z" fill="white" mask="url(#path-1-outside-1_55_1109)"/>
|
||||
</g>
|
||||
<path d="M15 39.481L15 44.5L2.99998 44.5001C2.44769 44.5001 1.99998 44.0524 1.99998 43.5001L1.99998 42.3494C1.99998 41.3055 2.80291 40.4371 3.84367 40.3555L15 39.481Z" fill="#0066FF"/>
|
||||
<path d="M65 39.481L65 44.5L77 44.5001C77.5523 44.5001 78 44.0524 78 43.5001L78 42.3494C78 41.3055 77.1971 40.4371 76.1563 40.3555L65 39.481Z" fill="#0066FF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_55_1109" x="-8" y="12.5" width="96" height="60.152" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_55_1109"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_55_1109" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_55_1109">
|
||||
<rect width="80" height="80" fill="white" transform="translate(0 0.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 354 B After Width: | Height: | Size: 4.5 KiB |
209
src/icons/ownship.svg
Normal file
209
src/icons/ownship.svg
Normal file
@ -0,0 +1,209 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="56"
|
||||
height="56"
|
||||
viewBox="0 0 56 56"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
id="svg15"
|
||||
sodipodi:docname="ownship.svg"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview15"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="8.7668264"
|
||||
inkscape:cx="19.733481"
|
||||
inkscape:cy="33.763643"
|
||||
inkscape:window-width="1916"
|
||||
inkscape:window-height="1028"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg15" />
|
||||
<g
|
||||
clip-path="url(#clip0_55_1106)"
|
||||
id="g13"
|
||||
transform="translate(0,-0.5)">
|
||||
<circle
|
||||
cx="28"
|
||||
cy="28.5"
|
||||
r="26"
|
||||
fill="#000000"
|
||||
fill-opacity="0.5"
|
||||
stroke="#000000"
|
||||
stroke-width="4"
|
||||
id="circle1" />
|
||||
<mask
|
||||
id="mask0_55_1106"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="0"
|
||||
y="28"
|
||||
width="56"
|
||||
height="29">
|
||||
<rect
|
||||
y="28.5"
|
||||
width="56"
|
||||
height="28"
|
||||
fill="#d9d9d9"
|
||||
id="rect1"
|
||||
x="0" />
|
||||
</mask>
|
||||
<g
|
||||
mask="url(#mask0_55_1106)"
|
||||
id="g2">
|
||||
<circle
|
||||
cx="28"
|
||||
cy="28.5"
|
||||
r="27"
|
||||
stroke="#0eb400"
|
||||
stroke-width="2"
|
||||
id="circle2" />
|
||||
</g>
|
||||
<mask
|
||||
id="mask1_55_1106"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="0"
|
||||
y="0"
|
||||
width="56"
|
||||
height="29">
|
||||
<rect
|
||||
y="0.5"
|
||||
width="56"
|
||||
height="28"
|
||||
fill="#d9d9d9"
|
||||
id="rect2"
|
||||
x="0" />
|
||||
</mask>
|
||||
<g
|
||||
mask="url(#mask1_55_1106)"
|
||||
id="g3">
|
||||
<circle
|
||||
cx="28"
|
||||
cy="28.5"
|
||||
r="27"
|
||||
stroke="#00ff00"
|
||||
stroke-width="2"
|
||||
id="circle3" />
|
||||
</g>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M 0.999878,28.5001 H 5.99988 v 1 H 0.999878 Z"
|
||||
fill="#0eb400"
|
||||
id="path3" />
|
||||
<path
|
||||
d="m 49.9999,28.5001 h 5 v 1 h -5 z"
|
||||
fill="#0eb400"
|
||||
id="path4" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="m 28.9999,50.5001 v 5 h -2 v -5 z"
|
||||
fill="#0eb400"
|
||||
id="path5" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="m 28.9999,1.50006 v 5 h -2 v -5 z"
|
||||
fill="#00ff00"
|
||||
id="path6" />
|
||||
<path
|
||||
d="m 49.9999,27.5001 h 6 v 2 h -6 z"
|
||||
fill="#00ff00"
|
||||
id="path7" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="m 0,27.5001 h 6 v 2 H 0 Z"
|
||||
fill="#00ff00"
|
||||
id="path8" />
|
||||
<g
|
||||
filter="url(#filter0_d_55_1106)"
|
||||
id="g12">
|
||||
<path
|
||||
d="M 28,11.7 43.4,43.9 28,41.1 12.6,43.9 Z"
|
||||
fill="#14ff00"
|
||||
id="path9" />
|
||||
<path
|
||||
d="M 43.4,43.9 28,11.7 v 28.8358 z"
|
||||
fill="#0da800"
|
||||
id="path10" />
|
||||
<path
|
||||
d="m 28,36.9 15.4,7 L 28,41.1 12.6,43.9 Z"
|
||||
fill="#0da800"
|
||||
id="path11" />
|
||||
<path
|
||||
d="M 43.4,43.9 28,36.9 v 4.2 z"
|
||||
fill="#096d00"
|
||||
id="path12" />
|
||||
</g>
|
||||
</g>
|
||||
<defs
|
||||
id="defs15">
|
||||
<filter
|
||||
id="filter0_d_55_1106"
|
||||
x="4.5999799"
|
||||
y="6.7000098"
|
||||
width="46.799999"
|
||||
height="48.200001"
|
||||
filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB">
|
||||
<feFlood
|
||||
flood-opacity="0"
|
||||
result="BackgroundImageFix"
|
||||
id="feFlood13" />
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
id="feColorMatrix13" />
|
||||
<feOffset
|
||||
dy="3"
|
||||
id="feOffset13" />
|
||||
<feGaussianBlur
|
||||
stdDeviation="4"
|
||||
id="feGaussianBlur13" />
|
||||
<feComposite
|
||||
in2="hardAlpha"
|
||||
operator="out"
|
||||
id="feComposite13" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"
|
||||
id="feColorMatrix14" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_55_1106"
|
||||
id="feBlend14" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect1_dropShadow_55_1106"
|
||||
result="shape"
|
||||
id="feBlend15" />
|
||||
</filter>
|
||||
<clipPath
|
||||
id="clip0_55_1106">
|
||||
<rect
|
||||
y="0.5"
|
||||
width="56"
|
||||
height="56"
|
||||
rx="28"
|
||||
fill="#ffffff"
|
||||
id="rect15"
|
||||
x="0" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
@ -5,6 +5,7 @@ import useMoveShips from 'src/hooks/useMoveShips';
|
||||
import useGaze from 'src/hooks/useGaze';
|
||||
import { getElementsInGaze } from 'src/redux/slices/gazeSlice';
|
||||
import { useEffect } from 'react';
|
||||
import background from 'src/assets/minimap-bg.jpg';
|
||||
|
||||
const Minimap = () => {
|
||||
const widgets = useAppSelector((state) =>
|
||||
@ -22,7 +23,10 @@ const Minimap = () => {
|
||||
}, [elementsInGaze]);
|
||||
|
||||
return (
|
||||
<div className="absolute top-0 left-0 bg-stone-200 w-[1920px] h-[1080px] hover:cursor-pointer">
|
||||
<div
|
||||
className="absolute top-0 left-0 bg-stone-200 w-[1920px] h-[1080px] cursor-none"
|
||||
style={{ backgroundImage: `url(${background})` }}
|
||||
>
|
||||
{Object.keys(widgets).map((widgetId) => (
|
||||
<Widget key={widgetId} widget={widgets[widgetId]} />
|
||||
))}
|
||||
|
||||
@ -66,17 +66,22 @@ export const minimapSlice = createSlice({
|
||||
},
|
||||
|
||||
updateShipPosition: {
|
||||
prepare(shipId: string, x: number, y: number) {
|
||||
prepare(shipId: string, x: number, y: number, rotation: number) {
|
||||
return {
|
||||
payload: { shipId, x, y },
|
||||
payload: { shipId, x, y, rotation },
|
||||
};
|
||||
},
|
||||
|
||||
reducer: (
|
||||
state,
|
||||
action: PayloadAction<{ shipId: string; x: number; y: number }>,
|
||||
action: PayloadAction<{
|
||||
shipId: string;
|
||||
x: number;
|
||||
y: number;
|
||||
rotation: number;
|
||||
}>,
|
||||
) => {
|
||||
const { shipId, x, y } = action.payload;
|
||||
const { shipId, x, y, rotation } = action.payload;
|
||||
const ship = state.widgets[shipId];
|
||||
|
||||
// check if ship exists
|
||||
@ -95,6 +100,7 @@ export const minimapSlice = createSlice({
|
||||
...ship,
|
||||
x,
|
||||
y,
|
||||
rotation,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
@ -38,7 +38,8 @@ export type VehicleWidget = BaseWidget & {
|
||||
type: 'vehicle';
|
||||
// this corresponds to the id in the schema-types defined by the world-sim team
|
||||
vehicleId: number;
|
||||
// additonal properties...
|
||||
speed: number;
|
||||
rotation: number; // rad
|
||||
};
|
||||
|
||||
export type CustomWidget = BaseWidget & {
|
||||
|
||||
@ -15,7 +15,7 @@ const Gaze = ({ mousePosition }: GazeProps) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`cursor-none absolute rounded-full ring-4 ring-black z-50`}
|
||||
className={`cursor-none absolute rounded-full ring-4 ring-white z-50 bg-white bg-opacity-20`}
|
||||
style={{
|
||||
width: GAZE_RADIUS * 2,
|
||||
height: GAZE_RADIUS * 2,
|
||||
|
||||
@ -5,11 +5,18 @@ export const SCREEN_SIZE = {
|
||||
height: 1080,
|
||||
};
|
||||
|
||||
export const SHIP_BOUNDS = {
|
||||
left: 150,
|
||||
right: 1750,
|
||||
top: 250,
|
||||
bottom: 950,
|
||||
};
|
||||
|
||||
export const OWNSHIP_TRAJECTORY = {
|
||||
start: [400, 950],
|
||||
end: [1800, 50],
|
||||
xSpeed: 7,
|
||||
ySpeed: 4,
|
||||
xSpeed: 1.4,
|
||||
ySpeed: 0.8,
|
||||
};
|
||||
|
||||
export const GAZE_RADIUS = 50;
|
||||
|
||||
@ -1,15 +1,10 @@
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import type { Element, IconElement } from 'src/types/element';
|
||||
import OWNSHIP_LOGO from 'src/icons/currentPosition.svg';
|
||||
import OWNSHIP_LOGO from 'src/icons/ownship.svg';
|
||||
import DRONE_LOGO from 'src/icons/drone.svg';
|
||||
import type { VehicleWidget, WidgetMap } from 'src/types/widget';
|
||||
|
||||
const uuid1 = uuid();
|
||||
const uuid2 = uuid();
|
||||
const uuid3 = uuid();
|
||||
const uuid4 = uuid();
|
||||
const uuid5 = uuid();
|
||||
const uuid6 = uuid();
|
||||
const ownshipUuid = uuid();
|
||||
|
||||
const createDroneElement = (widgetId: string): IconElement => ({
|
||||
type: 'icon',
|
||||
@ -33,24 +28,29 @@ const createDroneWidget = (
|
||||
w: number,
|
||||
h: number,
|
||||
vehicleId: number,
|
||||
id: string,
|
||||
): VehicleWidget => ({
|
||||
elements: [createDroneElement(id)],
|
||||
id,
|
||||
sectionType: 'free',
|
||||
type: 'vehicle',
|
||||
screen: '/minimap',
|
||||
vehicleId,
|
||||
): VehicleWidget => {
|
||||
const id = uuid();
|
||||
return {
|
||||
elements: [createDroneElement(id)],
|
||||
id,
|
||||
sectionType: 'free',
|
||||
type: 'vehicle',
|
||||
screen: '/minimap',
|
||||
vehicleId,
|
||||
|
||||
x,
|
||||
y,
|
||||
w,
|
||||
h,
|
||||
x,
|
||||
y,
|
||||
w,
|
||||
h,
|
||||
|
||||
canOverlap: false,
|
||||
useElementLocation: false,
|
||||
maxAmount: 10,
|
||||
});
|
||||
speed: Math.random() * 0.5 + 0.25,
|
||||
rotation: Math.random() * Math.PI,
|
||||
|
||||
canOverlap: false,
|
||||
useElementLocation: false,
|
||||
maxAmount: 10,
|
||||
};
|
||||
};
|
||||
|
||||
const ownshipElement: IconElement = {
|
||||
type: 'icon',
|
||||
@ -59,23 +59,26 @@ const ownshipElement: IconElement = {
|
||||
src: OWNSHIP_LOGO,
|
||||
tag: 'ownship',
|
||||
|
||||
widgetId: uuid1,
|
||||
widgetId: ownshipUuid,
|
||||
|
||||
h: 50,
|
||||
w: 50,
|
||||
h: 56,
|
||||
w: 56,
|
||||
|
||||
xWidget: 0,
|
||||
yWidget: 0,
|
||||
};
|
||||
|
||||
export const ownship: VehicleWidget = {
|
||||
id: uuid1,
|
||||
id: ownshipUuid,
|
||||
vehicleId: 0,
|
||||
|
||||
x: 400,
|
||||
y: 950,
|
||||
w: 50,
|
||||
h: 50,
|
||||
w: 56,
|
||||
h: 56,
|
||||
|
||||
speed: 1.5,
|
||||
rotation: 0.2 * Math.PI, // 36deg
|
||||
|
||||
screen: '/minimap',
|
||||
sectionType: 'free',
|
||||
@ -87,13 +90,14 @@ export const ownship: VehicleWidget = {
|
||||
maxAmount: 10,
|
||||
};
|
||||
|
||||
const drone1 = createDroneWidget(500, 200, 50, 50, 1, uuid2);
|
||||
const drone2 = createDroneWidget(1500, 550, 50, 50, 2, uuid3);
|
||||
const drone3 = createDroneWidget(1500, 350, 50, 50, 3, uuid4);
|
||||
const drone4 = createDroneWidget(200, 900, 50, 50, 4, uuid5);
|
||||
const drone5 = createDroneWidget(1150, 750, 50, 50, 5, uuid6);
|
||||
const drone1 = createDroneWidget(500, 300, 80, 80, 1);
|
||||
const drone2 = createDroneWidget(1500, 550, 80, 80, 2);
|
||||
const drone3 = createDroneWidget(1500, 350, 80, 80, 3);
|
||||
const drone4 = createDroneWidget(200, 900, 80, 80, 4);
|
||||
const drone5 = createDroneWidget(1150, 750, 80, 80, 5);
|
||||
const drone6 = createDroneWidget(750, 400, 80, 80, 6);
|
||||
|
||||
export const drones = [drone1, drone2, drone3, drone4, drone5];
|
||||
export const drones = [drone1, drone2, drone3, drone4, drone5, drone6];
|
||||
|
||||
export const initialShips: WidgetMap = {
|
||||
[ownship.id]: ownship,
|
||||
@ -102,4 +106,5 @@ export const initialShips: WidgetMap = {
|
||||
[drone3.id]: drone3,
|
||||
[drone4.id]: drone4,
|
||||
[drone5.id]: drone5,
|
||||
[drone6.id]: drone6,
|
||||
};
|
||||
|
||||
@ -14,9 +14,9 @@ export default defineConfig({
|
||||
overlay: false,
|
||||
}),
|
||||
],
|
||||
server: {
|
||||
open: true,
|
||||
},
|
||||
//server: {
|
||||
// open: true,
|
||||
//},
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user