From 7b345a8e98b1c8af8e2eb02aa656de90fe510d32 Mon Sep 17 00:00:00 2001 From: talksik Date: Fri, 17 Dec 2021 12:34:44 -0800 Subject: [PATCH] moving the waves background out and starting phone verification ui --- nirvana-ios.xcodeproj/project.pbxproj | 8 ++ nirvana-ios/ContentView.swift | 14 ++- .../InnerCircle/InnerCircleView.swift | 87 +---------------- nirvana-ios/Views/PhoneVerificationView.swift | 35 +++++++ .../Views/WavesGlassBackgroundView.swift | 93 +++++++++++++++++++ 5 files changed, 146 insertions(+), 91 deletions(-) create mode 100644 nirvana-ios/Views/PhoneVerificationView.swift create mode 100644 nirvana-ios/Views/WavesGlassBackgroundView.swift diff --git a/nirvana-ios.xcodeproj/project.pbxproj b/nirvana-ios.xcodeproj/project.pbxproj index 6e95385..ef824bb 100644 --- a/nirvana-ios.xcodeproj/project.pbxproj +++ b/nirvana-ios.xcodeproj/project.pbxproj @@ -33,6 +33,8 @@ 89BCABE2276B3CB0009E9B10 /* NavigationStack in Frameworks */ = {isa = PBXBuildFile; productRef = 89BCABE1276B3CB0009E9B10 /* NavigationStack */; }; 89BCABE5276B3D58009E9B10 /* InnerCircleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BCABE4276B3D58009E9B10 /* InnerCircleView.swift */; }; 89BCABE7276B3D64009E9B10 /* InnerCircleViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BCABE6276B3D64009E9B10 /* InnerCircleViewModel.swift */; }; + 89BCABEB276D2A09009E9B10 /* PhoneVerificationView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BCABEA276D2A07009E9B10 /* PhoneVerificationView.swift */; }; + 89BCABED276D2B05009E9B10 /* WavesGlassBackgroundView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BCABEC276D2B05009E9B10 /* WavesGlassBackgroundView.swift */; }; 89BDCDE527695DB900577829 /* NirvanaImage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BDCDE427695DB900577829 /* NirvanaImage.swift */; }; 89BDCDE72769616600577829 /* UIImage+Extension.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BDCDE62769616600577829 /* UIImage+Extension.swift */; }; 89BDCDEA27697F9C00577829 /* UserMenu.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89BDCDE927697F9C00577829 /* UserMenu.swift */; }; @@ -71,6 +73,8 @@ 89B46E70276893E200B74255 /* AuthSessionStore.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AuthSessionStore.swift; sourceTree = ""; }; 89BCABE4276B3D58009E9B10 /* InnerCircleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InnerCircleView.swift; sourceTree = ""; }; 89BCABE6276B3D64009E9B10 /* InnerCircleViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InnerCircleViewModel.swift; sourceTree = ""; }; + 89BCABEA276D2A07009E9B10 /* PhoneVerificationView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PhoneVerificationView.swift; sourceTree = ""; }; + 89BCABEC276D2B05009E9B10 /* WavesGlassBackgroundView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WavesGlassBackgroundView.swift; sourceTree = ""; }; 89BDCDE427695DB900577829 /* NirvanaImage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NirvanaImage.swift; sourceTree = ""; }; 89BDCDE62769616600577829 /* UIImage+Extension.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIImage+Extension.swift"; sourceTree = ""; }; 89BDCDE927697F9C00577829 /* UserMenu.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserMenu.swift; sourceTree = ""; }; @@ -160,6 +164,8 @@ 891A16052765726800B26659 /* Templates */, 891A16042765725D00B26659 /* WelcomeView */, 891A1608276572BB00B26659 /* HomeView */, + 89BCABEA276D2A07009E9B10 /* PhoneVerificationView.swift */, + 89BCABEC276D2B05009E9B10 /* WavesGlassBackgroundView.swift */, ); path = Views; sourceTree = ""; @@ -367,6 +373,7 @@ 89F05B9F276A8D360002E9C7 /* Contact.swift in Sources */, 891A160327656FC700B26659 /* HomeView.swift in Sources */, 891A160B2765732700B26659 /* HomeViewModel.swift in Sources */, + 89BCABEB276D2A09009E9B10 /* PhoneVerificationView.swift in Sources */, 892179E62765FECD001E6C60 /* FooterControlsViewModel.swift in Sources */, 891A15F5276557AB00B26659 /* colors.swift in Sources */, 89288ECB27675B9F00E962C4 /* OnboardingTemplateView.swift in Sources */, @@ -379,6 +386,7 @@ 891A16132765A44300B26659 /* ChatsCarouselViewModel.swift in Sources */, 89F05B9B276A87920002E9C7 /* ContactsViewModel.swift in Sources */, 891A15E127653A7000B26659 /* nirvana_iosApp.swift in Sources */, + 89BCABED276D2B05009E9B10 /* WavesGlassBackgroundView.swift in Sources */, 89F05BA6276ACD830002E9C7 /* ContactsPickerView.swift in Sources */, 89BDCDEA27697F9C00577829 /* UserMenu.swift in Sources */, 89BCABE7276B3D64009E9B10 /* InnerCircleViewModel.swift in Sources */, diff --git a/nirvana-ios/ContentView.swift b/nirvana-ios/ContentView.swift index 4f8e25a..ae6bbb2 100644 --- a/nirvana-ios/ContentView.swift +++ b/nirvana-ios/ContentView.swift @@ -12,14 +12,12 @@ struct ContentView: View { var body: some View { ZStack { - InnerCircleView() -// ContactsView() // TEMPORARY FOR TESTING -// switch self.authSessionStore.sessionState { -// case SessionState.isAuthenticated: -// HomeView() -// case SessionState.isLoggedOut: -// WelcomeView() -// } + switch self.authSessionStore.sessionState { + case SessionState.isAuthenticated: + HomeView() + case SessionState.isLoggedOut: + WelcomeView() + } }.animation(.default, value:authSessionStore.sessionState) } } diff --git a/nirvana-ios/Views/HomeView/InnerCircle/InnerCircleView.swift b/nirvana-ios/Views/HomeView/InnerCircle/InnerCircleView.swift index 571da39..b17576d 100644 --- a/nirvana-ios/Views/HomeView/InnerCircle/InnerCircleView.swift +++ b/nirvana-ios/Views/HomeView/InnerCircle/InnerCircleView.swift @@ -9,10 +9,9 @@ import SwiftUI struct InnerCircleView: View { let universalSize = UIScreen.main.bounds - // y position of where waves should start - let baseLineY = UIScreen.main.bounds.height * 0.95 - @State var animateWaves = false + + // TESTING // users who will have a thumping thing because they sent a message @@ -21,62 +20,11 @@ struct InnerCircleView: View { var body: some View { ZStack { // background - ZStack { - AngularGradient( - gradient: Gradient( - colors: [NirvanaColor.solidBlue, NirvanaColor.dimTeal, Color.orange, NirvanaColor.solidBlue]), - center: .center, - angle: .degrees(120)) - - LinearGradient(gradient: Gradient( - colors: [NirvanaColor.white.opacity(0), NirvanaColor.white.opacity(1.0)]), startPoint: .bottom, endPoint: .top) - - getWave(peakPercentage: 0.4, troughPercentage: 0.65, peakAltercation: baseLineY + 100, troughAltercation: baseLineY - 90) - .foregroundColor(NirvanaColor.dimTeal.opacity(0.5)) - .blur(radius:2) - .offset(x: self.animateWaves ? -1*universalSize.width : 0) - .animation( - Animation.linear(duration: 20).repeatForever(autoreverses: false), - value: self.animateWaves - ) - - getWave(peakPercentage: 0.2, troughPercentage: 0.75, peakAltercation: baseLineY - 50, troughAltercation: baseLineY + 100) - .foregroundColor(Color.orange.opacity(0.3)) - .blur(radius:2) - .offset(x: self.animateWaves ? -1*universalSize.width : 0) - .animation( - Animation.linear(duration: 10).repeatForever(autoreverses: false), - value: self.animateWaves - ) - - getWave(peakPercentage: 0.25, troughPercentage: 0.75, peakAltercation: baseLineY + 70, troughAltercation: baseLineY - 100) - .foregroundColor(NirvanaColor.teal.opacity(0.3)) - .blur(radius:2) - .offset(x: self.animateWaves ? -1*universalSize.width : 0) - .animation( - Animation.linear(duration: 12).repeatForever(autoreverses: false), - value: self.animateWaves - ) - - } - .ignoresSafeArea(.all) + WavesGlassBackgroundView() // content gridContent - // inner circle -// Rectangle() -// .foregroundColor(Color.white.opacity(0.5)) -// .frame(width:universalSize.width*0.65, height: universalSize.height*0.3) -// // outer circle -// Rectangle() -// .foregroundColor(Color.white.opacity(0.5)) -// .frame(width:universalSize.width*0.75, height: universalSize.height*0.15) - //way out circle -// Ellipse() -// .foregroundColor(Color.white) -// .frame(width:universalSize.width*0.65, height: universalSize.height*0.3) - // header VStack(alignment: .leading) { header @@ -105,9 +53,7 @@ struct InnerCircleView: View { footerNavigation } - .onAppear() { - self.animateWaves = true - + .onAppear() { // TESTING // fake like these users sent a message to view DispatchQueue.main.asyncAfter(deadline: .now() + 3) { @@ -420,31 +366,6 @@ struct InnerCircleView: View { .shadow(color: Color.black.opacity(0.25), radius: 30, x: 0, y: 20) .padding(.horizontal) } - - private func getWave(peakPercentage: Double, troughPercentage: Double, peakAltercation: CGFloat, troughAltercation: CGFloat) -> Path { - Path {path in - path.move( - to: CGPoint( - x: 0, - y: baseLineY - ) - ) - - path.addCurve( - to: CGPoint(x: universalSize.width, y: baseLineY), - control1: CGPoint(x: universalSize.width * peakPercentage, y: peakAltercation), - control2: CGPoint(x: universalSize.width * troughPercentage, y: troughAltercation)) - - path.addCurve( - to: CGPoint(x: 2*universalSize.width, y: baseLineY), - control1: CGPoint(x: universalSize.width * (1 + peakPercentage), y: peakAltercation), - control2: CGPoint(x: universalSize.width * (1 + troughPercentage), y: troughAltercation)) - - - path.addLine(to: CGPoint(x: 2*universalSize.width, y: universalSize.height)) - path.addLine(to: CGPoint(x: 0, y: universalSize.height)) - } - } } struct InnerCircleView_Previews: PreviewProvider { diff --git a/nirvana-ios/Views/PhoneVerificationView.swift b/nirvana-ios/Views/PhoneVerificationView.swift new file mode 100644 index 0000000..30be890 --- /dev/null +++ b/nirvana-ios/Views/PhoneVerificationView.swift @@ -0,0 +1,35 @@ +// +// PhoneVerificationView.swift +// nirvana-ios +// +// Created by Arjun Patel on 12/17/21. +// + +import SwiftUI + + +// user can type in a phone number and then receive a text +struct PhoneVerificationView: View { + var body: some View { + Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/) + } +} + +struct PhoneVerificationView_Previews: PreviewProvider { + static var previews: some View { + PhoneVerificationView() + } +} + +// another view for user to type in the sms code +struct PhoneVerificationCodeView: View { + var body: some View { + Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/) + } +} + +struct PhoneVerificationCodeView_Previews: PreviewProvider { + static var previews: some View { + PhoneVerificationCodeView() + } +} diff --git a/nirvana-ios/Views/WavesGlassBackgroundView.swift b/nirvana-ios/Views/WavesGlassBackgroundView.swift new file mode 100644 index 0000000..1cb6b7d --- /dev/null +++ b/nirvana-ios/Views/WavesGlassBackgroundView.swift @@ -0,0 +1,93 @@ +// +// WavesGlassBackgroundView.swift +// nirvana-ios +// +// Created by Arjun Patel on 12/17/21. +// + +import SwiftUI + +struct WavesGlassBackgroundView: View { + let universalSize = UIScreen.main.bounds + // y position of where waves should start + let baseLineY = UIScreen.main.bounds.height * 0.95 + + @State var animateWaves = false + + var body: some View { + ZStack { + AngularGradient( + gradient: Gradient( + colors: [NirvanaColor.solidBlue, NirvanaColor.dimTeal, Color.orange, NirvanaColor.solidBlue]), + center: .center, + angle: .degrees(120)) + + LinearGradient(gradient: Gradient( + colors: [NirvanaColor.white.opacity(0), NirvanaColor.white.opacity(1.0)]), startPoint: .bottom, endPoint: .top) + + getWave(peakPercentage: 0.4, troughPercentage: 0.65, peakAltercation: baseLineY + 100, troughAltercation: baseLineY - 90) + .foregroundColor(NirvanaColor.dimTeal.opacity(0.5)) + .blur(radius:2) + .offset(x: self.animateWaves ? -1*universalSize.width : 0) + .animation( + Animation.linear(duration: 20).repeatForever(autoreverses: false), + value: self.animateWaves + ) + + getWave(peakPercentage: 0.2, troughPercentage: 0.75, peakAltercation: baseLineY - 50, troughAltercation: baseLineY + 100) + .foregroundColor(Color.orange.opacity(0.3)) + .blur(radius:2) + .offset(x: self.animateWaves ? -1*universalSize.width : 0) + .animation( + Animation.linear(duration: 10).repeatForever(autoreverses: false), + value: self.animateWaves + ) + + getWave(peakPercentage: 0.25, troughPercentage: 0.75, peakAltercation: baseLineY + 70, troughAltercation: baseLineY - 100) + .foregroundColor(NirvanaColor.teal.opacity(0.3)) + .blur(radius:2) + .offset(x: self.animateWaves ? -1*universalSize.width : 0) + .animation( + Animation.linear(duration: 12).repeatForever(autoreverses: false), + value: self.animateWaves + ) + + } + .ignoresSafeArea(.all) + .onAppear() { + // start repeat animation for waves + self.animateWaves = true + } + } + + private func getWave(peakPercentage: Double, troughPercentage: Double, peakAltercation: CGFloat, troughAltercation: CGFloat) -> Path { + Path {path in + path.move( + to: CGPoint( + x: 0, + y: baseLineY + ) + ) + + path.addCurve( + to: CGPoint(x: universalSize.width, y: baseLineY), + control1: CGPoint(x: universalSize.width * peakPercentage, y: peakAltercation), + control2: CGPoint(x: universalSize.width * troughPercentage, y: troughAltercation)) + + path.addCurve( + to: CGPoint(x: 2*universalSize.width, y: baseLineY), + control1: CGPoint(x: universalSize.width * (1 + peakPercentage), y: peakAltercation), + control2: CGPoint(x: universalSize.width * (1 + troughPercentage), y: troughAltercation)) + + + path.addLine(to: CGPoint(x: 2*universalSize.width, y: universalSize.height)) + path.addLine(to: CGPoint(x: 0, y: universalSize.height)) + } + } +} + +struct WavesGlassBackgroundView_Previews: PreviewProvider { + static var previews: some View { + WavesGlassBackgroundView() + } +}