fix: Planet Selection Screen not rendering correctly on real phone

app/src/androidTest/java/com/github/lookupgroup27/lookup/ui/planetselection/PlanetSelectionScreenTest.kt

@@ -0,0 +1,79 @@
+package com.github.lookupgroup27.lookup.ui.planetselection
+
+import androidx.compose.ui.test.*
+import androidx.compose.ui.test.junit4.createComposeRule
+import com.github.lookupgroup27.lookup.model.map.planets.PlanetsRepository
+import com.github.lookupgroup27.lookup.ui.navigation.NavigationActions
+import com.github.lookupgroup27.lookup.ui.navigation.Screen
+import io.mockk.*
+import org.junit.Before
+import org.junit.Rule
+import org.junit.Test
+
+class PlanetSelectionScreenTest {
+
+  @get:Rule val composeTestRule = createComposeRule()
+
+  private lateinit var viewModel: PlanetSelectionViewModel
+  private lateinit var navigationActions: NavigationActions
+  private lateinit var planetsRepository: PlanetsRepository
+
+  @Before
+  fun setUp() {
+
+    planetsRepository = PlanetsRepository(mockk(), mockk(), "")
+
+    // Mock the ViewModel with PlanetsRepository
+    viewModel = spyk(PlanetSelectionViewModel(planetsRepository))
+
+    // Mock NavigationActions
+    navigationActions = mockk(relaxed = true)
+  }
+
+  @Test
+  fun testBackButtonNavigatesToMenu() {
+    composeTestRule.setContent {
+      PlanetSelectionScreen(viewModel = viewModel, navigationActions = navigationActions)
+    }
+
+    composeTestRule.onNodeWithTag("go_back_button").performClick()
+
+    verify { navigationActions.navigateTo(Screen.MENU) }
+  }
+
+  @Test
+  fun testPlanetSelectionUpdatesPlanetName() {
+    composeTestRule.setContent {
+      PlanetSelectionScreen(viewModel = viewModel, navigationActions = navigationActions)
+    }
+
+    // Select Mars
+    composeTestRule.onNodeWithContentDescription("Mars button").performClick()
+
+    // Check if the planet name is updated
+    composeTestRule.onNodeWithTag("planet_name").assertTextEquals("Mars")
+  }
+
+  @Test
+  fun testInitialPlanetDisplayedCorrectly() {
+    composeTestRule.setContent {
+      PlanetSelectionScreen(viewModel = viewModel, navigationActions = navigationActions)
+    }
+
+    // Check if the initially selected planet (Moon) is displayed
+    composeTestRule.onNodeWithTag("planet_name").assertTextEquals("Moon")
+  }
+
+  @Test
+  fun testPlanetSurfaceViewUpdatesOnPlanetChange() {
+    composeTestRule.setContent {
+      PlanetSelectionScreen(viewModel = viewModel, navigationActions = navigationActions)
+    }
+
+    // Select Jupiter
+    composeTestRule.onNodeWithContentDescription("Jupiter button").performClick()
+
+    // Verify if the planet name is updated to Jupiter
+    composeTestRule.onNodeWithTag("planet_name").assertTextEquals("Jupiter")
+  }
+}

app/src/main/java/com/github/lookupgroup27/lookup/model/planetselection/PlanetSurfaceView.kt

@@ -2,6 +2,7 @@ package com.github.lookupgroup27.lookup.model.planetselection
 
 import android.annotation.SuppressLint
 import android.content.Context
+import android.graphics.PixelFormat
 import android.opengl.GLSurfaceView
 import com.github.lookupgroup27.lookup.model.map.planets.PlanetData
 
@@ -26,6 +27,11 @@ class PlanetSurfaceView(context: Context, private var planet: PlanetData) : GLSu
 
     // Render only when the content changes
     renderMode = RENDERMODE_CONTINUOUSLY
+
+    // Enable transparency
+    setZOrderOnTop(false)
+    setZOrderMediaOverlay(false)
+    holder.setFormat(PixelFormat.TRANSLUCENT)
   }
 
   /**

app/src/main/java/com/github/lookupgroup27/lookup/ui/planetselection/PlanetSelectionScreen.kt

@@ -1,12 +1,13 @@
 package com.github.lookupgroup27.lookup.ui.planetselection
 
+import android.annotation.SuppressLint
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.Surface
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -32,6 +33,7 @@ import com.github.lookupgroup27.lookup.ui.planetselection.components.PlanetSelec
  * @param viewModel The ViewModel for the Planet Selection screen.
  * @param navigationActions The navigation actions to handle screen transitions.
  */
+@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
 @Composable
 fun PlanetSelectionScreen(
     viewModel: PlanetSelectionViewModel = viewModel(),
@@ -43,40 +45,38 @@ fun PlanetSelectionScreen(
   // Reference to the PlanetSurfaceView to update it
   var planetSurfaceView by remember { mutableStateOf<PlanetSurfaceView?>(null) }
 
-  Surface(
-      modifier = Modifier.fillMaxSize(), color = Color.Black // Background color for the screen
-      ) {
-        Column(
-            modifier = Modifier.fillMaxSize(),
-            verticalArrangement = Arrangement.SpaceBetween,
-            horizontalAlignment = Alignment.CenterHorizontally) {
-
-              // Back Button
-              IconButton(
-                  onClick = { navigationActions.navigateTo(Screen.MENU) },
-                  modifier =
-                      Modifier.padding(16.dp)
-                          .align(Alignment.Start)
-                          .testTag("go_back_button_quiz")) {
-                    Icon(
-                        imageVector = Icons.AutoMirrored.Filled.ArrowBack,
-                        contentDescription = "Back",
-                        tint = Color.White)
-                  }
+  Scaffold(
+      topBar = {
+        Column(modifier = Modifier.fillMaxSize().background(Color.Transparent)) {
+          IconButton(
+              onClick = { navigationActions.navigateTo(Screen.MENU) },
+              modifier = Modifier.padding(16.dp).testTag("go_back_button")) {
+                Icon(
+                    imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+                    contentDescription = "Back",
+                    tint = Color.White)
+              }
 
-              // Top: Horizontal planet selection
-              PlanetSelectionRow(
-                  planets = planets, onPlanetSelected = { viewModel.selectPlanet(it) })
+          PlanetSelectionRow(planets = planets, onPlanetSelected = { viewModel.selectPlanet(it) })
 
-              Spacer(modifier = Modifier.height(40.dp))
+          Spacer(modifier = Modifier.height(50.dp))
 
-              // Middle: Planet name
-              Text(
-                  text = selectedPlanet.name,
-                  color = White,
-                  fontSize = 50.sp,
-                  fontWeight = FontWeight.Light,
-                  modifier = Modifier.padding(20.dp))
+          Text(
+              text = selectedPlanet.name,
+              color = White,
+              fontSize = 50.sp,
+              fontWeight = FontWeight.Light,
+              modifier =
+                  Modifier.padding(20.dp)
+                      .align(Alignment.CenterHorizontally)
+                      .testTag("planet_name"))
+        }
+      },
+      content = {
+        Column(
+            modifier = Modifier.fillMaxSize().background(Color.Black),
+            verticalArrangement = Arrangement.SpaceBetween,
+            horizontalAlignment = Alignment.CenterHorizontally) {
 
               // Bottom: Planet renderer
               Box(
@@ -86,11 +86,11 @@ fun PlanetSelectionScreen(
                         factory = { context ->
                           PlanetSurfaceView(context, selectedPlanet).also { planetSurfaceView = it }
                         },
-                        modifier = Modifier.fillMaxSize())
+                        modifier = Modifier.size(600.dp))
                   }
 
               // LaunchedEffect to update the planet when selectedPlanet changes
               LaunchedEffect(selectedPlanet) { planetSurfaceView?.updatePlanet(selectedPlanet) }
             }
-      }
+      })
 }