Skip to content

Commit 0be643e

Browse files
mattbruvmattbruv
committed
add key bullshit
1 parent 8c802ec commit 0be643e

File tree

2 files changed

+137
-121
lines changed

2 files changed

+137
-121
lines changed

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

+30-13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useMapOMaticContext } from "./context/MapOMaticContext"
2-
import { ActionIcon, Card, Code, ComboboxItem, Group, NumberInput, Select, Slider, Stack, Switch, Text, TextInput, Tooltip } from "@mantine/core";
2+
import { ActionIcon, Card, Code, ComboboxItem, Group, NumberInput, Select, Slider, Stack, Switch, Tabs, Text, TextInput, Tooltip } from "@mantine/core";
33
import { MapFile, UUID } from "./ccsr/types";
4-
import { IconMapPlus, IconPlus, IconTool, IconTrashX } from "@tabler/icons-react";
4+
import { IconApple, IconMapPlus, IconPhone, IconPlus, IconTool, IconTrashX } from "@tabler/icons-react";
55
import { useNavigate } from "react-router-dom";
66
import { produce } from "immer";
77
import { useEffect, useState } from "react";
@@ -299,17 +299,34 @@ function MapEditor({ map }: MapEditorProps) {
299299
</Group>
300300
</Card>
301301
<Card withBorder shadow={'xs'}>
302-
<Tooltip label="Add New Object">
303-
<ActionIcon
304-
color={"green"}
305-
disabled={!map}
306-
onClick={addObj}>
307-
<IconPlus />
308-
</ActionIcon>
309-
</Tooltip>
310-
{map.data.objects.map((obj, index) => (
311-
<MapObjectListItem map={map} obj={obj} index={index} />
312-
))}
302+
<Tabs defaultValue={"objects"}>
303+
<Tabs.List>
304+
<Tabs.Tab value="objects" leftSection={<IconApple />}>
305+
Objects ({map.data.objects.length})
306+
</Tabs.Tab>
307+
<Tabs.Tab value="trash" leftSection={<IconTrashX />}>
308+
Trash
309+
</Tabs.Tab>
310+
</Tabs.List>
311+
<Tabs.Panel value="objects">
312+
<div>
313+
<Tooltip label="Add New Object">
314+
<ActionIcon
315+
color={"green"}
316+
disabled={!map}
317+
onClick={addObj}>
318+
<IconPlus />
319+
</ActionIcon>
320+
</Tooltip>
321+
{map.data.objects.map((obj, index) => (
322+
<MapObjectListItem key={obj.random_id} map={map} obj={obj} index={index} />
323+
))}
324+
</div>
325+
</Tabs.Panel>
326+
<Tabs.Panel value="trash">
327+
<div>Hi mom</div>
328+
</Tabs.Panel>
329+
</Tabs>
313330
</Card>
314331
</div>
315332
</>

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

+107-108
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,9 @@ type MapObjectListItemProps = {
1717

1818
export function MapObjectListItem({ map, obj, index }: MapObjectListItemProps): JSX.Element {
1919

20-
const { project, updateMap, updateState, updateProject } = useMapOMaticContext();
20+
const { project, updateMap, updateState } = useMapOMaticContext();
2121
const navigate = useNavigate()
2222

23-
const messageCount = obj.data.message.length
24-
const condsCount = obj.data.item.COND.length
25-
const invisCount = Object.values(obj.data.item.visi).filter(x => x !== "").length
26-
const name = obj.data.item.name
27-
28-
function iconShade(value: number): "lightgray" | "black" {
29-
return value === 0 ? "lightgray" : "black"
30-
}
31-
32-
function getImage(member: string): string {
33-
if (member.toLowerCase().endsWith(".x"))
34-
member = member.replace(".x", "")
35-
const img = project.images.find(x => x.filename.toLowerCase() === member.toLowerCase())
36-
if (img)
37-
return URL.createObjectURL(img.data)
38-
return ""
39-
}
40-
4123
function resetHighlights(): void {
4224
updateMap(produce(map, draft => {
4325
draft.data.objects.forEach(obj => {
@@ -123,18 +105,6 @@ export function MapObjectListItem({ map, obj, index }: MapObjectListItemProps):
123105
}
124106
}
125107

126-
function getBackgroundColor(obj: MapObject): string {
127-
switch (obj.data.item.type) {
128-
case MapObjectType.FLOR:
129-
case MapObjectType.Scooby2_floor:
130-
return "#CAF1DE"
131-
case MapObjectType.WALL: return "#F7D8BA"
132-
case MapObjectType.CHAR: return "#FFFFCC"
133-
case MapObjectType.DOOR: return "#CCCCFF"
134-
case MapObjectType.ITEM: return "#FFCCE5"
135-
case MapObjectType.WATER: return "#CCE5FF"
136-
}
137-
}
138108

139109
return (
140110
<Card padding={"xs"} withBorder key={obj.random_id}
@@ -190,83 +160,7 @@ export function MapObjectListItem({ map, obj, index }: MapObjectListItemProps):
190160
<IconCopyPlus />
191161
</ActionIcon>
192162
</div>
193-
<div>
194-
<Image mah={32} maw={32} src={getImage(obj.member)} alt={obj.member} />
195-
</div>
196-
<Group gap={5}>
197-
<HoverCard shadow={"xl"} disabled={!invisCount}>
198-
<HoverCard.Target>
199-
<Indicator size={16} inline disabled={!invisCount} color={"blue"} label={invisCount}>
200-
<IconGhost color={iconShade(invisCount)} title="Invisibility" />
201-
</Indicator>
202-
</HoverCard.Target>
203-
<HoverCard.Dropdown>
204-
{Object.entries(obj.data.item.visi).filter(([_, o]) => o).map(([key, val]) => (
205-
<div key={key}>{key}: <Code>{val}</Code></div>
206-
))}
207-
</HoverCard.Dropdown>
208-
</HoverCard>
209-
<HoverCard shadow={"xl"} disabled={!condsCount}>
210-
<HoverCard.Target>
211-
<Indicator size={16} inline disabled={!condsCount} color={"blue"} label={condsCount}>
212-
<IconCodeDots color={iconShade(condsCount)} title="Conditions" />
213-
</Indicator>
214-
</HoverCard.Target>
215-
<HoverCard.Dropdown>
216-
{obj.data.item.COND
217-
.map(cond => {
218-
const entries = Object.entries(cond)
219-
return (
220-
<Card withBorder>
221-
<div>
222-
{entries.map(([key, value]) => {
223-
return (
224-
<div key={key}>
225-
{key}: <Code>{value}</Code>
226-
</div>
227-
)
228-
})}
229-
</div>
230-
</Card>
231-
);
232-
})
233-
}
234-
</HoverCard.Dropdown>
235-
</HoverCard>
236-
<HoverCard shadow={"xl"} disabled={!messageCount}>
237-
<HoverCard.Target>
238-
<Indicator size={16} inline disabled={!messageCount} color={"blue"} label={messageCount}>
239-
<IconMessage color={iconShade(messageCount)} title="Messages" />
240-
</Indicator>
241-
</HoverCard.Target>
242-
<HoverCard.Dropdown>
243-
<Stack gap={"xs"}>
244-
{obj.data.message.map(x => {
245-
return (
246-
<div>
247-
{x.plrAct ? (<Code>Act: {x.plrAct}</Code>) : null}
248-
{x.plrObj ? (<Code>Obj: {x.plrObj}</Code>) : null}
249-
<Text size={"sm"}>
250-
{x.text.length > 50 ? x.text.slice(0, 50) + "..." : x.text}
251-
</Text>
252-
</div>
253-
)
254-
})}
255-
</Stack>
256-
</HoverCard.Dropdown>
257-
</HoverCard>
258-
<HoverCard shadow={"xl"} disabled={!name}>
259-
<HoverCard.Target>
260-
<Indicator size={16} inline disabled={!name} color={"blue"} label={1}>
261-
<IconTextCaption color={iconShade(name.length)} title={name ? name : "Name"} />
262-
</Indicator>
263-
</HoverCard.Target>
264-
<HoverCard.Dropdown>
265-
<div><Code>{obj.data.item.type}</Code></div>
266-
<Code>{obj.data.item.name}</Code>
267-
</HoverCard.Dropdown>
268-
</HoverCard>
269-
</Group>
163+
<MapObjectPreview key={obj.random_id} obj={obj} />
270164
<ActionIcon
271165
color={"red"}
272166
onClick={() => removeObj(obj.random_id)}>
@@ -275,4 +169,109 @@ export function MapObjectListItem({ map, obj, index }: MapObjectListItemProps):
275169
</Group>
276170
</Card>
277171
);
172+
}
173+
174+
type MapObjectPreviewProps = {
175+
obj: MapObject
176+
}
177+
178+
export function MapObjectPreview({ obj }: MapObjectPreviewProps) {
179+
const { project } = useMapOMaticContext();
180+
const messageCount = obj.data.message.length
181+
const condsCount = obj.data.item.COND.length
182+
const invisCount = Object.values(obj.data.item.visi).filter(x => x !== "").length
183+
const name = obj.data.item.name
184+
185+
function iconShade(value: number): "lightgray" | "black" {
186+
return value === 0 ? "lightgray" : "black"
187+
}
188+
189+
function getImage(member: string): string {
190+
if (member.toLowerCase().endsWith(".x"))
191+
member = member.replace(".x", "")
192+
const img = project.images.find(x => x.filename.toLowerCase() === member.toLowerCase())
193+
if (img)
194+
return URL.createObjectURL(img.data)
195+
return ""
196+
}
197+
198+
return (
199+
<Group key={obj.random_id} gap={5}>
200+
<div>
201+
<Image mah={32} maw={32} src={getImage(obj.member)} alt={obj.member} />
202+
</div>
203+
<HoverCard shadow={"xl"} disabled={!invisCount}>
204+
<HoverCard.Target>
205+
<Indicator size={16} inline disabled={!invisCount} color={"blue"} label={invisCount}>
206+
<IconGhost color={iconShade(invisCount)} title="Invisibility" />
207+
</Indicator>
208+
</HoverCard.Target>
209+
<HoverCard.Dropdown>
210+
{Object.entries(obj.data.item.visi).filter(([_, o]) => o).map(([key, val]) => (
211+
<div key={key}>{key}: <Code>{val}</Code></div>
212+
))}
213+
</HoverCard.Dropdown>
214+
</HoverCard>
215+
<HoverCard shadow={"xl"} disabled={!condsCount}>
216+
<HoverCard.Target>
217+
<Indicator size={16} inline disabled={!condsCount} color={"blue"} label={condsCount}>
218+
<IconCodeDots color={iconShade(condsCount)} title="Conditions" />
219+
</Indicator>
220+
</HoverCard.Target>
221+
<HoverCard.Dropdown>
222+
{obj.data.item.COND
223+
.map(cond => {
224+
const entries = Object.entries(cond)
225+
return (
226+
<Card key={obj.random_id} withBorder>
227+
<div>
228+
{entries.map(([key, value]) => {
229+
return (
230+
<div key={key}>
231+
{key}: <Code>{value}</Code>
232+
</div>
233+
)
234+
})}
235+
</div>
236+
</Card>
237+
);
238+
})
239+
}
240+
</HoverCard.Dropdown>
241+
</HoverCard>
242+
<HoverCard shadow={"xl"} disabled={!messageCount}>
243+
<HoverCard.Target>
244+
<Indicator size={16} inline disabled={!messageCount} color={"blue"} label={messageCount}>
245+
<IconMessage color={iconShade(messageCount)} title="Messages" />
246+
</Indicator>
247+
</HoverCard.Target>
248+
<HoverCard.Dropdown>
249+
<Stack gap={"xs"}>
250+
{obj.data.message.map(x => {
251+
return (
252+
<div key={obj.random_id}>
253+
{x.plrAct ? (<Code>Act: {x.plrAct}</Code>) : null}
254+
{x.plrObj ? (<Code>Obj: {x.plrObj}</Code>) : null}
255+
<Text size={"sm"}>
256+
{x.text.length > 50 ? x.text.slice(0, 50) + "..." : x.text}
257+
</Text>
258+
</div>
259+
)
260+
})}
261+
</Stack>
262+
</HoverCard.Dropdown>
263+
</HoverCard>
264+
<HoverCard shadow={"xl"} disabled={!name}>
265+
<HoverCard.Target>
266+
<Indicator size={16} inline disabled={!name} color={"blue"} label={1}>
267+
<IconTextCaption color={iconShade(name.length)} title={name ? name : "Name"} />
268+
</Indicator>
269+
</HoverCard.Target>
270+
<HoverCard.Dropdown>
271+
<div><Code>{obj.data.item.type}</Code></div>
272+
<Code>{obj.data.item.name}</Code>
273+
</HoverCard.Dropdown>
274+
</HoverCard>
275+
</Group>
276+
)
278277
}

0 commit comments

Comments
 (0)