React app for playing MTGClone (https://github.com/jordanmason-stleo/MTGClone)
https://mtgclone.nightmare.haus
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
1.6 KiB
36 lines
1.6 KiB
import './App.css'; |
|
|
|
const sqlCards = [{ "CardImg":"https://is4-ssl.mzstatic.com/image/thumb/Purple118/v4/91/43/40/9143401d-5824-5d0a-e559-4872b27602b9/source/256x256bb.jpg", "CardName": "Devouring Dragon", "ManaCost": 5, "Power": 5, "Toughness": 5, "CardDesc": "He does to people what Greg does to booty.", "CreatureType": "Dragon" }, |
|
{ "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(data) { |
|
return ( |
|
<div class="card"> |
|
<h4><b>{data.CardName}</b></h4> |
|
<img src={data.CardImg !== undefined ? data.CardImg : "https://thiscatdoesnotexist.com/"} alt="Avatar" style={{ width: "100%" }} /> |
|
<div class="container"> |
|
<p>{data.CardDesc}</p> |
|
<p style={{position: "absolute", bottom: -8, left: "2%"}}>Mana: {data.ManaCost}</p> |
|
<p style={{position: "absolute", bottom: -8, left: "35%"}}>Power: {data.Power} </p> |
|
<p style={{position: "absolute", bottom: -8, right: "2%"}}>Toughness: {data.Toughness}</p> |
|
</div> |
|
</div> |
|
) |
|
} |
|
|
|
function App() { |
|
return ( |
|
<div className="App"> |
|
<ul> |
|
{sqlCards.map((data, i) => ( |
|
<li key={i}> |
|
<Card {...data}/> |
|
</li> |
|
))} |
|
</ul> |
|
</div> |
|
); |
|
} |
|
|
|
export default App; |