Codebase Optimization: UI/UX Enhancements and Cross-Device Compatibility

.gitignore

@@ -42,3 +42,4 @@ xcuserdata
 # Carthage/Checkouts
 
 Carthage/Build
+Board Solver/.DS_Store

Board Solver.xcodeproj/project.pbxproj

@@ -569,10 +569,10 @@
 				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
 				SUPPORTS_MACCATALYST = NO;
 				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
-				SUPPORTS_XR_DESIGNED_FOR_IPHONE_IPAD = NO;
+				SUPPORTS_XR_DESIGNED_FOR_IPHONE_IPAD = YES;
 				SWIFT_EMIT_LOC_STRINGS = YES;
 				SWIFT_VERSION = 5.0;
-				TARGETED_DEVICE_FAMILY = 1;
+				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Debug;
 		};
@@ -605,10 +605,10 @@
 				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
 				SUPPORTS_MACCATALYST = NO;
 				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
-				SUPPORTS_XR_DESIGNED_FOR_IPHONE_IPAD = NO;
+				SUPPORTS_XR_DESIGNED_FOR_IPHONE_IPAD = YES;
 				SWIFT_EMIT_LOC_STRINGS = YES;
 				SWIFT_VERSION = 5.0;
-				TARGETED_DEVICE_FAMILY = 1;
+				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Release;
 		};

Board Solver/LaunchScreen.storyboard

@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="22505" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="Y6W-OH-hqX">
-    <device id="retina6_12" orientation="portrait" appearance="light"/>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="32700.99.1234" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="Y6W-OH-hqX">
+    <device id="retina6_72" orientation="portrait" appearance="dark"/>
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22504"/>
-        <capability name="Named colors" minToolsVersion="9.0"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22685"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -13,33 +13,27 @@
             <objects>
                 <viewController id="Y6W-OH-hqX" sceneMemberID="viewController">
                     <view key="view" contentMode="scaleToFill" id="5EZ-qb-Rvc">
-                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
+                        <rect key="frame" x="0.0" y="0.0" width="430" height="932"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" fixedFrame="YES" image="image1" translatesAutoresizingMaskIntoConstraints="NO" id="dbk-af-OVh">
-                                <rect key="frame" x="47" y="281" width="300" height="250"/>
-                                <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
-                                <rect key="contentStretch" x="1" y="0.0" width="1" height="1"/>
-                            </imageView>
-                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" fixedFrame="YES" image="name" translatesAutoresizingMaskIntoConstraints="NO" id="Nnf-Yk-nEJ">
-                                <rect key="frame" x="18" y="539" width="356" height="30"/>
-                                <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" insetsLayoutMarginsFromSafeArea="NO" image="LaunchScreenLogo" translatesAutoresizingMaskIntoConstraints="NO" id="nal-wj-yGN">
+                                <rect key="frame" x="0.0" y="0.0" width="430" height="932"/>
+                                <autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
                             </imageView>
                         </subviews>
                         <viewLayoutGuide key="safeArea" id="vDu-zF-Fre"/>
-                        <color key="backgroundColor" name="white-bg"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                     </view>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="Ief-a0-LHa" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="35.877862595419849" y="3.5211267605633805"/>
+            <point key="canvasLocation" x="35.206611570247937" y="2.877697841726619"/>
         </scene>
     </scenes>
     <resources>
-        <image name="image1" width="357" height="287"/>
-        <image name="name" width="391" height="30"/>
-        <namedColor name="white-bg">
-            <color red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-        </namedColor>
+        <image name="LaunchScreenLogo" width="394" height="852"/>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
     </resources>
 </document>

Board Solver/Preview Content/Assets.xcassets/LaunchScreenLogo.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "Asset 1 7.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Asset 1 7 (1).png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Asset 1 7 (2).png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Board Solver/Preview Content/Assets.xcassets/MenuViewLogo.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "Asset 1 8.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Asset 1 8 (1).png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Asset 1 8 (2).png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Board Solver/Views/AboutView.swift

@@ -8,58 +8,85 @@
 import SwiftUI
 
 struct AboutView: View {
+
+    // Environment variable to handle view dismissal
     @Environment(\.dismiss) private var dismiss
+    @Environment(\.colorScheme) var colorScheme
 
     var body: some View {
-        ZStack {
-            //Background
-            Color.white.ignoresSafeArea(.all)
+        GeometryReader { geometry in
+            // Calculate scaling factors based on iPhone 13 Pro Max dimensions
+            let baseWidth: CGFloat = 428
+            let baseHeight: CGFloat = 926
+            let scaleFactor = min(geometry.size.width / baseWidth, geometry.size.height / baseHeight)
 
-            VStack {
+            ZStack {
+                // Set background color to white and ignore safe area
+                Color.white.ignoresSafeArea(.all)
 
-                HStack {
-                    Button {
-                        dismiss()
-                    } label: {
-                        Rectangle()
-                            .fill(.gray)
-                            .frame(width: 80, height: 40)
-                            .cornerRadius(15)
-                            .overlay(Group{
-                                Text("BACK")
-                                    .font(.custom("PatrickHandSC-Regular", size: 25))
-                                    .foregroundStyle(.white)
-                                RoundedRectangle(cornerRadius: 15)
-                                    .stroke(Color.black, lineWidth: 2.5)
+                VStack {
+                    HStack {
+                        // Back button to dismiss the view
+                        Button {
+                            dismiss()
+                        } label: {
+                            Rectangle()
+                                .fill(.gray)
+                                .frame(width: 80 * scaleFactor, height: 40 * scaleFactor)
+                                .cornerRadius(15 * scaleFactor)
+                                .overlay(Group {
+                                    Text("BACK")
+                                        .font(.custom("PatrickHandSC-Regular", size: 25 * scaleFactor))
+                                        .foregroundStyle(.white)
+                                    RoundedRectangle(cornerRadius: 15 * scaleFactor)
+                                        .stroke(Color.black, lineWidth: 2.5 * scaleFactor)
                                 })
+                        }
+                        .padding(.leading, 15 * scaleFactor)
+                        .padding(.top, 63 * scaleFactor)
+                        .padding(.bottom, 20 * scaleFactor)
+
+                        Spacer()
                     }
-                    .padding()
 
-                    Spacer()
-                }
-
-                Text("About The BOARD SOLVER Project")
-                    .font(.custom("PatrickHandSC-Regular", size: 40))
-                    .foregroundColor(Color.black)
-                    .multilineTextAlignment(.center)
-                    .monospacedDigit()
-                ScrollView {
-                    Text("Do you ever get stuck trying to decide on your next move in a board game? Board Solver Mobile (BSM), aims to be your assistant for strategic board games. Leveraging the power of computer vision, BSM analyzes game states through your iOS device's camera and suggests the next optimal move based on pre-trained algorithms.\n\tBSM currently supports the popular game of Connect4, with hopes to support more games in the future. For each game, BSM considers various factors like piece placement, potential threats, and strategic goals to recommend the move with the highest chance of success. The difficulty level of the solver currently only returns the best move, but we plan to make the diffculty of the opponent be adjustable, allowing you to test your skills against a range of challenges.\n\tThis project is a great tool for both casual and experienced board game players. Whether you're looking for a helping hand to improve your game or simply want to explore different strategic options, BSM can be your guide to becoming a board game champion!")
-                        .font(.custom("PatrickHandSC-Regular", size: 20))
-                        .foregroundColor(Color.black)
-                    .monospacedDigit()
-                }.padding()
-
-                HStack{
-                    Image("github-mark")
-                        .resizable()
-                        .frame(width: 20, height: 20)
-                        .scaledToFit()
+                    // Title text for the About page
+                    Text("About The BOARD SOLVER Project")
+                        .font(.custom("PatrickHandSC-Regular", size: 40 * scaleFactor))
+                        .foregroundColor(colorScheme == .dark ? .white : .black)
+                        .multilineTextAlignment(.center)
+                        .monospacedDigit()
+                        .padding(.horizontal, 20 * scaleFactor)
 
-                    Link("Visit our GitHub!", destination: URL(string: "https://github.com/henryrobbinss/BoardSolverMobile")!)
+                    // Scrollable text containing the project description
+                    ScrollView {
+                        Text("Do you ever get stuck trying to decide on your next move in a board game? Board Solver Mobile (BSM), aims to be your assistant for strategic board games. Leveraging the power of computer vision, BSM analyzes game states through your iOS device's camera and suggests the next optimal move based on pre-trained algorithms.\n\tBSM currently supports the popular game of Connect4, with hopes to support more games in the future. For each game, BSM considers various factors like piece placement, potential threats, and strategic goals to recommend the move with the highest chance of success. The difficulty level of the solver currently only returns the best move, but we plan to make the difficulty of the opponent adjustable, allowing you to test your skills against a range of challenges.\n\tThis project is a great tool for both casual and experienced board game players. Whether you're looking for a helping hand to improve your game or simply want to explore different strategic options, BSM can be your guide to becoming a board game champion!")
+                            .font(.custom("PatrickHandSC-Regular", size: 20 * scaleFactor))
+                            .foregroundColor(colorScheme == .dark ? .white : .black)
+                            .monospacedDigit()
+                            .padding(.horizontal, 20 * scaleFactor)
+                    }
+                    .padding(.vertical, 20 * scaleFactor)
+
+                    // HStack containing the GitHub link
+                    HStack {
+                        Image("github-mark")
+                            .resizable()
+                            .frame(width: 20 * scaleFactor, height: 20 * scaleFactor)
+                            .scaledToFit()
+
+                        Link("Visit our GitHub!",
+                             destination: URL(string: "https://github.com/henryrobbinss/BoardSolverMobile")!)
+                            .font(.custom("PatrickHandSC-Regular", size: 18 * scaleFactor))
+                    }
+                    .padding(.bottom, 35 * scaleFactor)
                 }
+                .background(colorScheme == .dark ? Color.black : Color.white)
+                // Center the VStack within the GeometryReader
+                .frame(width: geometry.size.width, height: geometry.size.height)
+                .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
             }
         }
+        .ignoresSafeArea()
     }
 }