draw partner snake with some opacity

_src/assets/scss/snake.scss

@@ -12,17 +12,11 @@ $fieldSize: 20;
     width: 40px;
     height: 40px;
   }
-  @for $i from 1 through $fieldSize {
-    @for $x from 1 through $fieldSize {
-      #field-#{$i}-#{$x}{
-        @if ($i + $x) % 2 == 0{
-          background-color: $bc-discord-3;
-        }
-        @else {
-          background-color: color.adjust($bc-discord-3, $lightness:10%);
-        }
-      }
-    }
+  .grid:nth-child(even){
+    background-color: $bc-discord-3;
+  }
+  .grid:nth-child(odd){
+    background-color: color.adjust($bc-discord-3, $lightness:10%);
   }
   .target {
     background-color: red !important;
@@ -33,10 +27,13 @@ $fieldSize: 20;
   .snake-body {
     background-color: color.adjust($color-primary, $lightness:-5%) !important;
   }
+
   .snake-partner-head {
+    opacity: 80%;
     background-color: color.adjust(#32a852, $lightness:-10%) !important;
   }
   .snake-partner-body {
+    opacity: 80%;
     background-color: color.adjust(#32a852, $lightness:-5%) !important;
   }
 }

_src/assets/ts/snakeMultiplayer.ts

@@ -27,7 +27,7 @@ function drawField(){
     let fieldHTML:string = "";
     for(let i:number = 1; i <= fieldSize; i++){
         for(let x:number = 1; x <= fieldSize; x++){
-            let elementClass:string = "";
+            let elementClass:string = "drawGrid";
             for(let y:number = 0; y<snake.length; y++){
                 let currentSnake:number[] = snake[y];
                 if(currentSnake[0] == i && currentSnake[1] == x){
@@ -50,7 +50,7 @@ function drawField(){
             if(target[0] == i && target[1] == x)
                 elementClass += " target";
 
-            fieldHTML += `<span id="field-${i}-${x}" class="${elementClass}"></span>`;
+            fieldHTML += `<span class="grid"><span id="field-${i}-${x}" class="${elementClass}"></span></span>`;
         }
         if(i < fieldSize) {
             fieldHTML += "<br>"