Skip to content

Commit f2a1558

Browse files
grahamTIAgrahamTIA
committed
tooltips better
1 parent 36c809b commit f2a1558

File tree

7 files changed

+137
-113
lines changed

7 files changed

+137
-113
lines changed

‎jam-25/src/components/Bomb.jsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
11
import { useDraggable } from "@dnd-kit/core";
2-
import { Box, Tooltip, Typography } from "@mui/material";
3-
import React from "react";
2+
import { Box, ClickAwayListener, Tooltip, Typography } from "@mui/material";
3+
import React, { useState } from "react";
44

55
const Bomb = () => {
66
const { attributes, listeners, setNodeRef } = useDraggable({ id: 'bomb', data: { type: 'bomb' } });
7+
const [ttipOpen, setTtipOpen] = useState(false);
78
return (
89
<Box
9-
className="inventory-item"
10+
className="inventory-item draggable"
1011
ref={setNodeRef}
1112
{...listeners}
1213
{...attributes}
1314
sx={{ width: 44, height: 44, borderRadius: 2, boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 2, color: 'white', backgroundColor: '#f5c9d0' }}
1415
>
15-
<Tooltip arrow placement="top" title={(
16-
<Box sx={{ fontSize: 12, color: 'white', borderRadius: '4px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
17-
<Typography variant='body2'>Drag this on to a space to remove the existing bonus</Typography>
16+
<ClickAwayListener onClickAway={() => setTtipOpen(false)}>
17+
<Box sx={{ height: '100%', width: '100%' }} onClick={() => setTtipOpen(!ttipOpen)}>
18+
<Tooltip open={ttipOpen} onClose={() => setTtipOpen(false)} disableFocusListener disableHoverListener disableTouchListener arrow placement="top" title={(
19+
<Box sx={{ fontSize: 12, color: 'white', borderRadius: '4px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
20+
<Typography variant='body2'>Drag this on to a space to remove the existing bonus</Typography>
21+
</Box>
22+
)}>
23+
<Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
24+
💣
25+
</Box>
26+
</Tooltip>
1827
</Box>
19-
)}>
20-
<Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
21-
💣
22-
</Box>
23-
</Tooltip>
28+
</ClickAwayListener>
2429
</Box>
2530
);
2631
};

‎jam-25/src/components/Bonus.jsx‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { Box, Tooltip, Typography } from "@mui/material";
2-
import React, { useMemo } from "react";
1+
import { Box, ClickAwayListener, Tooltip, Typography } from "@mui/material";
2+
import React, { useMemo, useState } from "react";
33
import { BONUSES } from "../upgrades";
44
import { useDroppable } from "@dnd-kit/core";
55
import { v4 } from "uuid";
66

77
const Bonus = ({ bonus, placed }) => {
88
const bon = useMemo(() => BONUSES[bonus] ?? bonus, [bonus]);
9+
const [ttipOpen, setTtipOpen] = useState(false);
910
const { setNodeRef } = useDroppable({
1011
id: v4(),
1112
disabled: !placed,
@@ -19,22 +20,24 @@ const Bonus = ({ bonus, placed }) => {
1920
return null;
2021
}
2122
return (
22-
<Box ref={setNodeRef} sx={{ ...bon.style, width: 'calc(100% + 6px)', height: 'calc(100% + 6px)', borderRadius: 2, boxSizing: 'border-box', position: 'absolute', top: -3, left: -3, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 2, color: 'white' }}>
23-
<Tooltip arrow placement="top" title={(
24-
<Box sx={{ fontSize: 12, color: 'white', borderRadius: '4px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
25-
<Typography variant='h6' sx={{ fontSize: 14, fontFamily: 'Orbitron'}}>{bon.name}</Typography>
26-
<Typography variant='body2'>{bon.description}</Typography>
27-
<Typography variant='overline' sx={{ fontFamily: 'Orbitron', fontSize: 10 }}>{bon.rarity ? ['Common', 'Uncommon', 'Rare', 'Shiny'][bon.rarity] : 'Common'}</Typography>
28-
</Box>
29-
)}>
30-
<Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
31-
<Box sx={{ position: 'absolute', top: 0, right: 0, fontSize: '10px', color: 'white', backgroundColor: ['#8f8a6f', '#7abf1f', '#34249c', '#b0102b'][bon.rarity], px: '3px', borderRadius: '2px 4px 2px 2px' }}>
32-
{['C', 'U', 'R', 'S'][bon.rarity]}
23+
<ClickAwayListener onClickAway={() => setTtipOpen(false)}>
24+
<Box onClick={() => setTtipOpen(!ttipOpen)} onClose={() => setTtipOpen(false)} ref={setNodeRef} sx={{ ...bon.style, width: 'calc(100% + 6px)', height: 'calc(100% + 6px)', borderRadius: 2, boxSizing: 'border-box', position: 'absolute', top: -3, left: -3, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 2, color: 'white' }}>
25+
<Tooltip open={ttipOpen} disableFocusListener disableHoverListener disableTouchListener arrow placement="top" title={(
26+
<Box sx={{ fontSize: 12, color: 'white', borderRadius: '4px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
27+
<Typography variant='h6' sx={{ fontSize: 14, fontFamily: 'Orbitron'}}>{bon.name}</Typography>
28+
<Typography variant='body2'>{bon.description}</Typography>
29+
<Typography variant='overline' sx={{ fontFamily: 'Orbitron', fontSize: 10 }}>{bon.rarity ? ['Common', 'Uncommon', 'Rare', 'Shiny'][bon.rarity] : 'Common'}</Typography>
3330
</Box>
34-
{bon.text}
35-
</Box>
36-
</Tooltip>
37-
</Box>
31+
)}>
32+
<Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
33+
<Box sx={{ position: 'absolute', top: 0, right: 0, fontSize: '10px', color: 'white', backgroundColor: ['#8f8a6f', '#7abf1f', '#34249c', '#b0102b'][bon.rarity], px: '3px', borderRadius: '2px 4px 2px 2px' }}>
34+
{['C', 'U', 'R', 'S'][bon.rarity]}
35+
</Box>
36+
{bon.text}
37+
</Box>
38+
</Tooltip>
39+
</Box>
40+
</ClickAwayListener>
3841
);
3942
};
4043

‎jam-25/src/components/InventoryItem.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const InventoryItem = ({ item }) => {
77
const { attributes, listeners, setNodeRef } = useDraggable({ id: item.id, data: { type: `bonus.${item.placement}` } });
88
return (
99
<Box
10-
className="inventory-item"
10+
className="inventory-item draggable"
1111
ref={setNodeRef}
1212
key={item.id}
1313
sx={{ touchAction: 'none', width: 50, height: 50, position: 'relative', mr: 1, zIndex: 3 }}

‎jam-25/src/components/Joker.jsx‎

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Box, Tooltip, Typography } from "@mui/material";
2-
import React, { useMemo } from "react";
1+
import { Box, ClickAwayListener, Tooltip, Typography } from "@mui/material";
2+
import React, { useMemo, useState } from "react";
33
import { useGameData } from "../providers/GameDataProvider";
44
import { useDraggable, useDroppable } from "@dnd-kit/core";
55

@@ -13,46 +13,51 @@ const Joker = ({ sx, joker, id }) => {
1313
});
1414
const { attributes: dropLeftAttr, listeners: dropLeftList, setNodeRef: setNodeRefDropLeft } = useDroppable({ id: `${id}-left`, data: { accepts: 'joker' } });
1515
const { attributes: dropRightAttr, listeners: dropRightList, setNodeRef: setNodeRefDropRight } = useDroppable({ id: `${id}-right`, data: { accepts: 'joker' } });
16+
const [ttipOpen, setTtipOpen] = useState(false);
1617

1718
return (
1819
<Box
19-
className={shopOpen ? 'joker-hover' : ''}
20+
className={[shopOpen ? 'joker-hover' : '', 'draggable'].join(' ')}
2021
id={id}
2122
ref={setNodeRef}
2223
{...attributes}
2324
{...listeners}
2425
key={id}
2526
sx={{ boxSizing: 'border-box', m: '3px', width: '44px', height: '44px', borderRadius: '4px', fontSize: '24px', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', zIndex: 3, ...joker.style }}
2627
>
27-
<Box sx={{ position: 'absolute', top: 0, right: 0, fontSize: '10px', color: 'white', backgroundColor: ['', '#7abf1f', '#34249c', '#b0102b'][joker.rarity], px: '3px', borderRadius: '2px 4px 2px 2px' }}>
28-
{['C', 'U', 'R', 'S'][joker.rarity]}
29-
</Box>
30-
<Tooltip arrow placement="bottom" title={activeJoker?.props?.id !== id ? (
31-
<Box sx={{ fontSize: 12, color: 'white', borderRadius: '4px', display: 'flex', flexDirection: 'column', alignItems: 'center', zIndex: 2 }}>
32-
<Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>{joker.name}</Typography>
33-
<Typography variant='body2' sx={{ textAlign: 'center' }}>{joker.description}</Typography>
34-
<Typography variant='overline' sx={{ fontFamily: 'Orbitron', fontSize: 8 }}>{['Common', 'Uncommon', 'Rare', 'Shiny'][joker.rarity]}</Typography>
28+
<ClickAwayListener onClickAway={() => setTtipOpen(false)}>
29+
<Box sx={{ height: '100%', width: '100%' }} onClick={() => setTtipOpen(!ttipOpen)}>
30+
<Box sx={{ position: 'absolute', top: 0, right: 0, fontSize: '10px', color: 'white', backgroundColor: ['', '#7abf1f', '#34249c', '#b0102b'][joker.rarity], px: '3px', borderRadius: '2px 4px 2px 2px' }}>
31+
{['C', 'U', 'R', 'S'][joker.rarity]}
3532
</Box>
36-
): null}>
37-
{joker.text}
38-
<Box ref={setNodeRefDropLeft} {...dropLeftList} {...dropRightAttr} sx={{ height: '100%', width: '45%', position: 'absolute', left: 0 }} />
39-
<Box sx={{ height:'100%', width: '45%', position: 'absolute', right: 0 }} ref={setNodeRefDropRight} {...dropRightList} {...dropLeftAttr} />
40-
</Tooltip>
41-
<Tooltip arrow open={!!(scoringTile.score || scoringTile.newMoney || scoringTile.text || scoringTile.newMoney === 0)} title={(
42-
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
43-
{(scoringTile.score !== 0 || scoringTile.newMoney === 0) && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: scoringTile.score < 0 ? '#ff9ca7' : '#b3faaa'}}>
44-
{scoringTile.score >= 0 ? '+' : ''} {scoringTile.score ?? ''}
45-
</span>)}
46-
{scoringTile.newMoney !== 0 && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: '#fffb80'}}>
47-
{scoringTile.newMoney >= 0 ? '+' : ''} {scoringTile.newMoney ?? ''}
48-
</span>)}
49-
{scoringTile.text && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: '#b3faaa'}}>
50-
{scoringTile.text}
51-
</span>)}
33+
<Tooltip open={ttipOpen} onClose={() => setTtipOpen(false)} disableFocusListener disableHoverListener disableTouchListener arrow placement="bottom" title={activeJoker?.props?.id !== id ? (
34+
<Box sx={{ fontSize: 12, color: 'white', borderRadius: '4px', display: 'flex', flexDirection: 'column', alignItems: 'center', zIndex: 2 }}>
35+
<Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>{joker.name}</Typography>
36+
<Typography variant='body2' sx={{ textAlign: 'center' }}>{joker.description}</Typography>
37+
<Typography variant='overline' sx={{ fontFamily: 'Orbitron', fontSize: 8 }}>{['Common', 'Uncommon', 'Rare', 'Shiny'][joker.rarity]}</Typography>
38+
</Box>
39+
): null}>
40+
{joker.text}
41+
<Box ref={setNodeRefDropLeft} {...dropLeftList} {...dropRightAttr} sx={{ height: '100%', width: '45%', position: 'absolute', left: 0 }} />
42+
<Box sx={{ height:'100%', width: '45%', position: 'absolute', right: 0 }} ref={setNodeRefDropRight} {...dropRightList} {...dropLeftAttr} />
43+
</Tooltip>
44+
<Tooltip arrow open={!!(scoringTile.score || scoringTile.newMoney || scoringTile.text || scoringTile.newMoney === 0)} title={(
45+
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
46+
{(scoringTile.score !== 0 || scoringTile.newMoney === 0) && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: scoringTile.score < 0 ? '#ff9ca7' : '#b3faaa'}}>
47+
{scoringTile.score >= 0 ? '+' : ''} {scoringTile.score ?? ''}
48+
</span>)}
49+
{scoringTile.newMoney !== 0 && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: '#fffb80'}}>
50+
{scoringTile.newMoney >= 0 ? '+' : ''} {scoringTile.newMoney ?? ''}
51+
</span>)}
52+
{scoringTile.text && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: '#b3faaa'}}>
53+
{scoringTile.text}
54+
</span>)}
55+
</Box>
56+
)} placement="bottom">
57+
<Box sx={{ width: '100%', height: '100%', pointerEvents: 'none', position: 'absolute' }} />
58+
</Tooltip>
5259
</Box>
53-
)} placement="bottom">
54-
<Box sx={{ width: '100%', height: '100%', pointerEvents: 'none', position: 'absolute' }} />
55-
</Tooltip>
60+
</ClickAwayListener>
5661
</Box>
5762
);
5863
};

0 commit comments

Comments
 (0)