Skip to content
This repository has been archived by the owner on May 13, 2024. It is now read-only.

Commit

Permalink
Removed appboard. Added another draw method.
Browse files Browse the repository at this point in the history
  • Loading branch information
@browntj16
browntj16 committed Apr 23, 2024
1 parent 10b4288 commit 6bf119f
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 100 deletions.
108 changes: 8 additions & 100 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,18 +121,16 @@ function CreatureComponent({
* Displays card shape with a number on it indicating how many cards are in the pile. This one has onclick to allow player to draw
* @returns returns markup displaying what i wrote just above
*/
function Deck({ player }: { player: Player }) {
function Deck({ player, handState }: { player: Player, handState: React.Dispatch<React.SetStateAction<number>>}) {
let handleDraw = function () {
if (player.actions < 1) {
player.drawCard(1);
player.actions -= 1;
} else {
if (!player.drawCardUsingAction()) {
log.push(
<div>
{player.username} attempted to draw, but does not have enough actions.
</div>,
);
}
}
handState(player.hand);
};
return (
<div
Expand Down Expand Up @@ -198,97 +196,6 @@ function HandOfCards({ player }: { player: Player }) {
return <div className="flex flex-row gap-2">{shownHand}</div>;
}

function AppBoard() {
return (
<div className="grid grid-cols-1 gap-4 border-yellow-800">
<div className="space-y-4">
<div className="flex items-center space-x-4">
<div className="grid grid-cols-4 items-start gap-4">
<div className="w-full aspect-[1.4] rounded-lg overflow-hidden">
<img
alt="Card 1"
className="aspect-[1.4] object-cover border border-gray-100 dark:border-gray-800"
height={150}
src={placeholderSVGURL}
width={150}
/>
</div>
<div className="w-full aspect-[1.4] rounded-lg overflow-hidden">
<img
alt="Card 2"
className="aspect-[1.4] object-cover border border-gray-100 dark:border-gray-800"
height={150}
src={placeholderSVGURL}
width={150}
/>
</div>
<div className="w-full aspect-[1.4] rounded-lg overflow-hidden">
<img
alt="Card 3"
className="aspect-[1.4] object-cover border border-gray-100 dark:border-gray-800"
height={150}
src={placeholderSVGURL}
width={150}
/>
</div>
<div className="w-full aspect-[1.4] rounded-lg overflow-hidden">
<img
alt="Card 4"
className="aspect-[1.4] object-cover border border-gray-100 dark:border-gray-800"
height={150}
src={placeholderSVGURL}
width={150}
/>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<div className="flex items-center space-x-4">
<div className="grid grid-cols-4 items-start gap-4">
<div className="w-full aspect-[1.4] rounded-lg overflow-hidden">
<img
alt="Card 1"
className="aspect-[1.4] object-cover border border-gray-100 dark:border-gray-800"
height={150}
src={placeholderSVGURL}
width={150}
/>
</div>
<div className="w-full aspect-[1.4] rounded-lg overflow-hidden">
<img
alt="Card 2"
className="aspect-[1.4] object-cover border border-gray-100 dark:border-gray-800"
height={150}
src={placeholderSVGURL}
width={150}
/>
</div>
<div className="w-full aspect-[1.4] rounded-lg overflow-hidden">
<img
alt="Card 3"
className="aspect-[1.4] object-cover border border-gray-100 dark:border-gray-800"
height={150}
src={placeholderSVGURL}
width={150}
/>
</div>
<div className="w-full aspect-[1.4] rounded-lg overflow-hidden">
<img
alt="Card 4"
className="aspect-[1.4] object-cover border border-gray-100 dark:border-gray-800"
height={150}
src={placeholderSVGURL}
width={150}
/>
</div>
</div>
</div>
</div>
</div>
);
}

/**
*
* Board loops through the board (the actual array that keeps track of the board) to display each
Expand Down Expand Up @@ -414,7 +321,8 @@ function GameBoard({ game }: { game: Game }) {
const [turn, setTurn] = useState(game.currentTurn);
const [phase, setPhase] = useState(game.turnPhase);
const [currentPlayer, setCurrentPlayer] = useState(game.currentPlayer);

const [hand1, setCurrentHand1] = useState(game.players[0].hand);
const [hand2, setCurrentHand2] = useState(game.players[1].hand);
let player1 = game.getPlayerById(0);
let player2 = game.getPlayerById(1);
return (
Expand All @@ -430,7 +338,7 @@ function GameBoard({ game }: { game: Game }) {
{/*This column shows a deck and discard pile*/}
<div className="flex flex-col gap-10">
<PlayerDisplay game={game} player={player2}></PlayerDisplay>
<Deck player={player2}></Deck>
<Deck player={player2} handState={setCurrentHand2}></Deck>
<DiscardPile size={5}></DiscardPile>
</div>
{/*The board between two columns*/}
Expand All @@ -440,7 +348,7 @@ function GameBoard({ game }: { game: Game }) {
{/*The first column shows the deck and discard pile (like the one you saw earlier*/}
<div className="flex flex-col gap-10">
<DiscardPile size={5}></DiscardPile>
<Deck player={player1}></Deck>
<Deck player={player1} handState={setCurrentHand1}></Deck>
<PlayerDisplay game={game} player={player1}></PlayerDisplay>
</div>
{/*This column shows the game log text bot and the button for moving phases below it*/}
Expand Down
14 changes: 14 additions & 0 deletions src/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,20 @@ export class Player {
}
}
}

}
/**
* function that is called when a player uses an action to draw for turn.
* @returns boolean based on whether the player had enough actions to draw
*/
drawCardUsingAction(){
if(this.actions >= 1){
this.drawCard(1, true)
return true;
}
else{
return false;
}
}
}

Expand Down

0 comments on commit 6bf119f

Please sign in to comment.