@@ -57,7 +57,7 @@ export function renderLog(logEntry: Log, { id, players, $T, renderCtx: { msg } }
5757 const card = metadata . pokemon [ logEntry . ctx . id ] ;
5858 return [
5959 < Wrapper >
60- < Username name = { playerName } clickable /> reserved { card . name } .
60+ < Username name = { playerName } clickable /> reserved { logEntry . ctx . deck ? `a Tier ${ logEntry . ctx . deck } card` : card . name } .
6161 </ Wrapper > ,
6262 opts ,
6363 ] ;
@@ -198,7 +198,7 @@ function CardWrapper({
198198} ) : ReactElement {
199199 if ( ! onClick ) return < div style = { style } > { children } </ div > ;
200200 return (
201- < Button value = { onClick } style = { style } >
201+ < Button value = { onClick } style = { { cursor : 'pointer' , ... style } } >
202202 { children }
203203 </ Button >
204204 ) ;
@@ -306,25 +306,34 @@ export function PokemonCard({
306306 ) ;
307307}
308308
309- function FlippedCard ( { data, count } : { data : Card ; count : number } ) : ReactElement {
309+ function FlippedCard ( {
310+ data,
311+ count,
312+ onClick,
313+ } : {
314+ data : { tier : number } ;
315+ count : number | null ;
316+ onClick ?: string | undefined ;
317+ } ) : ReactElement {
310318 return (
311- < div style = { getCardStyles ( getArtUrl ( 'other' , `back-${ data . tier } .png` ) ) } >
312- < div
313- style = { {
314- position : 'relative' ,
315- top : 96 ,
316- background : '#1119' ,
317- borderRadius : 12 ,
318- color : 'white' ,
319- textShadow : '0 0 2px #000' ,
320- display : 'inline-block' ,
321- padding : '0 8px 8px' ,
322- fontSize : 72 ,
323- } }
324- >
325- ×< b > { count } </ b >
326- </ div >
327- </ div >
319+ < CardWrapper style = { getCardStyles ( getArtUrl ( 'other' , `back-${ data . tier } .png` ) ) } onClick = { onClick } >
320+ { count ? (
321+ < div
322+ style = { {
323+ background : '#1119' ,
324+ borderRadius : 12 ,
325+ color : 'white' ,
326+ textShadow : '0 0 2px #000' ,
327+ display : 'inline-block' ,
328+ padding : '0 8px 8px' ,
329+ fontSize : 72 ,
330+ ...( ! onClick ? { position : 'relative' , top : 96 } : { } ) ,
331+ } }
332+ >
333+ ×< b > { count } </ b >
334+ </ div >
335+ ) : null }
336+ </ CardWrapper >
328337 ) ;
329338}
330339
@@ -354,7 +363,7 @@ export function Stack({
354363 cards . map ( ( card , index ) =>
355364 hidden ? (
356365 index === 0 ? (
357- < FlippedCard data = { card } count = { cards . length } />
366+ < FlippedCard data = { card } count = { cards . length } onClick = { onClick } />
358367 ) : null
359368 ) : (
360369 < PokemonCard data = { card } reserved = { reserved } onClick = { onClick } stackIndex = { index } />
@@ -444,6 +453,34 @@ function WildCardInput({ action, onClick }: { action: ViewType; onClick: string
444453 ) ;
445454}
446455
456+ function DeckReserveInput ( { action, onClick } : { action : ViewType ; onClick : string } ) : ReactElement {
457+ if ( ! action . active || action . action !== VIEW_ACTION_TYPE . CLICK_DECK ) return < > </ > ;
458+ return (
459+ < div style = { { borderRadius : 12 , padding : 12 , background : '#1119' } } >
460+ < FlippedCard data = { { tier : action . tier } } count = { null } />
461+ < div
462+ style = { {
463+ display : 'inline-block' ,
464+ verticalAlign : 'top' ,
465+ border : '1px solid' ,
466+ borderRadius : 12 ,
467+ padding : 24 ,
468+ margin : 12 ,
469+ } }
470+ >
471+ < Button
472+ value = { `${ onClick } ! ${ ACTIONS . RESERVE } ${ action . tier } ` }
473+ style = { {
474+ zoom : '240%' ,
475+ } }
476+ >
477+ { 'Reserve!' as ToTranslate }
478+ </ Button >
479+ </ div >
480+ </ div >
481+ ) ;
482+ }
483+
447484function ReservedCardInput ( { card, preset, onClick } : { preset : TokenCount ; card : Card ; onClick : string } ) : ReactElement {
448485 const typesToInclude = ( Object . keys ( card . cost ) as TOKEN_TYPE [ ] ) . concat ( [ TOKEN_TYPE . DRAGON ] ) ;
449486 const typesToShow = AllTokenTypes . filter ( type => typesToInclude . includes ( type ) ) ;
@@ -496,22 +533,34 @@ export function BaseBoard({ board, view, onClick }: { board: Board; view: ViewTy
496533 ) }
497534 </ div >
498535 { view . active && view . action === VIEW_ACTION_TYPE . CLICK_WILD ? < WildCardInput action = { view } onClick = { onClick ! } /> : null }
536+ { view . active && view . action === VIEW_ACTION_TYPE . CLICK_DECK ? < DeckReserveInput action = { view } onClick = { onClick ! } /> : null }
499537 < div style = { { height : 48 } } />
500- { [ board . cards [ 3 ] , board . cards [ 2 ] , board . cards [ 1 ] ] . map ( ( { wild, deck } ) => (
501- < div style = { { whiteSpace : 'nowrap' , overflow : 'auto' } } >
502- { wild . map ( card => (
503- < PokemonCard
504- data = { card }
538+ { ( [ 3 , 2 , 1 ] as const ) . map ( tier => {
539+ const { wild, deck } = board . cards [ tier ] ;
540+ return (
541+ < div style = { { whiteSpace : 'nowrap' , overflow : 'auto' } } >
542+ { wild . map ( card => (
543+ < PokemonCard
544+ data = { card }
545+ onClick = {
546+ onClick && ! ( view . active && view . action === VIEW_ACTION_TYPE . CLICK_WILD && card . id === view . id )
547+ ? `${ onClick } ! ${ VIEW_ACTION_TYPE . CLICK_WILD } `
548+ : undefined
549+ }
550+ />
551+ ) ) }
552+ < Stack
553+ cards = { deck }
554+ hidden
505555 onClick = {
506- onClick && ! ( view . active && view . action === VIEW_ACTION_TYPE . CLICK_WILD && card . id === view . id )
507- ? `${ onClick } ! ${ VIEW_ACTION_TYPE . CLICK_WILD } `
556+ onClick && ! ( view . active && view . action === VIEW_ACTION_TYPE . CLICK_DECK && view . tier === tier )
557+ ? `${ onClick } ! ${ VIEW_ACTION_TYPE . CLICK_DECK } ${ tier } `
508558 : undefined
509559 }
510560 />
511- ) ) }
512- < Stack cards = { deck } hidden />
513- </ div >
514- ) ) }
561+ </ div >
562+ ) ;
563+ } ) }
515564 </ >
516565 ) ;
517566}
0 commit comments