Programming Archives - Shaun Guimond

5-Character Word Game

Description

For a recent software engineering challenge, I needed to recreate a well-known game where a player needs to guess a 5-character word. I decided to improve my attempt and learn how to better manage state in React using nextJS. A new word is chosen every reload and gets a maximum of 5 attempts to guess the word.

Features

A new word is selected upon every reload of the page.
Single input field which validates whether 5 characters have been entered. Excludes entering less, or more than 5 characters.
Submit button is disabled through state, until 5 characters are placed within the input field.
History of word attempts are listed above the input field with green, orange and red backgrounds to inform the player that the character is at the correct location in the word (green), the character exists in the word, but is not in the correct location (yellow), or the character does not exist in the word (red).
State keeps track of the number of attempts and whether the player has gone over the 5 attempts allowed. In which case they have lost.
Entering the correct 5 character word changes state to remove the input and confirms to the player that they have won.

Programming Languages

The game was made using typescript and React within next.js.

Credits

Developer: Shaun Guimond

Repository

Play Game

Plant Pal Assistant (AWS – LLM)

Project Summary

The Plant Pal Assistant (AWS – LLM) project was part of the 2024 UBC CIC Hackathon. The event provided the required infrastructure for the attendees to learn or practice using Cloud Computing and Generative AI to create creative and original solutions to solve real world problems.

The Plant Pal Assistant (AWS – LLM) was built using Next.js + Flask . Next.js is used to serve the front-end, while flask is used for the back-end to make the required calls to Anthropic’s Claude v2 LLM hosted on AWS Bedrock.

Team Members

Bachelor of Computer Science Students

Alaina (Alain-gl)

Annie (@ayqya)

Kayla (@k-bolduc)

Shaun (@shaunguimond)

View Repository

Obstacle Assault – Learning Unreal Engine Part 2

This is part two of the Unreal 5.0 C++ Developer: Learn C++ and Make Video Games tutorial on GameDev.

I made the obstacle course my own, using the created C++ blueprint to make moving and rotating obstacles. The entire course goes from the starting island to a secondary island where the goal is to reach the castle at the top.

Reaching the castle allows you to gain a “Win” and restart from the beginning. The simple goal I added on my own is to make it where the player is required to reach the end (castle), without falling from the islands as many consecutive times as possible. Falling from the islands causes the player to lose all win counts and to restart from zero.

Warehouse Wreckage – Learning Unreal Engine Part 1

This is part one of the Unreal 5.0 C++ Developer: Learn C++ and Make Video Games tutorial on GameDev.

For this course, I simply familiarized myself with blueprints, creating assets and using some minor logic to start the player with twenty cannon balls. Once the player runs out of ammo, the level reloads. This was all done in Blueprints to learn some of the basics of programming in a visual format.

Textures were added to the warehouse to make it more interesting, and ray tracing was used to simplify the process.

Easy Dark Theme Using Only CSS

As I was exploring Twitter today, I came upon what I believe to be the easiest way to add a dark theme to a website using only CSS.

When I had previously explored how to add a dark theme to a website, I had only ever found ways of doing so with JavaScript. I thought there must be a better way, but until today I just hadn’t found one. When I saw this easy solution, I decided I needed to try this out for myself and lo and behold it worked wonderfully! I went ahead and followed @rootgp ‘s tutorial which can be found on his website and figured out the best way of implementing the necessary code on to my website which I have built with Frontity.

Here is the code that I used to add dark mode to my website. Again this is all using CSS and is super simple.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
  }
  h1, h2, h3, h4, h5, h6, p, ul, figcaption, code {
    color: white !important;
  }
  blockquote {
    background-color: #181818 !important;
    color: white !important;
  }
.wp-block-code {
  background-color: #181818 !important;
  color: white !important;
  padding: 25px !important;
}
  .page-description {
    color:#808080 !important;
  }
}

As of today, you should be able to see the website match the users browser theme as long as the browser supports it. Let me know if there are any issues or if you have any suggestions or feedback. Message me on any platform where you can find me.