Move styles and add mixins

frontend/src/styles/App.scss

@@ -0,0 +1,163 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  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: 900px;
+  width: 900px;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  grid-template-rows: .5fr repeat(12, 1fr) .5fr;
+  grid-template-columns: .5fr repeat(12, 1fr) .5fr;
+  // grid-gap: 1px solid blue;
+
+  > .r1 {
+    grid-column: var(--x);
+    grid-row: var(--y);
+  }
+  > .border {
+    box-sizing: border-box;
+    border: 1px solid blue;
+    height: 100%;
+    width: 100%;
+    grid-column: var(--x);
+    grid-row: var(--y);
+  }
+  > :not(.border) {
+    box-sizing: border-box;
+    border: 1px solid red;
+  }
+  > span {
+    vertical-align: center;
+  }
+// }
+
+// #game {
+  // grid-area: 2 / 2 / -2 / -2;
+  // border: 5px solid orange;
+  // // position: relative;
+  // display: grid;
+  // // grid-gap: 1px solid blue;
+
+  // .missle {
+  //   height: 50px;
+  //   width: 50px;
+  //   position: absolute;
+  //   border: 1px solid red;
+  //   top: calc(50px + 100px * var(--y));
+  //   left: calc(50px + 100px* var(--x));
+  //   transform: translateX(-50%) translateY(-50%);
+  // }
+
+  #test-ship {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    // justify-content: center;
+    border: 1px solid yellow;
+    grid-row: var(--i);
+    
+    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;
+    }
+  }
+
+  .svg-r1 {
+    // border: 2px solid blue;
+    
+    // height: 50px;
+    // width: 50px;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    display: flex;
+    // flex-direction: column;
+    // align-items: center;
+    // align-self: center;
+    // justify-self: center;
+    grid-column: var(--x);
+    grid-row: var(--y);
+    
+    svg {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+
+      box-sizing: border-box;
+      padding: 25%;
+    }
+  }
+  .r2 {
+    border: 2px solid green;
+  }
+  .r3 {
+    border: 2px solid yellowgreen;
+  }
+}