Working CSS grid

frontend/src/App.scss

@@ -37,36 +37,122 @@
   }
 }
 
-#game {
+#game-frame {
-  border: 5px solid orange;
+  border: 1px solid orange;
-  position: relative;
+  // position: relative;
-  height: 1200px;
+  height: 900px;
-  width: 1200px;
+  width: 900px;
   display: grid;
-  grid-template-rows: repeat(12, 1fr);
+  align-items: center;
-  grid-template-columns: repeat(12, 1fr);
+  justify-items: center;
-  grid-gap: 1px solid blue;
+  grid-template-rows: .5fr repeat(12, 1fr) .5fr;
+  grid-template-columns: .5fr repeat(12, 1fr) .5fr;
+  // grid-gap: 1px solid blue;
 
-  .missle {
+  > .r1 {
-    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 {
-    border: 2px solid blue;
+    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;

frontend/src/App.tsx

@@ -5,23 +5,56 @@ import './App.scss';
 
 function App() {
 
+  let borders: JSX.Element[] = [];
+  let elems2: {
+    field: string,
+    x: number,
+    y: number,
+  }[] = [];
   let elems: {
       field: string,
       x: number,
       y: number,
     }[] = [],
     count = 12;
-  for (let x = 1; x <= count; x++) {
+  for (let x = 0; x < count; x++) {
-    for (let y = 1; y <= count; y++) {
+    elems2.push(...[
-      elems.push({field: String.fromCharCode(64+x)+(y), x, y})
+      { field: String.fromCharCode(65+x), x: x+2, y: 1 },
+      { field: (x+1).toString(), x: 1, y: x+2 },
+      { field: String.fromCharCode(65+x), x: x+2, y: count+2 },
+      { field: (x+1).toString(), x: count+2, y: x+2 }
+    ])
+    for (let y = 0; y < count; y++) {
+      elems.push({ field: String.fromCharCode(65+x)+(y), x: x+2, y: y+2 })
+    }
+  }
+  for (let x = 0; x < count+2; x++) {
+    for (let y = 0; y < count+2; y++) {
+      borders.push(<div className='border' style={{'--x': (x + 1), '--y': (y + 1)} as CSSProperties}></div>)
     }
   }
   return (
     <div className="App">
       <header className="App-header">
-          {[1,2,3,4,5,6,11,12,13,14].map(num => <img src={`/svgs/${num}.svg`} alt={`${num}.svg`} />)}
+        {[1,2,3,4,5,6,11,12,13,14].map((num, i) => <img key={i} src={`/svgs/${num}.svg`} alt={`${num}.svg`} />)}
-        <div id='game'>
+        <div id="game-frame">
-          {elems.map(obj => <FontAwesomeIcon className={`${obj.field} r1`} style={{'--x': obj.x, '--y': obj.y} as CSSProperties} icon={faXmark} />)}
+            { borders }
+            {elems2.map((obj, i) =>
+              <span key={i} className={`${obj.field} r1`} style={{'--x': obj.x, '--y': obj.y} as CSSProperties}>{obj.field}</span>
+            )}
+          {/* <div id='game'> */}
+            {elems.map((obj, i) => 
+              <div key={i} className={`${obj.field} svg-r1`} style={{'--x': obj.x, '--y': obj.y} as CSSProperties}>
+                <FontAwesomeIcon key={i} className={`${obj.field} r1`} icon={faXmark} />
+              </div>)}
+            {[1,2,3,4,5,6].map((num, i) => 
+              <div key={i} id='test-ship' className={`s${num}`} style={{'--i': i+3} as CSSProperties}>
+                <img src={`/svgs/${num}.svg`} alt={`${num}.svg`}/>
+              </div>)}
+            {/* <div id='test-ship' className='s2'>
+              <img src={`/svgs/${3}.svg`} alt={`${3}.svg`} />
+            </div> */}
+          {/* </div> */}
         </div>
         <p>
           Edit <code>src/App.tsx</code> and save to reload.