Skip to content

Commit e4bf865

Browse files
mattbruvmattbruv
committed
refactor this component out
1 parent 8cca2d2 commit e4bf865

File tree

2 files changed

+268
-234
lines changed

2 files changed

+268
-234
lines changed

‎map-o-matic-v2/src/MapEditor.tsx

+6-234
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import { useMapOMaticContext } from "./context/MapOMaticContext"
2-
import { ActionIcon, Button, Card, Code, ComboboxItem, Group, HoverCard, Image, Indicator, NumberInput, Popover, Select, Slider, Stack, Switch, Text, TextInput, Tooltip } from "@mantine/core";
2+
import { ActionIcon, Card, Code, ComboboxItem, Group, NumberInput, Select, Slider, Stack, Switch, Text, TextInput, Tooltip } from "@mantine/core";
33
import { MapFile, UUID } from "./ccsr/types";
4-
import { IconArrowDown, IconArrowMergeAltRight, IconArrowUp, IconCodeDots, IconCopyPlus, IconGhost, IconMapPlus, IconMessage, IconPencil, IconPlus, IconTextCaption, IconTool, IconTrash, IconTrashX } from "@tabler/icons-react";
4+
import { IconMapPlus, IconPlus, IconTool, IconTrashX } from "@tabler/icons-react";
55
import { useNavigate } from "react-router-dom";
6-
import { MapOMaticPage } from "./App";
76
import { produce } from "immer";
87
import { useEffect, useState } from "react";
98
import { newMapFile, newMapObject } from "./ccsr/helpers";
109
import { MapObjectType } from "./ccsr/game/types";
1110
import GlobalActions from "./GlobalActions";
1211
import { modals } from "@mantine/modals";
1312
import MapDataExporter from "./MapData";
13+
import { MapObjectListItem } from "./MapObjectListItem";
1414

1515
type MapEditorProps = {
1616
map: MapFile
@@ -140,54 +140,6 @@ function MapEditor({ map }: MapEditorProps) {
140140
}))
141141
}
142142

143-
144-
function removeObj(random_id: string): void {
145-
const updatedObjects = map.data.objects.filter(x => x.random_id !== random_id);
146-
updateMap({
147-
...map,
148-
data: {
149-
...map.data,
150-
objects: updatedObjects
151-
}
152-
});
153-
}
154-
155-
function selectObject(random_id: UUID): void {
156-
updateState({
157-
...project.state,
158-
selectedObject: random_id
159-
})
160-
navigate(MapOMaticPage.ObjectEditor)
161-
}
162-
163-
function resetHighlights(): void {
164-
updateMap(produce(map, draft => {
165-
draft.data.objects.forEach(obj => {
166-
obj.render.alpha = 1
167-
obj.render.outline = false
168-
})
169-
}))
170-
}
171-
172-
function highlightObject(random_id: UUID): void {
173-
const nextMap = produce(map, (draft) => {
174-
const objects = draft.data.objects ?? []
175-
const obj = objects.find(x => x.random_id === random_id)
176-
const notObj = objects.filter(x => x.random_id !== random_id)
177-
if (obj) {
178-
obj.render.alpha = 1
179-
obj.render.outline = true
180-
}
181-
notObj.forEach(x => {
182-
x.render.alpha = 0.5
183-
x.render.outline = false
184-
185-
})
186-
})
187-
188-
updateMap(nextMap)
189-
}
190-
191143
function moveObj(index: number, up: boolean): void {
192144
const newIndex = index + (up ? -1 : 1)
193145
updateMap(produce(map, draft => {
@@ -198,18 +150,6 @@ function MapEditor({ map }: MapEditorProps) {
198150
}))
199151
}
200152

201-
function cloneObj(random_id: UUID, index: number): void {
202-
203-
updateMap(produce(map, draft => {
204-
const obj = map.data.objects.find(x => x.random_id === random_id)
205-
if (obj) {
206-
draft.data.objects.splice(index, 0, {
207-
...obj,
208-
random_id: crypto.randomUUID()
209-
})
210-
}
211-
}))
212-
}
213153

214154
function addObj(): void {
215155
updateMap(produce(map, draft => {
@@ -223,21 +163,6 @@ function MapEditor({ map }: MapEditorProps) {
223163
}))
224164
}
225165

226-
const [moveIndex, setMoveIndex] = useState<string | number>(0)
227-
228-
function moveObjIndex(obj_id: UUID): void {
229-
const obj = map.data.objects.find(x => x.random_id === obj_id)
230-
if (obj) {
231-
updateMap(produce(map, draft => {
232-
const objs = draft.data.objects.filter(x => x.random_id !== obj_id) ?? []
233-
objs?.splice(Number(moveIndex), 0, obj)
234-
if (draft.data.objects) {
235-
draft.data.objects = objs
236-
}
237-
}))
238-
}
239-
}
240-
241166
// Attempts to automatically fix collision by moving
242167
// all floor objects to the bottom
243168
function fixCollision(): void {
@@ -382,162 +307,9 @@ function MapEditor({ map }: MapEditorProps) {
382307
<IconPlus />
383308
</ActionIcon>
384309
</Tooltip>
385-
{map.data.objects.map((obj, index) => {
386-
const messageCount = obj.data.message.length
387-
const condsCount = obj.data.item.COND.length
388-
const invisCount = Object.values(obj.data.item.visi).filter(x => x !== "").length
389-
const name = obj.data.item.name
390-
391-
function iconShade(value: number): "lightgray" | "black" {
392-
return value === 0 ? "lightgray" : "black"
393-
}
394-
395-
function getImage(member: string): string {
396-
if (member.toLowerCase().endsWith(".x"))
397-
member = member.replace(".x", "")
398-
const img = project.images.find(x => x.filename.toLowerCase() === member.toLowerCase())
399-
if (img)
400-
return URL.createObjectURL(img.data)
401-
return ""
402-
}
403-
404-
return (
405-
<div key={obj.random_id}
406-
onMouseEnter={() => highlightObject(obj.random_id)}
407-
onMouseLeave={() => resetHighlights()}
408-
>
409-
<Group>
410-
<div>{index}</div>
411-
<div>
412-
<ActionIcon
413-
color={"yellow"}
414-
title="Move Object Up"
415-
disabled={index === 0}
416-
onClick={() => moveObj(index, true)}>
417-
<IconArrowUp />
418-
</ActionIcon>
419-
<ActionIcon
420-
color={"yellow"}
421-
title="Move Object Down"
422-
disabled={index == (map.data.objects.length ?? 0) - 1}
423-
onClick={() => moveObj(index, false)}>
424-
<IconArrowDown />
425-
</ActionIcon>
426-
<Popover position="bottom" withArrow shadow="md">
427-
<Popover.Target>
428-
<ActionIcon color={"yellow"} title="Move Object to Index">
429-
<IconArrowMergeAltRight />
430-
</ActionIcon>
431-
</Popover.Target>
432-
<Popover.Dropdown>
433-
<NumberInput
434-
label="Move To Index"
435-
min={0}
436-
max={(map.data.objects.length ?? 1) - 1}
437-
onChange={setMoveIndex}
438-
clampBehavior={"strict"} />
439-
<Button onClick={() => moveObjIndex(obj.random_id)}>Move to {moveIndex}</Button>
440-
</Popover.Dropdown>
441-
</Popover>
442-
</div>
443-
<div>
444-
<ActionIcon
445-
color={"green"}
446-
onClick={() => selectObject(obj.random_id)}>
447-
<IconPencil />
448-
</ActionIcon>
449-
<ActionIcon
450-
color={"grape"}
451-
onClick={() => cloneObj(obj.random_id, index)}>
452-
<IconCopyPlus />
453-
</ActionIcon>
454-
</div>
455-
<div>
456-
<Image mah={32} maw={32} src={getImage(obj.member)} alt={obj.member} />
457-
</div>
458-
<Group gap={5}>
459-
<HoverCard shadow={"xl"} disabled={!invisCount}>
460-
<HoverCard.Target>
461-
<Indicator size={16} inline disabled={!invisCount} color={"blue"} label={invisCount}>
462-
<IconGhost color={iconShade(invisCount)} title="Invisibility" />
463-
</Indicator>
464-
</HoverCard.Target>
465-
<HoverCard.Dropdown>
466-
{Object.entries(obj.data.item.visi).filter(([_, o]) => o).map(([key, val]) => (
467-
<div key={key}>{key}: <Code>{val}</Code></div>
468-
))}
469-
</HoverCard.Dropdown>
470-
</HoverCard>
471-
<HoverCard shadow={"xl"} disabled={!condsCount}>
472-
<HoverCard.Target>
473-
<Indicator size={16} inline disabled={!condsCount} color={"blue"} label={condsCount}>
474-
<IconCodeDots color={iconShade(condsCount)} title="Conditions" />
475-
</Indicator>
476-
</HoverCard.Target>
477-
<HoverCard.Dropdown>
478-
{obj.data.item.COND
479-
.map(cond => {
480-
const entries = Object.entries(cond)
481-
return (
482-
<Card withBorder>
483-
<div>
484-
{entries.map(([key, value]) => {
485-
return (
486-
<div key={key}>
487-
{key}: <Code>{value}</Code>
488-
</div>
489-
)
490-
})}
491-
</div>
492-
</Card>
493-
);
494-
})
495-
}
496-
</HoverCard.Dropdown>
497-
</HoverCard>
498-
<HoverCard shadow={"xl"} disabled={!messageCount}>
499-
<HoverCard.Target>
500-
<Indicator size={16} inline disabled={!messageCount} color={"blue"} label={messageCount}>
501-
<IconMessage color={iconShade(messageCount)} title="Messages" />
502-
</Indicator>
503-
</HoverCard.Target>
504-
<HoverCard.Dropdown>
505-
<Stack gap={"xs"}>
506-
{obj.data.message.map(x => {
507-
return (
508-
<div>
509-
{x.plrAct ? (<Code>Act: {x.plrAct}</Code>) : null}
510-
{x.plrObj ? (<Code>Obj: {x.plrObj}</Code>) : null}
511-
<Text size={"sm"}>
512-
{x.text.length > 50 ? x.text.slice(0, 50) + "..." : x.text}
513-
</Text>
514-
</div>
515-
)
516-
})}
517-
</Stack>
518-
</HoverCard.Dropdown>
519-
</HoverCard>
520-
<HoverCard shadow={"xl"} disabled={!name}>
521-
<HoverCard.Target>
522-
<Indicator size={16} inline disabled={!name} color={"blue"} label={1}>
523-
<IconTextCaption color={iconShade(name.length)} title={name ? name : "Name"} />
524-
</Indicator>
525-
</HoverCard.Target>
526-
<HoverCard.Dropdown>
527-
<div><Code>{obj.data.item.type}</Code></div>
528-
<Code>{obj.data.item.name}</Code>
529-
</HoverCard.Dropdown>
530-
</HoverCard>
531-
</Group>
532-
<ActionIcon
533-
color={"red"}
534-
onClick={() => removeObj(obj.random_id)}>
535-
<IconTrash />
536-
</ActionIcon>
537-
</Group>
538-
</div>
539-
);
540-
})}
310+
{map.data.objects.map((obj, index) => (
311+
<MapObjectListItem map={map} obj={obj} index={index} />
312+
))}
541313
</Card>
542314
</div>
543315
</>

0 commit comments

Comments
 (0)