From 18046d1208a642ad4a0ea867025dedc35f433ac9 Mon Sep 17 00:00:00 2001
From: neon443 <69979447+neon443@users.noreply.github.com>
Date: Thu, 28 Aug 2025 21:00:49 +0100
Subject: [PATCH] implemented shader testing view (shaderplayground)

---
 ShhShell/Host/HostsManager.swift          |   2 +-
 ShhShell/Terminal/ShaderTestingView.swift | 117 ++++++++++++----------
 ShhShell/Views/About/AboutView.swift      |   8 ++
 3 files changed, 72 insertions(+), 55 deletions(-)

diff --git a/ShhShell/Host/HostsManager.swift b/ShhShell/Host/HostsManager.swift
index 274029b..3e3d953 100644
--- a/ShhShell/Host/HostsManager.swift
+++ b/ShhShell/Host/HostsManager.swift
@@ -47,7 +47,7 @@ class HostsManager: ObservableObject, @unchecked Sendable {
 		loadFonts()
 		loadSnippets()
 		loadHistory()
-//		self.shownOnboarding = UserDefaults.standard.bool(forKey: "shownOnboarding")
+		self.shownOnboarding = UserDefaults.standard.bool(forKey: "shownOnboarding")
 	}
 	
 	func setOnboarding(to newValue: Bool) {
diff --git a/ShhShell/Terminal/ShaderTestingView.swift b/ShhShell/Terminal/ShaderTestingView.swift
index 751fc4b..c154a21 100644
--- a/ShhShell/Terminal/ShaderTestingView.swift
+++ b/ShhShell/Terminal/ShaderTestingView.swift
@@ -11,64 +11,73 @@ struct ShaderTestingView: View {
 	@State private var start = Date.now
 	
 	var body: some View {
-		Image(systemName: "figure.walk.circle")
-			.font(.system(size: 300))
-			.foregroundStyle(.blue)
-			.colorEffect(ShaderLibrary.redify())
-		Section("Shaded") {
+		GeometryReader { geo in
 			TimelineView(.animation) { tl in
-				let time = start.distance(to: tl.date)
-				Image(systemName: "figure.walk.circle")
-					.font(.system(size: 300))
-					.foregroundStyle(.blue)
-					.distortionEffect(
-						ShaderLibrary.wave(
-							.float(time)
-						),
-						maxSampleOffset: .zero
-					)
-				Rectangle()
-					.frame(width: 200, height: 100)
-					.padding(.vertical, 20)
-					.foregroundStyle(.red)
-					.compositingGroup()
-					.visualEffect {
-						content,
-						proxy in
-						content.distortionEffect(
-							ShaderLibrary.waveFlag(
-								.float(time),
-								.float2(proxy.size)
-							),
-							maxSampleOffset: CGSize(width: 0, height: 40)
-						)
+				ZStack {
+					let time = start.distance(to: tl.date)
+					VStack {
+						HStack {
+							Image(systemName: "figure.walk.circle")
+								.resizable().scaledToFit()
+								.foregroundStyle(.blue)
+							Image(systemName: "arrow.right")
+								.foregroundStyle(.gray)
+								.frame(width: 25, height: 25)
+							Image(systemName: "figure.walk.circle")
+								.resizable().scaledToFit()
+								.foregroundStyle(.blue)
+								.colorEffect(ShaderLibrary.redify())
+						}
+						
+						Image(systemName: "figure.walk.circle")
+							.resizable().scaledToFit()
+							.foregroundStyle(.blue)
+							.colorEffect(ShaderLibrary.rainbow(.float(time)))
+						
+						Image(systemName: "figure.walk.circle")
+							.resizable().scaledToFit()
+							.foregroundStyle(.blue)
+							.distortionEffect(
+								ShaderLibrary.wave(.float(time)),
+								maxSampleOffset: .zero
+							)
+						Rectangle()
+							.padding(.vertical, 20)
+							.foregroundStyle(.red)
+							.compositingGroup()
+							.visualEffect {
+								content,
+								proxy in
+								content.distortionEffect(
+									ShaderLibrary.waveFlag(.float(time), .float2(proxy.size)),
+									maxSampleOffset: CGSize(width: 0, height: 40)
+								)
+							}
+						
+						Rectangle()
+							.colorEffect(
+								ShaderLibrary.sinebow(.float2(300, 200), .float(time))
+							)
 					}
+					.brightness(0.2)
+					
+					Rectangle()
+						.foregroundStyle(.black.opacity(1))
+						.visualEffect { content, proxy in
+							content
+								.colorEffect(
+									ShaderLibrary.crt(
+										.float2(proxy.size),
+										.float(time)
+									)
+								)
+						}
+						.opacity(0.75)
+						.blendMode(.overlay)
+						.allowsHitTesting(false)
+				}
 			}
 		}
-		Section("Shaded") {
-			TimelineView(.animation) { tl in
-				let time = start.distance(to: tl.date)
-				Rectangle()
-					.frame(width: 300, height: 200)
-					.colorEffect(
-						ShaderLibrary.sinebow(
-							.float2(300, 200),
-							.float(time)
-						)
-					)
-				Image(systemName: "figure.walk.circle")
-					.font(.system(size: 300))
-					.foregroundStyle(.blue)
-					.colorEffect(ShaderLibrary.rainbow(
-						.float(time)
-					))
-			}
-		}
-		Section("Original") {
-			Image(systemName: "figure.walk.circle")
-				.font(.system(size: 300))
-				.foregroundStyle(.blue)
-		}
 	}
 }
 
diff --git a/ShhShell/Views/About/AboutView.swift b/ShhShell/Views/About/AboutView.swift
index 5ee9680..af1e99b 100644
--- a/ShhShell/Views/About/AboutView.swift
+++ b/ShhShell/Views/About/AboutView.swift
@@ -50,6 +50,14 @@ struct AboutView: View {
 							.shadow(radius: 2)
 					}
 				}
+				
+				NavigationLink {
+					ShaderTestingView()
+				} label: {
+					Text("Shader Playground")
+						.bold()
+					Text("This is a collection of all the shaders I made while learning!")
+				}
 			}
 			.transition(.scale)
 			.frame(maxWidth: .infinity)