Jason T

It's really hard to find sprites that works exactly the way you need it. It's even tougher when you need to deal with multiple resolutions.

The issues with using CSS sprites technique is that you predefined a definite height and width. For the sprites. So in the case of the bridge, this is not going to work if the screen resolution changes and the bridge will not be fully connected.

To overcome this issue, I created my own "sprite" technique using absolute image tag in a container with overflow hidden and manually adjust the position of the image I want. So if the container height increased, more portion of the bridge can be seen. This way, I manage to achieve resolution friendly sprites regardless of how many levels are the wooden planks.

After adding the sand background, I realize the fonts are quite hard to read, so decided to throw in more wooden design to bring out the text. It turn out quite well I must say. Manage to find most of the standalone PNG at https://www.pngfind.com/ Thank God!

Also improved the name board. The Team heading is now sticky. So the team header will stay even when scrolling down the name list and a second team header will take over when scrolling to the next team. Felt quite empty with just names. So added robohash https://robohash.org avatars for some freshness.

I'm very happy with how the whole thing turned out. Next week. It's time to start writing the code!

I added the grass to experiment with sprites using CSS. As the entire grass area is a single div, I had to create another absolute div that is full width and full height of the grass container. Then I run a loop and insert 2500 div that has a css background of the sprites.

After which made some adjustment to the z-index to ensure the treasure chest can appear at the top.

I think it's not looking too bad. I'm just hoping I'm able to find other sprites that would match with this current tile.

As i'm expecting about 18 names, it's best to set a height restraints and make it scrollable. As it become clear the purpose of this scoreboard, I'll revisit and tweak again and decide if I should make the scoreboard slide right to collapse.

Starting from the top, Grass | River | Ground. Black represents bridge that are built. Deep Grey represents the next bridge that needs to be built. Light grey represents bridge that is yet to be build.

Before using all the fancy tools, I figured I should just use plain HTML and Tailwind to create the markup and have a feel of how it will look like and how the

The entire idea behind this app is players are able to build bridge to cross over the river and eventually obtain the treasure. Though the UI is going to look like a tile based game. I dont intend to use canvas to create the app. Instead I'm going to attempt to use Laravel Livewire and AlpineJS to replicate the functionality.

Planning Livewire and AlpineJS prove to be quite a challenge. But the reason why I decided to use AlpineJS too instead of just livewire is because of the animation.

If i'm just using Livewire, I wont be able to animate the "appearance" of a bridge. So instead, I'm thinking of using Alpine to bring out the bridge but use Livewire to manage the data.

This concept is personally confusing for me. But let's see how far can I go as I start developing on this app.

If we simply analyse the entire product title, it will not prove to be productive as there are some unnecessary keywords. So it's important to clean up the keywords and remove common wordings too.