🐛 (GEK): Emoji/SFSymbols - add dynamic background for darkmode

leka · Feb 23, 2024 · 0d5d0e2 · 0d5d0e2
1 parent ce6002c
commit 0d5d0e2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/Modules/GameEngineKit/Sources/_NewSystem/Exercises/Touch/ChoiceEmojiView.swift b/Modules/GameEngineKit/Sources/_NewSystem/Exercises/Touch/ChoiceEmojiView.swift
@@ -44,7 +44,7 @@ struct ChoiceEmojiView: View {
     @ViewBuilder
     var circle: some View {
         Circle()
-            .fill(.white)
+            .fill(self.choiceBackgroundColor)
             .overlay {
                 if self.emoji.count == 1, self.emoji.containsOnlyEmojis() {
                     Text(self.emoji)
@@ -113,6 +113,11 @@ struct ChoiceEmojiView: View {
 
     // MARK: Private
 
+    private let choiceBackgroundColor: Color = .init(
+        light: .white,
+        dark: UIColor(displayP3Red: 242 / 255, green: 242 / 255, blue: 247 / 255, alpha: 1.0)
+    )
+
     private let emoji: String
     private let size: CGFloat
     private let state: GameplayChoiceState
@@ -123,19 +128,19 @@ struct ChoiceEmojiView: View {
 }
 
 #Preview {
-    VStack(spacing: 30) {
+    VStack(spacing: 40) {
         HStack(spacing: 50) {
             ChoiceEmojiView(emoji: "🍉", size: 200)
             ChoiceEmojiView(emoji: "🍏", size: 200)
         }
 
-        HStack(spacing: 50) {
+        HStack(spacing: 40) {
             ChoiceEmojiView(emoji: "🌨️", size: 200)
             ChoiceEmojiView(emoji: "🌧️", size: 200, state: .rightAnswer)
             ChoiceEmojiView(emoji: "☀️", size: 200, state: .wrongAnswer)
         }
 
-        HStack(spacing: 0) {
+        HStack(spacing: 40) {
             ChoiceEmojiView(emoji: "🐱", size: 200)
             ChoiceEmojiView(emoji: "🐶", size: 200)
             ChoiceEmojiView(emoji: "🐹🐹", size: 200)

diff --git a/Modules/GameEngineKit/Sources/_NewSystem/Exercises/Touch/ChoiceSFSymbolView.swift b/Modules/GameEngineKit/Sources/_NewSystem/Exercises/Touch/ChoiceSFSymbolView.swift
@@ -20,9 +20,9 @@ struct ChoiceSFSymbolView: View {
     @ViewBuilder
     var circle: some View {
         Circle()
-            .fill(.white)
+            .fill(self.choiceBackgroundColor)
             .overlay {
-                if let uiImage = UIImage(systemName: self.sfsymbol) {
+                if UIImage(systemName: self.sfsymbol) != nil {
                     Image(systemName: self.sfsymbol)
                         .resizable()
                         .scaledToFit()
@@ -40,6 +40,7 @@ struct ChoiceSFSymbolView: View {
                         }
                 }
             }
+            .foregroundStyle(.black)
             .frame(
                 width: self.size,
                 height: self.size
@@ -91,6 +92,11 @@ struct ChoiceSFSymbolView: View {
 
     // MARK: Private
 
+    private let choiceBackgroundColor: Color = .init(
+        light: .white,
+        dark: UIColor(displayP3Red: 242 / 255, green: 242 / 255, blue: 247 / 255, alpha: 1.0)
+    )
+
     private let sfsymbol: String
     private let size: CGFloat
     private let state: GameplayChoiceState
@@ -102,22 +108,23 @@ struct ChoiceSFSymbolView: View {
 
 #Preview {
     VStack(spacing: 30) {
-        HStack(spacing: 50) {
+        HStack(spacing: 40) {
             ChoiceSFSymbolView(image: "airplane", size: 200)
             ChoiceSFSymbolView(image: "paperplane", size: 200)
         }
 
-        HStack(spacing: 50) {
+        HStack(spacing: 40) {
             ChoiceSFSymbolView(image: "sunrise", size: 200)
             ChoiceSFSymbolView(image: "sparkles", size: 200, state: .rightAnswer)
             ChoiceSFSymbolView(image: "cloud.drizzle", size: 200, state: .wrongAnswer)
         }
 
-        HStack(spacing: 0) {
+        HStack(spacing: 40) {
             ChoiceSFSymbolView(image: "cat", size: 200)
             ChoiceSFSymbolView(image: "fish", size: 200)
             ChoiceSFSymbolView(image: "carrot", size: 200)
             ChoiceSFSymbolView(image: "not_a_real_sumbol", size: 200)
         }
     }
+    .background(.lkBackground)
 }