moving the waves background out and starting phone verification ui

2021-12-17 12:34:44 -08:00
parent e105bb0ead
commit 7b345a8e98
5 changed files with 146 additions and 91 deletions
@@ -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 {
@@ -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()
+    }
+}
@@ -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()
+    }
+}