homeworlds.css

/**
 *------
 * BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * Homeworlds implementation : © <Jonathan Baker> <babamots@gmail.com>
 *
 * This code has been produced on the BGA studio platform for use on http://boardgamearena.com.
 * See http://en.boardgamearena.com/#!doc/Studio for more information.
 * -----
 *
 * homeworlds.css
 *
 * Homeworlds stylesheet
 *
 */

#HWboard{
    /* Board margin-right makes space for bank */
    margin-right:210px;
    /* height:1000px; */
    /*background:rgba(255,255,255,0.3);*/
    display:block;
}
#HWbank{
    /*
    Bank must not have default position type (static)
    or its width/height can't be used for relative sizes of stacks
    */
    position:relative;
    width:200px;
    height:600px;
    float:right;
    background:rgba(0,0,0,0.3);
}

/* A stack is a place for identical pieces in the bank */
.HWstack{
    display:inline-block;
    position:absolute;
    width:33.3%;
    height:25%;
}
/*
Make pieces in the stack higher the more children there are
It's better to count from the end than from the beginning because, 
while adding tutorial annotation images,
mousing over an element causes it to have a new child
at the beginning of its list.
If you determine height by counting from the start of the list,
the pieces hop around as you mouse over the bank.
*/
.HWstack>*{
    position:absolute;
}
.HWstack>*:nth-last-child(1){
    bottom:0px;
    z-index:1;
}
.HWstack>*:nth-last-child(2){
    bottom:20px;
    z-index:2;
}
.HWstack>*:nth-last-child(3){
    bottom:40px;
    z-index:3;
}
/*
Pieces traveling to the board should be in front of stacked pieces
in order to not look weird.
*/
 
.HWship,.HWstar{
    z-index:4;
}


/********
 Systems
********/
.HWsystem{
    border:2px solid black;
    display:inline-block;
    margin:5px;
}
/* A homeworld system with a non-none homeplayer_id attribute*/
.HWsystem:not([homeplayer_id=none]){
    border:2px dashed black;
    /* Include if player-colored borders are wanted
    outline-width:2px;
    outline-style:solid;
    */
}
/*
A dummy div so that the system container can be centered
and rows of same-sized systems are created
*/
.HWcenterizer{
    text-align:center;
    display:block;
    min-height:50px;
}
/* A centered, collection-fitting container for same-sized systems */
.HWsystem_container{
    display:inline-block;
    vertical-align:top;
}

/* All pieces use the same sprite background */
.HWship,.HWstar,.HWbanked {
    background-image:url('img/sprites.svg');
    background-repeat:no-repeat;
    background-size:128px 600px;
    display:inline-block;
    /* full size: 256px 1200; */
}
.HWship,.HWstar,#HWturn_token{
    position:relative;
    transition:.5s;
}

.HWstar_container{
    display:inline-block;
    text-align:center;
}
.HWsystem_label{
    margin-left:5px;
    margin-right:5px;
    float:bottom;
}

/* Symbol indicator appears on pieces for colorblind friendliness */
.HWcolor_symbol{
    position:absolute;
    height:20px;
    width:20px;
    left:0;
    right:0;
    margin:auto;
    background-image:url('img/colorblind.svg');
    background-repeat:no-repeat;
    background-size:20px 80px;
}
/* To get the symbol in a vertically good spot,
 pieces need a margin according to their size */

.HWsymbol_red{
    background-position-y:-0px;
}
.HWsymbol_yellow{
    background-position-y:-20px;
}
.HWsymbol_green{
    background-position-y:-40px;
}
.HWsymbol_blue{
    background-position-y:-60px;
}

.HWlarge.HWbanked>.HWcolor_symbol,.HWlarge.HWship>.HWcolor_symbol{
    margin-top:40px;
}
.HWmedium.HWbanked>.HWcolor_symbol,.HWmedium.HWship>.HWcolor_symbol{
    margin-top:32px;
}
.HWsmall.HWbanked>.HWcolor_symbol,.HWsmall.HWship>.HWcolor_symbol{
    margin-top:15px;
}

.HWlarge.HWstar>.HWcolor_symbol{
    margin-top:15px;
}
.HWmedium.HWstar>.HWcolor_symbol{
    margin-top:10px;
}
.HWsmall.HWstar>.HWcolor_symbol{
    margin-top:5px;
}

/* Hide the symbol on covered children */
.HWbanked:not(:first-child)>.HWcolor_symbol{
    display:none;
}

/* Hide the symbol when colorblind mode is off */
html.colorblind_off .HWcolor_symbol{
    display:none;
}

/*
The background image has every piece sprite.
This section sets the vertical background offset by piece color and orientation.
*/

/* Offset for the top of the color section in the sprite image */
.HWred{
    --offsetC:-6px
}
.HWyellow{
    --offsetC:-156px;
}
.HWgreen{
    --offsetC:-305.5px
}
.HWblue{
    --offsetC:-455px
}

/* Additional offsetP for the top of the piece */
.HWlarge.HWship,.HWlarge.HWbanked{
    --offsetP:-0px;
    margin-top:5px;
    height:86px
}
.HWmedium.HWship,.HWmedium.HWbanked{
    --offsetP:-9px;
    margin-top:14px;
    height:68px
}
.HWsmall.HWship,.HWsmall.HWbanked{
    --offsetP:-18px;
    margin-top:23px;
    height:50px
}
.HWlarge.HWstar{
    --offsetP:-93px;
    margin-top:5px;
    height:49px
}
.HWmedium.HWstar{
    --offsetP:-98px;
    margin-top:10px;
    height:39px
}
.HWsmall.HWstar{
    --offsetP:-103.5px;
    margin-top:15.5px;
    height:29px
}

/* Add the offsets together */

.HWship,.HWstar,.HWbanked{
    background-position-y:calc(var(--offsetC) + var(--offsetP))
}

/* Non-banked pieces get bottom margin matching top margin for symmetry */
.HWlarge.HWship{
    margin-bottom:5px;
}
.HWmedium.HWship{
    margin-bottom:14px;
}
.HWsmall.HWship{
    margin-bottom:23px;
}
.HWlarge.HWstar{
    margin-bottom:5px;
}
.HWmedium.HWstar{
    margin-bottom:10px;
}
.HWsmall.HWstar{
    margin-bottom:15.5px;
}

/* Horizontal offset by and width depend on piece size. */
.HWlarge{
    background-position-x:-1.5px;
    width:49px;
}
.HWmedium{
    background-position-x:-54.5px;
    width:39px;
}
.HWsmall{
    background-position-x:-98px;
    width:29px;
}

.HWship{
    transform:rotate(var(--rotateAmount));
}
.HWstar,#HWturn_token{
    --rotateAmount:0deg;
}

/*
Give ships and stars a little horizontal margin
Use margin to center banked pieces
*/
.HWship,.HWstar{
    margin-left:5px;
    margin-right:5px;
}
.HWbanked{
    margin:auto;
    left:0;
    right:0
}

/*
Ships and systems can be friendly or hostile.
These terms will need to be generalized if 3+ player is implemented.
*/
.HWhostile{
    float:left;
}
.HWhostile.HWship{
    --rotateAmount:180deg;
}
.HWfriendly{
    float:right;
}
.HWfriendly.HWship{
    --rotateAmount:0deg;
}

/***************
Selectable stuff
***************/

.HWselectable{
    cursor:pointer;
}

/* Selectable stacks and systems get a white background that brightens on hover */
.HWselectable.HWstack,.HWselectable.HWsystem{
    background-color:rgba(255,255,255,0.3);
}
.HWselectable.HWstack:hover,.HWselectable.HWsystem:hover{
    background-color:rgba(255,255,255,0.6);
}

/* Selectable ships and stars get a shadow and rise on hover*/
.HWselectable.HWship.HWfriendly:not([activate]),.HWselectable.HWstar{
    filter:drop-shadow(15px -15px 10px black);
}
.HWhostile.HWship.HWselectable{
    /* Reverse the shadow for hostile ships since they're rotated */
    filter:drop-shadow(-15px 15px 10px black);
}
.HWselectable.HWpiece:hover,.HWselectable#HWturn_token:hover{
    transform:translate(0px,-5px) rotate(var(--rotateAmount));
}

#HWturn_token.HWonly_option{
    filter:drop-shadow(15px -15px 10px black);
}

/* Use a custom "activate" attribute to highlight with power color */
[activate=pending]{
    filter:drop-shadow(15px -15px 10px indigo);
}
[activate=sacrifice]{
    /*opacity:0;*/
}
[activate='1']{
    filter:drop-shadow(10px -10px 10px red);
}
[activate='2']{
    filter:drop-shadow(10px -10px 10px yellow);
}
[activate='3']{
    filter:drop-shadow(10px -10px 10px green);
}
[activate='4']{
    filter:drop-shadow(10px -10px 10px blue);
}

/*
Borrowed from
https://www.kirupa.com/snippets/getting_jittery_on_hover_using_only_css.htm
*/
.HWoverpopulated {
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: jittery;
}
 
@keyframes jittery {
    10% {
        transform: rotate(var(--rotateAmount)) translate(-2px, -3px) scale(1.01, 1.01);
    }
    20% {
        transform: rotate(var(--rotateAmount)) translate(3px, 2px) scale(.99, .99);
    }
    30% {
        transform: rotate(var(--rotateAmount)) translate(-4px, -5px) scale(1.01, 1.01);
    }
    40% {
        transform: rotate(var(--rotateAmount)) translate(2px, 3px) scale(1, 1);
    }
    50% {
        transform: rotate(var(--rotateAmount)) translate(-1px, -2px) scale(.98, .98);
    }
    60% {
        transform: rotate(var(--rotateAmount)) translate(0px, 3px) scale(1.02, 1.02);
    }
    70% {
        transform: rotate(var(--rotateAmount)) translate(-2px, -4px) scale(1, 1);
    }
    80% {
        transform: rotate(var(--rotateAmount)) translate(3px, 5px) scale(.99, .99);
    }
    90% {
        transform: rotate(var(--rotateAmount)) translate(-5px, -3px) scale(1.1, 1.1);
    }
    100% {
        transform: rotate(var(--rotateAmount)) translate(3px, 1px) scale(.95, .95);
    }
}

/* Modifications to main BGA display */
.player_score_value{
    display:none
}
.fa-star{
    display:none
}
.HWfirst_player_indicator{
    font-size:75%;
}

/* Turn token */
.HWtoken_space{
    position:relative;/*Relative or absolute position needed for sliding*/
    /* Token moves up 5px on hover, systems are normally 96px high because large ships are 86 px and have 5px above and below*/
    height:96px;
    width:96px;
    margin-top:5px;
    display:inline-block;
    float:left;
}
#HWturn_token{
    position:relative;/*Relative or absolute position needed for sliding*/
    background-image:url('img/turn_token.svg');
    background-repeat:no-repeat;
    background-size:100%;
    height:100%;
    width:100%;
    /*
    Without a z-index it sometimes appears to slide under pieces,
    and pieces need z-index 4 to stay in front of stacked pieces
    */
    z-index:5;
}

/* Animation marker shouldn't appear */
.HWanimarker{
    /*
    display:none;
    This seems to make pieces invisible when markers are used for animations
    */
    position:relative;
    height:0px;
    width:0px;
    /* A size and background make it easier to find when debugging */
    /*height:50px;*/
    /*width:50px;*/
    /*background-color:rebeccapurple;*/
    /**/
}

/*
The centering margins of banked pieces mess up animations otherwise
This should probably be the same as for stars and ships to avoid jumpiness,
but I don't want to include it in the same command since this is the
animation section.
*/
.HWsliding:not(#HWturn_token){
    margin-left:5px;
    margin-right:5px;
}

/*
Try to make tutorial annotations right-side up on hostile ships.
Animations mess up my correction, so turn it off (not too noticeable)
*/
.HWhostile.HWship>.archiveCommentPointed{
    transform: rotate(180deg);
    left:0;
    animation:none;
    -webkit-animation:none;
}
.HWhostile.HWship.HWsmall>.archiveCommentPointed{
    top:-35px;
}
.HWhostile.HWship.HWmedium>.archiveCommentPointed{
    top:-25px;
}
.HWhostile.HWship.HWlarge>.archiveCommentPointed{
    top:-15px;
}