JavaScript Port

After finishing Pineapple Chess in Java, which meant you need to download my app, which is Windows only, I started getting a lot of people asking if I could port this to the web. So I did, yay.

From Java to JavaScript

The original version of Pineapple Chess was built entirely in Java, and after finishing it, I figured porting it to JavaScript would be a pretty interesting challenge. The reason why I have to use JavaScript for anyone curious is because that is one of the best for web development.

The goal was to recreate the game in JavaScript while keeping the same basic gameplay and features from the original version. This meant going through the original code and rebuilding a lot of the game’s logic in a completely different language.

Rebuilding the Game

One of the biggest parts of the process was getting the chess logic working again. I had to recreate things like:

• Piece movement
• Check and checkmate
• Special chess moves
• Turn switching
• Selecting and moving pieces
• Detecting when the game ends

Since I already had the Java version working, I wasn’t starting completely from scratch. I could use the original game as a reference for how everything was supposed to work, which made the process a lot easier.

Why JavaScript?

The main reason for making the JavaScript version was accessibility. The original Java version worked, but having a JavaScript version makes it much easier to run and share.

Instead of needing to set up the Java version first, the JavaScript version can be used in a much more web-friendly environment.

Basically, Pineapple Chess is now significantly easier to get running.

And That’s a Wrap!

This is actually going to be my last devlog for this event. With the event ending in about two weeks, I wanted to squeeze in one last piece of work before it wraps up, and porting Pineapple Chess to JavaScript felt like the perfect way to finish things off. I know this devlog isn’t much of a change, and there are a lot of features in Pineapple Chess that I would love to add, it’s just I don’t have the time as I have a lot of work in school, and Stardance is ending soon, I will be working on this in the future though.

It’s pretty cool seeing a project that I originally made in Java now running in JavaScript. The original version isn’t going anywhere, but now Pineapple Chess has a new form too. I will be shipping this soon, stay tuned!

And also, thank you to everyone who followed along with my devlogs, gave feedback, played Pineapple Chess, or suggested things for me to work on. All of the feedback and support throughout the event has genuinely been really helpful and made working on this project a lot more fun.

It’s been awesome being able to work on Pineapple Chess throughout this event, it’s not a big project like what other people make but it was a passion project for me for fun.

One last update before the event ends. 🍍❤️

Thanks for reading, and I’ll see you around the next Hack Club event!

DEVLOG 1

 What am I even making?

(btw for the people who have seen my previous projects, I have recently started to use markdown to make better devlogs than my previous ones to make it more readable and presentable instead of giant paragraphs, and more humorous about my pain for the enjoyment of reading, hope you enjoy!)

Welcome to IndoorGPS! The idea is pretty simple:

Take a picture of a map of a building, like a mall, university, or basically any place with an indoor map and have AI analyze it and turn it into an interactive map.

The goal is basically Google Maps, but for individual buildings.

You could type something like:

“Take me to Room 204”

…and IndoorGPS would figure out where Room 204 is and give you directions to get there. Eventually, I want it to work with things like hallways, rooms, floors, entrances, stairs, elevators, and more.

Sounds pretty straightforward, right? Yeah. About that. 💀

My original plan was to spend about an hour getting the basic project set up with Expo + React Native.

That was… optimistic.

Instead, basically my entire dependency setup decided to collectively explode. I spent way long than the 1 hour that has tracked by Hackatime on this devlog.

Packages weren’t cooperating, dependencies were fighting each other, and Expo/React Native were doing their best impression of a brick wall. Every time I thought I had finally fixed something, another issue showed up.

At some point I was no longer developing IndoorGPS. I was developing node_modules.(btw that is a folder in a react native project that has dependencies)😭

I spent WAY longer than expected just getting the environment into a state where I could actually start building.

So yeah… the first devlog isn’t exactly “I built an AI-powered indoor navigation system.”

It’s more like:

“I successfully convinced React Native to let me use React Native.”

And honestly, I’ll take the win. 💀

What’s Next?

Now that the project is actually running, I can finally start working on the interesting part. I have added a bottom navigation bar as shown in the picture attached.

The next big goal is designing basic UI for the AI stuff and map.

For now, though, I’m just happy my dependencies aren’t actively trying to destroy me.

And if you are here and you finished reading, tysm really means a lot!

I WAS SANE BEFORE TODAY😭😭😭. I have done it, I have finished my app. That part was so easy. But compiling it into a downloadable installer has cost me so much I might as well have sold my soul. I had to build the stupid thing 7 TIMES. I had to mess around with the dependencies for so long, this took like 8 hours but most of it was just trying to fix dependencies and working in the terminal trying to debug why my installer wont work. My installer now works never the less. It is very easy to install in a user’s perspective and it automatically makes a shortcut in the desktop. Sadly this installer is only for windows, sorry Mac and Linux. I will be shipping this project soon. As you can see in the pictures attached, it created the shortcut! And it works!🎉🎉🎉

This for some reason genuinely took the life out of me. I have finally added the whole point of this chess app, PINEAPPLES! NEW BOARD COLOR, NEW UI THEME, NEW CHESS PEICES. Don’t worry, if you or any other user doesn’t like it, I have added the ability in settings to be able to switch between Light, Dark, and Pineapple Mode. But why would you not want to play with this beauty! The addition of the theme was easy, it was the settings that your able to switch themes that was the hard part. On top of that since I added new chess pieces, the entirety of the image load system in my code and organization of the resources in the source code had to be completely redone, the re-organizing for the file management was not tracked by hackatime but that took way too long. But yea, yay🎉🎉🎉

I fixed transparent mobs, fixed the sky glitching sometimes, and the hand/held item. used to be see through, but i fixed that as well. On top of that I tried to make it more efficient for better performance.

I have added shadows and fog! Also I have completed the Lumen Hack Club Tutorial for Minecraft shaders so from now on it is all my work, but all the work I have done so far is for learning and setting the foundation. The left picture is the picture of my shader compared to just vanilla Minecraft on the right.

I’m making a shader for Minecraft!, i added some basic lighting, this took so long😭. btw I’m also making this for another Hack Club thing called Lumen! I added 2 pictures, 1 which is on the left shows the lighting with my shader, and on the right is just normal, Minecraft(no shader).

I have successfully added Stockfish, an chess engine that is extremely powerful to my app. Took a bit of work, but now you can play against a bot! I have added setting to customize the game against Stockfish if you click it so there’s difficulty selection and the side chooser which lets you choose which side you want to play on. Hardest part was getting the code to work with Stockfish as Stockfish communicates via the Universal Chess Interface (UCI) protocol. The chess engine itself is basically a command line and you can put in the current position and it will spit out the best move in the command line. Its not very user friendly which is why chess GUI’s come in to play like mine, my code translates it from he UI to the command line and vice versa. UCI lets me to be able to use any chess engine I want as long as it uses the UCI protocol, meaning in the future if I decide to make my own chess engine, I can implement it to my app, but for now it will remain as Stockfish.

A LOT OF NEW STUFF. Easiest part was dark mode yay. but what took me 3 hours and was so hard to do was reseizing, what I mean is you can resize the app how ever way and it works with any screen and it always sets the board at the center, I don’t know why it took this long but I did it yay. I have attached a example of it centering it self on multiple aspect ratios.

for a very small feature, this should not have taken this long. i added 2 features, the side bar in the left for future stuff, the play button on he left allows to choose the game mode when i add the feature to be able to play bots, i want to be able to choose what I want to be able to do, either play 2 player or bots, so basically the sidebar is the foundation for future features. Then is the feature that should have taken like 10 minutes, but it took me a hour and a half. It is the feature that flips the board after every turn in 2 player mode because 2 player means 2 people are using one computer to play so the board should flip. Like it used to flip the peices were upside down, liekt he images were, and i tried to add code to make it flip but it didnt work, so then I added a seperate folder with the peices edited to be flipped, but then after implemeting that, id id some stuff it swithc the pictures to that folder only when the baord is flipped, BUT THEN IT STILL REMAINED FLIPPED. So i tried so much to finally figure out I did somehtign that amde the peices flip by themselves without editing and using the different stuff, but when i tired to remove the folder andf only use one folder wiht the peices IT STOPPED WORKING, so now I have 2 folder wiht the exact same pictures of the peices and it works😭. sry if I yapped too much but I needed to vent, In the picture attached it shows the baord flipped and the sidebar as well if you wanna see the final product of the work ive done so far. but im gieunly tweaking rn😭

added a new popup system where instead of it opening a new separate window with the popup, it is more cleaner and in the app, my next step is to add a sidebar to the left and have like a bunch of different stuff there 😄

BIG PROGRESS, fixed possible move highlights. added a move history to the side, and added draw detection for all possible draws. Next job is hopefully being able to export and import PGN.

A lot of progress has been done, I have put in all the special moves like castling, en passant, and pawn promotion. And I have also added check and checkmate detection. Also I have added UI popups that appear when you promote so you can choose what piece you want as well as the game over pop up when you checkmate and a rematch button which resets the board. So foundation of my chess game GUI is complete, I have recreated the game, I just have some small tweaks that i can do later like when you click a piece while you are in check, it still shows the viable options that don’t protect your king, but it wont let you move there but it still shows it. On top of that I also want to make the pop ups happen in game without opening a new window. But my main next step is add a move history, draw detection, which can only be done with a move history because 2 ways a draw can happen is when 50 moves have passed and a piece has not been captured, or the same position has been repeated 3 times.

I have made my chess board render pieces, show viable moves, make moves, and only allow legal moves. Not all special moves have been added like castling, en passant, pawn promotion, stalemate, or even checkmate(you can take the opponent’s king and the opponent can still move😭).

I made the Chess Board

I have started my project, most of my time was taken switching my GUI from Java Swing to JavaFX. This is just a simple window so far but we are going somewhere. This isn’t a lot but I am learning Java, so its just slow and steady progress.