leaky-ships/frontend/src/styles/App.scss

@use './mixins/display' as *;
@use './mixins/effects' as *;
@import './mixins/variables';

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: $theme;
  min-height: 100vh;
  @include flex-col;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#game-frame {
  // border: 1px solid orange;
  position: relative;
  $height: 945px;
  $width: $height;
  height: $height;
  width: $width;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-rows: .75fr repeat(12, 1fr) .75fr;
  grid-template-columns: .75fr repeat(12, 1fr) .75fr;
  // grid-gap: 1px solid blue;

  > .r1 {
    grid-column: var(--x);
    grid-row: var(--y);
  }
  > .border-tile {
    box-sizing: border-box;
    border: 1px solid blue;
    height: 100%;
    width: 100%;
    grid-column: var(--x);
    grid-row: var(--y);

    &.edge {
      border: 1px solid gray;
    }

    &.left-top-corner {
      -webkit-mask-image: -webkit-gradient(linear, right bottom, 
        left top, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
    }
    &.right-top-corner {
      -webkit-mask-image: -webkit-gradient(linear, left bottom, 
        right top, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
    }
    &.left-bottom-corner {
      -webkit-mask-image: -webkit-gradient(linear, right top, 
        left bottom, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
    }
    &.right-bottom-corner {
      -webkit-mask-image: -webkit-gradient(linear, left top, 
        right bottom, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
    }

    &.left {
      -webkit-mask-image: -webkit-gradient(linear, right top, 
        left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    }
    &.right {
      -webkit-mask-image: -webkit-gradient(linear, left top, 
        right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    }
    &.top {
      -webkit-mask-image: -webkit-gradient(linear, left bottom, 
        left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    }
    &.bottom {
      -webkit-mask-image: -webkit-gradient(linear, left top, 
        left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    }

    $point-size: 1;
    $count: 12;
    $grid-elem-width: $count + 2;
    $warst: $count + 1.5;
    $one: calc($height / $warst);
    $elements-in-grid: $grid-elem-width * $grid-elem-width;
    
    // Inspired by https://stackoverflow.com/questions/35990505/get-position-of-mouse-pointer-in-css-without-javascript
    @for $i from 1 through $elements-in-grid {
      &:nth-child(#{$i}) {
        &:hover {
          &:not(.edge) ~ .target-preview {
            opacity: 1;
          }
          & ~ .target-preview {
            $row: ceil(calc($i / $grid-elem-width));
            top: (
              ($row - 2)
              * $one
              + ($one * 0.75)
              );
            left: (
              ($i
                - (($row - 1) * $grid-elem-width)
                - 2)
              * $one
              + ($one * 0.75)
            );
          }
        }
      }
    }
  }
  > :not(.border) {
    box-sizing: border-box;
    // border: 1px solid red;
  }
  > span {
    vertical-align: center;
    user-select: none;
  }

  .ship {
    height: 100%;
    width: 100%;
    position: relative;
    @include flex-col;
    align-items: center;
    // justify-content: center;
    border: 1px solid yellow;
    grid-row: var(--x);
    
    img {
      position: absolute;
      // height: 90%;
      width: 90%;
      // object-fit: cover;
    }

    &.s1 {
      grid-column: 3 / 7;
    }
    &.s2 {
      grid-column: 3 / 5;
    }
    &.s3 {
      grid-column: 3 / 6;

      img {
        margin-top: -2%;
      }
    }
    &.s4 {
      grid-column: 3 / 6;
    }
    &.s5 {
      grid-column: 3 / 6;
    }
    &.s6 {
      grid-column: 3 / 7;
    }
  }
  
  .hit-svg {
    // border: 2px solid blue;
    
    // height: 50px;
    // width: 50px;
    height: 100%;
    width: 100%;
    position: relative;
    @include flex;
    // align-items: center;
    // align-self: center;
    // justify-self: center;
    grid-column: var(--x);
    grid-row: var(--y);
    pointer-events: none;
    
    svg {
      position: absolute;
      height: 100%;
      width: 100%;

      box-sizing: border-box;
      padding: 25%;

      &.fa-burst {
        color: red;
      }
    }
    &.target {
      color: red;
      opacity: 0;

      &.show {
        opacity: 1;
      }
    }
    &.target-preview {
      color: orange;
      opacity: 0;
      position: absolute;
      @include transition(.2s);
      
      $count: 12;
      height: calc($height / ($count + 1.5));
      width: calc($height / ($count + 1.5));

      &.show {
        opacity: 1;
      }
    }
  }
  .r2 {
    border: 2px solid green;
  }
  .r3 {
    border: 2px solid yellowgreen;
  }

  .fog-left {
    grid-area: 1 / 1 / -1 / -1;
    align-self: flex-start;
    width: inherit;
    transform: rotate(180deg);
  }
  .fog-right {
    grid-area: 1 / 1 / -1 / -1;
    align-self: flex-end;
    width: inherit;
  }
  .fog-middle {
    grid-area: 4 / 4 / -4 / -4;
    // align-self: flex-end;
    width: inherit;
  }
}