How would I reformat the code to handle custom images and not system images in my array, so i may replace the titles for custom png logos or path, mp4, etc... but for now just custom images?
I want to use my own icons down the road for online database access and menus sharing other menu functions like palettes in photoshop create your atom on this menu go to another menu, apply thermal dynamics, go to another menu apply simulations etc...
struct Option: Hashable, Identifiable {
// Identifier for Option !! MUST be unique
let id: Int
let title: String
let imageName: String
}
struct SubOption: Hashable, Identifiable {
// Identifier for Option !! MUST be unique
let id: Int
let title: String
let imageName: String
}
struct ContentView: View {
@State var currentOption: Int = 0
@State var currentSubOption: Int = 0
let options: [Option] = [
.init(id: 1, title: "DART Meadow", imageName: "sun.max.fill"),
.init(id: 2, title: "Research", imageName: "flame"),
.init(id: 3, title: "Navigation", imageName: "moon.stars.fill"),
.init(id: 4, title: "Shelf", imageName: "archivebox"),
.init(id: 5, title: "Chest", imageName: "shippingbox"),
.init(id: 6, title: "Crate", imageName: "bonjour"),
.init(id: 7, title: "Manufacturing", imageName: "gear"),
.init(id: 8, title: "Warehouse", imageName: "archivebox.fill"),
.init(id: 9, title: "Journal", imageName: "note.text"),
]
let suboptions: [SubOption] = [
.init(id: 10, title: "Sigcothian", imageName: "flame"),
.init(id: 11, title: "DART Edge", imageName: "flame"),
.init(id: 12, title: "Orbit", imageName: "flame"),
.init(id: 13, title: "Mass", imageName: "flame"),
.init(id: 14, title: "Volume", imageName: "flame"),
.init(id: 15, title: "Weight", imageName: "flame"),
.init(id: 16, title: "Density", imageName: "flame"),
.init(id: 17, title: "ATM 26", imageName: "flame"),
.init(id: 18, title: "Break", imageName: "flame"),
.init(id: 19, title: "Gas", imageName: "flame"),
.init(id: 20, title: "Liquid", imageName: "flame"),
.init(id: 21, title: "Solid", imageName: "flame"),
.init(id: 22, title: "Crystalline", imageName: "flame"),
.init(id: 23, title: "Nozzle", imageName: "flame"),
.init(id: 24, title: "Decibel", imageName: "flame"),
]
var body: some View {
VStack(alignment: .leading) {
HStack(alignment: .top) {
NavigationView{
ListView(options: options, currentSelection: $currentOption)
switch (currentOption) {
case 1:
MainView()
case 2:
NavigationView{
ResearchSubView(suboptions: suboptions, currentSubSelection: $currentSubOption)
switch (currentSubOption) {
case 10:
ScrollView( .vertical) {
Text("Sigcothian")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 11:
ScrollView( .vertical) {
Text("DART Edge")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 12:
ScrollView( .vertical) {
OrbitNodeView()
}
case 13:
ScrollView( .vertical) {
Text("Mass")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 14:
ScrollView( .vertical) {
Text("Volume")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 15:
ScrollView( .vertical) {
Text("Weight")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 16:
ScrollView( .vertical) {
Text("Density")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 17:
ScrollView( .vertical) {
ATM26NodeView()
}
case 18:
ScrollView( .vertical) {
Text("Break")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 19:
ScrollView( .vertical) {
Text("Gas")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 20:
ScrollView( .vertical) {
Text("Liquid")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 21:
ScrollView( .vertical) {
Text("Solid")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 22:
ScrollView( .vertical) {
Text("Crystalline")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 23:
ScrollView( .vertical) {
NozzleNodeView()
.padding(.leading, 15)
.padding(.trailing, 15)
Content2View()
.padding(.top, 60)
}
case 24:
ScrollView( .vertical) {
Text("Decibel")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
default:
MainView()
}
}
case 3:
ScrollView( .vertical) {
Text("Navigation")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 4:
ScrollView( .vertical) {
Text("Shelf")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 5:
ScrollView( .vertical) {
Text("Chest")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 6:
ScrollView( .vertical) {
Text("Crate")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 7:
ScrollView( .vertical) {
Text("Manufacturing")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 8:
ScrollView( .vertical) {
Text("Warehouse")
.font(.largeTitle)
.bold()
.colorInvert()
.padding(.top, 60)
Image("Cotharticrenmindnode600")
}
case 9:
JournalView()
default:
MainView()
}
}.background(Color.white)
}
}
Spacer()
}
}
struct MainView: View {
var body: some View{
VStack(alignment: .leading) {
HStack(alignment: .bottom) {
Image("CotharticrenArcLakeMainMenu900")
.shadow(radius: 6)
}
}.frame(width: 900, height: 670, alignment: .center).padding(.top, 60)
.background(Color.white)
Spacer()
}
}
struct ListView: View {
let options: [Option]
@Binding var currentSelection: Int
var body: some View{
ScrollView( .vertical) {
VStack(alignment: .leading) {
VStack(alignment: .leading) {
HStack(alignment: .top) {
HStack(alignment: .top) {
VStack(alignment: .trailing) {
Circle()
.stroke(Color.init(red: 0.9, green: 0.95, blue: 0.2, opacity: 1), lineWidth: 2)
.alignmentGuide(HorizontalAlignment.myAlignment)
{ d in d[.leading] }
.alignmentGuide(VerticalAlignment.myAlignment)
{ d in d[.bottom] }
.frame(width: 50, height: 50)
Circle()
.stroke(Color.init(red: 0.25, green: 0.9, blue: 0.2, opacity: 1), lineWidth: 2)
.alignmentGuide(HorizontalAlignment.myAlignment)
{ d in d[.leading] }
.alignmentGuide(VerticalAlignment.myAlignment)
{ d in d[.bottom] }
.frame(width: 25, height: 25)
VStack(alignment: .leading) {
Circle()
.stroke(Color.init(red: 0.1, green: 0.1, blue: 1, opacity: 1), lineWidth: 2)
.alignmentGuide(HorizontalAlignment.myAlignment)
{ d in d[.leading] }
.alignmentGuide(VerticalAlignment.myAlignment)
{ d in d[.bottom] }
.frame(width: 75, height: 75)
}
}
}
HStack(alignment: .top) {
Image("dm120")
.shadow(radius: 3)
.padding(.top, 10)
}
.padding(.top, 20)
.padding(.trailing, 10)
}.padding(.top, 20).padding(.leading, 10)
Divider().padding(5)
HStack(alignment: .center) {
VStack(alignment: .center) {
Image("Cotharticrenmindnode150").padding(20)
HStack(alignment: .center) {
Text("You've never plotted an Edge?")
}
}
}
}.shadow(radius: 3)
Divider().padding(12)
//Menu
VStack(alignment: .leading) {
ForEach(options, id: \.self) {option in
HStack {
Image(systemName: option.imageName)
.frame(width: 20)
Text(option.title)
// Don't even have to use current = options[currentSelection] anymore:
.foregroundColor(currentSelection == option.id ? .accentColor : .primary)
}
.padding(8)
.onTapGesture {
// Set the currentSelection to the ID of the option
currentSelection = option.id
}
}
}
}
}.frame(width: 235, height: 670, alignment: .leading).padding(5)
}
}
struct ResearchSubView: View {
let suboptions: [SubOption]
@Binding var currentSubSelection: Int
var body: some View{
ScrollView( .vertical) {
//Menu
VStack(alignment: .leading) {
ForEach(suboptions, id: \.self) {suboption in
HStack {
Image(systemName: suboption.imageName)
.frame(width: 20)
.colorInvert()
Text(suboption.title)
.colorInvert()
// Don't even have to use current = options[currentSelection] anymore:
.foregroundColor(currentSubSelection == suboption.id ? .accentColor : .primary)
}
.padding(8)
.onTapGesture {
// Set the currentSelection to the ID of the option
currentSubSelection = suboption.id
}
}
}
}.frame(width: 120, height: 670, alignment: .leading).padding(5)
}
}