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
TiyoSheng committed Nov 26, 2023
2 parents c7e51ee + 8d268d0 commit c6dbe87
Showing 15 changed files with 236 additions and 45 deletions.
8 changes: 8 additions & 0 deletions packages/client/src/App.tsx
Original file line number Diff line number Diff line change
@@ -5,9 +5,17 @@ import Test from './pages/test';
import Home from '@/pages/home';
import HeroEdit from '@/pages/heroEdit';
import PIXIAPP from '@/components/PIXIAPP';
import { useEffect } from 'react';

export const App = () => {

useEffect(() => {
document.body.addEventListener('contextmenu', (e) => {
e.preventDefault();
return false;
})
}, [])

return (
<div className="mi-app">
<BrowserRouter>
36 changes: 36 additions & 0 deletions packages/client/src/components/Equipment/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React from 'react';
import './styles.scss';

export interface IEquipment {
type: string;
name?: string | undefined;
}

const Equipment = (props: IEquipment) => {

const { name, type } = props;

if (!name) {
return null;
}

return (
<div className={'mi-equipment'} style={{
backgroundImage: `url("/assets/img/hero/${type}/${name}.png")`,
}}>
<div className="equipment-info">
<div className="equipment-info-content">
<ul className="loot-list">
<li className="loot-item"></li>
<li className="loot-item"></li>
<li className="loot-item"></li>
</ul>

<p className="equipment-desc">This piece of equipment is synthesized from 3 pieces of loot</p>
</div>
</div>
</div>
);
};

export default Equipment;
72 changes: 72 additions & 0 deletions packages/client/src/components/Equipment/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
.mi-equipment {
position: relative;
width: 64px;
height: 64px;
background-repeat: no-repeat;
image-rendering: pixelated;
background-size: 1600%;
background-position: 2px 4px;

.equipment-info {
display: none;
position: absolute;
z-index: 1;
top: -80px;
left: 99%;
width: 440px;
padding-left: 20px;
height: 226px;


.equipment-info-content {
position: relative;
width: 420px;
height: 100%;
padding: 12px;
border-radius: 10px;
border: 5px solid #DCC7AF;
background: #FFF5E9;

&::before, &::after {
content: '';
position: absolute;
right: 100%;
top: 50%;
transform: translate3d(0, -50%, 0);
}

&::before {
border: 20px solid;
border-color: transparent #DCC7AF transparent transparent;
}

&::after {
border: 14px solid;
transform: translate3d(1px, -50%, 0);
border-color: transparent #FFF5E9 transparent transparent;
}
}

.loot-list {
display: flex;
justify-content: space-between;

.loot-item {
width: 120px;
height: 120px;
background: #000;
}
}

.equipment-desc {
margin-top: 12px;
font-size: 12px;
line-height: 1.57;
color: #BC8C61;
}
}

&:hover .equipment-info {
//display: block;
}
}
2 changes: 1 addition & 1 deletion packages/client/src/components/PIXIAPP/index.tsx
Original file line number Diff line number Diff line change
@@ -206,7 +206,7 @@ const PIXIAPP = () => {
break;
case 'click':
targetChests = treasureChest.filter(item => item.x === coordinate.x && item.y === coordinate.y);
if (targetChests.length > 0 && getDistance(curPlayer, coordinate) <= 1) {
if (targetChests.length > 0 && getDistance(curPlayer, coordinate) < 2) {
openTreasureChest(targetChests[0].id);
return;
}
1 change: 1 addition & 0 deletions packages/client/src/components/PIXIPlayers/Player.tsx
Original file line number Diff line number Diff line change
@@ -40,6 +40,7 @@ export interface IPlayer {
strength: number;
space: number;
oreBalance: number;
seasonOreBalance: number;
treasureBalance: number;
state: number;
lastBattleTime: number;
63 changes: 43 additions & 20 deletions packages/client/src/components/UserInfo/index.tsx
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import * as PIXI from 'pixi.js';
import { Stage } from '@pixi/react';
import Player, { IPlayer } from '@/components/PIXIPlayers/Player';
import { MapConfig } from '@/config/map';
import Equipment from '@/components/Equipment';
const { cellSize } = MapConfig;

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
@@ -27,27 +28,48 @@ const UserInfo = (props: IUserInfo) => {
return (
<div className={'mi-userinfo-wrapper'}>
<div className="left-main-content">
<h3>User info</h3>
<h3>Equipment</h3>
<div className="user-detail-wrapper">
<div className="user-appearance-wrapper">
<div className="user-appearance-box">
<Stage width={256} height={256} options={{ resolution: 1, backgroundAlpha: 0 }}>
<Player size={128} x={0.5} y={0.5} equip={player?.equip ?? {}} action={'idle'} />
</Stage>
</div>
</div>
<div className={`loot-wrapper ${lootHasLoaded ? 'loaded' : ''}`}>
<div className="loot-detail">
{
userUrl ? <img src={userUrl} alt=""/> : null
}
</div>
<div className="loot-detail">
{
lootUrl ? <img src={lootUrl} alt=""/> : null
}
<div className="user-detail-content">
<ul className="left-equipments equipments">
<li className="equipments-item helmet-item">
<Equipment type={'helmet'} name={player?.equip?.head}/>
</li>
<li className="equipments-item armor-item">
<Equipment type={'armor'} name={player?.equip?.clothes}/>
</li>
<li className="equipments-item"></li>
<li className="equipments-item"></li>
</ul>
<div className="user-appearance-wrapper">
<div className="user-appearance-box">
<Stage width={256} height={256} options={{ resolution: 1, backgroundAlpha: 0 }}>
<Player size={128} x={0.5} y={0.5} equip={player?.equip ?? {}} action={'idle'} />
</Stage>
</div>
</div>
<ul className="left-equipments equipments">
<li className="equipments-item"></li>
<li className="equipments-item"></li>
<li className="equipments-item weapon-item">
<Equipment type={'weapon'} name={player?.equip?.handheld}/>
</li>
<li className="equipments-item"></li>
</ul>
</div>
{/*<div className={`loot-wrapper ${lootHasLoaded ? 'loaded' : ''}`}>*/}
{/* <div className="loot-detail">*/}
{/* {*/}
{/* userUrl ? <img src={userUrl} alt=""/> : null*/}
{/* }*/}
{/* </div>*/}
{/* <div className="loot-detail">*/}
{/* {*/}
{/* lootUrl ? <img src={lootUrl} alt=""/> : null*/}
{/* }*/}
{/* </div>*/}
{/*</div>*/}

<div className={`user-attr-wrapper ${lootHasLoaded ? 'loaded' : ''}`}>
<dl>
<dt>HP</dt>
@@ -79,11 +101,12 @@ const UserInfo = (props: IUserInfo) => {
<div className="right-main-content">
<UserPackage
gem={player?.oreBalance}
title={'User Package'}
title={'Package'}
/>
<UserPackage
gem={player?.seasonOreBalance}
title={'Season Package'}
title={'Inventory'}

/>
</div>
</div>
55 changes: 48 additions & 7 deletions packages/client/src/components/UserInfo/styles.scss
Original file line number Diff line number Diff line change
@@ -8,30 +8,61 @@
}

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

.user-detail-wrapper {
height: 378px;
.right-main-content {
margin-left: 85px;
width: 600px;
}

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

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

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

.user-appearance-box {
width: 256px;
height: 256px;
}


}

.equipments {
width: 72px;

.equipments-item {
margin-bottom: 12px;
height: 72px;
border: 4px solid #DCC7AF;
background: #FFF5E9;

&:not(:empty) {
background-color: #6f553c;
}

&.helmet-item {
border-color: #f00;
}

&.weapon-item {
border-color: #00FF38;
}
}
}

.loot-wrapper {
@@ -50,21 +81,31 @@
}

.user-attr-wrapper {
width: 213px;
display: flex;
flex-wrap: wrap;
margin-top: 20px;
width: 478px;
height: 152px;
padding: 20px 0;
font-size: 13px;
line-height: 2;
border: 5px solid #BAA48B;
background: #FFF5E9;

dl {
min-width: 50%;
display: flex;
}

dt {
padding-left: 20px;
margin-right: 10px;
color: #BC8C61;
}

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

&.loaded {
1 change: 0 additions & 1 deletion packages/client/src/components/UserInfoDialog/styles.scss
Original file line number Diff line number Diff line change
@@ -2,7 +2,6 @@
position: fixed;
z-index: 1000;
width: 1298px;
height: 585px;
padding: 36px 66px;
left: 50%;
top: 50%;
20 changes: 13 additions & 7 deletions packages/client/src/components/UserPackage/index.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import React from 'react';
import gemImg from '@/assets/img/gem.png';
import './styles.scss';
import Equipment, { IEquipment } from '@/components/Equipment';

interface IProps {
title: string;
gem: number;
items?: IEquipment[];
}


const UserPackage = (props: IProps) => {
const { items = [], gem = 0 } = props;
const arr = new Array(10).fill(0);

arr[0] = props.gem;
@@ -17,16 +20,19 @@ const UserPackage = (props: IProps) => {
<div className="mi-user-package">
<h3>{props.title}</h3>
<div className="package-items-wrapper">
{
gem > 0 && (
<div className='package-item' key={0}>
<img src={gemImg} alt="" className={'package-item-gem'}/>
<div className={'package-item-count'}>{gem}</div>
</div>
)
}
{
arr.map((count, index) => {
items.map((item, index) => {
return (
<div className='package-item' key={index}>
{
count > 0 && (<>
<img src={gemImg} alt="" className={'package-item-gem'}/>
<div className={'package-item-count'}>{count}</div>
</>)
}
<Equipment name={item.name} type={item.type}/>
</div>
)
})
11 changes: 8 additions & 3 deletions packages/client/src/components/UserPackage/styles.scss
Original file line number Diff line number Diff line change
@@ -5,15 +5,20 @@
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 600px;
padding: 12px;
min-height: 105px;
border: 5px solid #DCC7AF;
background: #FFF5E9;
}

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

&:nth-child(-n+3) {
border-color: #DCC7AF;
2 changes: 1 addition & 1 deletion packages/client/src/pages/game/index.tsx
Original file line number Diff line number Diff line change
@@ -504,7 +504,7 @@ const Game = () => {
/>

<Modal
visible={modalVisible}
open={modalVisible}
className="mi-modal"
footer={null}
onCancel={() => setModalVisible(false)}
2 changes: 1 addition & 1 deletion packages/client/src/pages/heroEdit/index.tsx
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ const HeroEdit = () => {

return (
<div className={'mi-hero-page'}>
<UserInfo player={{ equip }}/>
<UserInfo player={{ equip, oreBalance: 3, seasonOreBalance: 6 }}/>
{/*<div className="actions">*/}
{/* <select*/}
{/* onChange={(e) => {*/}
2 changes: 1 addition & 1 deletion packages/client/src/pages/home/index.tsx
Original file line number Diff line number Diff line change
@@ -379,7 +379,7 @@ const Home = () => {
)
}
<Modal
visible={modalVisible}
open={modalVisible}
className="mi-modal"
footer={null}
onCancel={() => setModalVisible(false)}
2 changes: 1 addition & 1 deletion packages/client/tsconfig.json
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@
"module": "ESNext",
"lib": ["ESNext", "DOM"],
"moduleResolution": "Node",
"strict": true,
"strict": false,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
4 changes: 2 additions & 2 deletions packages/contracts/worlds.json
Original file line number Diff line number Diff line change
@@ -11,8 +11,8 @@
"address": "0x322813Fd9A801c5507c9de605d63CEA4f2CE6c44"
},
"33784": {
"address": "0xbf96238698F1e03c39f7cE5C587eeDd4b3aAB642",
"blockNumber": 178
"address": "0xFA6f772d446569504f77875ddc43815eE57B3a47",
"blockNumber": 176938
},
"421613": {
"address": "0x2Bc1034975c3df48D6f3026802f372677844b85d",

0 comments on commit c6dbe87

Please sign in to comment.