Show upcoming tetrominoes

Tetris/ContentView.swift

@@ -22,8 +22,10 @@ struct ContentView: View {
     var body: some View {
         GeometryReader { (geometry) in
             VStack {
-                HStack {
-                    Text("Held:")
+                Spacer()
+                HStack(alignment: .top, spacing: 8) {
+                    VStack {
+                        Text("Held")
                         if self.controller.heldTetromino != nil {
                             Group {
                                 TetrominoView(tetromino: self.controller.heldTetromino!)
@@ -32,6 +34,7 @@ struct ContentView: View {
                             Rectangle().foregroundColor(.clear).frame(width: 50, height: 50)
                         }
                     }
+                        .padding(.leading, 8)
                     BoardView(board: self.$controller.board, currentPiece: self.$controller.currentPiece, droppedPiece: self.$controller.currentPieceAtDropPoint)
                         .aspectRatio(CGSize(width: self.controller.width, height: self.controller.height), contentMode: .fit)
                         .onAppear(perform: self.startTimer)
@@ -41,6 +44,13 @@ struct ContentView: View {
                     //        .gesture(ExclusiveGesture(horizDragGesture, verticalDragGesture))
                     //            .gesture(horizDragGesture.simultaneously(with: verticalDragGesture))
                     
+                    VStack {
+                        Text("Next")
+                        NextTetromioesView(tetrominoes: self.controller.nextTetrominoes).frame(width: 50)
+                    }
+                        .padding(.trailing, 8)
+                }
+                Spacer()
                 HStack {
                     Button(action: { self.controller.rotate(direction: .counterClockwise) }) {
                         Image(systemName: "gobackward").resizable().frame(width: 50, height: 50)
@@ -55,6 +65,7 @@ struct ContentView: View {
                         .frame(width: 150, height: 150)
                         .padding(.trailing, 25)
                 }
+                Spacer()
             }
         }
     }

TetrisKit/GameController.swift

@@ -24,6 +24,7 @@ public class GameController: ObservableObject {
         }
     }
     @Published public var currentPieceAtDropPoint: GamePiece?
+    @Published public var nextTetrominoes: [Tetromino] = [.random(), .random(), .random()]
     @Published public var heldTetromino: Tetromino?
 
     public var ended: Bool {
@@ -41,8 +42,9 @@ public class GameController: ObservableObject {
     }
     
     func nextPiece() {
-        let tetromino = Tetromino.random()
+        let tetromino = nextTetrominoes.removeFirst()
         currentPiece = GamePiece(tetromino: tetromino, topLeft: ((width - tetromino.shape.count) / 2, 0))
+        nextTetrominoes.append(.random())
     }
     
     func finalizePiece() {

TetrisUI/NextTetrominoesView.swift

@@ -0,0 +1,32 @@
+//
+//  NextTetrominoesView.swift
+//  Tetris
+//
+//  Created by Shadowfacts on 10/16/19.
+//  Copyright © 2019 Shadowfacts. All rights reserved.
+//
+
+import SwiftUI
+import TetrisKit
+
+public struct NextTetromioesView: View {
+    let tetrominoes: [Tetromino]
+    
+    public init(tetrominoes: [Tetromino]) {
+        self.tetrominoes = tetrominoes
+    }
+    
+    public var body: some View {
+        VStack {
+            ForEach(0..<self.tetrominoes.count, id: \.self) { (index) in
+                TetrominoView(tetromino: self.tetrominoes[index]).aspectRatio(1, contentMode: .fit)
+            }
+        }
+    }
+}
+
+struct NextTetrominoesView_Previews: PreviewProvider {
+    static var previews: some View {
+        NextTetromioesView(tetrominoes: [.t, .l, .z])
+    }
+}