Skip to content

Commit

Permalink
[feat] add bag
Browse files Browse the repository at this point in the history
  • Loading branch information
@jovicheng
jovicheng committed Oct 9, 2023
1 parent 688c3bc commit 8367b92
Show file tree
Hide file tree
Showing 5 changed files with 708 additions and 25 deletions.
97 changes: 97 additions & 0 deletions packages/client/src/components/Bag/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import { useState } from "react";
import "./styles.scss";

export default function Bag() {
const [open, setOpen] = useState(false);

const [showItemAction, setShowItemAction] = useState<number>();

return (
<div className="mi-bag-wrapper">
<button className="mi-bag-button" onClick={() => setOpen(true)}>
Bag
</button>
{open && (
<div className="mi-bag-backdrop">
<div className="mi-bag-modal">
<div className="mi-bag-modal-character">
<div className="mi-bag-modal-character-info">
<div className="mi-bag-character-info-avatar">MIS</div>
<div className="mi-bag-character-info-detail">
<div>Mississippi</div>
<div>HP: 150</div>
<div>ATK: 50</div>
<div>Range: 3</div>
<div>Speed: 5</div>
<div>Weight: 20</div>
<div>Pocket: 30</div>
</div>
</div>
<div className="mi-bag-equip">
<p>Equipment</p>
<div className="mi-bag-equip-list">
<div className="mi-bag-equip-list-item"></div>
<div className="mi-bag-equip-list-item"></div>
<div className="mi-bag-equip-list-item"></div>
<div className="mi-bag-equip-list-item"></div>
</div>
</div>

<div className="mi-bag-equip">
<p>Element</p>
<div
className="mi-bag-equip-list"
style={{
justifyContent: "flex-start",
}}
>
<div
className="mi-bag-equip-list-item"
style={{
marginRight: "15%",
}}
></div>
<div className="mi-bag-equip-list-item"></div>
</div>
</div>

<div className="mi-bag-modal-character-action">
<button>Again</button>
<button>lets rock</button>
</div>

<div className="mi-bag-modal-character-action">
<button onClick={() => setOpen(false)}>Close</button>
</div>
</div>
<div className="mi-bag-modal-divider"></div>
<div className="mi-bag-modal-bag-list">
{new Array(20).fill(1).map((item, index) => (
<div
className="mi-bag-modal-bag-list-item"
onClick={() => setShowItemAction(index)}
>
{showItemAction === index && (
<div className="mi-bag-modal-bag-list-item-action">
<div className="mi-bag-modal-bag-list-item-action-element-name">
<div>item name</div>
<div>weight: 999</div>
</div>
<div className="mi-bag-modal-bag-list-item-action-element-desc">
<div>item desc</div>
</div>
<div className="mi-bag-modal-bag-list-item-action-button">
<button>Remove</button>
<button>Discard</button>
</div>
</div>
)}
</div>
))}
</div>
</div>
</div>
)}
</div>
);
}
163 changes: 163 additions & 0 deletions packages/client/src/components/Bag/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
@import "../../theme";

.mi-bag-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;

.mi-bag-button {
position: fixed;
right: 24px;
bottom: 120px;
font-size: 1.5rem;
padding: 24px;
}

.mi-bag-backdrop {
overflow: hidden;
left: 0;
top: 0;
position: fixed;
height: 100vh;
width: 100vw;
background: rgba($color: #000000, $alpha: 0.6);
display: flex;
align-items: center;
justify-content: center;

.mi-bag-modal {
min-width: 500px;
height: 600px;
background-color: #d9d9d9;
display: flex;
padding: 48px;
align-items: center;

&-character {
min-width: 480px;

&-info {
display: flex;

&-avatar {
width: 64px;
height: 64px;
background: #eba66e;
display: flex;
justify-content: center;
align-items: center;
border-radius: 999px;
}

&-detail {
display: flex;
flex-direction: column;
margin-left: 24px;
row-gap: 6px;
}
}

.mi-bag-equip {
margin-top: 40px;
display: flex;
flex-direction: column;

&-list {
margin-top: 12px;
display: flex;
align-items: center;
justify-content: space-between;

&-item {
border: 1px solid #000;
width: 64px;
height: 64px;
border-radius: 12px;
background: #fff;
}
}
}

&-action {
margin-top: 48px;
display: flex;
align-items: center;
justify-content: center;

button {
border-radius: 12px;
border: 1px solid #000;
background: #79fb9d;
margin-left: 24px;
padding: 12px;
font-size: 1rem;
}
}
}

&-divider {
background: #000;
width: 1px;
height: 80%;
margin: 0 24px;
}

&-bag-list {
display: grid;
grid-template-columns: repeat(5, 18%);
grid-row-gap: 20px;
grid-column-gap: 20px;

&-item {
width: 64px;
height: 64px;
background: #fff;
border: 1px solid #000;
border-radius: 12px;
position: relative;

&-action {
background: rgba($color: #000000, $alpha: 0.9);
display: flex;
flex-direction: column;
position: absolute;
padding: 20px;
bottom: -280%;
left: 50%;
color: #fff;
z-index: 9;
width: fit-content;
min-width: 200px;

&-element-name {
display: flex;
justify-content: space-between;
bottom: 50px;
}

&-element-desc {
margin-top: 24px;
}

&-button {
margin-top: 48px;
display: flex;
align-items: center;
justify-content: center;
column-gap: 20px;

button {
border-radius: 12px;
border: 1px solid #000;
background: #79fb9d;
padding: 12px;
font-size: 1rem;
}
}
}
}
}
}
}
}
61 changes: 36 additions & 25 deletions packages/client/src/pages/game/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
import React, { useEffect, useRef, useState } from 'react';
import { MapConfig } from '@/config';
import { loadMapData } from '@/utils';
import Map from '@/components/Map';
import UserAvatar from '@/components/UserAvatar';
import { useLocation } from 'react-router-dom';
import './styles.scss';
import Rank from '@/components/Rank';
import React, { useEffect, useRef, useState } from "react";
import { MapConfig } from "@/config";
import { loadMapData } from "@/utils";
import Map from "@/components/Map";
import UserAvatar from "@/components/UserAvatar";
import { useLocation } from "react-router-dom";
import "./styles.scss";
import Rank from "@/components/Rank";
import Bag from "@/components/Bag";

const Game = () => {
const [renderMapData, setRenderMapData] = useState([]);
const [vertexCoordinate, setVertexCoordinate] = useState({
x: 0,
y: 0
y: 0,
});

const mapDataRef = useRef([]);
const location = useLocation();
const { username = '', avatar = 'snake', roomId = '000000' } = location.state ?? {};
const {
username = "",
avatar = "snake",
roomId = "000000",
} = location.state ?? {};

const onKeyDown = (e) => {
const mapData = mapDataRef.current;
Expand All @@ -31,23 +36,28 @@ const Game = () => {
vertexCoordinate.y = Math.max(0, vertexCoordinate.y - 1);
break;
case 39:
vertexCoordinate.x = Math.min(mapData[0].length - 1 - MapConfig.visualWidth, vertexCoordinate.x + 1);
vertexCoordinate.x = Math.min(
mapData[0].length - 1 - MapConfig.visualWidth,
vertexCoordinate.x + 1
);
break;
case 40:
vertexCoordinate.y = Math.min(mapData.length - 1 - MapConfig.visualHeight, vertexCoordinate.y + 1);
vertexCoordinate.y = Math.min(
mapData.length - 1 - MapConfig.visualHeight,
vertexCoordinate.y + 1
);
break;
}
setVertexCoordinate({
...vertexCoordinate
...vertexCoordinate,
});
}
};

useEffect(() => {
loadMapData().then((csv) => {
setRenderMapData(csv);
mapDataRef.current = csv;
});

}, []);

return (
Expand All @@ -67,24 +77,24 @@ const Game = () => {
<Rank
data={[
{
name: 'aaaa',
name: "aaaa",
score: 100,
id: 1
id: 1,
},
{
name: 'aaaa1',
name: "aaaa1",
score: 99,
id: 2
id: 2,
},
{
name: 'aaaa2',
name: "aaaa2",
score: 50,
id: 3
id: 3,
},
{
name: 'aaaa3',
name: "aaaa3",
score: 5,
id: 4
id: 4,
},
]}
curId={3}
Expand All @@ -96,8 +106,9 @@ const Game = () => {
data={renderMapData}
vertexCoordinate={vertexCoordinate}
/>
<Bag />
</div>
)
);
};

export default Game;
export default Game;
Loading

0 comments on commit 8367b92

Please sign in to comment.