jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-06-10 00:04:48 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Webatrice: card import wizard (#4397)

Browse source
This commit is contained in:
Jeremy Letto 2021-10-14 20:42:35 -05:00 • committed by GitHub
parent dde0f568d9
commit 36e5a399d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
41 changed files with 1479 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

45
webclient/src/components/CardDetails/CardDetails.css Normal file
View file

@ -0,0 +1,45 @@
.cardDetails {
padding: 10px;
width: calc(400px * .716);
font-size: 10px;
}
.cardDetails-card {
height: 400px;
margin: 0 auto;
}
.cardDetails-attribute {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.cardDetails-attributes {
margin: 10px 0;
}
.cardDetails-attribute__label {
text-transform: uppercase;
font-size: 10px;
margin-right: 10px;
}
.cardDetails-attribute__value {
text-align: right;
}
.cardDetails-text {
font-size: 12px;
padding: 5px;
background: rgba(0, 0, 0, .15);
white-space: pre-line;
}
.cardDetails-text__flavor {
font-style: italic;
}
.cardDetails-text__current:not(:empty) + .cardDetails-text__flavor {
margin-top: 10px;
}

130
webclient/src/components/CardDetails/CardDetails.tsx Normal file
View file

@ -0,0 +1,130 @@
// eslint-disable-next-line
import React, { useMemo, useState } from 'react';
import { CardDTO } from 'services';
import Card from '../Card/Card';
import './CardDetails.css';
interface CardProps {
card: CardDTO;
}
// @TODO: add missing fields (loyalty, hand, etc)
const CardDetails = ({ card }: CardProps) => {
return (
<div className='cardDetails'>
<div className='cardDetails-card'>
<Card card={card} />
</div>
{
card && (
<div>
<div className='cardDetails-attributes'>
<div className='cardDetails-attribute'>
<span className='cardDetails-attribute__label'>Name:</span>
<span className='cardDetails-attribute__value'>{card.name}</span>
</div>
{
(!card.power && !card.toughness) ? null : (
<div className='cardDetails-attribute'>
<span className='cardDetails-attribute__label'>P/T:</span>
<span className='cardDetails-attribute__value'>{card.power || 0}/{card.toughness || 0}</span>
</div>
)
}
{
!card.manaCost ? null : (
<div className='cardDetails-attribute'>
<span className='cardDetails-attribute__label'>Cost:</span>
<span className='cardDetails-attribute__value'>{card.manaCost.replace(/\{|\}/g, '')}</span>
</div>
)
}
{
!card.convertedManaCost ? null : (
<div className='cardDetails-attribute'>
<span className='cardDetails-attribute__label'>CMC:</span>
<span className='cardDetails-attribute__value'>{card.convertedManaCost}</span>
</div>
)
}
{
!card.colorIdentity?.length ? null : (
<div className='cardDetails-attribute'>
<span className='cardDetails-attribute__label'>Identity:</span>
<span className='cardDetails-attribute__value'>{card.colorIdentity.join('')}</span>
</div>
)
}
{
!card.colors?.length ? null : (
<div className='cardDetails-attribute'>
<span className='cardDetails-attribute__label'>Color(s):</span>
<span className='cardDetails-attribute__value'>{card.colors.join('')}</span>
</div>
)
}
{
!card.types?.length ? null : (
<div className='cardDetails-attribute'>
<span className='cardDetails-attribute__label'>Main Type:</span>
<span className='cardDetails-attribute__value'>{card.types.join(', ')}</span>
</div>
)
}
{
!card.type ? null : (
<div className='cardDetails-attribute'>
<span className='cardDetails-attribute__label'>Type:</span>
<span className='cardDetails-attribute__value'>{card.type}</span>
</div>
)
}
{
!card.side ? null : (
<div className='cardDetails-attribute'>
<span className='cardDetails-attribute__label'>Side:</span>
<span className='cardDetails-attribute__value'>{card.side}</span>
</div>
)
}
{
!card.layout ? null : (
<div className='cardDetails-attribute'>
<span className='cardDetails-attribute__label'>Layout:</span>
<span className='cardDetails-attribute__value'>{card.layout}</span>
</div>
)
}
</div>
<div className='cardDetails-text'>
<div className='cardDetails-text__current'>
{card.text?.trim()}
</div>
<div className='cardDetails-text__flavor'>
{card.flavorText?.trim()}
</div>
</div>
</div>
)
}
</div>
);
}
export default CardDetails;