Use d-pad style layout for directional buttons

Tetris/Assets.xcassets/Background.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "colors" : [
+    {
+      "idiom" : "universal",
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "red" : "0xDD",
+          "alpha" : "1.000",
+          "blue" : "0xDD",
+          "green" : "0xDD"
+        }
+      }
+    },
+    {
+      "idiom" : "universal",
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "red" : "0x22",
+          "alpha" : "1.000",
+          "blue" : "0x22",
+          "green" : "0x22"
+        }
+      }
+    }
+  ]
+}

Tetris/ContentView.swift

@@ -23,15 +23,13 @@ struct ContentView: View {
         GeometryReader { (geometry) in
             VStack {
                 HStack {
-                    VStack(spacing: 0) {
+                    Text("Held:")
-                        Text("Held")
+                    if self.controller.heldTetromino != nil {
-                        if self.controller.heldTetromino != nil {
+                        Group {
-                            Group {
+                            TetrominoView(tetromino: self.controller.heldTetromino!)
-                                TetrominoView(tetromino: self.controller.heldTetromino!)
+                        }.frame(width: 50, height: 50, alignment: .center)
-                            }.frame(width: 50, height: 50, alignment: .center)
+                    } else {
-                        } else {
+                        Rectangle().foregroundColor(.clear).frame(width: 50, height: 50)
-                            Rectangle().foregroundColor(.clear).frame(width: 50, height: 50)
-                        }
                     }
                 }
                 BoardView(board: self.$controller.board, currentPiece: self.$controller.currentPiece, droppedPiece: self.$controller.currentPieceAtDropPoint)
@@ -44,28 +42,14 @@ struct ContentView: View {
                 //            .gesture(horizDragGesture.simultaneously(with: verticalDragGesture))
 
                 HStack {
-                    Spacer()
-                    Button(action: self.controller.hold) {
-                        Image(systemName: "arrow.up.square.fill").resizable().frame(width: 50, height: 50)
-                    }
-                    Spacer()
                     Button(action: self.onTap) {
                         Image(systemName: "goforward").resizable().frame(width: 50, height: 50)
                     }
+                        .padding(.leading, 50)
                     Spacer()
-                }
+                    DPadView(up: self.controller.hold, down: self.controller.drop, left: self.controller.left, right: self.controller.right)
-                HStack {
+                        .frame(width: 150, height: 150)
-                    Button(action: self.controller.left) {
+                        .padding(.trailing, 50)
-                        Image(systemName: "arrow.left.square.fill").resizable().frame(width: 50, height: 50)
-                    }
-                    Spacer()
-                    Button(action: self.controller.drop) {
-                        Image(systemName: "arrow.down.square.fill").resizable().frame(width: 50, height: 50)
-                    }
-                    Spacer()
-                    Button(action: self.controller.right) {
-                        Image(systemName: "arrow.right.square.fill").resizable().frame(width: 50, height: 50)
-                    }
                 }
             }
         }

Tetris/DPadView.swift

@@ -0,0 +1,44 @@
+//
+//  DPadView.swift
+//  Tetris
+//
+//  Created by Shadowfacts on 10/16/19.
+//  Copyright © 2019 Shadowfacts. All rights reserved.
+//
+
+import SwiftUI
+
+struct DPadView: View {
+    let up: () -> Void
+    let down: () -> Void
+    let left: () -> Void
+    let right: () -> Void
+    
+    var body: some View {
+        GeometryReader { (geometry) in
+            VStack {
+                Button(action: self.up) {
+                    Image(systemName: "arrow.up.square.fill").resizable().frame(width: geometry.size.width / 3)
+                }
+                HStack {
+                    Button(action: self.left) {
+                        Image(systemName: "arrow.left.square.fill").resizable().frame(width: geometry.size.width / 3)
+                    }
+                    Spacer()
+                    Button(action: self.right) {
+                        Image(systemName: "arrow.right.square.fill").resizable().frame(width: geometry.size.width / 3)
+                    }
+                }
+                Button(action: self.down) {
+                    Image(systemName: "arrow.down.square.fill").resizable().frame(width: geometry.size.width / 3)
+                }
+            }
+        }.aspectRatio(1, contentMode: .fit)
+    }
+}
+
+struct DPadView_Previews: PreviewProvider {
+    static var previews: some View {
+        DPadView(up: {}, down: {}, left: {}, right: {})
+    }
+}

TetrisUI/TilesView.swift

@@ -16,7 +16,7 @@ struct TilesView: View {
         GridView(rows: board.height, columns: board.width) { (col, row, size) in
             Rectangle()
                 .frame(width: size, height: size)
-                .foregroundColor(self.board[col, row]?.color ?? Color.clear)
+                .foregroundColor(self.board[col, row]?.color ?? Color("Background"))
         }
     }
 }