calypso_style.scss

/**
 *------
 * BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * Calypso implementation : © Andy Bond <48208438+ADBond@users.noreply.github.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.
 * -----
 *
 * calypso.css
 *
 * Calypso stylesheet
 *
 */

/*
    This is the CSS stylesheet of your game User Interface.
    
    Styles defined on this file will be applied to the HTML elements you define in your
    HTML template (calypso_calypso.tpl), and to HTML elements you create dynamically
    (in calypso.js).
    
    Usually, you are using CSS to:
    
    1°) define the overall layout of your game
        (ex: place the board on the top left, place player's hand beside, place the deck on the right, ...).

    2°) create your CSS-sprites:
        All images of your games should be gathered into a small number of image files. Then, using
        background-image and background-position CSS properties, you create HTML blocks that can 
        display these images correctly (see example below).
    
    3°) ... anything else:
        It is really easy to add and remove CSS classes dynamically from your Javascript with
        dojo.addClass and dojo.removeClass. It is also easy to check if an element has a class
        (dojo.hasClass) or to get all elements with a specific class (dojo.query). This is why,
        very often, using CSS classes for the logic of your user interface allow you to do complex
        thing easily.
        
        
     Note: on the production platform, this file will be compressed and comments will be removed.
           Consequently, don't hesitate to put as many comments as necessary.
*/


/* Note: you must not use any @import directive */


/********* You can start writing your CSS below this line: **********/

/* for reference: */
/* .whiteblock {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background-image: url("../img/layout/rounded_b.png");
} */
/* TODO ?maybe rgba -> rgb (css) */
$calypso_colour: #8800DD;
$card_width: 72px;
$card_height: 96px;
$num_ranks: 13;

/** Table layout **/

$table_size: 740px;
#clp-public-area{
    position: relative;
    height: $table_size;
}
$left_offset: 50%;
#clp-table-area {
    position: absolute;
    left: $left_offset;
    transform: translate(-$left_offset);
    width: $table_size;
    height: $table_size;
    background-color: $calypso_colour;
    border-radius: 20px;
    z-index: 1;
}
// just need this positioned roughly
#clp-table-centre {
    position: absolute;
    left: calc($table_size / 2);
    top: calc($table_size / 2);
    width: 0;
    height: 0;
    // and let this be higher than clp-card-play-area so that animations of suits go over top
    z-index: 41;
}

$info_size: 20px;
$title_size: $info_size * 1.5;
$info_width: 160px;
.clp-game-info {
    height: $info_size*2.5;
    margin: 10px auto;
    width: 0.9*$table_size;
    border-radius: 10px;
    position: relative;
    font-weight: bold;
    font-size: $info_size;
    padding: 15px;
    text-align: center;
    background-color: rgba($calypso_colour, 0.5);
}
.clp-gametitle {
    font-size: $title_size;
}
$icon_size: 32px;
.clp-playerbox-additions {
    clear: both;
}
.clp-calypso-info {
    clear: both;
    width: 2*$icon_size;
    margin: 5px auto;
    display:flex;
}
$display_font: calc(2 * $icon_size / 3);
.clp-info-count {
    font-size: $display_font;
    font-weight: bold;
    margin-left: 10px;
    padding-top: calc(($icon_size - $display_font) / 2);
    flex-grow: 1;
}
// 16px might be too small - maybe 24? the above bits should scale with
.clp-suit-icon {
    float: left;
    background-image: url('img/card_suits.png');
    width: $icon_size;
    height: $icon_size;
}
.clp-suit-text {
    font-size: 1.4em;
    font-weight: bold;
}
.clp-suit-text-spades {
    color: #000;
}
.clp-suit-text-clubs {
    color: #000;
}
.clp-suit-text-hearts {
    color: #C00;
}
.clp-suit-text-diamonds {
    color: #C00;
}
// construct actual suit icon lower down where we do suity stuff

$card_area_buffer: 20px;
$card_area_width: $card_width + $card_area_buffer;
$card_area_height: $card_height + $card_area_buffer;
$card_area_outline_col: #AAA;
.clp-player-card-play-area {
    outline: ridge 3px $card_area_outline_col;
    width: $card_area_width;
    height: $card_area_height;
    // this needs to be above other table elements to animated cards pass over them when played
    z-index: 40;
}

$left_right_offset: $card_area_width + 20px;
$top_bottom_offset: $card_area_height + 20px;
.clp-player-card-play-area-N {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%);
}
.clp-player-card-play-area-S {
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translate(-50%);
}
.clp-player-card-play-area-W {
    position: absolute;
    left: 30%;
    top: 50%;
    transform: translate(0, -50%);
}
.clp-player-card-play-area-E {
    position: absolute;
    right: 30%;
    top: 50%;
    transform: translate(0, -50%);
}

.clp-player-card-play-area-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: $card_width;
    height: $card_height;
}

#clp-myhand-wrap {
    position: relative;
    // top: 30px;
    left: 50%;
    transform: translate(-50%);
    width: 70%;
    max-width: $table_size;
    margin-top: 10px;
    margin-bottom: 10px;
}

// active cards - ones I can try and click
// if user pref is highlight playable, these will only be legal, otherwise all cards
.clp-cards-dont-highlight-playable .clp-active-hand .clp-hand-card:hover,
.clp-cards-highlight-playable .clp-active-hand .clp-hand-card-playable.clp-hand-card:hover {
    transform: translate(0, -10px);
}
// if user pref is highlight playable, grey out unplayable cards
// if not then these are not distinguished
.clp-cards-highlight-playable .clp-active-hand .clp-hand-card-unplayable {
    background-color: #aaa;
    background-blend-mode: multiply;
    cursor: default !important;
}
// not my turn
.clp-inactive-hand .clp-hand-card {
    cursor: default !important;
}

$card_rounding: 5px;
/*** cards on table ***/
.clp-face-up-card {
    border-radius: $card_rounding;
    width: $card_width;
    height: $card_height;
    background-image: url('img/cards.webp');
}

.clp-card-on-table {
    position: absolute;
}

/*** calypsos ***/

// Offset for overlapping of calypso cards:
$each_card_offset: 25px;
$calypso_pure_width: $each_card_offset*($num_ranks - 1) + $card_width;
@for $rank from 2 through $num_ranks+1 {
    $offset_value: ($rank - 2) * $each_card_offset;
    .clp-calypsocard-#{$rank} {
        left: ($rank - 2) * $each_card_offset;
    }
}
$suit_height: 32px;
@for $suit from 1 through 4 {
    $y_card: $card_height * ($suit - 1);
    $y_icon: $suit_height * ($suit - 1);
    .clp-card-space-#{$suit} {
        background-position: 0px (-$y_card);
    }
    .clp-renounce-#{$suit} {
        background-position: 0px (-$y_icon);
    }
    // for display in player boxes:
    .clp-suit-icon-#{$suit} {
        background-position: 0px (-$y_icon);
    }
    @for $rank from 2 through $num_ranks+1 {
        $x: $card_width * ($rank - 2);
        .clp-calypsocard-face-#{$suit}-#{$rank}{
            z-index: $rank + 14;
            background-position-x: -$x;
            background-position-y: -$y_card;
        }
    }
    .clp-calypsopile-#{$suit} {
        // for the ace
        background-position-x: -$card_width * (14 - 2);
        background-position-y: -$y_card;
    }
}

// while _this_ is the placeholder layout
.clp-calypsocard-space {
    outline: solid 1px black;
    z-index: 2;
    background-image: url('img/cards_layout.png');
}
.clp-captured-card {
    position: absolute;
    width: $card_width;
    height: $card_height;
}

$blank_space_colour: #777;

$won_tricks_left_buffer: 40px;
$calypso_zone_pure_width: $calypso_pure_width + $won_tricks_left_buffer + $card_width;

$calypso_zone_side_padding: 8px;
$calypso_bottom_buffer: 20px;

$renounce_size: 32px;
$renounce_padding: 4px;

$personal_area_width: $calypso_zone_pure_width + $calypso_zone_side_padding;
$personal_area_height: $calypso_bottom_buffer + $card_height + $renounce_size + 2*$renounce_padding;
.clp-player-personal-area {
    position: absolute;
    text-align: center;
    width: $personal_area_width;
    height: $personal_area_height;
    padding: $calypso_zone_side_padding;
    background: rgba(255, 255, 255, 0.75);
}

$minor_colour: #ffff3f;
$major_colour: #9fff3f;
$border_width: 5px;
// 1, 2 are major suits, 3,4 minor
.clp-player-personal-area-1, .clp-player-personal-area-2 {
    outline: solid $border_width $major_colour;
}
.clp-player-personal-area-3, .clp-player-personal-area-4 {
    outline: solid $border_width $minor_colour;
}
.clp-teamname {
    font-weight: bold;
    font-size: 1.2em;
    margin: 5px;
    text-align: center;
    background-color: #AAA;
    display: block;
    padding: 6px;
    border-radius: 5px;
}
.clp-teamname-major {
    color: $major_colour;
}
.clp-teamname-minor {
    color: $minor_colour;
}

.clp-renounce-indicators {
    position: absolute;
}
.clp-renounce-indicator {
    width: $renounce_size;
    height: $renounce_size;
    display: inline-block;
    margin: $renounce_padding;
}

.clp-active-renounce {
    background-color: #B8B8B8;
    background-image: url('img/card_suits.png');
    z-index: 3;
}
.clp-inactive-renounce {
    background-color: $blank_space_colour;
}
.clp-dealer-indicator-area {
    position: absolute;
    width: $renounce_size;
    height: $renounce_size;
    left: 4*($renounce_size + 2*$renounce_padding) + 55px;
    margin: $renounce_padding;
}

$card_back_image: "back_1.svg";
$image_scale: calc($renounce_size * $card_width / $card_height);
$card_offset: 4px;
#clp-dealerbutton {
    width: $renounce_size;
    height: $renounce_size;
    background-image: url('img/#{$card_back_image}'), url('img/#{$card_back_image}');
    background-repeat: no-repeat, no-repeat;
    background-position: $card_offset 0, 0 0;
    background-size: $image_scale, $image_scale;
    z-index: 3;
}

$max_name_size: 200px;
.clp-playername {
    font-weight: bold;
    height: $renounce_size;
    width: $max_name_size;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 20px;
    position: absolute;
    right: 40px;
}
// Make it so that the top player's name is right-way up - readability over symmetry
.clp-playername-N {
    transform: rotate(180deg);
}

.clp-player-all-captured-cards {
    position: absolute;
    width: $calypso_zone_pure_width;
    height: $card_height;
    /* leaving room for renounces */
    bottom: $calypso_bottom_buffer;
}
.clp-calypsoholder {
    width: $calypso_pure_width;
    height: $card_height;
    outline: solid 3px black;
    position: absolute;
}
$calypso_card_overlap: 12px;
.clp-trickpile {
    width: $card_width;
    height: $card_height;
    right: 0;
    position: absolute;
    background-color: $blank_space_colour;
    z-index: 35;
}
// mess about with left/right overlap etc for trickpile/calypsopile appearance
.clp-calypsopile {
    width: $card_width;
    height: $card_height;
    right: $calypso_card_overlap;
    position: absolute;
    bottom: $calypso_card_overlap;
    z-index: 2;
}
.clp-calypsopile-full {
    background-image: url('img/cards.webp');
}

.clp-trickpile-full {
    border-radius: $card_rounding;
    background-image: url('img/#{$card_back_image}');
}
// class for card about to enter trickpile in animation:
.clp-trickpile-nearly {
    border-radius: $card_rounding;
    width: $card_width;
    height: $card_height;
    background-image: url('img/#{$card_back_image}');
}

$personal_area_side_offset: 20px;
$personal_area_bottom_offset: 20px;
.clp-player-personal-area-N {
    position: absolute;
    right: $personal_area_side_offset;
    top: $personal_area_bottom_offset;
    transform: rotate(180deg);
}
.clp-player-personal-area-E {
    position: absolute;
    right: $personal_area_bottom_offset - $personal_area_width - 2*$calypso_zone_side_padding;
    bottom: $personal_area_side_offset;
    transform-origin: bottom left;
    transform: rotate(270deg);
}
.clp-player-personal-area-S {
    position: absolute;
    left: $personal_area_side_offset;
    bottom: $personal_area_bottom_offset;
}
.clp-player-personal-area-W {
    position: absolute;
    left: $personal_area_bottom_offset;
    top: $personal_area_side_offset - $personal_area_height - 2*$calypso_zone_side_padding;
    transform-origin: bottom left;
    transform: rotate(90deg);
}

/* Score stuff */
.clp-number-entry {
    color: red;
    font-style: italic;
}
.clp-score-entry {
    font-weight: bold;
}
.clp-number-label {
    text-align: left;
    font-style: italic;
}
.clp-score-label {
    text-align: right;
}
.clp-table-suit {
    display: block;
    // set stuff here as icon is float:left
    background-image: url('img/card_suits.png');
    width: $icon_size;
    height: $icon_size;
    margin: auto;
}

// score buttons for getting score entries
$button_height: 100px;
$button_width: 230px;
$button_font_size: $info_size;
#clp-score-access-table-area {
    position: absolute;
    margin: auto;
    padding: 10px;
    top: 10%;
    right: 0;
    z-index: 0;
    background-color: rgba($calypso_colour, 0.2);
    border-radius: 10px;
}
// mobile view for score-button area
// this is a total kludge, to account for additional margin and player-box area
$responsive_buffer: 530px;
@media screen and (max-width: calc($table_size + $button_width + $responsive_buffer)) {
    $mob_score_extra_padding: 10px;
    $wider_width: 2*($button_width + $mob_score_extra_padding);
    #clp-score-access-table-area {
        position: relative;
        width: $wider_width;
        padding: $mob_score_extra_padding;
        display: block;
    }
    #clp-score-access-by-round {
        column-count: 2;
    }
    #clp-score-access-overall {
        position: relative;
        left: 50%;
        transform: translate(calc(-1 * $button_width / 2));
    }
}
.clp-score-button{
    height: $button_height;
    width: $button_width;
    border: 1px solid #FFFFFF;
    margin: 5px;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: $button_font_size;
    color: #FFFFFF;
    text-align: center;
    transition: all 0.2s;
    box-shadow: #000000 0 1px 0;
}
.clp-score-button-inactive{
    background-color: #888888;
    opacity: 0.5;
}
.clp-score-button-active{
    background-color: $calypso_colour;
    cursor: pointer;
}
.clp-score-button-active:hover{
    color: #000000;
    background-color: #FFFFFF;
}
#clp-round-scores-button-overall{
    margin-top: 20px;
}

/* user preference colour options */
$user-pref-colours: (
    "purple": $calypso_colour,
    "yellow": #cccc00,
    "red": #dd0000,
    "green": #00dd00,
    "blue": #0000dd,
    "white": #dddddd,
    "black": #222222,
    "pink": #ff1d8e,
    "cyan": #00ffff,
    "darkgreen": #005500,
    "orange": #dd8800,
);
// use nesting
@each $col_name, $colour in $user-pref-colours{
    .clp-up-#{$col_name} {
        // affected elements:
        .clp-game-info {
            background-color: rgba($colour, 0.5);
        }
        #clp-score-access-table-area {
            background-color: rgba($colour, 0.2);
        }
        #clp-table-area, .clp-score-button-active {
            background-color: $colour;
        }
    }
}
/* card face options */
$user-pref-packs: (
    "standard": "cards.webp",
    "four-colour": "cards_four.webp",
);
$offset_counter: 0;
$suit_offset: 32px;
$layout_offset: $card_width;
@each $pack_name, $file_name in $user-pref-packs {
    .clp-pack-#{$pack_name} {
        // card face elements:
        // on table and calypso. in hand dealt with in js
        .clp-face-up-card, .clp-calypsopile-full {
            background-image: url("img/#{$file_name}");
        }
        // suit icons:
        // these appear in player boxes, renounce flags, and in score table
        .clp-suit-icon, .clp-active-renounce, .clp-table-suit {
            background-position-x: -$suit_offset*$offset_counter;
        }
        // layout spots - for calypsos
        .clp-calypsocard-space {
            background-position-x: -$layout_offset*$offset_counter;
        }
    }
    $offset_counter: $offset_counter + 1;
};
.clp-pack-four-colour {
    .clp-suit-text-clubs {
        color: #080;
    }
    .clp-suit-text-diamonds {
        color: #33D;
    }
}

// this is in-built bga stuff, rather than hacking it ourselves
.tableWindow th {
    text-align: center;
}

// for disabling transform
.clp-no-transform * {
    transform: none !important;
}