librepoply/game/client/style.less

@cardWidth: 7.6%;
@cardHeight: 100px;

@cardTranslateY: 45px;
@cardTranslateX: 35px;

@cardTextSize: 11px;
@colorHeight: 25px;

@communityIconSize: 30px;
@cornerIconSize: 35px;
@stationIconSize: 25px;
@houseIconSize: 12px;
@houseSize: calc(@colorHeight - 2px);

@boardWidth: 950px;

@diceSize: 40px;
@diceDotSize: 7px;

@primaryColor: #333333;

@tokenSize: 40px;
@tokenFontSize: 20px;

@noteWidth: 100px;
@noteHeight: 50px;

@cardStackWidth: 150px;
@cardStackHeight: 75px;
body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}

h3 {
  margin: 0 0 10px 0;
}

.game {
  display: grid;
  grid-template-areas: 'board board players logs' 'board board players video' 'board board players video' 'board board players video';

  grid-template-columns: repeat(2, calc(@boardWidth / 2)) repeat(2, 1fr);
  grid-template-rows: repeat(4, calc(@boardWidth / 4));

}

.game-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.card-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;

  .card-picked {
    position: absolute;
    top: 200px;
    left: calc(50% - 250px);
    width: 500px;
    min-height: 250px;

    border: 2px solid black;
    padding: 20px;


    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    span {
      display: block;
      padding: 10px;
    }

    &.chance {
      background-color: #ffa500;
    }

    &.community {
      background-color: #4987ff;
    }

    .close {
      position: absolute;
      font-size: 20px;
      top: 15px;
      right: 15px;
      cursor: pointer;
    }

    .card-type, .card-player {
      font-size: 25px;
      font-weight: bold;
    }


    .card-text {
      flex-grow: 2;
      font-size: 30px;
    }
  }
}

.video-chat {

  .video-container {
    display: grid;
    grid-template-columns: 50% 50%;

    video {
      background-color: black;
      margin: 1px;
      cursor: pointer;
      transition: all 0.25s;
      width: 100%;
      height: 150px;

      //&:hover {
      //  width: 100%;
      //  height: auto;
      //}
    }
  }

  .chat {
    height: 150px;
    overflow-y: auto;

    p {
      margin: 0;
      font-size: 14px;
    }
  }
}

.logs {
  grid-area: logs;

  .text {
    height: 150px;
    overflow-y: auto;

    p {
      margin: 0;
      font-size: 14px;
    }
  }
}


.player-list {
  grid-area: players;
  width: 400px;
}

.video-chat {
  grid-area: video;
}

.me {
  h1 {
    margin: 10px 0 0 0;
    font-size: 20px;
  }
}

.card-stack {
  position: absolute;
  width: @cardStackWidth;
  height: @cardStackHeight;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  top: 550px;
  cursor: pointer;

  &.chance-stack {
    left: 200px;
    background-color: #ffa500;
  }

  &.community-stack {
    left: 500px;
    background-color: #4987ff;
  }
}

.board-container {
  grid-area: board;
  position: relative;

  .dice-set {
    cursor: pointer;
    position: absolute;
    top: 200px;
    left: 300px;
  }

  .board-token {
    position: absolute;
    z-index: 20;
  }

}

.board {
  user-select: none;
  background-color: rgba(176, 255, 140, 0.64);
  width: @boardWidth;
  height: @boardWidth;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);
  //grid-template-areas: 'p20 p20 p21 p22 p23 p24 p25 p26 p27 p28 p29 p30 p30' 'p20 p20 p21 p22 p23 p24 p25 p26 p27 p28 p29 p30 p30' 'p19 p19 e e e e e e e e e p31 p31' 'p18 p18 e e e e e e e e e p32 p32' 'p17 p17 e e e e e e e e e p33 p33' 'p16 p16 e e e e e e e e e p34 p34' 'p15 p15 e e e e e e e e e p35 p35' 'p14 p14 e e e e e e e e e p36 p36' 'p13 p13 e e e e e e e e e p37 p37' 'p12 p12 e e e e e e e e e p38 p38' 'p11 p11 e e e e e e e e e p39 p39' 'p10 p10 p9 p8 p7 p6 p5 p4 p3 p2 p1 p0 p0' 'p10 p10 p9 p8 p7 p6 p5 p4 p3 p2 p1 p0 p0';
  grid-template-areas: 'p20 p20 p20 p21 p21 p22 p22 p23 p23 p24 p24 p25 p25 p26 p26 p27 p27 p28 p28 p29 p29 p30 p30 p30' 'p20 p20 p20 p21 p21 p22 p22 p23 p23 p24 p24 p25 p25 p26 p26 p27 p27 p28 p28 p29 p29 p30 p30 p30' 'p20 p20 p20 p21 p21 p22 p22 p23 p23 p24 p24 p25 p25 p26 p26 p27 p27 p28 p28 p29 p29 p30 p30 p30' 'p19 p19 p19 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p31 p31 p31' 'p19 p19 p19 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p31 p31 p31' 'p18 p18 p18 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p32 p32 p32' 'p18 p18 p18 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p32 p32 p32' 'p17 p17 p17 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p33 p33 p33' 'p17 p17 p17 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p33 p33 p33' 'p16 p16 p16 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p34 p34 p34' 'p16 p16 p16 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p34 p34 p34' 'p15 p15 p15 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p35 p35 p35' 'p15 p15 p15 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p35 p35 p35' 'p14 p14 p14 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p36 p36 p36' 'p14 p14 p14 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p36 p36 p36' 'p13 p13 p13 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p37 p37 p37' 'p13 p13 p13 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p37 p37 p37' 'p12 p12 p12 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p38 p38 p38' 'p12 p12 p12 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p38 p38 p38' 'p11 p11 p11 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p39 p39 p39' 'p11 p11 p11 e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   e   p39 p39 p39' 'p10 p10 p10 p9  p9  p8  p8  p7  p7  p6  p6  p5  p5  p4  p4  p3  p3  p2  p2  p1  p1  p0  p0  p0' 'p10 p10 p10 p9  p9  p8  p8  p7  p7  p6  p6  p5  p5  p4  p4  p3  p3  p2  p2  p1  p1  p0  p0  p0' 'p10 p10 p10 p9  p9  p8  p8  p7  p7  p6  p6  p5  p5  p4  p4  p3  p3  p2  p2  p1  p1  p0  p0  p0';
}

.board-row {
  display: flex;
  align-content: stretch;

  &.middle-row {
    //border:1px solid red;
    height: @cardWidth;
  }

  .board-middle {
    flex-grow: 2;
  }

}

.generate-grid(@n, @i:0) when (@i =< @n) {
  &.grid-area-@{i} {
    @p: ~"p@{i}";
    grid-area: @p;
  }
  .generate-grid(@n, (@i + 1));
}

.generate-grid(39);


.board-card {
  position: relative;
  //width: @cardWidth;
  //height: @cardHeight;
  border: 1px solid black;
  box-sizing: border-box;
  font-size: @cardTextSize;
  cursor: pointer;


  display: flex;
  flex-direction: column;

  &.left, &.right {
    //flex-direction: row;
    writing-mode: vertical-rl;

    .icon svg {
      transform-origin: center;
      transform: rotate(90deg);
    }

    .color {
      height: auto;
      width: @colorHeight;
      border-bottom: none;
      border-left: 1px solid black;
    }
    &.mortgaged:after {
      left: 48px;
      top: -10px;
    }
  }

  &.right {
    transform: rotate(180deg);
    .house, .hotel{
      transform: rotate(90deg);
    }
  }

  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
 &.mortgaged {

    &:after {

      content: "Mortgaged";
      color: red;
      position: absolute;
      top: 48px;
      left: -9px;
      font-size: 18px;
      font-weight: bold;
      transform: rotate(45deg);
      pointer-events: none;

    }
  }



  &.opened {
    width: 300px !important;
    height: auto !important;
    font-size: 18px !important;
    background-color: white;
    position: fixed;
    z-index: 100;
    top: 50px;
    left: calc(50% - 150px);
    transform: none !important;
    box-shadow: 0px 8px 32px 12px rgba(0, 0, 0, 0.61);
    writing-mode: unset !important;
    &.mortgaged:after {
      font-size: 60px;
      top: 177px !important;
      left: -9px !important;
      opacity: 0.5;
    }


    .close {
      position: absolute;
      top: -10px;
      right: -10px;
    }

    .close-button {
      color: black;
    }

    .body {
      padding: 20px;
      font-size: 15px;
      flex-grow: 2;
    }

    .icon {
      flex-grow: 0;

      svg {
        transform: none !important;
      }
    }

    .color {
      height: calc(@colorHeight * 2.5) !important;
      border-left: none !important;
      border-bottom: 1px solid black !important;
      width: 300px !important;

      .house, .hotel {
        font-size: calc(@houseIconSize * 4) !important;
        transform: none !important;
      }
    }
  }

  &:hover {
    background-color: white;
  }

  &.top {
    transform: rotateZ(180deg);
  }
}

.corner-card {
  //width: @cardHeight;
  //height: @cardHeight;
  font-size: @cardTextSize;
  border: 1px solid black;

  &.top {
    transform: rotateZ(180deg);
  }
}

.street {

  .color {
    height: @colorHeight;
    border-bottom: 2px solid black;
    display: flex;

    .house, .hotel {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: @houseIconSize;
      margin-right: 5px;
    }

    .house {
      color: #00FF00;
    }

    .hotel {
      color: #FF0000;
    }
  }


  .title, .price {
    text-align: center;
  }

  .body {
    flex-grow: 2;
  }

}

.chance, .community {
  text-align: center;

  .icon {
    flex-grow: 2;
    color: #4987ff;
    font-size: @communityIconSize;
  }
}

.community {
  .icon {
    font-size: @communityIconSize;
    padding-top: 10px;
  }
}

.train-station, .utility, .super-tax, .income-tax {

  .title, .price {
    text-align: center;
  }

  .icon {
    text-align: center;
    font-size: @stationIconSize;
    padding-top: 5px;
    flex-grow: 2;

  }
}

.free-parking, .go-to-jail, .go, .jail {
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transform: rotateZ(-45deg);
    text-align: center;
    align-items: center;
    justify-content: center;

    .icon {
      flex-grow: 2;
      font-size: @cornerIconSize;
      color: #a40000;
    }
  }
}

.go-to-jail {
  .container {
    transform: rotateZ(-135deg);
  }

  .icon {
    color: #5544ff !important;
  }
}

.go, .jail {
  .container {
    transform: rotateZ(-0deg);
  }

  .icon {
    color: #a80f00 !important;
  }
}

.jail {
  position: relative;
  display: grid;
  grid-template-areas: 'visit-left cell cell ' 'visit-left cell cell ' 'e visit-bottom visit-bottom';
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);

  .cell {
    grid-area: cell;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: orange;
    font-size: @cornerIconSize;
  }

  .visit-left, .visit-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .visit-left {
    grid-area: visit-left;
    writing-mode: vertical-lr;
  }

  .visit-bottom {
    grid-area: visit-bottom;
  }
}


.dice {
  border: 1px solid black;
  border-radius: 5px;
  margin: 20px;
  background-color: beige;
  width: @diceSize;
  height: @diceSize;
  position: relative;

  &.rolling {
    animation: shake 1s cubic-bezier(.36, .07, .19, .97) both infinite;
  }

  .dot {
    width: @diceDotSize;
    height: @diceDotSize;
    background-color: black;
    border-radius: @diceDotSize;

    position: absolute;

    &.middle-center {
      top: calc(50% - @diceDotSize / 2);
      left: calc(50% - @diceDotSize / 2);
    }

    &.middle-left {
      top: calc(50% - @diceDotSize / 2);
      left: calc(25% - @diceDotSize / 2);
    }

    &.middle-right {
      top: calc(50% - @diceDotSize / 2);
      right: calc(25% - @diceDotSize / 2);
    }

    &.top-left {
      top: calc(25% - @diceDotSize / 2);
      left: calc(25% - @diceDotSize / 2);
    }

    &.top-right {
      top: calc(25% - @diceDotSize / 2);
      right: calc(25% - @diceDotSize / 2);
    }

    &.bottom-left {
      bottom: calc(25% - @diceDotSize / 2);
      left: calc(25% - @diceDotSize / 2);
    }

    &.bottom-right {
      bottom: calc(25% - @diceDotSize / 2);
      right: calc(25% - @diceDotSize / 2);
    }

  }
}

.dialog {
  &.overlay {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .content {
    margin: 100px auto;
    display: block;
    background-color: white;
    width: 500px;
    min-height: 100px;
    padding: 10px 50px;
    border-radius: 5px;
    box-shadow: 0px 8px 32px 12px rgba(0, 0, 0, 0.61);
  }

  .actions {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;

    .action {
      color: @primaryColor;
      cursor: pointer;
      padding: 0 10px;
      margin: 5px 10px;

      &:hover {
        background-color: #60f7ff;
      }
    }
  }

}

.select-player-dialog, send-money-dialog {
  .player {
    display: flex;
    align-items: center;
    justify-content: left;
    cursor: pointer;
  }
}

.token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2px 5px;
  width: @tokenSize;
  height: @tokenSize;
  border-radius: @tokenSize;
  font-size: @tokenFontSize;
  background-color: #888888;
  color: white;
  text-align: center;
  cursor: pointer;
  border: 1px solid #333;

  &.selected {
    background-color: green;
  }
}

.player-list {
  padding: 10px;

  .player-tabs .player {
    display: inline-flex;
    align-items: center;
    justify-content: left;
    cursor: pointer;
  }
}

.player-board {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: left;

  .notes {
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;

    .note {
      margin: 5px;
    }

    small {
      font-size: 14px;
    }
  }

  .deeds {
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;

    .board-card {
      width: 75px;
      height: 100px;
      margin: 5px;
    }
  }
}

.note {
  width: @noteWidth;
  height: @noteHeight;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 1px solid black;

  &.v500 {
    background-color: #ffa500;
  }

  &.v100 {
    background-color: #fff587;
  }

  &.v50 {
    background-color: #84129f;
  }

  &.v20 {
    background-color: #7f9f5c;
  }

  &.v10 {
    background-color: #57849f;
  }

  &.v5 {
    background-color: #9e789f;
  }

  &.v1 {
    background-color: rgba(186, 183, 187, 0.44);
  }
}

.send-money-dialog {
  .select-notes {
    .notes {
      display: flex;
      align-items: center;
      justify-content: left;

      .noteStack {
        display: flex;
        align-items: center;
        justify-content: left;
      }

      .note {
        margin: 5px;
      }
    }
  }
}


.game-settings {
  position: absolute;
  top: 10px;
  right: 10px;

  ul {
    list-style: none;
    position: absolute;
    top: 30px;
    right: 0;
    margin: 0;
    padding: 0;
    box-shadow: 0px 8px 32px 12px rgba(0, 0, 0, 0.61);
    background-color: white;
    width: 200px;
    border-radius: 5px;

    li {
      cursor: pointer;
      display: block;
      border-bottom: 1px solid #aaa;
      padding: 10px 20px;
      box-sizing: border-box;
    }
  }
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}