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) {
const currentPlayer = useCurrentPlayer(state);
if (!data) return <div className="card"></div>;
return (
<div className="card" key={v4()}>
<div className="card" key={v4()} style={{backgroundImage: `url(${data.image})`}}>
<p>Counts as: {data.gemValue}</p>
<p>Point value: {data.points || 0}</p>
<p>Cost:</p>
{ (data.points && data.points > 0) ? <p>{data.points} points</p> : null }
<div className="total-card-cost">
{
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/placeholders";
@import "../../sass/helper/variables";
.card-row {
display: flex;
@@ -12,35 +12,45 @@
flex-flow: row nowrap;
width: 100%;
justify-content: space-around;
}
.card {
width: 25%;
min-height: 24vh;
border: 2px solid black;
> * {
margin: 1rem;
}
.total-card-cost {
display: flex;
justify-content: center;
@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 {
background-color: rgb(9, 67, 9);
background-color: rgb(23, 73, 23);
}
.tier-2 {
background-color: rgb(174, 174, 32);
color: black;
}
.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}`}>
<p>Tier: {tier}</p>
<div className="card-row-cards-visible">
<div className="card card-count">
<div className="card-count">
<p>Remaining: {state.gameboard.deck[typedTier].length}</p>
</div>
{ cards && cards.map((cardData: CardData) => {

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

@@ -1,18 +1,26 @@
@import "../../sass/helper/mixins";
.nobles-panel {
display: flex;
flex-flow: column nowrap;
background-color: rgb(240, 236, 225);
padding: 1.5rem;
color: black;
}
padding: 1.5rem;
.all-nobles {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
.noble-card {
display: inline-flex;
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) => {
return (
<div className="noble-card" key={v4()}>
<p>Points: {noble.points}</p>
<p>{noble.points} points</p>
<p>Cost:</p>
<div className="mapped-noble-costs">
{
Object.keys(noble.resourceCost).map((each) => {
// @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>
)
})
}

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

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

271
src/data/cards.json
View File

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