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

updates to card json. cards render photos

Browse Source
This commit is contained in:
Mikayla Dobson
2022-08-25 16:52:28 -05:00
parent 75d161a10b
commit 38dd1519fa
10 changed files with 1257 additions and 1128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,14 +8,12 @@ const { buyCard, tooExpensive } = buyCardActions;
export default function Card({ data, state, setState }: CardProps) { export default function Card({ data, state, setState }: CardProps) {
const currentPlayer = useCurrentPlayer(state); const currentPlayer = useCurrentPlayer(state);
if (!data) return <div className="card"></div>; if (!data) return <div className="card"></div>;
return ( return (
<div className="card" key={v4()}> <div className="card" key={v4()} style={{backgroundImage: `url(${data.image})`}}>
<p>Counts as: {data.gemValue}</p> <p>Counts as: {data.gemValue}</p>
<p>Point value: {data.points || 0}</p> { (data.points && data.points > 0) ? <p>{data.points} points</p> : null }
<p>Cost:</p>
<div className="total-card-cost"> <div className="total-card-cost">
{ {
Object.keys(data.resourceCost).map((key: keyof ResourceCost | string) => { Object.keys(data.resourceCost).map((key: keyof ResourceCost | string) => {

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

@@ -1,5 +1,5 @@
@import "../../sass/helper/mixins"; @import "../../sass/helper/mixins";
@import "../../sass/helper/placeholders"; @import "../../sass/helper/variables";
.card-row { .card-row {
display: flex; display: flex;
@@ -12,35 +12,45 @@
flex-flow: row nowrap; flex-flow: row nowrap;
width: 100%; width: 100%;
justify-content: space-around; justify-content: space-around;
}
.card { .card {
width: 25%; width: 25%;
min-height: 24vh;
border: 2px solid black; border: 2px solid black;
> * {
margin: 1rem;
}
.total-card-cost { .total-card-cost {
display: flex; display: flex;
justify-content: center; justify-content: center;
@include map-gem-values(".card-cost"); @include map-gem-values(".card-cost");
p {
@extend %chip-design;
} }
> * {
margin: 1rem;
}
p {
background-color: black;
}
background-size: cover;
}
.card-count {
background-color: black;
color: white;
width: 25%;
} }
} }
} }
.tier-1 { .tier-1 {
background-color: rgb(9, 67, 9); background-color: rgb(23, 73, 23);
} }
.tier-2 { .tier-2 {
background-color: rgb(174, 174, 32); background-color: rgb(174, 174, 32);
color: black;
} }
.tier-3 { .tier-3 {

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

@@ -28,7 +28,7 @@ export default function CardRow({tier, state, setState}: CardRowProps) {
<div className={`card-row tier-${tier}`}> <div className={`card-row tier-${tier}`}>
<p>Tier: {tier}</p> <p>Tier: {tier}</p>
<div className="card-row-cards-visible"> <div className="card-row-cards-visible">
<div className="card card-count"> <div className="card-count">
<p>Remaining: {state.gameboard.deck[typedTier].length}</p> <p>Remaining: {state.gameboard.deck[typedTier].length}</p>
</div> </div>
{ cards && cards.map((cardData: CardData) => { { cards && cards.map((cardData: CardData) => {

14
src/components/Nobles/Nobles.scss
View File

@@ -1,18 +1,26 @@
@import "../../sass/helper/mixins";
.nobles-panel { .nobles-panel {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
background-color: rgb(240, 236, 225); background-color: rgb(240, 236, 225);
padding: 1.5rem;
color: black; color: black;
} padding: 1.5rem;
.all-nobles { .all-nobles {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-around; justify-content: space-around;
}
.noble-card { .noble-card {
display: inline-flex; display: inline-flex;
flex-flow: column nowrap; flex-flow: column nowrap;
.mapped-noble-costs {
display: flex;
@include map-gem-values(".noble-cost");
} }
}
}
}

10
src/components/Nobles/Nobles.tsx
View File

@@ -21,15 +21,21 @@ export default function Nobles({ state }: StateProps) {
state && state.gameboard.nobles.map((noble: NobleData) => { state && state.gameboard.nobles.map((noble: NobleData) => {
return ( return (
<div className="noble-card" key={v4()}> <div className="noble-card" key={v4()}>
<p>Points: {noble.points}</p> <p>{noble.points} points</p>
<p>Cost:</p> <p>Cost:</p>
<div className="mapped-noble-costs">
{ {
Object.keys(noble.resourceCost).map((each) => { Object.keys(noble.resourceCost).map((each) => {
// @ts-ignore // @ts-ignore
return (noble.resourceCost[each as keyof ResourceCost] > 0) && <p key={v4()}>{each}: {noble.resourceCost[each as keyof ResourceCost]}</p> return (noble.resourceCost[each as keyof ResourceCost] > 0) && (
<p key={v4()} className={`noble-cost-${each}`}>
{noble.resourceCost[each as keyof ResourceCost]}
</p>
)
}) })
} }
</div> </div>
</div>
) )
}) })
} }

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

@@ -18,9 +18,6 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
@include map-gem-values(".player-chip"); @include map-gem-values(".player-chip");
p {
@extend %chip-design;
}
} }
} }
} }

271
src/data/cards.json
View File

@@ -10,7 +10,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/LILY-serafima-lazarenko-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -22,7 +23,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/SUCCULENT-jacalyn-beales-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -34,7 +36,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/VIOLET-tobias-mockenhaupt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -46,7 +49,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/FORGET-yoksel-zok-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -58,7 +62,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/ROSE-alexey-savchenko-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -70,7 +75,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/VIOLET-artiom-vallat-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -82,7 +88,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/VIOLET-yoksel-zok-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -94,7 +101,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/SUCCULENT-annie-spratt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -106,7 +114,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/FORGET-anna-rozwadowska-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -118,7 +127,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/FORGET-gemma-evans-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -130,7 +140,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/LILY-evie-s-unsplash-2.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -142,7 +153,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/ROSE-arkadiy-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -154,7 +166,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/ROSE-engin-akyurt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -166,7 +179,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/FORGET-krzysztof-kowalik-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -178,7 +192,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/LILY-evie-s-unsplash-2.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -190,7 +205,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/VIOLET-adrian-swancar-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -202,7 +218,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/ROSE-engin-akyurt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -214,7 +231,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/ROSE-arkadiy-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -226,7 +244,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/LILY-meghna-r-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -238,7 +257,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/LILY-yi-duo-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -250,7 +270,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/SUCCULENT-annie-spratt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -262,7 +283,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/SUCCULENT-annie-spratt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -274,7 +296,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/SUCCULENT-annie-spratt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -286,7 +309,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/VIOLET-nick-nice-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -298,7 +322,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/FORGET-anna-rozwadowska-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -310,7 +335,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/VIOLET-yoksel-zok-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -322,7 +348,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/LILY-yi-duo-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -334,7 +361,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/SUCCULENT-jacalyn-beales-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -346,7 +374,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/ROSE-ekrem-osmanoglu-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -358,7 +387,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/FORGET-krzysztof-kowalik-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -370,7 +400,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/FORGET-anna-rozwadowska-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -382,7 +413,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/ROSE-engin-akyurt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -394,7 +426,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/VIOLET-rita-ox-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -406,7 +439,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/SUCCULENT-tim-mossholder-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -418,7 +452,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 0, "points": 0,
"tier": 1 "tier": 1,
"image": "src/assets/img/LILY-evie-s-unsplash-2.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -430,7 +465,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 1, "points": 1,
"tier": 1 "tier": 1,
"image": "src/assets/img/FORGET-gemma-evans-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -442,7 +478,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 1, "points": 1,
"tier": 1 "tier": 1,
"image": "src/assets/img/ROSE-edward-howell-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -454,7 +491,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 1, "points": 1,
"tier": 1 "tier": 1,
"image": "src/assets/img/VIOLET-rita-ox-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -466,7 +504,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 1, "points": 1,
"tier": 1 "tier": 1,
"image": "src/assets/img/LILY-evie-s-unsplash-2.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -478,7 +517,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 1, "points": 1,
"tier": 1 "tier": 1,
"image": "src/assets/img/SUCCULENT-annie-spratt-unsplash.jpg"
} }
], ],
"tierTwo": [ "tierTwo": [
@@ -492,7 +532,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/ROSE-aleza-van-der-werff-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -504,7 +545,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/VIOLET-adrian-swancar-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -516,7 +558,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 1, "points": 1,
"tier": 2 "tier": 2,
"image": "src/assets/img/SUCCULENT-tim-mossholder-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -528,7 +571,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/VIOLET-nick-nice-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -540,7 +584,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/SUCCULENT-angele-kamp-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -552,7 +597,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/ROSE-engin-akyurt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -564,7 +610,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/LILY-meghna-r-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -576,7 +623,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/SUCCULENT-tim-mossholder-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -588,7 +636,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/LILY-serafima-lazarenko-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -600,7 +649,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/FORGET-olga-budko-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -612,7 +662,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 1, "points": 1,
"tier": 2 "tier": 2,
"image": "src/assets/img/LILY-yi-duo-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -624,7 +675,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/VIOLET-rita-ox-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -636,7 +688,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/FORGET-gemma-evans-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -648,7 +701,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 3, "points": 3,
"tier": 2 "tier": 2,
"image": "src/assets/img/SUCCULENT-annie-spratt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -660,7 +714,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/SUCCULENT-edgar-castrejon-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -672,7 +727,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 3, "points": 3,
"tier": 2 "tier": 2,
"image": "src/assets/img/LILY-deleece-cook-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -684,7 +740,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/ROSE-alexey-savchenko-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -696,7 +753,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 1, "points": 1,
"tier": 2 "tier": 2,
"image": "src/assets/img/VIOLET-artiom-vallat-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -708,7 +766,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 1, "points": 1,
"tier": 2 "tier": 2,
"image": "src/assets/img/VIOLET-tobias-mockenhaupt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -720,7 +779,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 3, "points": 3,
"tier": 2 "tier": 2,
"image": "src/assets/img/VIOLET-yoksel-zok-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -732,7 +792,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 1, "points": 1,
"tier": 2 "tier": 2,
"image": "src/assets/img/ROSE-engin-akyurt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -744,7 +805,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/LILY-evie-s-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -756,7 +818,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 1, "points": 1,
"tier": 2 "tier": 2,
"image": "src/assets/img/SUCCULENT-jacalyn-beales-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -768,7 +831,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 1, "points": 1,
"tier": 2 "tier": 2,
"image": "src/assets/img/LILY-deleece-cook-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -780,7 +844,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 1, "points": 1,
"tier": 2 "tier": 2,
"image": "src/assets/img/ROSE-alexey-savchenko-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -792,7 +857,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 1, "points": 1,
"tier": 2 "tier": 2,
"image": "src/assets/img/FORGET-yoksel-zok-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -804,7 +870,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 3, "points": 3,
"tier": 2 "tier": 2,
"image": "src/assets/img/ROSE-ekrem-osmanoglu-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -816,7 +883,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 3, "points": 3,
"tier": 2 "tier": 2,
"image": "src/assets/img/FORGET-yoksel-zok-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -828,7 +896,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 2, "points": 2,
"tier": 2 "tier": 2,
"image": "src/assets/img/FORGET-yoksel-zok-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -840,7 +909,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 1, "points": 1,
"tier": 2 "tier": 2,
"image": "src/assets/img/FORGET-gemma-evans-unsplash.jpg"
} }
], ],
"tierThree": [ "tierThree": [
@@ -854,7 +924,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 4, "points": 4,
"tier": 3 "tier": 3,
"image": "src/assets/img/ROSE-engin-akyurt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -866,7 +937,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 4, "points": 4,
"tier": 3 "tier": 3,
"image": "src/assets/img/LILY-evie-s-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -878,7 +950,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 4, "points": 4,
"tier": 3 "tier": 3,
"image": "src/assets/img/LILY-meghna-r-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -890,7 +963,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 4, "points": 4,
"tier": 3 "tier": 3,
"image": "src/assets/img/SUCCULENT-annie-spratt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -902,7 +976,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 4, "points": 4,
"tier": 3 "tier": 3,
"image": "src/assets/img/VIOLET-tobias-mockenhaupt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -914,7 +989,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 4, "points": 4,
"tier": 3 "tier": 3,
"image": "src/assets/img/FORGET-krzysztof-kowalik-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -926,7 +1002,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 4, "points": 4,
"tier": 3 "tier": 3,
"image": "src/assets/img/VIOLET-tobias-mockenhaupt-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -938,7 +1015,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 4, "points": 4,
"tier": 3 "tier": 3,
"image": "src/assets/img/FORGET-olga-budko-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -950,7 +1028,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 4, "points": 4,
"tier": 3 "tier": 3,
"image": "src/assets/img/SUCCULENT-edgar-castrejon-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -962,7 +1041,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 4, "points": 4,
"tier": 3 "tier": 3,
"image": "src/assets/img/SUCCULENT-tim-mossholder-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -974,7 +1054,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 3, "points": 3,
"tier": 3 "tier": 3,
"image": "src/assets/img/ROSE-arkadiy-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -986,7 +1067,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 3, "points": 3,
"tier": 3 "tier": 3,
"image": "src/assets/img/SUCCULENT-jacalyn-beales-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -998,7 +1080,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 3, "points": 3,
"tier": 3 "tier": 3,
"image": "src/assets/img/LILY-deleece-cook-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -1010,7 +1093,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 3, "points": 3,
"tier": 3 "tier": 3,
"image": "src/assets/img/VIOLET-rita-ox-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -1022,7 +1106,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 3, "points": 3,
"tier": 3 "tier": 3,
"image": "src/assets/img/FORGET-anna-rozwadowska-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -1034,7 +1119,8 @@
}, },
"gemValue": "sapphire", "gemValue": "sapphire",
"points": 5, "points": 5,
"tier": 3 "tier": 3,
"image": "src/assets/img/FORGET-gemma-evans-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -1046,7 +1132,8 @@
}, },
"gemValue": "diamond", "gemValue": "diamond",
"points": 5, "points": 5,
"tier": 3 "tier": 3,
"image": "src/assets/img/LILY-evie-s-unsplash-2.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -1058,7 +1145,8 @@
}, },
"gemValue": "ruby", "gemValue": "ruby",
"points": 5, "points": 5,
"tier": 3 "tier": 3,
"image": "src/assets/img/ROSE-aleza-van-der-werff-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -1070,7 +1158,8 @@
}, },
"gemValue": "emerald", "gemValue": "emerald",
"points": 5, "points": 5,
"tier": 3 "tier": 3,
"image": "src/assets/img/SUCCULENT-angele-kamp-unsplash.jpg"
}, },
{ {
"resourceCost": { "resourceCost": {
@@ -1082,8 +1171,8 @@
}, },
"gemValue": "onyx", "gemValue": "onyx",
"points": 5, "points": 5,
"tier": 3 "tier": 3,
"image": "src/assets/img/VIOLET-nick-nice-unsplash.jpg"
} }
] ]
} }

12
src/sass/helper/_mixins.scss
View File

@@ -1,3 +1,5 @@
@import "./placeholders";
@mixin map-gem-values($parentClass) { @mixin map-gem-values($parentClass) {
#{$parentClass} { #{$parentClass} {
&-emerald { &-emerald {
@@ -24,6 +26,16 @@
background-color: gold; background-color: gold;
color: black; color: black;
} }
}
p {
@extend %chip-design;
} }
} }
@mixin get-random-image($targetList) {
$idx: random(6);
$nth: nth($targetList, $idx);
background-image: url($nth);
}

8
src/sass/helper/_variables.scss
View File

@@ -0,0 +1,8 @@
$emerald-images:
"src/assets/img/SUCCULENT-angele-kamp-unsplash.jpg",
"src/assets/img/SUCCULENT-annie-spratt-unsplash.jpg",
"src/assets/img/SUCCULENT-calle-macarone-unsplash.jpg",
"src/assets/img/SUCCULENT-edgar-castrejon-unsplash.jpg",
"src/assets/img/SUCCULENT-jacalyn-beales-unsplash.jpg",
"src/assets/img/SUCCULENT-tim-mossholder-unsplash.jpg"
;

1
src/util/types.ts
View File

@@ -88,6 +88,7 @@ export interface CardData {
tier: number tier: number
points?: number points?: number
resourceCost: ResourceCost resourceCost: ResourceCost
image: string
} }
export interface ResourceCost { export interface ResourceCost {