DEV Community: Add00

Minesweeper Release

Add00 — Thu, 12 Dec 2024 04:43:56 +0000

Greetings,

Last time, I gave an update on my progress. I'm pleased to say I've made a PR and I'm waiting for the maintainer to approve it.

To solve the issue I mentioned previously about communicating between different parts of the program I opted to use the EventEmitter pattern which involves emitting events and having preset functions to respond to those events. This is very similar to how events such as clicks or button presses are handled in the DOM. Once I created a class to implement this pattern I realized that I could simply many parts of my existing code to use this pattern. Such as an event for when the game ends.

I also reworked the time tracking class to not only differ between long and short presses, but to also track duration. This allowed me to add a timer showing the player how long it took them to complete the game. I also wanted to have a scoreboard with the best times, but I felt it was out of scope as it was a single-player game only so it would only have the players scores.

The last thing I added were some win and loss effects using ZzFX a tool I had not used previously, but I think I will use more going forwards as it has a lot of functionality and a small file size.

Overall, I felt I got to add everything a minesweeper game has, randomly placed mines, numbers showing the adjacent mines, ability to reveal squares and place flags, as well as a game timer, and win/loss screens. Starting from release 0.2 to 0.4 it was very exciting to work with this engine and build increasingly large projects, to end with a fully working game. It is quite satisfying.

Minesweeper Progress

Add00 — Thu, 12 Dec 2024 04:17:15 +0000

Greetings,

Last time, I was working on my plans for developing a Minesweeper clone for the litcanvas engine. Like any plan for a programming project it had to be modified along the way as their was many unique technical challenges I did not think about when originally planning it.

For example one problem I didn't realize I had to face was the fact that the engine did not have away to detect right clicks on the mouse. Since I needed to inputs one for revealing mines and another for placing flags. My solution was to track how long the user was clicking for and if it was a long press a flag would be placed otherwise it was a short press and the square could be revealed.

Another issue that I had to find a solution for was how to reveal all tiles which had zero mines as a neighbor. Originally, I wanted to develop a loop based approach for finding all of the neighboring squares. However, if there is a loop based approach I could not get it to work, so I switched to a recursive algorithm which would check each square and each of that squares' neighboring until it found one boarding a mine.

With the fundamental parts of the game complete I now need to work on a way of displaying the game in a visually interesting way and to communicate actions between different parts of the program.

Planning Minesweeper

Add00 — Fri, 06 Dec 2024 04:49:11 +0000

Greetings,

For the final project of this semester I wanted to continue contributing to the game engine I had been making previous contributions to. So I made an issue asking the main developer if I could add a tween animation system. It turned out the developer already had one and I had some how missed it. So, I turned to my back up plan and asked if the developer was interested in rigid body physics. Unfortunately, it turned out that it was not a feature inline for the maintainers vision of the engine.

However, he did suggest that I make an example game. This was a very good suggestion so I decided to make Minesweeper a game about finding all the cells without mines in them. For this project I opted for an object oriented approach. I plan to have a Tile class to represent a cell which would store the number of adjacent mines, and if itself is a mine. As well as a Board class which would store the 2d array storing the tiles as well as a method to draw it. Finally, there would be an Interaction class to handle user mouse events as they click on the cells in the game.

While I know how to play Minesweeper, programming it is a different challenge and I look forwards to it!

Releasing a Package

Add00 — Sat, 23 Nov 2024 04:06:44 +0000

Greetings,

With the end of the semester approaching, this weeks assignment was about making our CLI tool available. Since, this project was built in JavaScript it made the most sense to release the package on NPM, the most popular JS registry in the node ecosystem.

To create the release I first made a .npmignore file which would prevent unnecessary files for testing, and documentation from being installed on the users device. This file follows a similar syntax to .gitignore file. Then, I created an NPM account. After that I ran npm login to sign in from the terminal in my project. Before publishing the project to NPM I made sure to tag the current commit with git tag -a v0.9.0 -m "version 0.9.0". So that the project would have a proper version number. Finally, I ran npm publish to make it publicly available on the internet.

To have the code function as a library I had to modify the main.js to export it's function instead of call it directly. This is a more flexible solution as other developers can use the function as they see fit.

Quadtrees!

Add00 — Thu, 21 Nov 2024 01:14:43 +0000

Greetings,

Having spent most of the past week working on Procedural Generation and Noise. I needed to find another topic for a second issue. So I was scrolling the list of issues available for Litecanvas and noticed one for creating Quadtrees.

I had many questions, what was a Quadtree? Where do they go? How many are ideal? And do they taste good? I was able to find satisfactory answers to all but one of my questions in my search. So I asked the repo owner if I could work on the issue.

A Quadtree is a tree type data structure which is an an efficient way to store spacial information. Each node in the tree has 4 child trees within it, this is a recursive relation ship. Visually a Quadtree looks something like this:

Where points can be found based on where they are located in the Quadtree. To create a Quadtree I first created a point and rectangle class, points would be stored in the tree, and a rectangle would be used to check for points within an area.

Then I created the Quadtree class which would hold the points and automatically subdivide into more Quadtrees as required. For debuging and testing reasons I also made a show function to visualize the changes. Once complete, I made my PR.

This concludes release 0.3, 0.4 is on the horizon!

Procedural Generation and Noise

Add00 — Thu, 21 Nov 2024 00:47:26 +0000

Greetings,

For this most recent assignment we were tasked with contributing a larger feature to an open source project. During my time with the previous assignment I worked on a game engine called Litecanvas, inspired engine by libraries like raylib and p5.js/Processing.

Having gotten a better understanding of the engine and it's capabilities, I noticed that it was missing procedural generation. Procedural generation is a technique of creating pseudo-random values that form patterns or textures as apposed to pure randomness. Which looks well random... Honestly, it's easier to see what pseudo-random looks like visually:

Originally, my plan was to learn the math behind pseudo-random generator known as Perlin noise. Then create my own implementation, as I did with raycasting. However, it turns out that unlike raycasting which is composed of high-school level trigonometry. Perlin noise requires a lot more complicated math then I could understand or have the time to understand.

This led to my second plan addapt a C++ Perlin noise library creatively called PerlinNoise, into JavaScript to work with Litecanvas. So I made an issue asking if the engine author wanted this feature. They said they were fine with me working on this issue, but to look at the p5.js Perlin noise library for assistance.

Which led to the third plan, adapt the existing JS version! This while not being super easy was much better then writing a version from nothing or from a different language. So I began working on the adaptation, figuring out the correct way to interface with the engine was a bit troublesome, but there was many great examples that existed that I followed. Once compete I made a PR.

The PR is still awaiting approval as I only submitted it recently, to ensure the code was properly documented and commented. Through out this process I learned that not everything has to be done from a low level or from scratch. I can still learn a lot by working with code at a high level.

Continuous Integration and Continuous Learning

Add00 — Sat, 16 Nov 2024 03:30:18 +0000

Greetings,

Entering week 10 of the open source course. We have been assigned to learn about a topic that has always interested me Continuous Integration (CI) Workflows, and automated testing. I've always wanted to work with GitHub Actions, and this weeks assignment gave the perfect time to do it.

Setting up this workflow was very simple, as the project tests were also simple. The default template GitHub Action for NodeJS testing was able to work out of the box. It functions on every PR and push to the main branch and runs the npm test command which runs the full suite of tests on three major versions on Node.

The full file can be seen below:

name: Node.js CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x, 20.x, 22.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v4
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v4
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test

Writing tests for my partners repo was interesting as they had used a different testing framework. They had opted to use Jest where I was using Vitest while syntactically similar the functions had some slight differences. Given that they had very good test coverage out of the gate, I only opted to add some minor tests for some edge cases.

Having implemented CI for this assignment while not a very complex implementation. The fact that a basic automated testing system is just a few clicks away is new information to me. Seeing this I look forwards to adding this to more of my personal project.

Test Test Test

Add00 — Sat, 09 Nov 2024 00:53:19 +0000

Can you hear me?

Greetings, another week another lab this week covered the topic of automated testing. When selecting a test framework my first thought was to use Jasmine, which I had used previously, however it turns out that Jasmine does not have good support for ES modules. After doing a bit of research I opted to go with Vitest, since it was ES module compatible, and was inter-compatible with the very popular Vite tool chain.

Getting started with Vitest was very simple first I installed is a development dependency using the following command:

npm install -D vitest

Then I added a test script to the package.json:

"test": "vitest"

While custom configs can be set using a vitest.config.ts file, due to the straight forward nature of my project it was not necessary to have one.

While writing the tests I realized that I had structured the code quite poorly and had put too much code into the main.js file. Since the main file acts as the entry point to the program and the main function cannot be exported. To ensure everything could be thoroughly tested I made a new chat.js and utils.js and moved non-entry related code into them. Then made corresponding test files.

In the testing process I ended up finding and fixing several bugs one of them being that I had created a custom Ollama client, but it was never used instead the default Ollama client was used to make requests.

Going forwards I think I will use Vitest as my primary testing suite for personal projects. While using it I did have problems, but those problems where of my own making! Whereas, with Jasmine, and other testing tools I've run into issues involving the tool itself which is never ideal. Especially for a testing kit.

Formatting and Linting

Add00 — Fri, 01 Nov 2024 21:49:20 +0000

Greetings,

For this assignment we had to add a formatter and linter to our projects. I opted to go with ESLint and Prettier and as they work well in the JS/Node ecosystem. Both tools are widely used, well-documented, and have strong community support.

After installing, I ran ESLint and Prettier commands. ESLint highlighted a few code issues, such as unused variables. Then Prettier flagged areas where formatting was inconsistent and fixed it. Some ESLint errors were fixed automatically, while others required manual refactoring, which helped improve the overall structure of the code.

Setting up ESLint and Prettier helped me a lot about the importance of static analysis. Using these tools help to standardized the code between developers and also reduced errors. I feel this would likely reducing the need for stylistic changes in pull requests.

Hackoberfest: Part 4

Add00 — Fri, 01 Nov 2024 02:31:05 +0000

Greetings,

For this final part I wanted to do something that was still interesting, but not a time consuming as making a custom pseudo ray-casting engine. So using the game engine I became very familiar with I saw their was an issue to implement tic-tac-toe a simple but popular game.

So I requested permission to work on the topic and started right away. First I setup some code to draw the game board to the screen then when a click event happens it will map the pixel coordinates click to the corresponding cell in a 3 by 3 array storing the previously placed pieces.

Then it will check to see if the "X" or "O" player has won if it hasn't it will cycle back to waiting for a click. Once a player has one or tied it will show a win message and end the game.

That concludes the Hackoberfest saga it was really quite the learning experience. I feel there was a lot of things, in particular time management better. Now that I've gone through this contributing to open source does not stress me out as much as it used to and I think I'm better at managing time.

The next post will be your regular scheduled programming about the AI CLI tool and Static Analysis.

Hackoberfest: Part 3

Add00 — Fri, 01 Nov 2024 02:11:13 +0000

Greetings,

Now for this third part I wanted to do something much more major and which would be cool! So I found a relatively obscure 2D game engine written in JS called Litecanvas. It is similar to tools like p5.js or raylib which I have some previous experience with.

I noticed there was a long standing issue regarding simulating 3D. This is a topic that has interested me for many years so I decided to try and solve this issue myself using a ray-casting technique. However, I wanted to avoid the awkwardness of asking for the issue then being unable to complete the task.

So I spent a week researching and testing hoping that no one else would take the issue in the mean time. Honestly, looking back I should have just asked for the issue in the first place the maintainer is a very nice person.

It turns out high school trigonometry has a lot of uses for ray-casting which is quite exciting for someone who hasn't had a good use for it. The solution I opted for works in the following way.

First rays are projected out from the player and they record the distance from the wall to the player. The longer the ray the further the wall. Each ray will correspond to a single column in the players' first person field of view.

The first person point of view is then generated by taking the lengths of the rays, with longer rays meaning the wall is drawn smaller since it is further away and shorter rays meaning the wall is drawn longer since it is closer.

This glosses over some of the more complex parts like the fixing the fish eye effect. However, you can view the PR see the it all for yourself.

Overall, although this took me wayyy longer then I thought it would I'm quite please with the final product.

Hackoberfest: Part 2

Add00 — Fri, 01 Nov 2024 01:39:54 +0000

Greetings,

So uh in my last post I said that I would be doing something much bigger the following week. But sometimes life happens and you are not able to do things when you expect them and 2 weeks pass and you haven't created some good contributions. To remedy this issue I have opted create create those contributions and this week blog about each of them now.

The first contribution I would like to talk about was in relation to an issue on the Codethesaur project which aims to be a dictionary between different languages. The owner was looking for some assistance with adding Kotlin to the dictionary.

I've always wanted to learn Kotlin so I took the chance and requested to be assigned an issue describing the various builtin operators in the language. Using the language documentation and playground I was able to learn the operators and describe them into a JSON file which I contributed.

During the PR process I learned a bit about automated testing, as the project had several. It turns out I was failing a docker test even though I had not touched any docker related code. I spent good amount of time trying to fix what I thought I had broken. It turns out one of the project dependencies needed an update. So the PR could be accepted with little change.

The next post will be about game development!