@ -4,17 +4,16 @@ const sqlCards = [{ "CardImg":"https://is4-ssl.mzstatic.com/image/thumb/Purple11
@@ -4,17 +4,16 @@ const sqlCards = [{ "CardImg":"https://is4-ssl.mzstatic.com/image/thumb/Purple11
{ "CardImg" : "https://spellbook.blob.core.windows.net/hodassets/defaultportraits/fighter_default_cultist_female_0_2.jpg" , "CardName" : "Dragon Worshipper" , "ManaCost" : 1 , "Power" : 1 , "Toughness" : 1 , "CardDesc" : "He spends his days praying to dragons." , "CreatureType" : "Human" } ,
{ "CardImg" : "https://a.wattpad.com/useravatar/Angoleth.256.592295.jpg" , "CardName" : "Dragon Whelp" , "ManaCost" : 2 , "Power" : 3 , "Toughness" : 2 , "CardDesc" : "He will get there." , "CreatureType" : "Dragon" } ] ;
function Card ( props ) {
props = props . props
function Card ( data ) {
return (
< div class = "card" >
< h4 > < b > { props . CardName } < / b > < / h 4 >
< img src = { props . CardImg !== undefined ? props . CardImg : "https://thiscatdoesnotexist.com/" } alt = "Avatar" style = { { width : "100%" } } / >
< h4 > < b > { data . CardName } < / b > < / h 4 >
< img src = { data . CardImg !== undefined ? data . CardImg : "https://thiscatdoesnotexist.com/" } alt = "Avatar" style = { { width : "100%" } } / >
< div class = "container" >
< p > { props . CardDesc } < / p >
< p style = { { position : "absolute" , bottom : - 8 , left : 8 } } > Mana : { props . ManaCost } < / p >
< p style = { { position : "absolute" , bottom : - 8 , left : 125 } } > Power : { props . Power } < / p >
< p style = { { position : "absolute" , bottom : - 8 , right : 8 } } > Toughness : { props . Toughness } < / p >
< p > { data . CardDesc } < / p >
< p style = { { position : "absolute" , bottom : - 8 , left : 8 } } > Mana : { data . ManaCost } < / p >
< p style = { { position : "absolute" , bottom : - 8 , left : 125 } } > Power : { data . Power } < / p >
< p style = { { position : "absolute" , bottom : - 8 , right : 8 } } > Toughness : { data . Toughness } < / p >
< / d i v >
< / d i v >
)
@ -24,9 +23,9 @@ function App() {
@@ -24,9 +23,9 @@ function App() {
return (
< div className = "App" >
< ul >
{ sqlCards . map ( ( props , i ) => (
{ sqlCards . map ( ( data , i ) => (
< li key = { i } >
< Card props = { props } / >
< Card { ... data } / >
< / l i >
) ) }
< / u l >