thi-sjsu-project/theia
0
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

switch widgets to use icon element

Browse Source
This commit is contained in:
thetek 2024-05-09 20:52:30 +02:00
parent a0c19b8247
commit 7b52db00c9
3 changed files with 112 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Widget/MapWarningWidget.tsx
View File

@ -1,50 +1,11 @@
import type { MapWarningWidget as MapWarningWidgetType } from 'src/types/widget';
import IconElement from '../Element/Simple/IconElement';
import threatRadarLgReg from 'src/assets/icons/threats/radar-lg-reg.svg';
import threatRadarSmReg from 'src/assets/icons/threats/radar-sm-reg.svg';
import threatRadarLgEmph from 'src/assets/icons/threats/radar-lg-emph.svg';
import threatRadarSmEmph from 'src/assets/icons/threats/radar-sm-emph.svg';
import threatMissileLgReg from 'src/assets/icons/threats/missile-lg-reg.svg';
import threatMissileSmReg from 'src/assets/icons/threats/missile-sm-reg.svg';
import threatMissileLgEmph from 'src/assets/icons/threats/missile-lg-emph.svg';
import threatMissileSmEmph from 'src/assets/icons/threats/missile-sm-emph.svg';
import threatArtilleryLgReg from 'src/assets/icons/threats/artillery-lg-reg.svg';
import threatArtillerySmReg from 'src/assets/icons/threats/artillery-sm-reg.svg';
import threatArtilleryLgEmph from 'src/assets/icons/threats/artillery-lg-emph.svg';
import threatArtillerySmEmph from 'src/assets/icons/threats/artillery-sm-emph.svg';
import threatAirDefenseLgReg from 'src/assets/icons/threats/airdefense-lg-reg.svg';
import threatAirDefenseSmReg from 'src/assets/icons/threats/airdefense-sm-reg.svg';
import threatAirDefenseLgEmph from 'src/assets/icons/threats/airdefense-lg-emph.svg';
import threatAirDefenseSmEmph from 'src/assets/icons/threats/airdefense-sm-emph.svg';
import Element from '../Element/Element';
type MapWarningWidgetProps = {
widget: MapWarningWidgetType;
};
// [type][small (0 = false, 1 = true)][emphasised (0 = false, 1 = true)]
const ICONS = {
radar: [
[threatRadarLgReg, threatRadarLgEmph],
[threatRadarSmReg, threatRadarSmEmph],
],
artillery: [
[threatArtilleryLgReg, threatArtilleryLgEmph],
[threatArtillerySmReg, threatArtillerySmEmph],
],
'air-defense': [
[threatAirDefenseLgReg, threatAirDefenseLgEmph],
[threatAirDefenseSmReg, threatAirDefenseSmEmph],
],
missile: [
[threatMissileLgReg, threatMissileLgEmph],
[threatMissileSmReg, threatMissileSmEmph],
],
};
const MapWarningWidget = ({ widget }: MapWarningWidgetProps) => {
const img = ICONS[widget.threatType][+widget.small][+widget.emphasised];
return (
<div
key={widget.id}
@ -55,7 +16,9 @@ const MapWarningWidget = ({ widget }: MapWarningWidgetProps) => {
left: ~~widget.x,
}}
>
<img src={img} alt={widget.threatType} />
<Element key={widget.id} element={widget.elements[0]}>
{/* Nested children here if wanted */}
</Element>
</div>
);
};

3
src/types/widget.ts
View File

@ -44,9 +44,6 @@ export type VehicleWidget = BaseWidget & {
export type MapWarningWidget = BaseWidget & {
type: 'map-warning';
small: boolean;
emphasised: boolean;
threatType: 'radar' | 'artillery' | 'air-defense' | 'missile';
};
export type CustomWidget = BaseWidget & {

175
src/utils/initialMapWarnings.ts
View File

@ -3,10 +3,12 @@
import type { MapWarningWidget, WidgetMap } from 'src/types/widget';
import { v4 as uuid } from 'uuid';
const defaults = {
w: 1, // w and h are ignored currently since `small` is used to determine which size the widget should have
h: 1,
import threatMissileLgEmph from 'src/assets/icons/threats/missile-lg-emph.svg';
import threatArtillerySmReg from 'src/assets/icons/threats/artillery-sm-reg.svg';
import threatAirDefenseSmReg from 'src/assets/icons/threats/airdefense-sm-reg.svg';
import threatRadarSmReg from 'src/assets/icons/threats/radar-sm-reg.svg';
const defaultWidget = {
screen: '/minimap',
sectionType: 'free',
type: 'map-warning',
@ -16,116 +18,155 @@ const defaults = {
maxAmount: 10,
} as const;
const defaultIcon = {
type: 'icon',
modality: 'visual',
xWidget: 0,
yWidget: 0,
} as const;
const warn1: MapWarningWidget = {
...defaults,
elements: [],
...defaultWidget,
id: uuid(),
x: 750,
y: 200,
emphasised: true,
small: false,
threatType: 'missile',
w: 128,
h: 129,
elements: [
{
...defaultIcon,
id: uuid(),
src: threatMissileLgEmph,
w: 128,
h: 129,
},
],
};
const warn2: MapWarningWidget = {
...defaults,
elements: [],
...defaultWidget,
id: uuid(),
x: 900,
y: 50,
emphasised: false,
small: true,
threatType: 'air-defense',
w: 80,
h: 81,
elements: [
{
...defaultIcon,
id: uuid(),
src: threatAirDefenseSmReg,
w: 80,
h: 81,
},
],
};
const warn3: MapWarningWidget = {
...defaults,
elements: [],
...defaultWidget,
id: uuid(),
x: 300,
y: 100,
emphasised: false,
small: true,
threatType: 'air-defense',
w: 80,
h: 81,
elements: [
{
...defaultIcon,
id: uuid(),
src: threatAirDefenseSmReg,
w: 80,
h: 81,
},
],
};
const warn4: MapWarningWidget = {
...defaults,
elements: [],
...defaultWidget,
id: uuid(),
x: 500,
y: 200,
emphasised: false,
small: true,
threatType: 'radar',
w: 80,
h: 81,
elements: [
{
...defaultIcon,
id: uuid(),
src: threatRadarSmReg,
w: 80,
h: 81,
},
],
};
const warn5: MapWarningWidget = {
...defaults,
elements: [],
...defaultWidget,
id: uuid(),
x: 950,
y: 400,
emphasised: false,
small: true,
threatType: 'artillery',
w: 80,
h: 81,
elements: [
{
...defaultIcon,
id: uuid(),
src: threatArtillerySmReg,
w: 80,
h: 81,
},
],
};
const warn6: MapWarningWidget = {
...defaults,
elements: [],
...defaultWidget,
id: uuid(),
x: 850,
y: 700,
emphasised: false,
small: true,
threatType: 'radar',
w: 80,
h: 81,
elements: [
{
...defaultIcon,
id: uuid(),
src: threatRadarSmReg,
w: 80,
h: 81,
},
],
};
const warn7: MapWarningWidget = {
...defaults,
elements: [],
...defaultWidget,
id: uuid(),
x: 1300,
y: 100,
emphasised: false,
small: true,
threatType: 'radar',
w: 80,
h: 81,
elements: [
{
...defaultIcon,
id: uuid(),
src: threatRadarSmReg,
w: 80,
h: 81,
},
],
};
const warn8: MapWarningWidget = {
...defaults,
elements: [],
...defaultWidget,
id: uuid(),
x: 1600,
y: 350,
emphasised: false,
small: true,
threatType: 'air-defense',
w: 80,
h: 81,
elements: [
{
...defaultIcon,
id: uuid(),
src: threatAirDefenseSmReg,
w: 80,
h: 81,
},
],
};
export const initailMapWarnings: WidgetMap = {