From 0d5d0e2227742cfcaaa92b1b59086ee52aacd5aa Mon Sep 17 00:00:00 2001
From: Ladislas de Toldi <ladislas@detoldi.me>
Date: Fri, 23 Feb 2024 12:53:00 +0100
Subject: [PATCH] :bug: (GEK): Emoji/SFSymbols - add dynamic background for
 darkmode

---
 .../Exercises/Touch/ChoiceEmojiView.swift       | 13 +++++++++----
 .../Exercises/Touch/ChoiceSFSymbolView.swift    | 17 ++++++++++++-----
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/Modules/GameEngineKit/Sources/_NewSystem/Exercises/Touch/ChoiceEmojiView.swift b/Modules/GameEngineKit/Sources/_NewSystem/Exercises/Touch/ChoiceEmojiView.swift
index 19a17a54f4..0a46ce252d 100644
--- 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
index 3d868a53de..548210e29a 100644
--- 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)
 }