fix: match controller card to Xbox layout

Realign the card to the physical controller face: trigger bars and
bumper chips in the top corners, sticks side by side in the upper
center (stick clicks light up their rings instead of separate chips),
D-pad lower left, face buttons lower right, and the Guide button
centered between the clusters flanked by Select and Start.

Co-Authored-By: qwen3.8-27b@q3_k_xl: realigned card to Xbox layout
This commit is contained in:
portersky
2026-08-29 14:53:52 +02:00
parent 4931bf5c18
commit a652a9f187
3 changed files with 70 additions and 27 deletions
+26 -2
View File
@@ -62,6 +62,8 @@ struct StickPadView: View {
let label: String
let x: Int16
let y: Int16
// True while the stick is clicked in (LS/RS).
var pressed = false
private let diameter: CGFloat = 64
@@ -71,8 +73,9 @@ struct StickPadView: View {
Circle()
.fill(Color.secondary.opacity(0.15))
Circle()
.stroke(Color.secondary.opacity(0.35), lineWidth: 1)
.padding(6)
.stroke(pressed ? Color.green : Color.secondary.opacity(0.35),
lineWidth: pressed ? 2.5 : 1)
.padding(4)
Circle()
.fill(Color.accentColor)
.frame(width: 12, height: 12)
@@ -122,6 +125,27 @@ struct TriggerBarView: View {
}
}
// The large Guide button, centered between the D-pad and face buttons.
struct GuideButtonView: View {
let pressed: Bool
var body: some View {
VStack(spacing: 4) {
ZStack {
Circle()
.fill(pressed ? Color.green : Color.secondary.opacity(0.25))
Image(systemName: "gamecontroller.fill")
.font(.system(size: 14))
.foregroundStyle(pressed ? .white : .secondary)
}
.frame(width: 36, height: 36)
Text("Guide")
.font(.caption2)
.foregroundStyle(.secondary)
}
}
}
struct ButtonChip: View {
let button: XboxButton
let pressed: Bool