@import "helpers";

$field-width: 6.9rem;
$grid-spacing: 0.22rem;
$grid-row-cells: 4;
// $tile-size: calc(($field-width - $grid-spacing * ($grid-row-cells + 1)) / $grid-row-cells);
$tile-size: 1.43rem;
$tile-border-radius: 0;

$mobile-threshold: $field-width + 0.2rem;

$text-color: #776e65;
$bright-text-color: #f9f6f2;

$tile-gold-color: #edc22e;
// $tile-gold-glow-color: lighten($tile-gold-color, 15%);

$game-container-margin-top: 0;
$game-container-background: transparent;

$transition-speed: 100ms;

@include keyframes(move-up) {
  0% {
    top: 25px;
    opacity: 1;
  }

  100% {
    top: -50px;
    opacity: 0;
  }
}

.play-container {
  width: $field-width;
  margin: 0 auto;
}

@include keyframes(fade-in) {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// Styles for buttons
@mixin button {
  display: inline-block;
  // background: darken($game-container-background, 20%);
  border-radius: 3px;
  padding: 0 20px;
  text-decoration: none;
  color: $bright-text-color;
  height: 40px;
  line-height: 42px;
}

// Game field mixin used to render CSS at different width
@mixin game-field {
  .game-container {
    // margin-top: $game-container-margin-top;
    position: absolute;
    padding: $grid-spacing;

    cursor: default;
    -webkit-touch-callout: none;
    -ms-touch-callout: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    -ms-touch-action: none;
    touch-action: none;

    background: $game-container-background;
    border-radius: $tile-border-radius * 2;
    width: $field-width;
    height: $field-width;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    top: 3.34rem;
    left: 1.8rem;

    .game-message {
      display: none;

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 100;

      text-align: center;

      p {
        font-size: 60px;
        font-weight: bold;
        height: 60px;
        line-height: 60px;
        margin-top: 222px;
        // height: $field-width;
        // line-height: $field-width;
      }

      .lower {
        display: block;
        margin-top: 59px;
      }

      a {
        @include button;
        margin-left: 9px;
        // margin-top: 59px;

        &.keep-playing-button {
          display: none;
        }
      }

      @include animation(fade-in 800ms ease $transition-speed * 12);
      @include animation-fill-mode(both);

      &.game-won {
        background: rgba($tile-gold-color, 0.5);
        color: $bright-text-color;

        a.keep-playing-button {
          display: inline-block;
        }
      }

      &.game-won,
      &.game-over {
        display: block;
      }
    }
  }

  .grid-container {
    position: absolute;
    z-index: 1;
  }

  .grid-row {
    margin-bottom: $grid-spacing;

    &:last-child {
      margin-bottom: 0;
    }

    &:after {
      content: "";
      display: block;
      clear: both;
    }
  }

  .grid-cell {
    width: $tile-size;
    height: $tile-size;
    margin-right: $grid-spacing;
    float: left;

    border-radius: $tile-border-radius;

    &:last-child {
      margin-right: 0;
    }
  }

  .tile-container {
    position: absolute;
    z-index: 2;
  }

  .tile {
    &,
    .tile-inner {
      width: $tile-size;
      height: $tile-size;
      line-height: $tile-size;
    }

    // Build position classes
    @for $x from 1 through $grid-row-cells {
      @for $y from 1 through $grid-row-cells {
        &.tile-position-#{$x}-#{$y} {
          // $xPos: (($tile-size + $grid-spacing) * ($x - 1));
          // $yPos: (($tile-size + $grid-spacing) * ($y - 1));
          $xPos: (($tile-size + $grid-spacing - 0.04rem) * ($x - 1));
          $yPos: (($tile-size + $grid-spacing - 0.04rem) * ($y - 1));
          @include transform(translate($xPos, $yPos));
        }
      }
    }
  }
}

// End of game-field mixin
@include game-field;

.tile {
  position: absolute; // Makes transforms relative to the top-left corner

  .tile-inner {
    border-radius: $tile-border-radius;

    background-size: auto 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/chess.png);
    transform: rotate(90deg);

    text-align: center;
    font-weight: bold;
    z-index: 10;

    font-size: 0.4rem;

    &[data-value="2"] {
      background-position: -4.83rem;
    }
    &[data-value="4"] {
      background-position: -11.14rem;
    }
    &[data-value="8"] {
      background-position: -15.86rem;
    }
    &[data-value="16"] {
      background-position: -3.24rem;
    }
    &[data-value="32"] {
      background-position: -9.57rem;
    }
    &[data-value="64"] {
      background-position: -14.3rem;
    }
    &[data-value="128"] {
      background-position: -1.7rem;
    }
    &[data-value="256"] {
      background-position: -8rem;
    }
    &[data-value="512"] {
      background-position: -12.7rem;
    }
    &[data-value="1024"] {
      background-position: -0.1rem;
    }
    &[data-value="2048"] {
      background-position: -6.42rem;
    }
  }

  // Movement transition
  @include transition($transition-speed ease-in-out);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;

  $base: 2;
  $exponent: 1;
  $limit: 11;

  // Colors for all 11 states, false = no special color
  $special-colors:
    false false,
    // 2
    false false,
    // 4
    #f78e48 true,
    // 8
    #fc5e2e true,
    // 16
    #ff3333 true,
    // 32
    #ff0000 true,
    // 64
    false true,
    // 128
    false true,
    // 256
    false true,
    // 512
    false true,
    // 1024
    false true; // 2048

  // Build tile colors
  @while $exponent <= $limit {
    $power: pow($base, $exponent);

    // &.tile-#{$power} .tile-inner {
    //   // Calculate base background color
    //   $gold-percent: ($exponent - 1) / ($limit - 1) * 100;
    //   $mixed-background: mix($tile-gold-color, $tile-color, $gold-percent);

    //   $nth-color: nth($special-colors, $exponent);

    //   $special-background: nth($nth-color, 1);
    //   $bright-color: nth($nth-color, 2);

    //   @if $special-background {
    //     $mixed-background: mix($special-background, $mixed-background, 55%);
    //   }

    //   @if $bright-color {
    //     color: $bright-text-color;
    //   }

    //   // Set background
    //   background: $mixed-background;

    //   // Add glow
    //   $glow-opacity: max($exponent - 4, 0) / ($limit - 4);

    //   @if not $special-background {
    //     box-shadow:
    //       0 0 30px 10px rgba($tile-gold-glow-color, $glow-opacity / 1.8),
    //       inset 0 0 0 1px rgba(white, $glow-opacity / 3);
    //   }

    //   // Adjust font size for bigger numbers
    //   @if $power >= 100 and $power < 1000 {
    //     font-size: 45px;

    //     // Media queries placed here to avoid carrying over the rest of the logic
    //     @include smaller($mobile-threshold) {
    //       font-size: 25px;
    //     }
    //   } @else if $power >= 1000 {
    //     font-size: 35px;

    //     @include smaller($mobile-threshold) {
    //       font-size: 15px;
    //     }
    //   }
    // }

    $exponent: $exponent + 1;
  }

  // Super tiles (above 2048)
  &.x .tile-inner {
    color: $bright-text-color;

    font-size: 30px;

    @include smaller($mobile-threshold) {
      font-size: 10px;
    }
  }
}

@include keyframes(appear) {
  0% {
    opacity: 0;
    @include transform(scale(0));
  }

  100% {
    opacity: 1;
    @include transform(scale(1));
  }
}

.tile-new .tile-inner {
  @include animation(appear 200ms ease $transition-speed);
  @include animation-fill-mode(backwards);
}

@include keyframes(pop) {
  0% {
    @include transform(scale(0));
  }

  50% {
    @include transform(scale(1.2));
  }

  100% {
    @include transform(scale(1));
  }
}

@keyframes pop {
  0% {
    transform: rotate(90deg) scale(0.8);
  }
  14% {
    transform: rotate(90deg) scale(1.14, 1);
  }
  28% {
    transform: rotate(90deg) scale(1.14, 1.1);
  }
  42% {
    transform: rotate(90deg) scale(0.8, 1.1);
  }
  57% {
    transform: rotate(90deg) scale(0.8, 0.9);
  }
  71% {
    transform: rotate(90deg) scale(1, 0.9);
  }
  85% {
    transform: rotate(90deg) scale(1.1, 0.95);
  }
  100% {
    transform: rotate(90deg) scale(0.95, 0.95);
  }
}

.tile-merged .tile-inner {
  position: relative;
  z-index: 20;
  animation: pop 200ms ease;
}

.tile-merged .tile-merged-star-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 21;

  @keyframes star-appear1 {
    60% {
      left: 1.3rem;
      top: 0.2rem;
      transform: rotate(0deg) scale(1);
    }
    100% {
      left: 1.6rem;
      top: 0.15rem;
      transform: rotate(90deg) scale(0);
    }
  }
  @keyframes star-appear2 {
    60% {
      left: 0.2rem;
      top: -0.1rem;
      transform: rotate(-180deg) scale(1);
    }
    100% {
      left: -0.1rem;
      top: -0.6rem;
      transform: rotate(-270deg) scale(0);
    }
  }
  @keyframes star-appear3 {
    60% {
      left: -0.1rem;
      top: 0.6rem;
      transform: rotate(-180deg) scale(1);
    }
    100% {
      left: -0.4rem;
      top: 0.6rem;
      transform: rotate(-270deg) scale(0);
    }
  }
  @keyframes star-appear4 {
    60% {
      left: 1rem;
      top: 0.9rem;
      transform: rotate(0deg) scale(0.5);
    }
    100% {
      left: 1.1rem;
      top: 1.4rem;
      transform: rotate(90deg) scale(0);
    }
  }
  @keyframes star-appear5 {
    60% {
      left: 0.9rem;
      top: -0.4rem;
      transform: rotate(0deg) scale(0.5);
    }
    100% {
      left: 1.1rem;
      top: -0.6rem;
      transform: rotate(90deg) scale(0);
    }
  }

  .tile-merged-star {
    position: absolute;
    left: 0.6rem;
    top: 0.4rem;
    width: 25%;
    height: 41.7%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right bottom;
    background-image: url(../assets/chess.png);
    transform: rotate(-90deg) scale(0);

    &:nth-child(1) {
      animation: star-appear1 300ms linear;
    }
    &:nth-child(2) {
      animation: star-appear2 300ms linear;
    }
    &:nth-child(3) {
      animation: star-appear3 250ms linear 50ms;
    }
    &:nth-child(4) {
      animation: star-appear4 250ms linear 50ms;
    }
    &:nth-child(5) {
      animation: star-appear5 200ms linear 100ms;
    }
  }
}

.above-game {
  @include clearfix;
}

.game-intro {
  float: left;
  line-height: 42px;
  margin-bottom: 0;
}

.restart-button {
  @include button;
  display: block;
  text-align: center;
  float: right;
}

.game-explanation {
  margin-top: 50px;
}

@include smaller($mobile-threshold) {
  // Redefine variables for smaller screens
  $field-width: 280px;
  $grid-spacing: 10px;
  $grid-row-cells: 4;
  $tile-border-radius: 3px;
  $game-container-margin-top: 17px;

  .play-container {
    width: $field-width;
    margin: 0 auto;
  }

  // Show intro and restart button side by side
  .game-intro {
    width: 55%;
    display: block;
    box-sizing: border-box;
    line-height: 1.65;
  }

  .restart-button {
    width: 42%;
    padding: 0;
    display: block;
    box-sizing: border-box;
    margin-top: 2px;
  }

  // Render the game field at the right width
  @include game-field;

  .game-message {
    p {
      font-size: 30px !important;
      height: 30px !important;
      line-height: 30px !important;
      margin-top: 90px !important;
    }

    .lower {
      margin-top: 30px !important;
    }
  }
}
