Use d-pad style layout for directional buttons

This commit is contained in:
Shadowfacts 2019-10-16 10:42:01 -04:00
parent 4174bfc21c
commit f0160297f5
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
4 changed files with 94 additions and 28 deletions

View File

@ -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"
}
}
}
]
}

View File

@ -23,15 +23,13 @@ struct ContentView: View {
GeometryReader { (geometry) in GeometryReader { (geometry) in
VStack { VStack {
HStack { 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) 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)) // .gesture(horizDragGesture.simultaneously(with: verticalDragGesture))
HStack { HStack {
Spacer()
Button(action: self.controller.hold) {
Image(systemName: "arrow.up.square.fill").resizable().frame(width: 50, height: 50)
}
Spacer()
Button(action: self.onTap) { Button(action: self.onTap) {
Image(systemName: "goforward").resizable().frame(width: 50, height: 50) Image(systemName: "goforward").resizable().frame(width: 50, height: 50)
} }
.padding(.leading, 50)
Spacer() 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)
}
} }
} }
} }

44
Tetris/DPadView.swift Normal file
View File

@ -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: {})
}
}

View File

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