scrabble-online/client/public/scrabble/game.css

/**
  * This would be responsive, ie, resizing with the size of the window
  * but decided it against the scope of the project as it would be 
  * technically difficult to resize dynamically and have all the elements
  * needed, visible at the times they needed to be visible
  */

piece {
    display: flex;
    position: absolute;

    cursor: move;
    background: radial-gradient(circle, rgba(255,214,45,1) 41%, rgba(255,179,0,1) 84%);

    text-align: center;
    justify-content: center;
    align-items: center;

    font-size: 50px;

    width: 80px;
    height: 80px;
}

nopiece {
    display: flex;
    position: absolute;

    cursor: pointer;
    background: none;

    width: 80px;
    height: 80px;
}

score {
    display: inline-block;
    position: absolute;

    text-align: right;
    right: 5px;

    font-size: 50%;

    width: 100%;
    height: 100%;
}

/*for small pieces - played or not*/
.small-piece {
    width: 40px;
    height: 40px;
    font-size: 25px;
    cursor: pointer;
}

#container {
    position:static;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#game-info-left {
    position: relative;
    border: 1px dotted black;
    
    display: flex;
    flex-basis: 25%;
    flex-grow: 1;
    order: -1;
    
    /*children*/
    flex-direction: column;

    height: 600px;
}

#logo {
    border: 1px dotted black;

    width: 100%;
}

#game-chat {
    border: 1px dotted black;
    box-sizing: border-box;
    resize: none; 
    width: 100%;
    flex-grow: 5;
}

#game-info-right {
    position: relative;
    border: 1px dotted black;
    
    display: flex;
    flex-basis: 25%;
    flex-grow: 1;
    order: 1;
    
    /*children*/
    flex-direction: column;
    
    height: 600px;
}

#player-scores {
    border: 1px dotted black;

    display: flex;

    flex-direction: row;
}

.player {
    border: 1px dotted black;
    
    justify-content: center;
    text-align: center;
    flex-grow: 2;
}

.myturn {
    background-color: aquamarine;
}

.myturnprocessing {
    background-color: lightcoral;
}

.theirturn {
    background-color: lightblue;
}


#game-controls {
    border: 1px dotted black;

    display: flex;

    flex-direction: row;
}


#moves {
    border: 1px dotted black;
    padding-left: 1vw;
    padding-top: 1vh;
    height: fit-content;
    
}

.move {
    overflow: hidden;
    text-overflow: ellipsis;
}

#game-container {
    border: 1px dotted black;
    position: static;

    display: flex;
    order: 0;

    width: 600px;
    height: 100%;
}

#game-info-compact {
    border: 1px dotted black;
    
    top: 710px;
    width: 600px;
    position: fixed;
    display: flex;

    justify-content: space-between;

    /*children*/
    /* flex-direction: row; */
}

#player-scores-compact {
    border: 1px dotted black;

    display: flex;

    /* flex-direction: row;
    flex-grow: 2; */
}

#game-board {
    outline: 2px inset black;

    display: table;
    table-layout: fixed;

    width: 600px;
    height: 600px;

    text-align: center;
}

.game-board-row {
    display: table-row;
    height: 40px;
}

.game-board-cell {
    outline: 1px inset black;

    display: table-cell;

    width: 40px;
    height: 40px;

    font-size: 17px;
    vertical-align: middle;
    
    background: radial-gradient(circle, rgba(255,255,255,1) 38%, rgba(244,244,244,1) 94%);
}

.double-word {
    background: radial-gradient(circle, rgba(255,180,243,1) 32%, rgba(255,159,245,1) 84%);
}

.tripple-word {
    background: radial-gradient(circle, rgba(249,129,117,1) 32%, rgba(252,101,101,1) 84%);
}

.tripple-letter {
    background: radial-gradient(circle, rgba(185,180,255,1) 32%, rgba(180,159,255,1) 84%);
}

.double-letter {
    background: radial-gradient(circle, rgba(170,230,255,1) 32%, rgba(159,204,255,1) 84%);
}

.center-star {
    background: radial-gradient(circle, rgba(255,226,132,1) 32%, rgba(249,202,91,1) 84%);
}