Change tetromino appearance

TetrisUI/CurrentPieceView.swift

@@ -17,20 +17,21 @@ struct CurrentPieceView: View {
 
     var body: some View {
         GridView(rows: self.boardHeight, columns: self.boardWidth) { (col, row, size) in
+            if self.currentPieceAt(col, row) {
                 Rectangle()
-                .foregroundColor(self.colorAt(col, row))
+                    .foregroundColor(self.currentPiece!.tetromino.color)
+                    .frame(width: size, height: size)
+                    .border(self.currentPiece!.tetromino.borderColor, width: 6)
+            } else if self.droppedPieceAt(col, row) {
+                Rectangle()
+                    .foregroundColor(.gray)
+                    .frame(width: size, height: size)
+            } else {
+                Rectangle()
+                    .foregroundColor(.clear)
                     .frame(width: size, height: size)
             }
         }
-    
-    func colorAt(_ col: Int, _ row: Int) -> Color {
-        if currentPieceAt(col, row) {
-            return self.currentPiece!.tetromino.color
-        } else if droppedPieceAt(col, row) {
-            return .gray
-        } else {
-            return .clear
-        }
     }
     
     func currentPieceAt(_ col: Int, _ row: Int) -> Bool {

TetrisUI/Media.xcassets/TetrominoAqua.colorset/Contents.json

@@ -11,8 +11,8 @@
         "components" : {
           "red" : "0",
           "alpha" : "1.000",
-          "blue" : "211",
+          "blue" : "202",
-          "green" : "214"
+          "green" : "205"
         }
       }
     }

TetrisUI/Media.xcassets/TetrominoAquaLight.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "colors" : [
+    {
+      "idiom" : "universal",
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "red" : "0.320",
+          "alpha" : "1.000",
+          "blue" : "0.908",
+          "green" : "0.916"
+        }
+      }
+    }
+  ]
+}

TetrisUI/Media.xcassets/TetrominoBlueLight.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "colors" : [
+    {
+      "idiom" : "universal",
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "red" : "0.294",
+          "alpha" : "1.000",
+          "blue" : "0.839",
+          "green" : "0.495"
+        }
+      }
+    }
+  ]
+}

TetrisUI/Media.xcassets/TetrominoGreen.colorset/Contents.json

@@ -11,8 +11,8 @@
         "components" : {
           "red" : "0",
           "alpha" : "1.000",
-          "blue" : "71",
+          "blue" : "68",
-          "green" : "214"
+          "green" : "204"
         }
       }
     }

TetrisUI/Media.xcassets/TetrominoGreenLight.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "colors" : [
+    {
+      "idiom" : "universal",
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "red" : "0.364",
+          "alpha" : "1.000",
+          "blue" : "0.542",
+          "green" : "0.899"
+        }
+      }
+    }
+  ]
+}

TetrisUI/Media.xcassets/TetrominoOrange.colorset/Contents.json

@@ -9,10 +9,10 @@
       "color" : {
         "color-space" : "srgb",
         "components" : {
-          "red" : "255",
+          "red" : "1.000",
           "alpha" : "1.000",
-          "blue" : "0",
+          "blue" : "0.000",
-          "green" : "128"
+          "green" : "0.502"
         }
       }
     }

TetrisUI/Media.xcassets/TetrominoOrangeLight.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "colors" : [
+    {
+      "idiom" : "universal",
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "red" : "255",
+          "alpha" : "1.000",
+          "blue" : "89",
+          "green" : "172"
+        }
+      }
+    }
+  ]
+}

TetrisUI/Media.xcassets/TetrominoPurpleLight.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "colors" : [
+    {
+      "idiom" : "universal",
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "red" : "0.722",
+          "alpha" : "1.000",
+          "blue" : "0.839",
+          "green" : "0.294"
+        }
+      }
+    }
+  ]
+}

TetrisUI/Media.xcassets/TetrominoRedLight.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "colors" : [
+    {
+      "idiom" : "universal",
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "red" : "0.839",
+          "alpha" : "1.000",
+          "blue" : "0.449",
+          "green" : "0.294"
+        }
+      }
+    }
+  ]
+}

TetrisUI/Media.xcassets/TetrominoYellow.colorset/Contents.json

@@ -11,8 +11,8 @@
         "components" : {
           "red" : "255",
           "alpha" : "1.000",
-          "blue" : "71",
+          "blue" : "0",
-          "green" : "229"
+          "green" : "206"
         }
       }
     }

TetrisUI/Media.xcassets/TetrominoYellowLight.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "colors" : [
+    {
+      "idiom" : "universal",
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "red" : "1.000",
+          "alpha" : "1.000",
+          "blue" : "0.431",
+          "green" : "0.920"
+        }
+      }
+    }
+  ]
+}

TetrisUI/Tetromino+Color.swift

@@ -28,4 +28,22 @@ extension Tetromino {
             return Color("TetrominoGreen", bundle: .tetrisUI)
         }
     }
+    var borderColor: Color {
+        switch self {
+        case .i:
+            return Color("TetrominoAquaLight", bundle: .tetrisUI)
+        case .o:
+            return Color("TetrominoYellowLight", bundle: .tetrisUI)
+        case .t:
+            return Color("TetrominoPurpleLight", bundle: .tetrisUI)
+        case .j:
+            return Color("TetrominoOrangeLight", bundle: .tetrisUI)
+        case .l:
+            return Color("TetrominoBlueLight", bundle: .tetrisUI)
+        case .s:
+            return Color("TetrominoRedLight", bundle: .tetrisUI)
+        case .z:
+            return Color("TetrominoGreenLight", bundle: .tetrisUI)
+        }
+    }
 }

TetrisUI/TetrominoView.swift

@@ -18,9 +18,16 @@ public struct TetrominoView: View {
     
     public var body: some View {
         GridView(rows: self.rows, columns: self.columns) { (col, row, size) in
+            if row < self.tetromino.shape.count && col < self.tetromino.shape[row].count && self.tetromino.shape[row][col] {
                 Rectangle()
-                .foregroundColor(self.colorAt(col, row))
+                    .foregroundColor(self.tetromino.color)
                     .frame(width: size, height: size)
+                    .border(self.tetromino.borderColor, width: 6)
+            } else {
+                Rectangle()
+                    .foregroundColor(.clear)
+                    .frame(width: size, height: size)
+            }
         }
     }
     
@@ -39,14 +46,6 @@ public struct TetrominoView: View {
             }) ?? row.count - 1) + 1
         }.max() ?? self.tetromino.shape.first!.count
     }
-    
-    func colorAt(_ col: Int, _ row: Int) -> Color {
-        if row < tetromino.shape.count && col < tetromino.shape[row].count && tetromino.shape[row][col] {
-            return tetromino.color
-        } else {
-            return .clear
-        }
-    }
 }
 
 struct TetrominoView_Previews: PreviewProvider {

TetrisUI/TilesView.swift

@@ -17,12 +17,13 @@ struct TilesView: View {
             if self.board[col, row] {
                 Rectangle()
                     .frame(width: size, height: size)
-                    .foregroundColor(self.board[col, row]?.color ?? Color("Background", bundle: .tetrisUI))
+                    .foregroundColor(self.board[col, row]!.color)
+                    .border(self.board[col, row]!.borderColor, width: 6)
             } else {
                 Rectangle()
                     .frame(width: size, height: size)
                     .foregroundColor(Color("Background", bundle: .tetrisUI))
-                    .border(Color("TileBorder"), width: 1)
+                    .border(Color("TileBorder", bundle: .tetrisUI), width: 2)
             }
         }
     }