Skip to content

Commit

Permalink
feat: shop wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@noyyyy
noyyyy committed Nov 26, 2023
1 parent 7d0004b commit dff641e
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 116 deletions.
2 changes: 1 addition & 1 deletion packages/client/src/ui/ChessMain.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ const Game = () => {
<Button className="my-4 text-white-wrap">Quit</Button>
</Popconfirm>
</div>
<ShopCom isModalOpen={isModalOpen} handleCancel={handleCancel} />
<ShopCom />
<div className="handle-area ">
<div>
<Chessboard setAcHeroFn={setAcHeroFn} />
Expand Down
2 changes: 1 addition & 1 deletion packages/client/src/ui/Chessboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
height: calc(100vh - 140px);
display: flex;
justify-content: center;
align-items: center;
align-items: flex-start;
}

.black {
Expand Down
40 changes: 18 additions & 22 deletions packages/client/src/ui/GameStatusBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useMUD } from "../MUDContext";

dayjs.extend(duration);

function GameStatusBar({ showModal, customRef, customRef2 }) {
function GameStatusBar({ customRef2 }) {
const {
systemCalls: { buyExp },
} = useMUD();
Expand All @@ -18,10 +18,7 @@ function GameStatusBar({ showModal, customRef, customRef2 }) {
const time = Math.floor(timeLeft);

return (
<div
className="grid justify-center pt-[12px] mx-auto mb-[12px] "
ref={customRef2}
>
<div className="grid justify-center pt-[12px] mx-auto" ref={customRef2}>
<div className="flex items-center justify-center">
<Tooltip title="EXP +4 , COST $4">
<div
Expand All @@ -45,30 +42,15 @@ function GameStatusBar({ showModal, customRef, customRef2 }) {
</span>
</div>
</Tooltip>
<Tooltip title={`OPEN SHOP`}>
{/* <Tooltip title={`OPEN SHOP`}>
<div
ref={customRef}
className="cursor-pointer mx-[20px]"
onClick={() => showModal()}
>
<img src={Logo} alt="" />
</div>
</Tooltip>
<div className="notice-board mx-[50px] bg-[#CF2E3D]">
<span className="flag-text">ROUND</span>
<span className="flag-text notice-board-text">
{currentGame?.round}
</span>
</div>

<div className="notice-board bg-[#323846]">
<span className="flag-text">COIN</span>
<span className="flag-text notice-board-text">
{playerObj?.coin}
</span>
</div>
</div>
<div className="flex items-center justify-center mt-3 ">
</Tooltip> */}
<div className="w-[500px] relative text-center">
<div
className={`${
Expand All @@ -83,7 +65,21 @@ function GameStatusBar({ showModal, customRef, customRef2 }) {
)}
</span>
</div>
<div className="notice-board mx-[50px] bg-[#CF2E3D]">
<span className="flag-text">ROUND</span>
<span className="flag-text notice-board-text">
{currentGame?.round}
</span>
</div>

<div className="notice-board bg-[#323846]">
<span className="flag-text">COIN</span>
<span className="flag-text notice-board-text">
{playerObj?.coin}
</span>
</div>
</div>
<div className="flex items-center justify-center mt-3 "></div>
</div>
);
}
Expand Down
167 changes: 75 additions & 92 deletions packages/client/src/ui/Shop.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useCallback, useState } from "react";
import { Button, Modal, message } from "antd";
import { Button, Modal, Tooltip, message } from "antd";
import { HeroBaseAttr } from "@/hooks/useChessboard";
import { useMUD } from "@/MUDContext";
import { useComponentValue } from "@latticexyz/react";
Expand All @@ -9,11 +9,6 @@ import { getClassImage, getRaceImage } from "./Synergy";

type HeroListItem = HeroBaseAttr | null;

interface IShopProps {
isModalOpen: boolean;
handleCancel: () => void;
}

const SHOW_INFO_LIST = ["health", "attack", "defense", "range"] as const;

export const BG_COLOR = [
Expand All @@ -24,7 +19,7 @@ export const BG_COLOR = [
"bg-yellow-500",
];

const Shop: React.FC<IShopProps> = ({ isModalOpen, handleCancel }) => {
const Shop = () => {
const {
components: { Player },
systemCalls: { buyHero, buyRefreshHero },
Expand Down Expand Up @@ -66,105 +61,93 @@ const Shop: React.FC<IShopProps> = ({ isModalOpen, handleCancel }) => {
};

return (
<>
<div className="flex justify-center">
{contextHolder}
<div className="hero-area" style={{ display: "flex" }}>
<Modal
wrapClassName="shop-modal"
title=""
closable={false}
width={900}
open={isModalOpen}
onCancel={handleCancel}
footer={null}
>
<div className="grid shop-wrap">
<div className="flex items-center justify-around">
{heroAttrs?.map(
(hero: HeroListItem, index: number) =>
hero && (
<div
className={`${!hero?.creature ? "invisible" : " block"} `}
key={String(index) + hero?.url}
onClick={() => buyHeroFn(index, hero)}
>
<div className="shopItem">
<div className="flex justify-center items-start w-[800px] h-40 bg-contain bg-no-repeat bg-[url('/assets/shop_bg.png')]">
<div className="flex">
<div className="flex items-center justify-around ml-4 mt-4">
{heroAttrs?.map(
(hero: HeroListItem, index: number) =>
hero && (
<div
className={`${!hero?.creature ? "invisible" : ""} `}
key={String(index) + hero?.url}
onClick={() => buyHeroFn(index, hero)}
>
<div className="flex flex-col border-1 items-start">
<div className="flex justify-center w-[95px] h-[130px] rounded-lg opacity-100 bg-contain bg-no-repeat bg-center bg-[url('assets/hero_bg.png')] mx-2">
<img
className="w-auto h-auto object-contain"
src={hero?.url}
alt={hero?.url}
style={{ width: "100%", height: 120 }}
className={`w-[120px] h-[120px] bg-blue-600 rounded-lg opacity-100 ${
BG_COLOR[Number(hero.rarity || 0)]
}`}
/>
<div>
{/* show class and race */}
<div className="flex felx-row">
<img
className="w-[30px] h-[30px] mx-1"
src={getRaceImage(hero.race as number)}
></img>
<img
className="w-[30px] h-[30px] mx-1"
src={getClassImage(hero.class as number)}
></img>
</div>
</div>
{/* show class and race */}
<div className="flex flex-row -mt-8 ml-7">
<img
className="w-[20px] h-[20px] mx-1"
src={getRaceImage(hero.race as number)}
></img>
<img
className="w-[20px] h-[20px] mx-1"
src={getClassImage(hero.class as number)}
></img>
</div>
{/* <div className="mt-[13px] flex justify-between">
<div className=" text-base ">
{Array(hero?.["lv"])
.fill(hero?.["lv"])
?.map((item, index) => (
<span
className={
item > index
? "text-yellow-400 mr-[10px]"
: "text-gray-500 mr-[10px]"
}
key={index}
>
&#9733;
</span>
))}
</div>
<div className="mt-[13px] flex justify-between">
<div className=" text-base ">
{Array(hero?.["lv"])
.fill(hero?.["lv"])
?.map((item, index) => (
<span
className={
item > index
? "text-yellow-400 mr-[10px]"
: "text-gray-500 mr-[10px]"
}
key={index}
>
&#9733;
</span>
))}
</div>
<span className="text-white text-base">
$ {Number(hero?.cost) + 1}
</span>
</div> */}
{/* TODO: add icon */}
{/* {SHOW_INFO_LIST.map((attr, _index) => (
<div
key={String(_index) + "attr" + String(index)}
className="mt-[3px] flex justify-between"
>
<span className="text-white text-base">{attr}</span>
<span className="text-white text-base">
$ {Number(hero?.cost) + 1}
{hero[attr]}
</span>
</div>
{/* TODO: add icon */}
{SHOW_INFO_LIST.map((attr, _index) => (
<div
key={String(_index) + "attr" + String(index)}
className="mt-[3px] flex justify-between"
>
<span className="text-white text-base">{attr}</span>
<span className="text-white text-base">
{hero[attr]}
</span>
</div>
))}
</div>
))} */}
</div>
)
)}
</div>
</div>
)
)}
</div>

<div className="flex justify-center items-center mt-[50px]">
<Button
loading={loading}
onClick={() => {
buyRefreshHeroFn();
}}
className="refresh rounded-full w-44 bg-red-500 hover:bg-white"
>
{!loading && "Refresh Hero $2"}
</Button>
</div>
<div className="flex justify-center items-center mt-4 ml-6">
<button
onClick={() => {
buyRefreshHeroFn();
}}
className="flex items-center justify-center refresh h-16 w-[102px] bg-contain bg-no-repeat bg-[url('assets/refresh.png')]"
>
<div className="flex item-center justify-center w-4/5 h-auto text-black">
{!loading && "Refresh 2$"}
</div>
</button>
</div>
</Modal>
</div>
</div>
</>
</div>
);
};

Expand Down

0 comments on commit dff641e

Please sign in to comment.