probability on Software Development Notes

Monty Hall Problem in SwiftUI - part 3

Eric Callanan — Sunday, 03 Oct 2021

I just couldn't let the Monty Hall problem go. What if there were more doors in the problem. In this article I create a simulation of anywhere from 3 to 6 doors with the underlying premise that after selecting a door, all but one of the remaining doors are opened. The contestant is then offered an option to switch doors.

It seems more intuitive, with the increased doors, to switch doors than it did when there were just 3 doors.

The Monty Hall problem is presented in the style of a game show, where a contestant is given a choice of selecting one of three doors. Behind one of the doors is the desired prize of a car, while behind the other two doors are goats. After the contestant selects one of the three doors, the host opens one of the remaining doors to reveal a goat and asks you if you would like to switch doors.

Changes to the Model

There are only some minor changes required to the MontyGameModel and this shows some of the advantages of MVVM. Essentially, the model is made more generic to handle a variable number of doors. A second initializer is added that takes a number for quantity of doors to have in the model. The default initializer is modified to call this initializer with a value of 3. Some guard statements could be added to this to set constraints on the number of doors.

The other change is the openGoatDoor method is replaced with openOtherDoors method. This opens all but one of the non-selected door and so, behaves the same as the openGoatDoor method when there is just 3 doors. Another change that is done is to rename the shuffle method to reset, this is more of a correction to better name what the method is doing. the reset method is used to reset the model for a new game. There are some other refactoring to move logic out of the View and down to the model, but this refactoring would also apply to the original 3-door game as well.

 1struct MontyGameModel {
 2    private var doors: [Door]
 3    private var gameWon = false
 4    private var gameOver = false
 5    private var hostDoorOpened = false
 6    
 7    init() {
 8        self.init(numberOfDoors: 3)
 9    }
10    
11    init(numberOfDoors: Int) {
12        doors = []
13        for i in (0..<numberOfDoors) {
14            i == 0 ? doors.append(Door(emoji: "🚗")) : doors.append(Door(emoji: "🐐"))
15        }
16        doors.shuffle()
17    }
18
19    var isGameWon: Bool {
20        get { gameWon }
21    }
22   
23    var isGameOver: Bool {
24        get { gameOver }
25    }
26   
27    var isHostDoorOpened: Bool {
28        get { hostDoorOpened }
29    }
30   
31    var isDoorSelected: Bool {
32        get { doors.contains { $0.selected } }
33    }
34   
35    var doorCount: Int {
36        get { doors.count }
37    }
38    
39    mutating func selectDoor(index i: Int) {
40        for i in doors.indices {
41            doors[i].selected = false
42        }
43        doors[i].selected = true
44    }
45    
46    mutating func reset() {
47        for i in doors.indices {
48            doors[i].open = false
49            doors[i].selected = false
50        }
51        gameWon = false
52        gameOver = false
53        hostDoorOpened = false
54        self.doors.shuffle()
55    }
56
57    func doorAtIndex(_ i:Int) -> Door {
58        return doors[i]
59    }
60
61    mutating func openOtherDoors() -> Int {
62        let allDoors = Array(0..<doors.count)
63        let carDoorIndex = allDoors.filter { doors[$0].emoji == "🚗" }[0]
64        let selectedDoorIndex = allDoors.filter { doors[$0].selected }[0]
65        var unOpenedDoorIndex: Int
66        if selectedDoorIndex == carDoorIndex {
67            unOpenedDoorIndex = allDoors.filter { $0 != selectedDoorIndex }.randomElement()!
68        } else {
69            unOpenedDoorIndex = carDoorIndex
70        }
71        let doorsToOpen = allDoors.filter { $0 != selectedDoorIndex && $0 != unOpenedDoorIndex }
72        for i in doorsToOpen {
73            self.doors[i].open = true
74        }
75        hostDoorOpened = true
76        return unOpenedDoorIndex
77    }
78    
79    mutating func playGame() {
80        let allDoors = Array(0..<doors.count)
81        if (allDoors.filter { doors[$0].emoji == "🚗" && doors[$0].selected }.count == 1) {
82            gameWon = true
83        }
84        let selectedDoorIndex = allDoors.filter { doors[$0].selected }[0]
85        doors[selectedDoorIndex].open = true
86        gameOver = true
87    }
88}

1struct Door {
2    let emoji: String
3    var label: String {
4        return emoji == "🚗" ? "car" : "goat"
5    }
6    var open = false
7    var selected = false
8}

Changes to the ViewModel

The main change to the MontyHallViewModel is the addition of an initializer that takes the number of doors. There are some renaming of methods to match the changes made to the model.

 1class MontyHallViewModel: ObservableObject {
 2    @Published private var montyModel: MontyGameModel
 3
 4    init() {
 5        montyModel = MontyGameModel()
 6    }
 7
 8    init(numberOfDoors n: Int) {
 9        montyModel = MontyGameModel(numberOfDoors: n)
10    }
11
12    var isGameWon: Bool {
13        get { montyModel.isGameWon }
14    }
15    
16    var isGameOver: Bool {
17        get { montyModel.isGameOver }
18    }
19    
20    var isHostDoorOpened: Bool {
21        get { montyModel.isHostDoorOpened }
22    }
23    
24    var isDoorSelected: Bool {
25        get { montyModel.isDoorSelected }
26    }
27    
28    var doorCount: Int {
29        get { montyModel.doorCount }
30    }
31    
32    func door(index: Int) -> Door {
33        return montyModel.doorAtIndex(index)
34    }
35
36    func reset() {
37        montyModel.reset()
38    }
39    
40    func selectDoor(index i: Int) {
41        montyModel.selectDoor(index: i)
42    }
43
44    func openOtherDoors() {
45        _ = montyModel.openOtherDoors()
46    }
47
48    func playGame() {
49        montyModel.playGame()
50    }
51}

View for Monty Hall Problem with Six Doors

A new view is added to the app to display a variable number of doors. This is similar to the original MontyHallGameView except the view is initialized with 6 doors. There are some layout changes to adjust the size of the doors and buttons. There are also changes to remove ant state variables and use data from the ViewModel to determine the state o the game.

  1struct MultiDoorGameView: View {
  2    @ObservedObject private var montyHallVm: MontyHallViewModel
  3    @ObservedObject private var metrics: MetricsViewModel
  4    
  5    init() {
  6        self.montyHallVm = MontyHallViewModel(numberOfDoors: 6)
  7        self.metrics = MetricsViewModel()
  8        
  9        UISegmentedControl.appearance()
 10            .selectedSegmentTintColor = UIColor(Color("background2"))
 11        UISegmentedControl.appearance()
 12            .setTitleTextAttributes([.foregroundColor: UIColor(Color("lightYellow"))],
 13                                    for: .selected)
 14        UISegmentedControl.appearance()
 15            .setTitleTextAttributes([.foregroundColor: UIColor(Color("background2"))],
 16                                    for: .normal)
 17    }
 18
 19    var body: some View {
 20        ZStack {
 21            Colors.bgGradient
 22                .edgesIgnoringSafeArea(.all)
 23            
 24            VStack {
 25                Spacer().frame(height:20)
 26                
 27                Text("Monty Hall Problem")
 28                    .foregroundColor(Color("mainText"))
 29                    .font(.custom("Helvetica Neue", size: 36, relativeTo: .largeTitle))
 30                    .fontWeight(.bold)
 31                
 32                HStack(spacing:10) {
 33                    ForEach(0..<montyHallVm.doorCount) { i in
 34                        VStack {
 35                            DoorView(number: i,
 36                                     montyHall: montyHallVm)
 37                                .frame(width:50, height:150)
 38                        }
 39                    }
 40                }
 41                
 42                Spacer().frame(height:20)
 43                
 44                ZStack {
 45                    Spacer()
 46                        .frame(height:40)
 47                    if montyHallVm.isGameOver {
 48                        Text(montyHallVm.isGameWon ? "You Won" : "You Loose")
 49                    }
 50                }
 51                .foregroundColor(Color("mainText"))
 52                .font(.largeTitle)
 53                
 54                VStack {
 55                    HStack {
 56                        Button( action: {
 57                            montyHallVm.reset()
 58                        })
 59                        {
 60                            ActionButtonView(label: "New",
 61                                             symbol: "asterisk")
 62                        }
 63                        
 64                        Button( action: {
 65                            montyHallVm.openOtherDoors()
 66                        })
 67                        {
 68                            ActionButtonView(label: "Open",
 69                                             symbol: "arrow.right.square")
 70                        }
 71                        .disabled(montyHallVm.isGameOver || montyHallVm.isHostDoorOpened || !montyHallVm.isDoorSelected)
 72
 73                    }
 74                    .buttonStyle(ActionButtonSmallStyle())
 75                    
 76                    Button( action: {
 77                        montyHallVm.playGame()
 78                        metrics.gameOver(isWon: montyHallVm.isGameWon)
 79                    })
 80                    {
 81                        ActionButtonView(label: "play", symbol: "play.fill")
 82                    }
 83                    .disabled(montyHallVm.isGameOver || !montyHallVm.isDoorSelected)
 84                    .buttonStyle(ActionButtonStyle())
 85                }
 86                .frame(width:300)
 87                
 88                
 89                Spacer().frame(height:30)
 90                
 91                Rectangle()
 92                    .fill(Color("background1").opacity(0.3))
 93                    .frame(height: 5)
 94
 95                GameMetricsView(metrics: metrics)
 96                    .foregroundColor(Color("mainText"))
 97            }
 98        }
 99    }
100}

Ensure changes to Model and ViewModel work for a six-door game

Ensure changes to Model and ViewModel work for a six-door game

Set a variable number of doors

Changing the number of doors dynamically in the View was a bit more complicated that I thought. This is because the doors are laid out using ForEach with the number of doors. The recommendation from Apple is that the number of elements in the array should not change dynamically when using the array to create views. The views can be bound to a collection of Identifiable objects.

The Door object is modified to make it conform to the Identifiable protocol. As the doors get shuffled for every game, a property is added to contain the door position number. A method is added to set this door position number.

 1struct Door: Identifiable {
 2    let id = UUID()
 3    let emoji: String
 4    var label: String {
 5        return emoji == "🚗" ? "car" : "goat"
 6    }
 7    var positionNumber = 0
 8    var open = false
 9    var selected = false
10    
11    mutating func setNumber(_ n:Int) {
12        positionNumber = n
13    }
14}

The doors variable is made accessible in the MontyGameModel. A method to shuffle the doors is added to the model to shuffle the doors and set the position number of the doors.

 1struct MontyGameModel {
 2    var doors: [Door]
 3    private var gameWon = false
 4    private var gameOver = false
 5    private var hostDoorOpened = false
 6    
 7    init() {
 8        self.init(numberOfDoors: 3)
 9    }
10    
11    init(numberOfDoors: Int) {
12        doors = []
13        for i in (0..<numberOfDoors) {
14            i == 0 ? doors.append(Door(emoji: "🚗")) : doors.append(Door(emoji: "🐐"))
15        }
16        shuffleDoors()
17    }
18
19    var isGameWon: Bool {
20        get { gameWon }
21    }
22   
23    var isGameOver: Bool {
24        get { gameOver }
25    }
26   
27    var isHostDoorOpened: Bool {
28        get { hostDoorOpened }
29    }
30   
31    var isDoorSelected: Bool {
32        get { doors.contains { $0.selected } }
33    }
34    
35    mutating func selectDoor(doorNumber n: Int) {
36        for i in doors.indices {
37            doors[i].selected = i == (n-1)
38        }
39    }
40    
41    mutating func reset() {
42        for i in doors.indices {
43            doors[i].open = false
44            doors[i].selected = false
45        }
46        gameWon = false
47        gameOver = false
48        hostDoorOpened = false
49        shuffleDoors()
50    }
51
52    mutating func openOtherDoors() -> Int {
53        let allDoors = Array(0..<doors.count)
54        let carDoorIndex = allDoors.filter { doors[$0].emoji == "🚗" }[0]
55        let selectedDoorIndex = allDoors.filter { doors[$0].selected }[0]
56        var unOpenedDoorIndex: Int
57        if selectedDoorIndex == carDoorIndex {
58            unOpenedDoorIndex = allDoors.filter { $0 != selectedDoorIndex }.randomElement()!
59        } else {
60            unOpenedDoorIndex = carDoorIndex
61        }
62        let doorsToOpen = allDoors.filter { $0 != selectedDoorIndex && $0 != unOpenedDoorIndex }
63        for i in doorsToOpen {
64            self.doors[i].open = true
65        }
66        hostDoorOpened = true
67        return unOpenedDoorIndex + 1
68    }
69    
70    mutating func playGame() {
71        let allDoors = Array(0..<doors.count)
72        if (allDoors.filter { doors[$0].emoji == "🚗" && doors[$0].selected }.count == 1) {
73            gameWon = true
74        }
75        let selectedDoorIndex = allDoors.filter { doors[$0].selected }[0]
76        doors[selectedDoorIndex].open = true
77        gameOver = true
78    }
79    
80    mutating func setNumberOfDoors(n: Int) {
81        doors = []
82        for i in (0..<n) {
83            i == 0 ? doors.append(Door(emoji: "🚗")) : doors.append(Door(emoji: "🐐"))
84        }
85        reset()
86    }
87    
88    private mutating func shuffleDoors() {
89        doors.shuffle()
90        for i in doors.indices {
91            doors[i].positionNumber = i + 1
92        }
93    }
94}

The ViewModel is modified with a read-write property to make the Doors array accesible to the View.

 1class MontyHallViewModel: ObservableObject {
 2    @Published private var montyModel: MontyGameModel
 3
 4    init() {
 5        montyModel = MontyGameModel()
 6    }
 7
 8    init(numberOfDoors n: Int) {
 9        montyModel = MontyGameModel(numberOfDoors: n)
10    }
11
12    var doors: [Door] {
13        get { montyModel.doors }
14        set(newDoors) { montyModel.doors = newDoors }
15    }
16
17    var isGameWon: Bool {
18        get { montyModel.isGameWon }
19    }
20    
21    var isGameOver: Bool {
22        get { montyModel.isGameOver }
23    }
24    
25    var isHostDoorOpened: Bool {
26        get { montyModel.isHostDoorOpened }
27    }
28    
29    var isDoorSelected: Bool {
30        get { montyModel.isDoorSelected }
31    }
32    
33    func reset() {
34        montyModel.reset()
35    }
36    
37    func selectDoor(index i: Int) {
38        montyModel.selectDoor(doorNumber: i)
39    }
40
41    func openOtherDoors() {
42        _ = montyModel.openOtherDoors()
43    }
44
45    func playGame() {
46        montyModel.playGame()
47    }
48    
49    func resetDoors(numberOfDoors: Int) {
50        montyModel.setNumberOfDoors(n: numberOfDoors)
51    }
52}

The DoorView is modified to use an instance of a Door to display the properties for the door and to use a reference to the ViewModel to set when the door is selected.

 1struct DoorView: View {
 2    var door: Door
 3    @ObservedObject var montyHall: MontyHallViewModel
 4    
 5    var body: some View {
 6        Button(action: {
 7            montyHall.selectDoor(index: door.positionNumber)
 8        }) {
 9            VStack {
10                ZStack {
11                    DoorOpenView(emoji: door.emoji, label: door.label)
12                    DoorClosedView(doorNumber: door.positionNumber)
13                        .rotation3DEffect(
14                            Angle.degrees(door.open ? -87 : 0),
15                            axis: (0,1,0),
16                            anchor: .leading,
17                            perspective: 0.2
18                        )
19                }
20                .animation(.easeInOut(duration: door.open ? 1.0 : 0.0))
21                
22                Image(systemName: door.selected ? "checkmark.seal.fill" : "seal")
23                    .font(.system(size: 30))
24                    .foregroundColor(Color("mainText"))
25                    .padding(.vertical, 5)
26            }
27        }
28        .buttonStyle(DoorButtonStyle())
29        .disabled(montyHall.isGameOver || door.open || door.selected )
30    }
31}

  1struct MultiDoorGameView: View {
  2    @ObservedObject private var montyHallVm: MontyHallViewModel
  3    @ObservedObject private var metrics: MetricsViewModel
  4    
  5    init() {
  6        self.montyHallVm = MontyHallViewModel()
  7        self.metrics = MetricsViewModel()
  8        
  9        UISegmentedControl.appearance()
 10            .selectedSegmentTintColor = UIColor(Color("background2"))
 11        UISegmentedControl.appearance()
 12            .setTitleTextAttributes([.foregroundColor: UIColor(Color("lightYellow"))],
 13                                    for: .selected)
 14        UISegmentedControl.appearance()
 15            .setTitleTextAttributes([.foregroundColor: UIColor(Color("background2"))],
 16                                    for: .normal)
 17    }
 18    
 19    var body: some View {
 20        ZStack {
 21            Colors.bgGradient
 22                .edgesIgnoringSafeArea(.all)
 23            
 24            VStack {
 25                VStack(spacing:0) {
 26                    Text("Monty Hall Problem")
 27                        .foregroundColor(Color("mainText"))
 28                        .font(.custom("Helvetica Neue", size: 32, relativeTo: .title))
 29                        .fontWeight(.bold)
 30                    
 31                    NumberOfDoorsView(montyHallVm: montyHallVm,
 32                                      numOfDoors: montyHallVm.doors.count)
 33                }
 34                  
 35                HStack(spacing:10) {
 36                    ForEach(montyHallVm.doors) { door in
 37                        VStack {
 38                            DoorView(door: door,
 39                                     montyHall: montyHallVm)
 40                        }
 41                    }
 42                }
 43                .frame(width:360, height:150)
 44
 45                ZStack {
 46                    Spacer()
 47                        .frame(height:30)
 48                    if montyHallVm.isGameOver {
 49                        Text(montyHallVm.isGameWon ? "You Won" : "You Loose")
 50                    }
 51                }
 52                .foregroundColor(Color("mainText"))
 53                .font(.title2)
 54                
 55                VStack {
 56                    HStack {
 57                        Button( action: {
 58                            montyHallVm.reset()
 59                        })
 60                        {
 61                            ActionButtonView(label: "New",
 62                                             symbol: "asterisk")
 63                        }
 64                        
 65                        Button( action: {
 66                            montyHallVm.openOtherDoors()
 67                        })
 68                        {
 69                            ActionButtonView(label: "Open",
 70                                             symbol: "arrow.right.square")
 71                        }
 72                        .disabled(montyHallVm.isGameOver || montyHallVm.isHostDoorOpened || !montyHallVm.isDoorSelected)
 73
 74                    }
 75                    .buttonStyle(ActionButtonStyle())
 76                    
 77                    Button( action: {
 78                        montyHallVm.playGame()
 79                        metrics.gameOver(isWon: montyHallVm.isGameWon)
 80                    })
 81                    {
 82                        ActionButtonView(label: "play", symbol: "play.fill")
 83                    }
 84                    .disabled(montyHallVm.isGameOver || !montyHallVm.isDoorSelected)
 85                    .buttonStyle(ActionButtonStyle())
 86                }
 87                .frame(width:300)
 88                
 89                Rectangle()
 90                    .fill(Color("background1").opacity(0.3))
 91                    .frame(height: 5)
 92
 93                GameMetricsView(metrics: metrics)
 94                    .foregroundColor(Color("mainText"))
 95                
 96                Spacer()
 97            }
 98        }
 99    }
100}

The section to display the number of Doors is split out into a separate SwiftUI view.

 1struct NumberOfDoorsView: View {
 2    @ObservedObject var montyHallVm: MontyHallViewModel
 3    @State var numOfDoors: Int
 4    
 5    let doorOptions = [3, 4, 5, 6]
 6    
 7    var body: some View {
 8        ZStack {
 9            BackGroundCardView()
10            
11            VStack {
12                Text("Number of Doors")
13                    .font(.custom("Helvetica Neue", size: 22, relativeTo: .largeTitle))
14                    .fontWeight(.bold)
15                
16                Picker("", selection: $numOfDoors) {
17                    ForEach(doorOptions, id: \.self) {
18                        Text("\($0)")
19                            .fontWeight(.heavy)
20                    }
21                }
22                .onChange(of: numOfDoors) { _ in
23                    montyHallVm.resetDoors(numberOfDoors: numOfDoors)
24                }
25                .pickerStyle(.segmented)
26                .background(Color("lightYellow"))
27            }
28            .padding(.horizontal, 35)
29        }
30        .padding()
31    }
32}

Monty Hall Problem with configurable number of doors

Monty Hall Problem with configurable number of doors

Add Simulation to the View

The simulator Model and ViewModel only need slight modifications. The runSimulation method takes a parameter specifying the number of doors. The selected door is updated to use the door number rather than the door index.

 1struct SimulatorModel {
 2    private var targetRunCount: Int
 3    private var metrics: MetricsModel
 4    
 5    init() {
 6        targetRunCount = 10
 7        metrics = MetricsModel()
 8    }
 9    
10    var targetRuns: Int {
11        get { targetRunCount }
12    }
13    
14    var wins: Int {
15        get { metrics.won }
16    }
17    
18    var losses: Int {
19        get { metrics.lost }
20    }
21    
22    var gamesComplete: Int {
23        get { metrics.played }
24    }
25    
26    var percentageWon: Double {
27        get { metrics.percentageWon }
28    }
29    
30    mutating func setTargetNumber(_ n:Int) {
31        targetRunCount = n
32    }
33    
34    mutating func reset() {
35        targetRunCount = 0
36        metrics.reset()
37    }
38    
39    mutating func runSimulation(alwaysSwitch: Bool, numOfdoors:Int) {
40        // Loop for target count
41        for _ in 1...targetRunCount {
42            // 1. Create a new instance of MontyGameModel
43            var game = MontyGameModel(numberOfDoors: numOfdoors)
44            
45            // 2. Select one of the three doors at random
46            let allDoorNumbers = Array(1...game.doors.count)
47            let selectedDoorNumber: Int = allDoorNumbers.randomElement()!
48            game.selectDoor(doorNumber: selectedDoorNumber)
49            
50            // 3. Open one of the other doors
51            let unOpenedNumber = game.openOtherDoors()
52            
53            // 4. Switch selected door if required
54            if alwaysSwitch {
55                game.selectDoor(doorNumber: unOpenedNumber)
56            }
57            
58            // 5. Evaluate the game
59            game.playGame()
60            
61            // 6. Add result to metrics as either win or loss
62            metrics.gameOver(isWon: game.isGameWon)
63        }
64    }
65}

The runSimulation method in the SimulatorViewModel is updated to have an optional parameter for the number of doors. This has a default value of 3 so the original Simulation view does not need to be changed.

 1class SimulatorViewModel: ObservableObject {
 2    @Published private var simModel: SimulatorModel
 3
 4    init() {
 5        simModel = SimulatorModel()
 6    }
 7
 8    var targetRuns: Int {
 9        get { simModel.targetRuns }
10    }
11    
12    var wins: Int {
13        get { simModel.wins }
14    }
15    
16    var losses: Int {
17        get { simModel.losses }
18    }
19    
20    var gamesComplete: Int {
21        get { simModel.gamesComplete }
22    }
23    
24    var percentageWon: Double {
25        get { simModel.percentageWon }
26    }
27    
28    func runSimulation(targerNumber n:Int, alwaysSwitch: Bool, numberOfDoors:Int = 3) {
29        simModel.reset()
30
31        simModel.setTargetNumber(n)
32
33        simModel.runSimulation(alwaysSwitch: alwaysSwitch, numOfdoors: numberOfDoors)
34    }
35}

A separate simulation SwiftUI view is defined to present a section for simulation in the new multi-door view.

 1struct SimulationView: View {
 2    var numOfDoors: Int
 3    @ObservedObject var montySimulator: SimulatorViewModel
 4    @State private var targetNumber = 100
 5    @State private var switchDoors = true
 6    
 7    var body: some View {
 8        VStack {
 9            ZStack {
10                BackGroundCardView()
11                
12                VStack {
13                    Text("Select the Number of runs")
14                        .font(.custom("Helvetica Neue", size: 22, relativeTo: .largeTitle))
15                        .fontWeight(.bold)
16                    
17                    Picker("", selection: $targetNumber) {
18                        ForEach([10,100,500,1000], id: \.self) {
19                            Text("\($0)")
20                                .fontWeight(.heavy)
21                        }
22                    }
23                    .pickerStyle(.segmented)
24                    .background(Color("lightYellow"))
25                    
26                    
27                    HStack {
28                        Toggle(isOn: $switchDoors, label: {
29                            Text("Always switch doors")
30                                .font(.custom("Helvetica Neue", size: 22, relativeTo: .largeTitle))
31                                .fontWeight(.bold)
32                        })
33                    }
34                    Button( action: {
35                        montySimulator.runSimulation(
36                            targerNumber: targetNumber,
37                            alwaysSwitch: switchDoors,
38                            numberOfDoors: numOfDoors)
39                    })
40                    {
41                        ActionButtonView(label: "Run Simulation",
42                                         symbol: "play.fill")
43                    }
44                    .buttonStyle(ActionButtonStyle())
45                    
46                    ResultBarView(won: montySimulator.wins,
47                                  lost: montySimulator.losses)
48                        .frame(height:20)
49                    
50                    HStack {
51                        Text("\(montySimulator.wins) Won")
52                        Spacer()
53                        Text("\(montySimulator.losses) Lost")
54                    }
55                }
56                .padding()
57            }
58            .padding(5)
59        }
60    }
61}

Finally the MultiDoorGameView is updated to contain a section for simulation as well as the section for playing the game with multiple doors.

  1struct MultiDoorGameView: View {
  2    @ObservedObject private var montyHallVm: MontyHallViewModel
  3    @ObservedObject private var metrics: MetricsViewModel
  4    @ObservedObject private var montySimulator: SimulatorViewModel
  5    
  6    init() {
  7        self.montyHallVm = MontyHallViewModel()
  8        self.metrics = MetricsViewModel()
  9        self.montySimulator = SimulatorViewModel()
 10        
 11        UISegmentedControl.appearance()
 12            .selectedSegmentTintColor = UIColor(Color("background2"))
 13        UISegmentedControl.appearance()
 14            .setTitleTextAttributes([.foregroundColor: UIColor(Color("lightYellow"))],
 15                                    for: .selected)
 16        UISegmentedControl.appearance()
 17            .setTitleTextAttributes([.foregroundColor: UIColor(Color("background2"))],
 18                                    for: .normal)
 19    }
 20    
 21    var body: some View {
 22        ZStack {
 23            Colors.bgGradient
 24                .edgesIgnoringSafeArea(.all)
 25            
 26            VStack {
 27                VStack(spacing:0) {
 28                    Text("Monty Hall Problem")
 29                        .foregroundColor(Color("mainText"))
 30                        .font(.custom("Helvetica Neue", size: 32, relativeTo: .title))
 31                        .fontWeight(.bold)
 32                    
 33                    NumberOfDoorsView(montyHallVm: montyHallVm,
 34                                      numOfDoors: montyHallVm.doors.count)
 35                }
 36                  
 37                HStack(spacing:10) {
 38                    ForEach(montyHallVm.doors) { door in
 39                        VStack {
 40                            DoorView(door: door,
 41                                     montyHall: montyHallVm)
 42                        }
 43                    }
 44                }
 45                .frame(width:360, height:150)
 46
 47                ZStack {
 48                    Spacer()
 49                        .frame(height:30)
 50                    if montyHallVm.isGameOver {
 51                        Text(montyHallVm.isGameWon ? "You Won" : "You Loose")
 52                    }
 53                }
 54                .foregroundColor(Color("mainText"))
 55                .font(.title2)
 56                
 57                VStack {
 58                    HStack {
 59                        Button( action: {
 60                            montyHallVm.reset()
 61                        })
 62                        {
 63                            ActionButtonView(label: "New",
 64                                             symbol: "asterisk")
 65                        }
 66                        
 67                        Button( action: {
 68                            montyHallVm.openOtherDoors()
 69                        })
 70                        {
 71                            ActionButtonView(label: "Open",
 72                                             symbol: "arrow.right.square")
 73                        }
 74                        .disabled(montyHallVm.isGameOver || montyHallVm.isHostDoorOpened || !montyHallVm.isDoorSelected)
 75
 76                    }
 77                    .buttonStyle(ActionButtonStyle())
 78                    
 79                    Button( action: {
 80                        montyHallVm.playGame()
 81                        metrics.gameOver(isWon: montyHallVm.isGameWon)
 82                    })
 83                    {
 84                        ActionButtonView(label: "play", symbol: "play.fill")
 85                    }
 86                    .disabled(montyHallVm.isGameOver || !montyHallVm.isDoorSelected)
 87                    .buttonStyle(ActionButtonStyle())
 88                }
 89                .frame(width:300)
 90                
 91                ResultBarView(won: metrics.won, lost: metrics.lost)
 92                    .frame(width: 350, height: 20, alignment: .center)
 93
 94                Rectangle()
 95                    .fill(Color("background1").opacity(0.3))
 96                    .frame(height: 5)
 97
 98                SimulationView(numOfDoors: montyHallVm.doors.count,
 99                               montySimulator: montySimulator)
100
101                Spacer()
102            }
103        }
104    }
105}

Monty Hall problem with six doors and simulation of 1000 runs

Monty Hall problem with six doors and simulation of 1000 runs

Simulation of Monty Hall Problem with three to six doors

Simulation of Monty Hall Problem with three to six doors

Conclusion

This is a variation of the Monty Hall Problem, where the number of doors is configurable from three to six. When the contestant chooses a door, the host open all but one of the remaining doors and offers the contestant the option to switch doors. It seems more intuitive to switch doors when there is an increased number of doors than it does when there are just three doors. The simulation demonstrates that it is always better to switch doors. The final screen shows that it is probably better, from a design point of view, to separate the game display and the simulation onto separate screens.

Monty Hall Problem in SwiftUI - part 2

Eric Callanan — Sunday, 26 Sep 2021

Monty Hall Problem in SwiftUI - Simulation. An SwiftUI app was developed for the Monty Hall problem and is described in part 1. The solution to the problem is that the contestant should always switch doors when the host opens the door to reveal a goat and offers the contestant the option to switch doors. This article will create a simulator to simulate playing the Monty Hall game a number of times to demonstrate that this is the winning strategy.

The Monty Hall problem is presented in the style of a game show, where a contestant is given a choice of selecting one of three doors. Behind one of the doors is the desired prize of a car, while behind the other two doors are goats. After the contestant selects one of the three doors, the host opens one of the remaining doors to reveal a goat and asks you if you would like to switch doors.

Define a Model for the simulator

Start with the simulator model, which simply contains the target number of times to simulate playing the game and reuses an instance of MetricsModel. It exposes readonly properties of the simulation results and methods to reset the model data and run the Monty Hall game for the target number of times. The main logic is in the runSimulation method where it loops for the desired target number of times and creates a new instance of MontyGameModel, selects a door and plays the game. The result of the game are added to the metrics. A boolean parameter is used to determine whether or not to switch door.

 1struct SimulatorModel {
 2    private var targetRunCount: Int
 3    private var metrics: MetricsModel
 4    
 5    init() {
 6        targetRunCount = 0
 7        metrics = MetricsModel()
 8    }
 9    
10    var targetRuns: Int {
11        get { targetRunCount }
12    }
13    
14    var wins: Int {
15        get { metrics.won }
16    }
17    
18    var losses: Int {
19        get { metrics.lost }
20    }
21    
22    var gamesComplete: Int {
23        get { metrics.played }
24    }
25    
26    var percentageWon: Double {
27        get { metrics.percentageWon }
28    }
29    
30    mutating func setTargetNumber(_ n:Int) {
31        targetRunCount = n
32    }
33    
34    mutating func reset() {
35        targetRunCount = 0
36        metrics.reset()
37    }
38    
39    mutating func runSimulation(alwaysSwitch: Bool) {
40        // Loop for target count
41        for _ in 1...targetRunCount {
42            // 1. Create a new instance of MontyGameModel
43            var game = MontyGameModel()
44            
45            // 2. Select one of the three doors at random
46            let allDoors = Array(0..<game.doorCount)
47            var selectedDoorIndex: Int = allDoors.randomElement()!
48            
49            // 3. Open one of the other doors
50            let openedIndex = game.openGoatDoor(selectedDoorIndex)
51            
52            // 4. Switch selected door if required
53            if alwaysSwitch {
54                selectedDoorIndex = allDoors.filter { $0 != selectedDoorIndex && $0 != openedIndex }[0]
55            }
56            
57            // 5. Evaluate the game
58            game.playGame(selectedDoorIndex)
59            
60            // 6. Add result to metrics as either win or loss
61            metrics.gameOver(isWon: game.isGameWon)
62        }
63    }
64}

The metrics model is used to keep track of the number of games won and lost.

 1struct MetricsModel {
 2    private var wonCount: Int
 3    private var lostCount: Int
 4    
 5    init() {
 6        wonCount = 0
 7        lostCount = 0
 8    }
 9    
10    var won: Int {
11        get { wonCount }
12    }
13    
14    var lost: Int {
15        get { lostCount }
16    }
17    
18    var played: Int {
19        get { wonCount + lostCount }
20    }
21    
22    var percentageWon: Double {
23        get {
24            if wonCount + lostCount == 0 {
25                return 0.0
26            }
27            else {
28                return 100.0 * Double(wonCount) / Double(wonCount + lostCount)
29            }
30        }
31    }
32    
33    mutating func gameOver(isWon: Bool) {
34        if isWon {
35            wonCount += 1
36        } else {
37            lostCount += 1
38        }
39    }
40    
41    mutating func reset() {
42        wonCount = 0
43        lostCount = 0
44    }
45}

Define a ViewModel for the simulator

The ViewModel is the link between the Model and the View. It contains an instance of the SimulatorModel and a number of readonly properties. The SimulatorViewModel is defined as a class so that it can conform to ObservableObject protocol. This allows the view in SwiftUI to bind to the ViewModel with the use of the @Published property wrapper, so that whenever there are any changes to the simModel property, all views using that object will be reloaded to reflect those changes. There is one main method runSimulation that takes the target number of simulations to run and a boolean value on whether or not to always switch doors when one of the non-winning doors is opened.

 1class SimulatorViewModel: ObservableObject {
 2    @Published private var simModel: SimulatorModel
 3
 4    init() {
 5        simModel = SimulatorModel()
 6    }
 7
 8    var targetRuns: Int {
 9        get { simModel.targetRuns }
10    }
11    
12    var wins: Int {
13        get { simModel.wins }
14    }
15    
16    var losses: Int {
17        get { simModel.losses }
18    }
19    
20    var gamesComplete: Int {
21        get { simModel.gamesComplete }
22    }
23    
24    var percentageWon: Double {
25        get { simModel.percentageWon }
26    }
27    
28    func runSimulation(targerNumber n:Int, alwaysSwitch: Bool) {
29        simModel.reset()
30
31        simModel.setTargetNumber(n)
32
33        simModel.runSimulation(alwaysSwitch: alwaysSwitch)
34    }    
35}

Define a View for the simulator

The View for the Monty Hall Game simulator is bound to an instance of the SimulatorViewModel using ObservedObject property wrapper so the views are invalidated when the SimulatorModel changes. The view in MVVM can be composed of multiple SwiftUI views. The view simply present options to set the number of simulations, a button to run the simulation and a way of presenting the results. All the logic of running the simulations is in the models.

The main SwiftUI view MontyHallSimulatorView lays out the app to set the number of simulations to run, whether or not to switch doors and a button to run the simulation.

  1struct MontyHallSimulatorView: View {
  2    @ObservedObject private var montySimulator: SimulatorViewModel
  3    
  4    @State private var targetNumber = 100
  5    @State private var switchDoors = false
  6    
  7    let counts = [10, 100, 500, 1000]
  8    
  9    init() {
 10        montySimulator = SimulatorViewModel()
 11        runSimulation()
 12        UISegmentedControl.appearance()
 13            .selectedSegmentTintColor = UIColor(Color("background2"))
 14        UISegmentedControl.appearance()
 15            .setTitleTextAttributes([.foregroundColor: UIColor(Color("lightYellow"))],
 16                                    for: .selected)
 17        UISegmentedControl.appearance()
 18            .setTitleTextAttributes([.foregroundColor: UIColor(Color("background2"))],
 19                                    for: .normal)
 20    }
 21    
 22    private func runSimulation() {
 23        montySimulator.runSimulation(
 24            targerNumber: targetNumber,
 25            alwaysSwitch: switchDoors)
 26    }
 27    
 28    var body: some View {
 29        ZStack {
 30            Colors.bgGradient
 31                .edgesIgnoringSafeArea(.all)
 32            
 33            VStack {
 34                Spacer().frame(height:20)
 35                
 36                Text("Monty Hall Simulation")
 37                    .font(.custom("Helvetica Neue", size: 34, relativeTo: .largeTitle))
 38                    .fontWeight(.bold)
 39                
 40                ZStack {
 41                    BackGroundCardView()
 42                    
 43                    VStack {
 44                        Text("Select the Number of runs")
 45                            .font(.custom("Helvetica Neue", size: 22, relativeTo: .largeTitle))
 46                            .fontWeight(.bold)
 47                        
 48                        Picker("", selection: $targetNumber) {
 49                            ForEach(counts, id: \.self) {
 50                                Text("\($0)")
 51                                    .fontWeight(.heavy)
 52                            }
 53                        }
 54                        .pickerStyle(.segmented)
 55                        .background(Color("lightYellow"))
 56                        
 57                        
 58                        HStack {
 59                            Toggle(isOn: $switchDoors, label: {
 60                                Text("Always switch doors")
 61                                    .font(.custom("Helvetica Neue", size: 22, relativeTo: .largeTitle))
 62                                    .fontWeight(.bold)
 63                            })
 64                        }
 65                    }
 66                    .padding(.horizontal, 35)
 67                }
 68                .padding()
 69                
 70                
 71                Button("Run Simulation") {
 72                    runSimulation()
 73                }
 74                .frame(width:200)
 75                .buttonStyle(ActionButtonStyle())
 76                
 77                Spacer().frame(height:20)
 78                
 79                VStack(spacing:5) {
 80                    Text("Simulation Results")
 81                        .font(.custom("Helvetica Neue", size: 22, relativeTo: .largeTitle))
 82                        .fontWeight(.bold)
 83                }
 84                
 85                ZStack {
 86                    BackGroundCardView()
 87                    
 88                    VStack {
 89                        ResultChartView(wins: montySimulator.wins,
 90                                        losses: montySimulator.losses)
 91                            .frame(width: 300, height: 200)
 92                            .animation(.easeInOut(duration: 1))
 93                        
 94                        Spacer()
 95                    }
 96                }
 97                .frame(width: 350)
 98                
 99                Spacer().frame(height:20)
100                
101                CircularPercentageView(percentage: montySimulator.percentageWon)
102                    .frame(height: 130)
103                    .animation(.easeInOut(duration: 1))
104                
105                Spacer()
106            }
107            .foregroundColor(Color("mainText"))
108        }
109    }
110}

The ResultChartView presents the results as a vertical bar chart to more easily see the difference in results when the option to switch doors is selected.

 1struct ResultChartView: View {
 2    var wins: Int
 3    var losses: Int
 4    
 5    var body: some View {
 6        GeometryReader { gr in
 7            let maxValue = max(wins, losses)
 8            let scale = (gr.size.height * 0.85) / CGFloat(maxValue)
 9            let padWidth = gr.size.width * 0.07
10            VStack {
11                HStack {
12                    Spacer().frame(width: padWidth)
13                    
14                    BarView(text: "Won",
15                            value: wins,
16                            height: CGFloat(wins) * scale,
17                            color: Color("barWon"))
18                    
19                    Spacer().frame(width: padWidth)
20                    
21                    BarView(text: "Lost",
22                            value: losses,
23                            height: CGFloat(losses) * scale,
24                            color: Color("barLoss"))
25                    
26                    Spacer().frame(width: padWidth)
27                }
28            }
29        }
30    }
31}

BarView is used in the ResultChartView to keep the bars consistent.

 1struct BarView: View {
 2    var text: String
 3    var value: Int
 4    var height: CGFloat
 5    var color: Color
 6    
 7    var body: some View {
 8        let displayValue = value > 2 ? "\(value)" : ""
 9        let displatText = value > 2 ? text : "\(text) \(value)"
10        VStack(spacing: 0) {
11            Spacer()
12            RoundedRectangle(cornerRadius: 10)
13                .fill(color)
14                .frame(height: height, alignment: .trailing)
15                .overlay(
16                    VStack(spacing:10) {
17                        Text(displatText)
18                        if value > 2 {
19                            Text(displayValue)
20                        }
21                    }
22                )
23        }
24    }
25}

CircularPercentageView presents the number of wins as a percentage in a circular view.

 1struct CircularPercentageView: View {
 2    var percentage: Double
 3    
 4    var body: some View {
 5        let progressText = String(format: "%.0f%%", percentage)
 6        
 7        ZStack {
 8            Circle()
 9                .stroke(Color("lightYellow"), lineWidth: 20)
10            Circle()
11                .trim(from: 0, to: CGFloat(self.percentage / 100))
12                .stroke(
13                    Colors.purpleAngularGradient,
14                    style: StrokeStyle(lineWidth: 20, lineCap: .round))
15                .rotationEffect(Angle(degrees: -90))
16                .overlay(
17                    Text(progressText)
18                        .font(.system(size: 36, weight: .bold, design:.rounded))
19                        .fontWeight(.bold)
20                        .foregroundColor(Color("mainText"))
21                )
22        }
23    }
24}

BackGroundCardView displays a background outline and is used in the setting parameters area as well as behind the bar chart.

 1struct BackGroundCardView: View {
 2    var body: some View {
 3        RoundedRectangle(cornerRadius: 20)
 4            .fill(.clear)
 5            .overlay(
 6                RoundedRectangle(cornerRadius: 20)
 7                    .stroke(Color.gray, lineWidth: 4)
 8                    .blur(radius: 4)
 9                    .offset(x: 2, y: 2)
10                    .mask(
11                        RoundedRectangle(cornerRadius: 20)
12                            .fill(
13                                LinearGradient(
14                                    colors: [.black, .clear],
15                                    startPoint: .topLeading,
16                                    endPoint: .bottomTrailing)))
17            )
18            .overlay(
19                RoundedRectangle(cornerRadius: 20)
20                    .stroke(Color.white, lineWidth: 8)
21                    .blur(radius: 3)
22                    .offset(x: -2, y: -2)
23                    .mask(
24                        RoundedRectangle(cornerRadius: 20)
25                            .fill(
26                                LinearGradient(
27                                    colors: [.clear, .black],
28                                    startPoint: .topLeading,
29                                    endPoint: .bottomTrailing)))
30            )
31    }
32}

Simulation of Monty Hall Problem 1000 times when always selecting to switch doors

Simulation of Monty Hall Problem 1000 times when always selecting to switch doors

Supporting Light and Dark modes

Colors are defined in the Assets and different colors can be set for the same color name for 'Any Appearance' and 'Dark' mode. There is no need to set any color for colors that are the same in either mode. These and SwiftUI colors are used to define color gradients used in the app.

 1struct Colors {
 2    static let bgGradient = LinearGradient(
 3        gradient: Gradient(
 4            colors: [
 5                Color("background1"),
 6                Color("background2"),
 7                Color("background2")
 8            ]),
 9        startPoint: .topLeading,
10        endPoint: .bottomTrailing)
11    
12    static let doorGradient = LinearGradient(
13        gradient: Gradient(colors: [Color("door1"),Color("door2")]),
14        startPoint: .center,
15        endPoint: .bottomTrailing)
16    
17    static let buttonGradient = LinearGradient(
18        gradient: Gradient(colors: [Color("door1"),Color("door2")]),
19        startPoint: .top,
20        endPoint: .bottom)
21    
22    static let disabledbuttonGradient = LinearGradient(
23        gradient: Gradient(colors: [
24            Color("button4"),
25            Color("button4").opacity(0.5)]),
26        startPoint: .top,
27        endPoint: .bottom)
28    
29    static let purpleAngularGradient = AngularGradient(
30        gradient: Gradient(colors: [
31            Color("barLoss"),
32            Color(.green)
33        ]),
34        center: .center,
35        startAngle: .degrees(0),
36        endAngle: .degrees(340))
37}

Asset colors are defined to support light and dark modes

Asset colors are defined to support light and dark modes

Previewing Light mode and Dark mode

Multiple previews of the view can be shown in Xcode and the preferredColorScheme method can be used to set the color scheme to Dark.

1struct MontyHallSimulatorView_Previews: PreviewProvider {
2    static var previews: some View {
3        MontyHallSimulatorView().preferredColorScheme(.dark)
4        
5        MontyHallSimulatorView()
6    }
7}

Xcode preview showing light and dark previews

Xcode preview showing light and dark previews

Monty Hall Simulatior in light and dark mode

Monty Hall Simulatior in light and dark mode

Running the simulation

Running the simulation is simply a matter of selecting one of the options for the number of simulations and setting the always switch doors toggle and selecting Run Simulation.

Monty Hall simulation shows switching doors is the winning strategy

Monty Hall simulation shows switching doors is the winning strategy

Conclusion

This article showed how to build a simulator to run multiple executions of the Monty Hall problem to show that switching doors is the better option. It built on the SwiftUI app that was developed for the Monty Hall problem and is described in Monty Hall Problem in SwiftUI - part 1. It can be seen that when the number of simulations is small, such as 10, that the percentage won can vary greatly. However, as the number of simulations increases, the percentage of success with always switching doors gets closer to 66%. This confirms the hypothesis that there is a 2 in 3 probability that the contestant has chosen the incorrect door initially. When one of the remaining doors is opened to reveal a goat, there is a 2 in 3 possibility that the car is behind the non-selected door.

Is it to your advantage to switch doors or stick with the door you have already chosen?

Yes. Always switch doors

Monty Hall Problem in SwiftUI - part 1

Eric Callanan — Sunday, 19 Sep 2021

I love the Monty Hall problem, even though I find it counter-intuitive. The Monty Hall problem is a form of probability puzzle named after American game show host Monty Hall. It is presented in the style of the game show, called Let's Make a Deal, where you are given a choice of selecting one of three doors. Behind one of the doors is the desired prize of a car, while behind the other two doors are goats. After you pick one of the three doors, the host opens one of the remaining doors to reveal a goat and asks you if you would like to switch doors.

The question is

Is it to your advantage to switch doors or stick with the door you have already chosen?

Standard Assumptions

Host must always open a door that was not picked by the contestant
Host must always open a door to reveal a goat
Host must always offer the chance to switch doors

Define a Model for Monty Hall Problem

First define a model for a Monty Hall puzzle. We use emoji for the car and goat images, so we define a Door struct that contains the emoji and a property for whether the door is open or closed. It also has a computed property for the label on the door, which is based on the emoji.

1struct Door {
2    let emoji: String
3    
4    var label: String {
5        return emoji == "🚗" ? "car" : "goat"
6    }
7    var open = false
8}

The MontyGameModel contains three of the Doors - initialized with two goats and one car. It has Boolean property to store whether or not the game is won. It has a function to get the door at a specified index. There are three mutating functions which modify the model; one to shuffle the doors; one to open one of the unselected doors and finally one to play the game. The function openGoatDoor is to simulate the host opening one of the unchosen doors that reveals a goat and not a car.

 1struct MontyGameModel {
 2    private var doors: [Door]
 3    private var gameWon = false
 4    
 5    init() {
 6        self.doors = [
 7            Door(emoji: "🐐"),
 8            Door(emoji: "🚗"),
 9            Door(emoji: "🐐")
10        ]
11    }
12    
13    var isGameWon: Bool {
14        get { gameWon }
15    }
16   
17    var doorCount: Int {
18        get { doors.count }
19    }
20    
21    // Shuffle the doors
22    mutating func shuffle() {
23        // Close all the doors
24        for i in doors.indices {
25            doors[i].open = false
26        }
27        gameWon = false
28        self.doors.shuffle()
29    }
30
31    func doorAtIndex(_ i:Int) -> Door {
32        return doors[i]
33    }
34
35    mutating func openGoatDoor(_ i: Int) -> Int {
36        let otherDoors = [0,1,2].filter { $0 != i }
37        var doorToOpenIndex = -1
38        if doors[i].emoji == "🚗" {
39            // open a random of the other doors
40            doorToOpenIndex = otherDoors.randomElement()!
41        }
42        else {
43            // open the goat of the remaining doors
44            doorToOpenIndex = otherDoors.filter { doors[$0].emoji != "🚗" }[0]
45        }
46        self.doors[doorToOpenIndex].open = true
47        return doorToOpenIndex
48    }
49    
50    mutating func playGame(_ i: Int) {
51        // Open the selected door
52        doors[i].open = true
53        gameWon = doors[i].emoji == "🚗"
54    }
55}

Define a Model for the metrics to store results for multiple repeat runs of the game.

 1struct MetricsModel {
 2    private var wonCount: Int
 3    private var lostCount: Int
 4    
 5    init() {
 6        wonCount = 0
 7        lostCount = 0
 8    }
 9    
10    var won: Int {
11        get { wonCount }
12    }
13    
14    var lost: Int {
15        get { lostCount }
16    }
17    
18    var played: Int {
19        get { wonCount + lostCount }
20    }
21    
22    var percentageWon: Double {
23        get {
24            if wonCount + lostCount == 0 {
25                return 0.0
26            }
27            else {
28                return 100.0 * Double(wonCount) / Double(wonCount + lostCount)
29            }
30        }
31    }
32    
33    mutating func gameOver(isWon: Bool) {
34        if isWon {
35            wonCount += 1
36        } else {
37            lostCount += 1
38        }
39    }
40    
41    mutating func reset() {
42        wonCount = 0
43        lostCount = 0
44    }
45}

Create a SwiftUI view for the door

The DoorView is composed of an open view and a closed view contained in a ZStack. The closed view rotates to almost 90 degrees when the door is opened using rotation3DEffect. Whether the door is open or closed is passen into the view along with the index of the door. The number displayed on the closed door is the index plus one to avoid zero-based numbering on doors.

The view also has a button under each door to indicate whether or not the door is selected. This is bound to the selected property, which is determined by the selected index in MontyHallGameView. Binding is used to create a two-way connection between the door and the SwiftUI view so the selected index in MontyHallGameView is updated when the select button is selected on a door. The button under each door uses SF Symbols as either an empty circle or a star in a circle depending on whether or not the door is selected.

 1struct DoorView: View {
 2    var number: Int
 3    var door: Door
 4    var isGameOver: Bool
 5    @Binding var selected: Int
 6    
 7    var body: some View {
 8        Button(action: {
 9            selected = number
10        }) {
11            VStack {
12                ZStack {
13                    DoorOpenView(emoji: door.emoji, label: door.label)
14                    DoorClosedView(doorNumber: number + 1)
15                        .rotation3DEffect(
16                            Angle.degrees(door.open ? -87 : 0),
17                            axis: (0,1,0),
18                            anchor: .leading,
19                            perspective: 0.2
20                        )
21                }
22                .animation(.easeInOut(duration: door.open ? 1.0 : 0.0))
23                
24                Image(systemName: selected == number ? "checkmark.seal.fill" : "seal")
25                    .font(.system(size: 30))
26                    .foregroundColor(Color("mainText"))
27                    .padding(.vertical, 5)
28            }
29        }
30        .buttonStyle(DoorButtonStyle())
31        .disabled(isGameOver || door.open || selected == number)
32    }
33}

The layout and display of an open door.

 1struct DoorOpenView: View {
 2    var emoji: String
 3    var label: String
 4    
 5    var body: some View {
 6        GeometryReader { gr in
 7            let minSize = min(gr.size.width, gr.size.height)
 8            let emojiSize = minSize * 0.8
 9            let labelSize = minSize * 0.2
10            let borderWidth = minSize * 0.008
11            let pad = gr.size.height * 0.15
12            ZStack {
13                ArchShape()
14                    .fill(Color("innerDoor"))
15                ArchShape()
16                    .stroke(Color("door2").opacity(0.5), lineWidth: borderWidth)
17                Text(emoji)
18                    .font(.system(size: emojiSize))
19                    .offset(x: 0, y: -pad)
20                Text(label.capitalized)
21                    .font(.system(size: labelSize))
22                    .foregroundColor(Color("border"))
23                    .offset(x: 0, y: pad*2.2)
24            }
25        }
26    }
27}

The layout and display of a closed door.

 1struct DoorClosedView: View {
 2    var doorNumber: Int
 3    
 4    var body: some View {
 5        GeometryReader { gr in
 6            let minSize = min(gr.size.width, gr.size.height)
 7            let handleOffset = minSize * 0.35
 8            let borderWidth = minSize * 0.008
 9            let handleSize = minSize * 0.07
10            let fontSize = minSize * 0.6
11            ZStack {
12                ArchShape()
13                    .fill(Colors.doorGradient)
14                    .shadow(color: Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)).opacity(0.3), radius: 3, x:-1, y:-1)
15                    .shadow(color: .black, radius: 3, x:5, y:5)
16                ArchShape()
17                    .stroke(Color("border"), lineWidth: borderWidth)
18                    .scaleEffect(CGSize(width: 0.99, height: 0.99), anchor: .center)
19                Circle()
20                    .fill(Color("border"))
21                    .frame(width: handleSize, height: handleSize)
22                    .offset(x: handleOffset, y: 0.0)
23                Text("\(doorNumber)")
24                    .foregroundColor(.white)
25                    .font(.system(size: fontSize, weight: .heavy, design: .rounded))
26            }
27        }
28    }
29}

 1struct ArchShape: Shape {
 2    func path(in rect: CGRect) -> Path {
 3        let w = rect.width
 4        let h = rect.height
 5        var path = Path()
 6        path.move(to: CGPoint(x: 0, y: h))
 7        path.addLine(to: CGPoint(x: 0, y: h*0.3))
 8        path.addCurve(to: CGPoint(x: w, y: h*0.3),
 9                      control1: CGPoint(x: 0, y: -(h*0.1)),
10                      control2: CGPoint(x: w, y: -(h*0.1)))
11        path.addLine(to: CGPoint(x: w, y: h))
12        path.closeSubpath()
13        return path
14    }
15}
16
17
18struct DoorButtonStyle: ButtonStyle {
19    func makeBody(configuration: Configuration) -> some View {
20        configuration.label
21            .scaleEffect(configuration.isPressed ? 0.98 : 1.0)
22    }
23}

SwiftUI view for Door with open and closed states

SwiftUI view for Door with open and closed states

Define the ViewModels

The MontyHallViewModel ViewModel creates the model and exposes read-only properties for the Monty Hall Doors. It also has functions to shuffle the doors to start a new game and to open a door by the host and to play the game. These call the relevant functions in the model. The ViewModel also exposes the result as a read-only property.

 1class MontyHallViewModel: ObservableObject {
 2    @Published private var montyModel: MontyGameModel
 3
 4    init() {
 5        montyModel = MontyGameModel()
 6    }
 7
 8    var isGameWon: Bool {
 9        get { montyModel.isGameWon }
10    }
11    
12    var doorCount: Int {
13        get { montyModel.doorCount }
14    }
15    
16    func door(index: Int) -> Door {
17        return montyModel.doorAtIndex(index)
18    }
19
20    func shuffle() {
21        montyModel.shuffle()
22    }
23    
24    func openDoor(selectedDoor i: Int) {
25        _ = montyModel.openGoatDoor(i)
26    }
27    
28    func playGame(selectedDoor i: Int) {
29        montyModel.playGame(i)
30    }
31}

The MetricsViewModel contains an instance of MetricsModel and exposes readonly properties to retrieve the results of multiple games played. It also provides methods reset the metrics and update the metrics when the game is over.

 1class MetricsViewModel: ObservableObject {
 2    @Published private var metricsModel: MetricsModel
 3
 4    init() {
 5        metricsModel = MetricsModel()
 6    }
 7
 8    var won: Int {
 9        get { metricsModel.won }
10    }
11    
12    var lost: Int {
13        get { metricsModel.lost }
14    }
15    
16    var played: Int {
17        get { metricsModel.played }
18    }
19    
20    var percentageWon: Double {
21        get { metricsModel.percentageWon }
22    }
23    
24    func gameOver(isWon: Bool) {
25        metricsModel.gameOver(isWon: isWon)
26    }
27    
28    func reset() {
29        metricsModel.reset()
30    }
31}

Create the Game

There is quite a bit of code in MontyHallGameView. The View does not know anything about the Model but has a property for the MontyHallViewModel and a new ViewModel is instantiated when the View is created. The montyHall property is marked with the @ObservedObject property wrapper, so the view can be notified when the state of the object has changed.

The "Open a door" button is disabled until the contestant has chosen a door. This then opens one of the unselected doors to reveal a goat. The "Play" button completes the game and reveals what is behind the selected door and whether the contestant won or lost.

 1struct MontyHallGameView: View {
 2    @ObservedObject private var montyHall: MontyHallViewModel
 3    @ObservedObject private var metrics: MetricsViewModel
 4    @State private var selected = -1
 5    @State private var doorOpened = false
 6    @State private var gameOver = false
 7    
 8    init() {
 9        self.montyHall = MontyHallViewModel()
10        self.metrics = MetricsViewModel()
11    }
12
13    var body: some View {
14        ZStack {
15            Colors.bgGradient
16                .edgesIgnoringSafeArea(.all)
17            
18            VStack {
19                Spacer().frame(height:20)
20                
21                Text("Monty Hall Problem")
22                    .foregroundColor(Color("mainText"))
23                    .font(.custom("Helvetica Neue", size: 36, relativeTo: .largeTitle))
24                    .fontWeight(.bold)
25                
26                HStack(spacing:20) {
27                    ForEach(0..<montyHall.doorCount) { i in
28                        VStack {
29                            DoorView(number: i,
30                                     door: montyHall.door(index: i),
31                                     isGameOver: gameOver,
32                                     selected: $selected)
33                                .frame(width:100, height:200)
34                        }
35                    }
36                }
37                
38                Spacer().frame(height:20)
39                
40                ZStack {
41                    Spacer()
42                        .frame(height:40)
43                    if gameOver {
44                        Text(montyHall.isGameWon ? "You Won" : "You Loose")
45                    }
46                }
47                .foregroundColor(Color("mainText"))
48                .font(.largeTitle)
49                
50                VStack {
51                    Button( action: {
52                        selected = -1
53                        montyHall.shuffle()
54                        doorOpened = false
55                        gameOver = false
56                    })
57                    {
58                        ActionButtonView(label: "New Game",
59                                         symbol: "asterisk")
60                    }
61                    
62                    Button( action: {
63                        montyHall.openDoor(selectedDoor: selected)
64                        doorOpened = true
65                    })
66                    {
67                        ActionButtonView(label: "Open a door",
68                                         symbol: "arrow.right.square")
69                    }
70                    .disabled(gameOver || doorOpened || selected < 0)
71
72                    Button( action: {
73                        montyHall.playGame(selectedDoor: selected)
74                        gameOver = true
75                        metrics.gameOver(isWon: montyHall.isGameWon)
76                    })
77                    {
78                        ActionButtonView(label: "play", symbol: "play.fill")
79                    }
80                    .disabled(gameOver || selected < 0)
81                }
82                .buttonStyle(ActionButtonStyle())
83                
84                Spacer().frame(height:30)
85                
86                Rectangle()
87                    .fill(Color("background1").opacity(0.3))
88                    .frame(height: 5)
89
90                GameMetricsView(metrics: metrics)
91                    .foregroundColor(Color("mainText"))
92
93                
94                Spacer()
95            }
96        }
97    }
98}

A button view is defined to ensure consistent appearance of buttons and uses a ButtonStyle.

 1struct ActionButtonView: View {
 2    var label: String
 3    var symbol: String
 4    
 5    var body: some View {
 6        HStack {
 7            Image(systemName: symbol).frame(width: 60)
 8            Text(label)
 9            Spacer()
10        }
11    }
12}
13
14
15struct ActionButtonStyle: ButtonStyle {
16    @Environment(\.isEnabled) var isEnabled
17    
18    func makeBody(configuration: Configuration) -> some View {
19        configuration.label
20            .font(.system(size: 20, weight: .bold, design: .rounded))
21            .frame(height:30)
22            .foregroundColor(.white)
23            .padding(5)
24            .frame(width: 250)
25            .background(isEnabled ? Colors.buttonGradient :  Colors.disabledbuttonGradient)
26            .cornerRadius(25)
27            .shadow(color: isEnabled ? .black : .clear, radius:2, x:3.0, y:3.0)
28            .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
29    }
30}

The metrics from multiple games are laid out in a separate GameMetricsView with a button to reset the metrics. The view is bound to MetricsViewModel and calls the reset function when the button is pressed.

 1struct GameMetricsView: View {
 2    @ObservedObject var metrics: MetricsViewModel
 3    
 4    var body: some View {
 5        VStack(spacing:5) {
 6            Text("Games played Metrics")
 7                .font(.custom("Helvetica Neue", size: 28, relativeTo: .largeTitle))
 8                .fontWeight(.bold)
 9            
10            HStack(spacing: 10) {
11                Text("Played:")
12                    .frame(width:150, alignment: .trailing)
13                Text("\(metrics.played)")
14                    .frame(width:100, alignment: .leading)
15                Spacer()
16            }
17            HStack(spacing: 10) {
18                Text("Won:")
19                    .frame(width:150, alignment: .trailing)
20                Text("\(metrics.won)")
21                    .frame(width:100, alignment: .leading)
22                Spacer()
23            }
24            HStack(spacing: 10) {
25                Text("Lost:")
26                    .frame(width:150, alignment: .trailing)
27                Text("\(metrics.lost)")
28                    .frame(width:100, alignment: .leading)
29                Spacer()
30            }
31            HStack(spacing: 10) {
32                Text("Percentage Won:")
33                    .frame(width:150, alignment: .trailing)
34                Text("\(metrics.percentageWon, specifier: "%.1f")%")
35                    .frame(width:100, alignment: .leading)
36                Spacer()
37            }
38            
39            Button("Reset Metrics") {
40                metrics.reset()
41            }
42            .frame(width:200)
43            .buttonStyle(ActionButtonStyle())
44        }
45        .frame(width:300)
46    }
47}

iOS app to play Monty Hall game

iOS app to play Monty Hall game

Monty Hall Problem demo

Monty Hall Problem demo

Conclusion

Back to the question:

Is it to your advantage to switch doors or stick with the door you have already chosen?

The answer is that you should always switch doors. The easiest way I have to explain it is that when you select a door, there is 1 in 3 probability (33%) that this is the correct door. Resulting in a 2 in 3 probability (66%) that the car is behind the other two doors. When the host opens one of those other two doors, nothing in the setup has changed. There is still a 1 in 3 probability that you have selected the correct door and a 2 in 3 probability that the car is behind the other two doors. We now know that it is not behind the one the host opened. So of the two remaining closed doors, there is a 1 in 3 probability that the car is behind the door you have chosen and a 2 in 3 probability that the car is behind the other door. So switch doors when the host asks you for a 66% chance of getting the car.

Yes. Always switch doors

In part 2 of this article, I will modify the app to run a few simulations to prove that switching doors is the correct strategy.