Skip to content

Commit

Permalink
improve look of active tile in mahjong
Browse files Browse the repository at this point in the history
  • Loading branch information
ayan4m1 committed Dec 31, 2023
1 parent 74ea76a commit 2f0e255
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 4 deletions.
24 changes: 21 additions & 3 deletions src/components/mahjongTile.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ export default function MahjongTile({ tile, x, y, imageUrl, active, onClick }) {
onClick={() => onClick(tile)}
className="mahjong-tile"
style={{
border: active ? '2px solid red' : 'none',
margin: active ? 0 : 2,
zIndex: 999 + tile.layer,
top: y,
left: x
Expand All @@ -19,8 +17,28 @@ export default function MahjongTile({ tile, x, y, imageUrl, active, onClick }) {
draggable={false}
src={imageUrl}
alt={getTileFriendlyName(tile)}
style={{ height: 64 }}
style={{ height: 64, position: 'absolute' }}
/>
{active && (
<svg
width={53}
height={64}
viewBox="0 0 53 64"
style={{ zIndex: 10000 }}
>
<rect
x={0}
y={0}
height={64}
width={53}
fill="#ff0000"
fillOpacity={0.4}
stroke="#ff0000"
strokeWidth={2}
rx={8}
/>
</svg>
)}
</button>
);
}
Expand Down
3 changes: 2 additions & 1 deletion src/components/mahjongTile.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
.mahjong-tile {
display: flex;
position: absolute;
background: none;
user-select: none;
border-radius: 8px;
border: none;
padding: 0;
}

0 comments on commit 2f0e255

Please sign in to comment.