General information

I have recreated the board game Connect 4 and it is my second published React project. I developed this game without any references, everything was created from scratch without looking up other solutions. The inducement of creating this project is to focus on something else than the usual web page components. This is the reason I am about to create a game instead of a regular web page.

This project is under development. Currently the basic logic for playing this game and determine the winner is working, but I still need to implement the timer, a design and protect the process of declaring the winner on the server side.

Basic algorithm

The turns are being counted and by checking if mod(2) equals 0, the code will determine the current player. Then by calculating with mod again I was able to calculate which column is being clicked and place the token over the highest / last one in this row. After the piece is set, a while loop checks if the current player has set four tokens in a row. This is going to be executed in a total of four times, once for each direction:

• Bottom
• Horizontal
• Diagonal left
• Diagonal Right

Finally, if the verification is true, the winner will be determined.

Difficulties or mistakes

When creating this project, I was planning to simple regarding the horizontal and diagonal win verification. Precisely I did not consider that the token can be in-between the first and last one. This led to more working steps than expected. In particular, you can understand what I mean when you inspect the initial concept, which I wrote before starting to write code.

Elegant solutions and learning results

I focused on fabricating clean and performant code. I have accomplished this by adding various comments that support console.log() statements which facilitate the process of debugging and even understanding the code.

The code is performant because it checks for the row and column before checking for the required fields. And it has various switch case functions depending on the column value as switch input.

General information

This project is my public portfolio. I have created a custom WordPress Theme from scratch using vanilla (S)CSS and JavaScript without any framework either (and PenPot for designing the mockup). I have also made it Open Source to show off the progress on the project’s GitHub repository. However, this particular theme is not supposed to be customizable but rather created individually and my highest priority was the visual appearance of the outcome. Accordingly, I regarded the mockups rather as brief sketches than a pixel perfect template.

Difficulties

Writing HTML with vanilla PHP echos is highly incomprehensible unlike when using Laravel Blade. I still tried to separate the view output from the information fetching as clear as possible (similar to the way Laravel handles the markup output or any Model, View, Controller architecture in general).

I made use of the preg_match() function instead of the DOMDocument() function which could cause problems when writing about HTML tags and including code snippets. However, I do not need this feature so for this purpose the solution is acceptable.

Elegant solutions and learning results

The PHP echo commands are indented according to the markup order and the closing HTML tags have their class name attached as command next to them.

I was able to gain more knowledge about SVGs animations and even substituted a clipping mask by placing the outline of a filled object over it (by masking use of a higher z-index).

After being rendered by the browser, the finished product file size is under 1MB including all assets (from images to the style sheet).

General information

I have created a generator for pixel graphics using ReactJS. This task is my first public React project and was based on a coding task I found on GitHub. I followed an approach without any help or references to solve this task.

Basic algorithm

You can choose between a brush and paint bucket tool. This was accomplished by making use of the setState and useState hook.

Each field has a TailwindCSS background-color class. Upon clicking on any field, the current selected color will replace the clicked field’s color when using the brush tool.

The paint bucket tool is more complex: Initially it works like the paint brush tool and afterwards it will reach out for all fields left, right, up, down, and diagonal to the originally clicked square. The algorithm will check if those fields have the same color as the first one and only stop if another color than the initially clicked field is present.

The new colored fields will be saved to an array. The algorithm will check to the left, right, up, down and diagonal to each of these fields and color them afterwards. Already colored fields will be removed from the array and as soon as no field occurs, the while loop will be stopped.

Difficulties

I realized that the process of calculating the column and row according to the field number can be enhanced. I started to count the field index with 1 instead of 0 like you usually would being with. This caused unnecessary if else statements. However, in my second published ReactJS project, I started to count at 0 and fixed the issue.

Elegant solutions and learning results

I managed to make use of decently documented console.log() statements that return the current indexes and particular function. Due to these comments, the user is able to easily comprehend the process that is currently being calculated.

General Information

I have received a PSD file and was supposed to deliver a pixel perfect result in pure HTML and CSS markup. 

Difficulties

I had issues with getting the margins accurate due to the line height. I solved this by readjusting the margins afterwards.

I opened a Photoshop PSD with Affinity Photo and also GIMP, which both caused individual visual errors in the file. Eventually, I simply used the default Mac preview, which gave me a correct reference without any occurring issues.

I had to "fetch" the images out of the PSD file instead of receiving them as vector files in the first place.

Elegant solutions and learning results

Instead of just making a desktop view, additionally I took care of the mobile view until 320px - it is fully responsive until this resolution.

I used an only HTML and CSS slider instead of a JS like you normally would. The solution works decently apart from scrolling up while using the arrows. I worked around this problem by adding smooth scroll behavior, but relying on workarounds and relinquishing control can lead to problems in certain situations. Due to this limitation, I would not use this solution for an actual live website, preferring a JS based method instead.