First frontend adjustments

frontend/src/App.scss

@@ -36,3 +36,42 @@
     transform: rotate(360deg);
   }
 }
+
+#game {
+  border: 5px solid orange;
+  position: relative;
+  height: 1200px;
+  width: 1200px;
+  display: grid;
+  grid-template-rows: repeat(12, 1fr);
+  grid-template-columns: repeat(12, 1fr);
+  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%);
+  }
+
+  svg {
+    height: 50px;
+    width: 50px;
+    align-self: center;
+    justify-self: center;
+    grid-column: var(--x);
+    grid-row: var(--y);
+  }
+  .r1 {
+    border: 2px solid blue;
+  }
+  .r2 {
+    border: 2px solid green;
+  }
+  .r3 {
+    border: 2px solid yellowgreen;
+  }
+}

frontend/src/App.tsx

@@ -1,20 +1,38 @@
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { CSSProperties } from 'react';
 import './App.scss';
 
 function App() {
+
+  let elems: {
+      field: string,
+      x: number,
+      y: number,
+    }[] = [],
+    count = 12;
+  for (let x = 1; x <= count; x++) {
+    for (let y = 1; y <= count; y++) {
+      elems.push({field: String.fromCharCode(64+x)+(y), x, y})
+    }
+  }
   return (
     <div className="App">
       <header className="App-header">
-        <img src="logo.svg" className="App-logo" alt="logo" />
+          {[1,2,3,4,5,6,11,12,13,14].map(num => <img src={`/svgs/${num}.svg`} alt={`${num}.svg`} />)}
+        <div id='game'>
+          {elems.map(obj => <FontAwesomeIcon className={`${obj.field} r1`} style={{'--x': obj.x, '--y': obj.y} as CSSProperties} icon={faXmark} />)}
+        </div>
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
-        <a
+        <a 
           className="App-link"
-          href="https://reactjs.org"
+          href="https://www.freepik.com/free-vector/militaristic-ships-set-navy-ammunition-warship-submarine-nuclear-battleship-float-cruiser-trawler-gunboat-frigate-ferry_10704121.htm"
           target="_blank"
           rel="noopener noreferrer"
         >
-          Learn React
+          Battleships designed by macrovector
         </a>
       </header>
     </div>