diff --git a/app/src/main/assets/letterloftballoons.html b/app/src/main/assets/letterloftballoons.html new file mode 100644 index 0000000..1325893 --- /dev/null +++ b/app/src/main/assets/letterloftballoons.html @@ -0,0 +1,1057 @@ + + + + + + + + + + Letter Loft + + + + +
+
+

+ Letter Loft +

+ + + +
+
+ +
+
+

Settings

+ + + +
+
+ +
+
+

Instructions

+

+ Welcome to Letter Loft! Your goal is to complete the missing letters in the words shown at the bottom of the screen by popping the correct balloons. +

+

+ How to Play: +

+
    +
  1. + A word with missing letters will appear at the bottom. +
    2. +
  2. + Pop the balloons with letters that complete the word. +
    3. +
  3. + Complete the word before the time runs out. +
    4. +
  4. + Each correct word raises the ceiling; failing to complete it lowers the ceiling. +
    5. +
  5. + If the ceiling reaches the ground, it's game over! +
    6. +
  6. + Pop star balloons for bonuses! +
    7. +
+

+ Controls:
+ Mouse: Click on balloons to pop them.
+ Touch: Tap on balloons to pop them. +

+ +
+
+ +
+
+
+
+
Score: 0
+
Time: 0
+
Ceiling: 100%
+
+
+
+
+
+ +
+
+

Game Over!

+
Your Score: 0
+ + +
+
+ + + + + + + + + + + diff --git a/app/src/main/assets/lettersnake.html b/app/src/main/assets/lettersnake.html deleted file mode 100644 index f6d8b34..0000000 --- a/app/src/main/assets/lettersnake.html +++ /dev/null @@ -1,1324 +0,0 @@ - - - - - - Letter Snake - - - - -
-

Letter Snake

- - - -
- -
-

Settings

- - - - - - - -
- -
-

Instructions

-

- Control the snake to collect letters in the correct order to spell out - the target words displayed. Avoid obstacles and enemies. Use power-ups - to gain advantages. Use arrow keys or swipe to move the snake. -

- -
- -
-

Game Paused

- - -
- -
-

Game Over!

-
Your Score: 0
- - -
- -
-
- Score: 0 - Words Completed: 0 - Target Word: -
- - - -
- -
- -
- - - - - - - - - - diff --git a/app/src/main/assets/lexiconlegends.html b/app/src/main/assets/lexiconlegends.html deleted file mode 100644 index a1733f0..0000000 --- a/app/src/main/assets/lexiconlegends.html +++ /dev/null @@ -1,895 +0,0 @@ - - - - - - Lexicon Legends - - - - -
-
-

Lexicon Legends

- - - -
-
- - -
-
-

Select Your Class

-
-
-
Word Warrior
-

Wielding a sword made of letters

-
-
-
Spellbinder
-

Casting spells with words

-
-
-
Rune Rogue
-

Quick and agile with runic words

-
-
-
-
- - -
-
-

Customize Your Character

- -
- ← -
Head: Helmet
- → -
- -
- ← -
Body: Armor
- → -
- -
- ← -
Legs: Boots
- → -
- - -
-
- - -
-
-

World Map

- - -
Gold: 0
- -
-
- - -
-
-

Item Store

-
- -
- -
-
- - -
-
-
-
Countdown: 5
-
Bandit 1
-
-
-
-
-
- -
-
-
Player
-
-
-
-
-
Health: 100
-
- -
-
-

Left Fist

-
Loading...
-
- -
- - - -
-
- - -
-
-

Lexicon Legends Instructions

-

Welcome to Lexicon Legends! Embark on an epic journey where your vocabulary is your greatest weapon.

- -

1. Main Menu

- - -

2. Class Selection

-

Choose your path by selecting one of the following classes:

- - -

3. Character Customization

-

Customize your hero's appearance:

- -

How to Customize: Click the left or right arrows to cycle through options for each part. Once satisfied, click "Done" to proceed.

- -

4. World Map

- - -

5. Combat (Bar Scene)

-

Engage in battles using your vocabulary:

- - -

6. Item Store

-

Enhance your capabilities:

- - -

7. Winning the Game

-

While "Lexicon Legends" doesn't have a definitive end, strive to:

- - - -
-
- - - - - - diff --git a/app/src/main/assets/wordcollapse.html b/app/src/main/assets/wordcollapse.html deleted file mode 100644 index 365a5cc..0000000 --- a/app/src/main/assets/wordcollapse.html +++ /dev/null @@ -1,908 +0,0 @@ - - - - - - Word Collapse - - - -
-
-

- Word Collapse -

- - - -
-
-
-
-

Settings

-

Select Game Mode:

- - -

Music:

- - -
-
-
-
-

Instructions

-

- In Word Collapse, find and eliminate words from the grid. Letters above will fall, potentially forming new words. -

-

- Objective:
- - Form words by selecting adjacent letters.
- - Clear the grid or achieve the highest score possible. -

-

- Controls:
- - Click or tap letters to select them.
- - Words must be at least three letters long.
- - Use power-ups for strategic advantages. -

-

- Power-ups:
- - Shuffle Board: Rearranges all letters.
- - Freeze Time: Pauses the timer for planning. -

-

- Hint:
- - Use the hint button to reveal possible words. -

- -
-
-
-
-
- - - - - - -
-
- Score: 0 - -
- - -
-
-
-
-
Game Over!
- - -
-
- - - - - - - - - - - diff --git a/app/src/main/assets/wordtetris.html b/app/src/main/assets/wordtetris.html deleted file mode 100644 index 1178cbf..0000000 --- a/app/src/main/assets/wordtetris.html +++ /dev/null @@ -1,843 +0,0 @@ - - - - - - - Retro Word Tetris - - - - -
-
-

Retro Word Tetris

- - - -
-
- - -
-
-

Settings

- - -
-
- - -
-
-

Instructions

-

- Welcome to Retro Word Tetris! The goal of the game is to form words using falling letters. -

-

- Controls: -

- -

- Form valid words to score points. The game ends when the letters reach the top of the game board. -

- -
-
- - -
-
- - - -
-
- Score: 0 - High Score: 0 -
-
-
-
Next:
-
A
-
-
- -
- - -
-
- - -
-
-
Game Over!
- - -
-
- - - - - - - - - - - diff --git a/app/src/main/assets/wordwheels.html b/app/src/main/assets/wordwheels.html deleted file mode 100644 index ca3e3cd..0000000 --- a/app/src/main/assets/wordwheels.html +++ /dev/null @@ -1,640 +0,0 @@ - - - - - - Word Wheels - - - - -
-
-

Word Wheels

- - - - -
High Score: 0
-
-
- - -
- -
- -
Distance: 0
- -
High Score: 0
- -
-
- -
-
- -
word
-
-
- -
word
-
- -
-
- - -
-
-
Game Over!
-
You traveled: 0
- - - - -
-
- - -
-
-
-

Word Wheels - Game Instructions

-

Objective:

-

- Navigate your car along the track by moving it up or down to avoid incoming obstacles. Use your typing skills to control the car's movement based on the words displayed. -

-

How to Play:

-
    -
  • Start the Game: Click the "Play" button on the main menu to begin.
    • -
  • Understand the Controls: -
      -
    • Two words will appear on the screen labeled "Up" and "Down".
      • -
    • These words correspond to the actions you need to perform to move your car.
      • -
    -
    • -
  • Moving the Car: -
      -
    • To Move Up: Type the exact word displayed under "Up" into the input field and press Enter or wait for it to be automatically processed.
      • -
    • To Move Down: Type the exact word displayed under "Down" into the input field and press Enter or wait for it to be automatically processed.
      • -
    • After each move, new words will be generated for the next action.
      • -
    -
    • -
  • Avoiding Obstacles: -
      -
    • Obstacles will appear from the right side of the screen and move towards your car.
      • -
    • Each obstacle occupies a specific lane on the track.
      • -
    • Ensure your car is in a different lane than the incoming obstacle by typing the correct word to move up or down.
      • -
    -
    • -
  • Distance Tracking: -
      -
    • Your progress is measured by the distance traveled.
      • -
    • The distance increases over time as you survive longer.
      • -
    • Try to achieve the highest distance possible!
      • -
    -
    • -
  • Game Over: -
      -
    • If your car collides with an obstacle, the game ends.
      • -
    • You will see a "Game Over" message with your final distance and options to "Play Again" or return to the "Main Menu".
      • -
    -
    • -
  • Tips for Success: -
      -
    • Speed Matters: As the game progresses, obstacles will appear more frequently and move faster.
      • -
    • Typing Accuracy: Ensure you type the words accurately to make timely moves.
      • -
    • Stay Focused: Pay attention to the lanes and anticipate incoming obstacles.
      • -
    -
    • -
- -
-
-
- - - - diff --git a/app/src/main/java/com/example/htmlgameshow/view/HtmlRender.kt b/app/src/main/java/com/example/htmlgameshow/view/HtmlRender.kt index 599810e..5606c32 100644 --- a/app/src/main/java/com/example/htmlgameshow/view/HtmlRender.kt +++ b/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") + } + }) + } } } } diff --git a/app/src/main/java/com/example/htmlgameshow/view/ListDetailPane.kt b/app/src/main/java/com/example/htmlgameshow/view/ListDetailPane.kt index cf5d8cc..3907db9 100644 --- a/app/src/main/java/com/example/htmlgameshow/view/ListDetailPane.kt +++ b/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) } } } diff --git a/app/src/main/java/com/example/htmlgameshow/view/ListingGameByGridItem.kt b/app/src/main/java/com/example/htmlgameshow/view/ListingGameByGridItem.kt index a7f048c..c5a5823 100644 --- a/app/src/main/java/com/example/htmlgameshow/view/ListingGameByGridItem.kt +++ b/app/src/main/java/com/example/htmlgameshow/view/ListingGameByGridItem.kt @@ -3,8 +3,7 @@ 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 @@ -12,11 +11,13 @@ 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, - 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 + ) + } } } \ No newline at end of file diff --git a/app/src/main/java/com/example/htmlgameshow/view/ListingGamesByGrid.kt b/app/src/main/java/com/example/htmlgameshow/view/ListingGamesByGrid.kt index 0d2c032..beb0f5b 100644 --- a/app/src/main/java/com/example/htmlgameshow/view/ListingGamesByGrid.kt +++ b/app/src/main/java/com/example/htmlgameshow/view/ListingGamesByGrid.kt @@ -10,6 +10,16 @@ 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( @@ -17,19 +27,13 @@ fun ListingGamesByGrid( 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) } } } \ No newline at end of file diff --git a/app/src/main/res/drawable/letterloftballoons.jpg b/app/src/main/res/drawable/letterloftballoons.jpg new file mode 100644 index 0000000..2abfb03 Binary files /dev/null and b/app/src/main/res/drawable/letterloftballoons.jpg differ