Skip to content

Commit

Permalink
Merge branch 'feat-mvp' of github.com:Mississippi-Labs/mississippi in…
Browse files Browse the repository at this point in the history
…to feat-mvp
  • Loading branch information
LidamaoHub committed Oct 20, 2023
2 parents 3fe620d + 0be837a commit 69db2f9
Show file tree
Hide file tree
Showing 18 changed files with 350 additions and 85 deletions.
Binary file added packages/client/src/assets/img/btn.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/client/src/assets/img/delivery.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/client/src/assets/img/dialog.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/client/src/assets/img/duck_default.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/client/src/assets/img/user_bg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 20 additions & 4 deletions packages/client/src/common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,14 @@ button {
}

.mi-modal.ant-modal .ant-modal-content {
background: #412F50F2;
//background: #412F50F2;
width: 562px;
height: 392px;
background: url("./assets/img/dialog.png") no-repeat center / 100% 100%;

.ant-modal-body {
height: 100%;
}
}

@font-face {
Expand All @@ -52,7 +59,16 @@ button {
.mi-btn {
position: relative;
font-family: MISS, sans-serif;
color: #fff;
background: url("./assets/img/btn_1.png") no-repeat center / 100% 100%;
text-shadow: #883360 2px 0 0, #883360 0 2px 0, #883360 -2px 0 0, #883360 0 -2px 0;
color: #5D2E1C;
background: url("./assets/img/btn.png") no-repeat center / 100% 100%;
//text-shadow: #883360 2px 0 0, #883360 0 2px 0, #883360 -2px 0 0, #883360 0 -2px 0;
}

.mi-input {
padding: 0 20px;
font-size: 20px;
border: 0;
outline: 0;
color: #5D2E1C;
background: url("./assets/img/btn.png") no-repeat center / 100% 100%;
}
6 changes: 6 additions & 0 deletions packages/client/src/components/MapCell/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { CellType } from '../../constants';
import { getCellClass, isMovable } from '@/utils';
import './styles.scss';
import Player, { IPlayer } from '@/components/Player';
import { DELIVERY } from '@/config/map';

interface ITransform {
index: number;
Expand Down Expand Up @@ -38,6 +39,7 @@ const MapCell = (props: IProps) => {

const [menuVisible, setMenuVisible] = useState(false);
const [activePlayerId, setActivePlayerId] = useState(-1);
const isDelivery = DELIVERY.x === x && DELIVERY.y === y;

if (!cellClassCache[`${y}-${x}`]) {
cellClassCache[`${y}-${x}`] = getCellClass(mapData, { x, y});
Expand Down Expand Up @@ -107,6 +109,10 @@ const MapCell = (props: IProps) => {
}
</div>

{
isDelivery && <div className={'cell-map-delivery'}/>
}

{
players && players.map((player) => <Player {...player}/>)
}
Expand Down
10 changes: 10 additions & 0 deletions packages/client/src/components/MapCell/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,16 @@
grid-template-rows: 1fr 1fr 1fr;
}

.cell-map-delivery {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("/src/assets/img/delivery.png") no-repeat center 100% / cover;
}

@for $i from 1 through 28 {
.mi-wall-#{$i} {
background: url("/src/assets/wall/wall_#{$i}.png") no-repeat center 100% / cover;
Expand Down
63 changes: 63 additions & 0 deletions packages/client/src/components/UserInfo/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React from 'react';
import './styles.scss';
import UserPackage from '@/components/UserPackage';
import userImg from '@/assets/img/duck_default.png';

const UserInfo = () => {
return (
<div className={'mi-userinfo-wrapper'}>
<div className="left-main-content">
<h3>User info</h3>
<div className="user-detail-wrapper">
<div className="user-appearance-wrapper">
<img src={userImg} alt="" className={'user-appearance'}/>
</div>
<div className="loot-wrapper">
<div className="loot-detail">

</div>
<div className="loot-detail">

</div>
</div>
<div className="user-attr-wrapper">
<dl>
<dt>HP</dt>
<dd><span className="base-attr">100</span><span className="extra-attr">100</span></dd>
</dl>
<dl>
<dt>Attack</dt>
<dd><span className="base-attr">20</span><span className="extra-attr">1</span></dd>
</dl>
<dl>
<dt>AttackRange</dt>
<dd><span className="base-attr">5</span><span className="extra-attr">1</span></dd>
</dl>
<dl>
<dt>Speed</dt>
<dd><span className="base-attr">2</span><span className="extra-attr">2</span></dd>
</dl>
<dl>
<dt>Strength</dt>
<dd><span className="base-attr">20</span><span className="extra-attr">1</span></dd>
</dl>
<dl>
<dt>Space</dt>
<dd><span className="base-attr">10</span><span className="extra-attr">1</span></dd>
</dl>
</div>
</div>
</div>
<div className="right-main-content">
<UserPackage
title={'User Package'}
/>
<UserPackage
title={'Season Package'}
/>
</div>
</div>
);
};

export default UserInfo;
80 changes: 80 additions & 0 deletions packages/client/src/components/UserInfo/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
.mi-userinfo-wrapper {
display: flex;
justify-content: space-between;

h3 {
font-size: 28px;
margin-bottom: 8px;
}

.left-main-content {
width: 768px;
}

.user-detail-wrapper {
height: 378px;
}

.user-detail-wrapper {
display: flex;
justify-content: space-between;
}

.user-appearance-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 338px;
height: 100%;
background: url("../../assets/img/user_bg.png") no-repeat center / 100% 100%;

.user-appearance {
width: 222px;
}
}

.loot-wrapper {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 100%;
}

.loot-detail {
width: 180px;
height: 180px;
border: 1px solid #FFF5E9;
background: #000;
color: #FFF5E9;
}

.user-attr-wrapper {
width: 213px;
font-size: 26px;

dl {
display: flex;
}

dt {
margin-right: 10px;
}

.base-attr {
margin-right: 10px;
color: #fff;
}

.extra-attr {
color: red;

&::before {
content: '+';
}
}
}

.mi-user-package {
margin-bottom: 24px;
}
}
29 changes: 29 additions & 0 deletions packages/client/src/components/UserPackage/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
import './styles.scss';

interface IProps {
title: string;
}

const arr = new Array(10).fill(10);

const UserPackage = (props: IProps) => {
return (
<div className="mi-user-package">
<h3>{props.title}</h3>
<div className="package-items-wrapper">
{
arr.map(() => {
return (
<div className='package-item'>

</div>
)
})
}
</div>
</div>
);
};

export default UserPackage;
21 changes: 21 additions & 0 deletions packages/client/src/components/UserPackage/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.mi-user-package {
width: 366px;

.package-items-wrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.package-item {
margin-bottom: 14px;
width: 62px;
height: 62px;
background: #FFF5E9;
border: 6px solid transparent;

&:nth-child(-n+3) {
border-color: #DCC7AF;
}
}
}
17 changes: 11 additions & 6 deletions packages/client/src/config/map.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
export const DELIVERY = {
x: 4,
y: 5
}

const MAP_CFG = [
[101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101],
[101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
[101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101],
[101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
[101, 101, 101, 102, 102, 102, 102, 102, 102, 100, 100, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
[101, 101, 101, 102, 102, 102, 102, 102, 102, 100, 100, 101, 101, 101, 100, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
[101, 101, 101, 102, 102, 102, 102, 102, 102, 100, 100, 101, 101, 101, 100, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
[101, 101, 101, 102, 102, 102, 102, 102, 102, 100, 100, 101, 101, 101, 100, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
[101, 101, 101, 102, 102, 102, 102, 102, 102, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
[101, 101, 101, 102, 102, 102, 102, 102, 102, 100, 100, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 100, 101, 101],
[101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
[101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
[101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
[101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
[101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
[101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 100, 101, 101],
[101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 100, 101, 101],
[101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 100, 101, 101],
[101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 101, 101],
Expand Down
1 change: 1 addition & 0 deletions packages/client/src/pages/game/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@ const Game = () => {
data={renderMapData}
vertexCoordinate={vertexCoordinate}
onPlayerMove={movePlayer}

/>
<Battle />
<div className="opt-wrapper">
Expand Down
2 changes: 1 addition & 1 deletion packages/client/src/pages/home/header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const HomeHeader = (props: IProps) => {
props.walletAddress ?
<UserAddress address={props.walletAddress} account={'0.1ETH'}/>
:
<button className="play-btn mi-btn" onClick={props.onPlayBtnClick}>PLAY</button>
<button className="play-btn mi-btn" onClick={props.onPlayBtnClick}>PLAY NOW</button>
}
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/client/src/pages/home/header/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
}

.play-btn {
width: 214px;
height: 72px;
width: 210px;
height: 66px;
font-size: 24px;
}

Expand Down
Loading

0 comments on commit 69db2f9

Please sign in to comment.