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

46
webclient/src/components/TokenDetails/TokenDetails.css Normal file
View file

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

86
webclient/src/components/TokenDetails/TokenDetails.tsx Normal file
View file

@ -0,0 +1,86 @@
// eslint-disable-next-line
import React, { useMemo, useState } from 'react';
import { TokenDTO } from 'services';
import Token from '../Token/Token';
import './TokenDetails.css';
interface TokenProps {
token: TokenDTO;
}
const TokenDetails = ({ token }: TokenProps) => {
const props = token?.prop?.value;
return (
<div className='tokenDetails'>
<div className='tokenDetails-token'>
<Token token={token} />
</div>
{
token && (
<div>
<div className='tokenDetails-attributes'>
<div className='tokenDetails-attribute'>
<span className='tokenDetails-attribute__label'>Name:</span>
<span className='tokenDetails-attribute__value'>{token.name?.value}</span>
</div>
{
(!props.pt?.value) ? null : (
<div className='tokenDetails-attribute'>
<span className='tokenDetails-attribute__label'>P/T:</span>
<span className='tokenDetails-attribute__value'>{props.pt.value}</span>
</div>
)
}
{
!props.colors?.value ? null : (
<div className='cardDetails-attribute'>
<span className='cardDetails-attribute__label'>Color(s):</span>
<span className='cardDetails-attribute__value'>{props.colors.value}</span>
</div>
)
}
{
!props.maintype?.value ? null : (
<div className='cardDetails-attribute'>
<span className='cardDetails-attribute__label'>Main Type:</span>
<span className='cardDetails-attribute__value'>{props.maintype.value}</span>
</div>
)
}
{
!props.type?.value ? null : (
<div className='cardDetails-attribute'>
<span className='cardDetails-attribute__label'>Type:</span>
<span className='cardDetails-attribute__value'>{props.type.value}</span>
</div>
)
}
</div>
{
!token.text?.value ? null : (
<div className='tokenDetails-text'>
<div className='tokenDetails-text__current'>
{token.text.value}
</div>
</div>
)
}
</div>
)
}
</div>
);
}
export default TokenDetails;