innocuous-symmetry/splendor-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed bug in sass, may backtrack to modify player ui

Browse Source
This commit is contained in:
Mikayla Dobson
2022-09-20 12:06:35 -05:00
parent e82d12b10e
commit 1e24bd0d6c
9 changed files with 140 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Card/Card.tsx
View File

@@ -18,7 +18,9 @@ export default function Card({ data, state, setState, reserved = false, collapse
return (
<div className='card' key={v4()}>
{ /*
{ collapsed ? <div className={`img-placeholder-${data.gemValue}`}></div> : <img src={data.image} loading="lazy" /> }
*/ }
<div className={reserved ? `foreground-${data.gemValue}` : 'foreground'}>
<section className="card-top-section">
<p>{data.gemValue.toUpperCase()}</p>

7
src/components/Card/CardRow.scss
View File

@@ -23,8 +23,7 @@
width: 100%;
.card {
width: 35%;
height: 40vh;
width: 18%;
border: 2px solid black;
img {
@@ -35,8 +34,8 @@
}
.foreground {
position: relative;
top: -100%;
// position: relative;
// top: -100%;
display: flex;
flex-direction: column;
align-items: center;

28
src/components/Gameboard/Gameboard.tsx
View File

@@ -4,7 +4,6 @@ import { Link } from 'react-router-dom';
import initializeBoard, { setCardRows } from '../../util/setup/initializeBoard';
import { AppState, PlayerData, ResourceCost, UIState } from '../../util/types';
import { defaultUIState } from '../../util/setup/defaultUIState';
import { getChipsActions } from '../Player/ActionMethods';
import { StateProps } from '../../util/propTypes';
import './Gameboard.scss';
@@ -15,7 +14,7 @@ import CardRow from '../Card/CardRow';
import { useCurrentPlayer } from '../../hooks/useCurrentPlayer';
import usePreviousPlayer from '../../hooks/usePreviousPlayer';
import { shouldRightSideCollapse } from '../../util/mechanics/shouldRightSideCollapse';
const { validateChips } = getChipsActions;
import { setStateUpdateSelection } from '../../hooks/stateSetters';
export default function Gameboard({ state, setState }: StateProps) {
const [view, setView] = useState(<p>Loading...</p>);
@@ -25,26 +24,7 @@ export default function Gameboard({ state, setState }: StateProps) {
// callbacks for lifting state
const liftSelection = useCallback((value: keyof ResourceCost) => {
if (!state.actions.getChips.active) return;
setState((prev: AppState) => {
let newSelection = prev.actions.getChips.selection;
newSelection?.push(value);
let newState = {
...prev,
actions: {
...state.actions,
getChips: {
active: true,
selection: newSelection,
valid: false
}
}
}
const result = validateChips(newState);
newState.actions.getChips.valid = result;
return newState;
})
setState((prev: AppState) => setStateUpdateSelection(prev, value));
}, [state]);
const liftCollapsed = useCallback((collapsed: boolean, tier = 5) => {
@@ -123,7 +103,9 @@ export default function Gameboard({ state, setState }: StateProps) {
<CardRow tier={1} state={state} setState={setState} liftCollapsed={liftCollapsed} />
</section>
<section className={shouldRightSideCollapse(UICollapse) ? "gameboard-right-compact" : "gameboard-right"}>
<AllPlayers state={state} setState={setState} liftSelection={liftSelection} UICollapse={UICollapse} />
<AllPlayers
state={state} setState={setState} liftSelection={liftSelection}
UICollapse={UICollapse} setUICollapse={setUICollapse} liftCollapsed={liftCollapsed} />
</section>
</div>
</div>

50
src/components/Player/AllPlayers.scss
View File

@@ -2,6 +2,56 @@
@import '../../sass/helper/variables';
@import '../../sass/helper/placeholders';
// local placeholder
%all-players-base {
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;
background-color: rgb(188, 176, 146);
color: black;
.player-ui {
.subheader {
font-weight: bold;
}
background-color:rgb(172, 149, 94);
margin: 1rem 0;
padding: 0 2rem;
}
.card {
width: 100%;
img {
display: none;
}
@each $gem in $gemlist {
@include map-gem-values('.foreground');
.foreground-#{$gem} {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
p {
display: inline;
padding: 8px;
}
.total-card-cost {
display: flex;
flex-flow: row wrap;
justify-content: center;
@include map-gem-values(".card-cost");
}
}
}
}
}
.all-players {
@extend %all-players-base;
.selection-view {

54
src/components/Player/AllPlayers.tsx
View File

@@ -1,17 +1,60 @@
import { useEffect, useState } from "react";
// framework
import { useEffect, useMemo, useState } from "react";
import { v4 } from "uuid";
import Player from "./Player";
import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
// util
import { shouldRightSideCollapse } from "../../util/mechanics/shouldRightSideCollapse";
import { AllPlayersProps } from "../../util/propTypes";
import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
import { defaultUIState } from "../../util/setup/defaultUIState";
import { UIState } from "../../util/types";
// components
import AvailableChips from "../Resources/AvailableChips";
import SelectionView from "../Resources/SelectionView";
import Player from "./Player";
import "./AllPlayers.scss"
import { shouldRightSideCollapse } from "../../util/mechanics/shouldRightSideCollapse";
export default function AllPlayers({ state, setState, liftSelection, UICollapse }: AllPlayersProps) {
export default function AllPlayers({ state, setState, liftSelection, UICollapse, setUICollapse, liftCollapsed }: AllPlayersProps) {
const [playerView, setPlayerView] = useState<JSX.Element>();
const [collapseClass, setCollapseClass] = useState("all-players");
const collapseAll = () => {
liftCollapsed(true);
liftCollapsed(true, 3);
liftCollapsed(true, 2);
liftCollapsed(true, 1);
// let value = UICollapse[each as keyof UIState];
// if (each === "playerUICollapsed") {
// continue;
// } else if (each === "noblesCollapsed") {
// console.log(each);
// liftCollapsed(value);
// } else {
// console.log(each, value);
// switch (each) {
// case "tierThreeCollapsed":
// liftCollapsed(value, 3);
// break;
// case "tierTwoCollapsed":
// liftCollapsed(value, 2);
// break;
// case "tierOneCollapsed":
// liftCollapsed(value, 1);
// break;
// default: break;
// }
// }
}
const allowCollapseAll = useMemo(() => {
for (let each of Object.keys(UICollapse)) {
if (each === "playerUICollapsed") continue;
if (!UICollapse[each as keyof UIState]) return true;
}
return false;
}, [UICollapse]);
useEffect(() => {
const currentPlayer = useCurrentPlayer(state);
if (!currentPlayer) return;
@@ -24,6 +67,7 @@ export default function AllPlayers({ state, setState, liftSelection, UICollapse
return (
<div className={collapseClass}>
{ allowCollapseAll && <button onClick={collapseAll}>Collapse All</button> }
<SelectionView state={state} setState={setState} UICollapse={UICollapse} />
<AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
{ playerView }

8
src/components/Player/Player.tsx
View File

@@ -1,10 +1,10 @@
import { setStateAwaitAction, setStateBuyCard, setStateGetChips, setStateReserveCard } from "../../hooks/stateSetters";
import { useEffect, useState } from "react";
import { PlayerProps } from "../../util/propTypes";
import { CardData, PlayerData } from "../../util/types"
import { v4 } from "uuid";
import { setStateAwaitAction, setStateBuyCard, setStateGetChips, setStateReserveCard } from "../../hooks/stateSetters";
import { hasMaxReserved } from "./ActionMethods/reserveCardActions";
import { hasMaxChips } from "./ActionMethods/getChipsActions";
import { v4 } from "uuid";
import { CardData, PlayerData } from "../../util/types"
import { PlayerProps } from "../../util/propTypes";
import Card from "../Card/Card";
export default function Player({ player, state, setState }: PlayerProps) {

24
src/hooks/stateSetters.ts
View File

@@ -1,5 +1,6 @@
import { AppState, CardData, NobleData, PlayerData, ResourceCost } from "../util/types";
import { AppState, CardData, NobleData, PlayerData, ResourceCost, UIState } from "../util/types";
import CardDeck from '../data/cards.json';
import { validateChips } from "../components/Player/ActionMethods/getChipsActions";
export const initialActions = {
buyCard: { active: false },
@@ -51,6 +52,27 @@ export const setStateGetChips = (prev: AppState) => {
}
}
export const setStateUpdateSelection = (prev: AppState, value: keyof ResourceCost) => {
let newSelection = prev.actions.getChips.selection;
newSelection?.push(value);
let newState = {
...prev,
actions: {
...prev.actions,
getChips: {
active: true,
selection: newSelection,
valid: false
}
}
}
const result = validateChips(newState);
newState.actions.getChips.valid = result;
return newState;
}
export const setStateBuyCard = (prev: AppState) => {
return {
...prev,

52
src/sass/helper/_placeholders.scss
View File

@@ -1,6 +1,3 @@
@import "./mixins";
@import "./variables";
// designed to extend a "p" element
%chip-design {
display: flex;
@@ -11,53 +8,4 @@
width: 1rem;
height: 1rem;
border-radius: 50%;
}
%all-players-base {
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;
background-color: rgb(188, 176, 146);
color: black;
.player-ui {
.subheader {
font-weight: bold;
}
background-color:rgb(172, 149, 94);
margin: 1rem 0;
padding: 0 2rem;
}
.card {
width: 100%;
img {
display: none;
}
@each $gem in $gemlist {
@include map-gem-values('.foreground');
.foreground-#{$gem} {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
p {
display: inline;
padding: 8px;
}
.total-card-cost {
display: flex;
flex-flow: row wrap;
justify-content: center;
@include map-gem-values(".card-cost");
}
}
}
}
}

5
src/util/propTypes.ts
View File

@@ -1,3 +1,4 @@
import { Dispatch, SetStateAction } from "react";
import { AppState, CardData, PlayerData, ResourceCost, setStateType, UIState } from "./types";
export interface StateProps {
@@ -29,7 +30,9 @@ export interface ResourceProps extends StateProps {
}
export interface AllPlayersProps extends ResourceProps {
UICollapse: UIState
UICollapse: UIState,
setUICollapse: Dispatch<SetStateAction<UIState>>
liftCollapsed: (collapsed: boolean, tier?: number) => void
}
export interface SelectionProps extends StateProps {