updating games (only keeping the ones which are going to be included …

app/src/main/java/com/example/htmlgameshow/view/HtmlRender.kt

@@ -5,12 +5,26 @@ import android.view.ViewGroup
 import android.webkit.WebChromeClient
 import android.webkit.WebView
 import android.widget.LinearLayout
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.material3.Text
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.graphics.Color
+import androidx.compose.material3.Text
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.viewinterop.AndroidView
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.layout.ContentScale
+import com.example.htmlgameshow.R
 
 @SuppressLint("SetJavaScriptEnabled")
 @Composable
@@ -19,29 +33,64 @@ fun HtmlRender(html_name: String, modifier: Modifier = Modifier) {
         SettingPage(modifier = modifier)
     }
     else {
-        Column(
-            modifier = modifier,
-            verticalArrangement = Arrangement.Center
-        ) {
-            AndroidView(
-                factory = {
-                    WebView(it).apply {
-                        settings.javaScriptEnabled = true
-                        settings.allowFileAccess = true
-                        settings.useWideViewPort = true
-                        //settings.loadWithOverviewMode = true
-
-                        layoutParams = LinearLayout.LayoutParams(
-                            ViewGroup.LayoutParams.MATCH_PARENT,
-                            ViewGroup.LayoutParams.MATCH_PARENT
-                        )
-
-                        //webViewClient = WebViewClient()
-                        webChromeClient = WebChromeClient()
-
-                        loadUrl("file:///android_asset/$html_name.html")
-                    }
-                })
+
+        var showImage by remember { mutableStateOf(true) } // State to control the display of the image
+
+        LaunchedEffect(Unit) {
+            // Wait for 3 seconds before switching to WebView
+            kotlinx.coroutines.delay(3000)
+            showImage = false
+        }
+
+        if (showImage) {
+            // Display game image with black background
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(Color.Black),
+                contentAlignment = Alignment.Center
+            ) {
+                val gameImage = displayImages[html_name] ?: R.drawable.default_thumbnail
+
+                Image(
+                    painter = painterResource(id = gameImage),
+                    contentDescription = null,
+                    modifier = Modifier
+                        //.fillMaxSize() // Fill the maximum available size
+                        //.padding(10.dp) // Optional: add padding if desired
+                        .fillMaxWidth() // Set the image width to match the screen width
+                        .align(Alignment.Center) // Center the image vertically in the Box
+                        .clip(RoundedCornerShape(10.dp)),
+                    contentScale = ContentScale.Crop
+                )
+            }
+        } else {
+            // After delay, show the WebView with the HTML game
+
+            Column(
+                modifier = modifier,
+                verticalArrangement = Arrangement.Center
+            ) {
+                AndroidView(
+                    factory = {
+                        WebView(it).apply {
+                            settings.javaScriptEnabled = true
+                            settings.allowFileAccess = true
+                            settings.useWideViewPort = true
+                            //settings.loadWithOverviewMode = true
+
+                            layoutParams = LinearLayout.LayoutParams(
+                                ViewGroup.LayoutParams.MATCH_PARENT,
+                                ViewGroup.LayoutParams.MATCH_PARENT
+                            )
+
+                            //webViewClient = WebViewClient()
+                            webChromeClient = WebChromeClient()
+
+                            loadUrl("file:///android_asset/$html_name.html")
+                        }
+                    })
+            }
         }
     }
 }

app/src/main/java/com/example/htmlgameshow/view/ListDetailPane.kt

@@ -157,19 +157,22 @@ private fun ListingGames(
 ) {
     LazyColumn {
         item {
-            ListGameItem("New Wordle", "newwordle", scaffoldNavigator)
+            ListGameItem("New Wordle", "numerictowers", scaffoldNavigator)
             HorizontalDivider()
         }
         item {
-            ListGameItem("Sudoku Detective", "sudokudetective", scaffoldNavigator)
+            ListGameItem("Sudoku Detective", "retrowordtetris", scaffoldNavigator)
             HorizontalDivider()
         }
         item {
-            ListGameItem("Equation Explorer", "equationexplorer", scaffoldNavigator)
+            ListGameItem("Equation Explorer", "wordsnake", scaffoldNavigator)
             HorizontalDivider()
         }
         item {
-            ListGameItem("Cipher Chronicles", "cipherchronicles", scaffoldNavigator)
+            ListGameItem("Cipher Chronicles", "mathdash", scaffoldNavigator)
+        }
+        item {
+            ListGameItem("Cipher Chronicles", "letterloftballoons", scaffoldNavigator)
         }
     }
 }

app/src/main/java/com/example/htmlgameshow/view/ListingGameByGridItem.kt

@@ -3,20 +3,21 @@ package com.example.htmlgameshow.view
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ElevatedCard
 import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
 import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
 import androidx.compose.material3.adaptive.navigation.ThreePaneScaffoldNavigator
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
@@ -27,7 +28,8 @@ import com.example.htmlgameshow.R
 fun ListingGameByGridItem(
     target: String,
     scaffoldNavigator: ThreePaneScaffoldNavigator<String>,
-    thumbnailImage: Int = R.drawable.default_thumbnail
+    thumbnailImage: Int = R.drawable.default_thumbnail,
+    gameTitle: String
 ) {
     ElevatedCard(
         elevation = CardDefaults.cardElevation(
@@ -38,13 +40,29 @@ fun ListingGameByGridItem(
             .size(width = 180.dp, height = 200.dp),
         onClick = { scaffoldNavigator.navigateTo(ListDetailPaneScaffoldRole.Detail, target) }
     ) {
-        Image(
+        Column(
             modifier = Modifier
+                .fillMaxSize()
                 .padding(5.dp)
-                .clip(RoundedCornerShape(5.dp)),
-            painter = painterResource(thumbnailImage),
-            contentDescription = target,
-            contentScale = ContentScale.Crop
-        )
+        ) {
+            // Heading text for the image
+            Text(
+                text = gameTitle,
+                modifier = Modifier
+                    .padding(bottom = 8.dp) // Add some space between the heading and image
+                    .align(Alignment.CenterHorizontally), // Center the text
+                style = MaterialTheme.typography.headlineSmall // Style the heading as per your theme
+            )
+            // Image below the heading
+            Image(
+                modifier = Modifier
+                    .clip(RoundedCornerShape(5.dp))
+                    .fillMaxWidth()
+                    .height(140.dp), // Control the size of the image
+                painter = painterResource(thumbnailImage),
+                contentDescription = target,
+                contentScale = ContentScale.Crop
+            )
+        }
     }
 }

app/src/main/java/com/example/htmlgameshow/view/ListingGamesByGrid.kt

@@ -10,26 +10,30 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.example.htmlgameshow.R
 
+internal val headlines = listOf("Number Tower", "Word Tetris", "Letter Snake", "Math Dash", "LetterLoft Balloons")
+internal val targets = listOf("numerictowers", "retrowordtetris", "wordsnake", "mathdash", "letterloftballoons")
+internal val displayImages = mapOf(
+    "numerictowers" to R.drawable.numerictower,
+    "retrowordtetris" to R.drawable.wordtetris,
+    "wordsnake" to R.drawable.lettersnake,
+    "mathdash" to R.drawable.mathdash,
+    "letterloftballoons" to R.drawable.letterloftballoons
+)
+
 @OptIn(ExperimentalMaterial3AdaptiveApi::class)
 @Composable
 fun ListingGamesByGrid(
     scaffoldNavigator: ThreePaneScaffoldNavigator<String>,
     modifier: Modifier = Modifier
 ) {
     val listState = rememberLazyGridState()
-    val targets = listOf("numerictowers", "retrowordtetris", "wordsnake", "mathdash", "wordcollapse")
-    val displayImages = mapOf(
-        "wordsnake" to R.drawable.lettersnake,
-        "numerictowers" to R.drawable.numerictower,
-        "mathdash" to R.drawable.mathdash,
-        "retrowordtetris" to R.drawable.wordtetris,
-        "wordcollapse" to R.drawable.wordcollapse
-    )
+
     LazyVerticalGrid(modifier = modifier, columns = GridCells.Adaptive(180.dp), state = listState) {
         items(targets.size) {
             val target = targets.get(it % targets.size)
+            val headline = headlines.get(it % headlines.size)
             val imageId = displayImages.getOrDefault(target, R.drawable.default_thumbnail)
-            ListingGameByGridItem(target, scaffoldNavigator, thumbnailImage = imageId)
+            ListingGameByGridItem(target, scaffoldNavigator, thumbnailImage = imageId, headline)
         }
     }
 }