Forem: Sonja

Retro Games React App

Sonja — Thu, 21 Nov 2024 11:07:41 +0000

Continuing my journey into Full-Stack Development I'm happy to share my very first React Application that pulls together 7 Retro Games coded in JavaScript and makes them available for play on a single page.

What does the application do?

The React App provides a great overview of the games available through small icons depicting the games on the left hand side. Upon clicking on an icon the game is displayed in the center of the page and ready to be played.

Games available

Memory
Whack The Mole
Connect Four
Space Invaders
Snake
Frogger
Tetris

Technical Details

The application was created with Create React App, a JavaScript library for building user interfaces. I separated the different moving parts of the application and put them into the following React components.

header: displayed vertically like a navbar containing the game icons
gameIcon: returns a figure containing a caption and an icon based on data received through props and handles click events
gameBox: centerpiece of the page where the games are being played by use of iframe
gameData: JS object containing all relevant games data

In App.js all threads come together, state for the currently selected game is handled, relevant game data is imported and stored in a file and the various components of the web application are being returned.

import React, { useState } from 'react';
import './App.css';
import {games} from './components/gameData';
import Header from './components/header';
import GameBox from './components/gameBox';

function App() {

  const [selectedGame, setSelectedGame] = useState("Select Game To Play");
  const onSelectGameHandler = newGame => {
    setSelectedGame(newGame);
    console.log(selectedGame);
    console.log(games[selectedGame]);
  };

  let figures = [];
  for (const game in games) {
    figures.push({id: game, src: games[game].src, name: games[game].name, alt: games[game].alt, href: games[game].href});
  }

  return (
    <>
      <h1>RETRO GAMES</h1>
      <div className="App">
        <header className="App-header">    
          <Header handler={onSelectGameHandler} data={figures} />
        </header>
        <section className="Game-box">
          {games[selectedGame] ? <GameBox game={games[selectedGame].alt} src={games[selectedGame].href} /> : <h2>Select Game To Play</h2>}
        </section>
      </div>
    </>
  );
}

export default App;

Finally, I deployed the Retro Games React App on GitHub Pages, where all the games can be played.

Download Link

Explore the full codebase on GitHub.

s-mehnert / Retro-Games-React-App

Conclusion

Finishing a project for me always means that I have a lot of ideas for how and what to improve in future projects. In this case, I particularly look forward to version 2 in which I would like to integrate the games as React Components and make use of React Router to display them, refine the styling and separate it into one CSS file per component and have the scores of your current playing session displayed per game.

Acknowledgements

The JavaScript games were inspired by a Ania Kubów.

Envelope Budgeting API: Easy Money Management

Sonja — Fri, 19 Jul 2024 10:44:01 +0000

After six months of diving into Back-End Web Development, I'm excited to share a significant milestone: my very own API that demonstrates Envelope Budgeting in action.

What does the program do?

The API provides a user-friendly webpage where you can create, update, view, and delete envelopes. It also allows budget transfers between envelopes. Feel free to explore its features. (Note: Initial loading may be slow due to deployment on a free instance.)

Current Limitations

The total budget is hard-coded to $5000, and changes are temporary, lasting only until the server restarts. Future versions will include a database layer and customizable total budgets.

Technical Details

The back-end is powered by Node.js and Express.js, supporting the following HTTP methods:

GET (1) -> displays all envelopes
GET (2) -> displays remaining total budget
GET (3) -> fetches individual envelope by name
POST (1) -> creates new envelope and assigns set budget
POST (2) -> transfers budget from one envelope to another
PUT -> logs spending in a particular envelope
DELETE -> deletes an envelope

To prevent overspending, there is a limit check in place for POST and PUT routes. For POST, PUT, and DELETE, there is also a check if an envelope with the same name already exists. If a check fails, an error message is sent.

// Transfer budget between envelopes
app.post("/envelopes/transfer/:from/:to", (req, res) => {
    const from = req.params.from;
    const to = req.params.to;
    const amount = Number(req.query.transfer);
    if (!envelopeExists(from) || !envelopeExists(to)) {
        res.status(403).send(`Operation declined. \nPlease make sure to enter names of existing envelopes to transfer money between them.`);
    } else if (envelopes[from].budget >= amount) {
        envelopes[from].budget -= amount;
        envelopes[to].budget += amount;
        res.status(201).send(`New balance: \nEnvelope "${from}" - $${envelopes[from].budget}, \nEnvelope "${to}" - $${envelopes[to].budget}`);
    } else {
        res.status(403).send(`Operation declined. \nNot enough money left in envelope "${from}".`);
    }  
});

The front-end was developed using HTML, CSS, and JavaScript to create an easy-to-use interface for demonstrating the API. This allows users to interact with the API without downloading code or using tools like Postman, so the styling is intentionally minimal.

The front-end includes validation checks to prevent empty input fields and changes the server response display field's background color based on the HTTP response status. Different colors indicate success, errors, or failed validations, helping users understand the results of their actions.

I used JavaScript and asynchronous fetch() requests to connect the front-end and back-end. Going full-stack also involved adding a fourth GET method to fetch the index.html file and properly setting up CORS for the back-end.

postButton.addEventListener("click", async () => {
    const envName = postName.value;
    const envBudget = Number(postBudget.value);
    if (envName === "" || envBudget === 0) {
        serverResponseField.innerHTML = "Please enter a name and budget before clicking the CREATE button.";
        alertServerResponseField("orange");
    } else {
        try {
            const response = await fetch(`${apiUrl}/envelopes`, {
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({newEnv: envName, newBudget: envBudget}) 
            });
            if (response.ok || response.status === 403) {
                const jsonResponse = await response.text();
                clearDisplay();
                serverResponseField.innerHTML = `
                <h4>--- creating envelope ---</h4>
                <pre>${jsonResponse}</pre>
                `;
                if (response.status === 403) {
                    alertServerResponseField("red");
                } else {
                    alertServerResponseField("green");
                }
            } else {
                throw new Error("Request failed!");
            }
        } catch (err) {
            console.log(err);
        }
    }
});

Conclusion

Creating my first API was incredibly rewarding. The hands-on experience of implementing it myself, after studying the theory, was invaluable. Seeing an HTTP request go through successfully was a moment of triumph.

Acknowledgements

I struggled the most with connecting the front-end and back-end, using a tactic called Just-in-Time Learning (JIT). While online resources, including ChatGPT, and trial-and-error were helpful, a breakthrough came after a short coaching session with a senior developer who clarified some key points. So, a shout-out and big thanks to all the people and platforms providing curated content, which significantly accelerates learning when combined with JIT. Both are essential!

Download Link

Explore the full codebase on GitHub.

s-mehnert / Envelope-Budgeting-API

Learn how Envelope Budgeting works by using the Envelope-Budgeting-API via the provided front-end.

The API has been created using Node 20.11.1.

Image by freepik

CPU Simulator

Sonja — Thu, 26 Oct 2023 10:19:16 +0000

I am very happy to share that I concluded the Computer Science Career Path on Codecademy!
Actually this happened already a little earlier this year, but only now the last piece has been finalized - a CPU Simulator. This was part of the Computer Architecture module.

What does the program do?

The goal of the project was to simulate some part of the inner workings of a CPU. I find this subject fascinating and since it is so broad I had to fight scope creep quite a bit. In the end I settled for simulating the CPU's fetch-decode-execute cycle by processing the following short list of simplified MIPS instructions:

CACHE,1
ADDI,R2,R2,2
ADD,R3,R2,R1
J,8
HALT,;

The CPU Simulator was built for demonstration purposes only and focuses on a very small portion of the CPU's and ALU's capabilities. It showcases the CPU's fetch-decode-execute cycle and processes the given commands. It will not be possible to give any other instructions to the CPU Simulator than the ones provided.

How did I code the CPU Simulator?

I implemented a class each for the Central Processing Unit (CPU) and the Arithmetic Logic Unit (ALU) in separate files. In yet another file I put the code for the simulation where everything comes together, the instructions are loaded in from a text file, CPU and ALU are imported, an instruction set architecture is defined and the simulation runs.

Within the CPU implementation I relied on deque from Python's collection module to create a queue for the instructions and the instructions' elements to be dequeued.

Whenever the instruction was of a category that was handled by the Control Unit of the CPU itself, the command would be executed within the logic of the CPU class. If, on the other hand, the instruction was such that it needed to be handled by the ALU, CPU passed it on to the ALU class and after processing received the result back, storing it where it needed to go according to the instruction as you can see in the following code snippet.

    def pass_instruction_to_ALU_and_store_result(self, decoded_instruction):
        print("\nPassing instruction to ALU...")
        alu = ALU(decoded_instruction)
        alu.execute_instruction()
        result_of_operation = alu.result
        decoded_instruction["val_dest_reg"] = result_of_operation
        print(f"Receiving result from ALU and storing it in destination register {decoded_instruction['dest_reg']}")
        self.registers[decoded_instruction["dest_reg"]] = result_of_operation

Below you can see two instructions from the list above being executed by the simulation.

Conclusion

The implementation of this project was elating and frustrating at the same time. While it definitely helped me gain a deeper understanding of how a CPU works as well as great appreciation of the levels of complexity involved it made me make the tough decision on which infinitesimally small portion of CPU logic I would have to focus on in order to keep the project scope feasible.

Please, feel free to download the program and let me know what you think. You can find it on GitHub.

s-mehnert / cpu_simulator

Run this script to see a demonstration of the fetch-decode-execute cycle using a set of pre-defined commands similar to MIPS instructions.

The simulation has been created using Python 3.11.5

To learn more about the topic, here is the site I found very useful to refer to while working on this project:

Learn Computer Science Online

Boardgame recommender

Sonja — Tue, 04 Apr 2023 09:00:41 +0000

The next step has been taken, yay! I finished the Data Structures and Algorithms Course, which is part of the CS Career Path on www.codecademy.com.

This is a subject that didn't come too easily to me, I have to admit. But while there is certainly still a lot to master I am very confident at having thoroughly covered the basics now, finalizing the chapter with this recommendation software project coded in Python.

The aim of the project was to store the data in a data structure of our choice - a linkedlist in this case - write the recommendation functionality and implement an autocomplete feature.

What does the program do?

The program will recommend a boardgame to play matching the user input with an existing boardgame collection.

To do this the program first collects user input asking for the number of players, the age of the youngest player and the time they approximately want to spend playing. Then, the user is also asked to indicate what type or category of game they would like to play.

To narrow down the boardgame types for the user, the program features an autocomplete function. The user simply types the first (few) characters of the desired category to see all the options displayed that start with these letters. They will then be able to select the category by typing the number displayed next to it.

Finally, the program filters the boardgame collection against these criteria, displays the results and provides the user with the option to repeat the process if they are not happy with the games recommended.

How did I implement the recommendation software?

I coded the LinkedList and Node classes in a separate file. The boardgame data went into another file. Those two I imported into the main program file and stored the imported data in two LinkedLists, one for the boardgame collection, the other for the boardgame types.

The main body of the program consists of 4 main functions to

collect user input,
filter the LinkedLists,
display the results and
start the process over

... as well as several helper functions, including the required autocomplete feature.

By far the trickiest part of the whole process was figuring out what data structure to use. I opted for a Linked List mainly for two reasons. First, because Linked Lists can be easily traversed, which I needed to do, since checking the user input against all the criteria entered meant I needed to look at every entry in the data structure anyway. A Linked List does that very efficiently. And second, I find Linked Lists quite straight forward to implement.

Above you can see a sample run through of the program in the terminal.

Conclusion

The implementation of this project did feel a little artificial. Without the given constraints I would have used a very different approach making use of more of Python's built-in properties. As this was aimed at applying the newly gained knowledge of data structures and algorithms, however, it was clearly good practice to do it this way.

What next?

I find it very useful to revisit projects after a while to see how I would solve the problem differently with the experience gained in the meantime. I might want to implement a different algorithm for filtering or break the project free from its constraints and implement a more Pythonic approach, concluding with comparing the speed of the different solutions.

Please, feel free to download the program and let me know what you think. You can find it on GitHub.

s-mehnert / boardgame_recommender

This little program helps you decide which boardgame to play based on input like time available, number of players, etc.

The game has been created using Python 3.9.7

The Ultimate Battleship - A Python Terminal Game

Sonja — Mon, 01 Nov 2021 22:11:52 +0000

For my first Python project I decided to create a Battleship Terminal Game. I love to play it on paper and was intrigued by the challenge to make it digital. This is part of the CS Career Path on www.codecademy.com.

What does the program do?

The programm will randomly hide 10 ships of 4 different sizes.
To play one needs to follow the text instructions and use the keyboard for input. The playing field will be updated after each shot and notifications will be displayed when a ship has been sunk. The player has 75 missiles at their disposal. If they manage to sink all the ships, THEY WIN.

How did I implement the game?

First, I thought about the visual appearance of the game. I definitely wanted to have a playing field. Therefore, I designed a 10x10 grid, each square numbered (A0 through J9). Also, the dialogue between program and player got worked out in the beginning. I guess, I worked along the storyline of the game.

To determine the position of the ships I worked with the random module. All playing fields, the hit list, the ships etc. are stored and being accessed as lists. I had a vague idea that for some purposes the use of dictionaries might have been more appropriate, but my understanding of lists was way better and so I went down that path.

The first tricky part was to make sure that the ships were distributed correctly (not touching each other, not spilling onto the next row or column). Then, I included some counters, so that the player can see, how many hits they have landed, how many missiles are still available, etc. The updated playing field and counters are being output to the terminal after each move the player makes. This is as visual as I could make it.

The next challenge was figuring out how to tell the player that a ship or all ships of a kind, respectively, have been sunk. I managed with a whole series of nested if statements.

Finally, it took me a while to find out how to enable the player to go for several rounds of the game consecutively with different random playing field setups.

In the end, I had coded all the features I had listed in the beginning as must haves and managed to refrain from working on most of the nice to haves, noting them for future enhancement.

What next?

I am pretty happy how the project turned out and have fun playing it myself. My main focus was to make it work. And that it does. A next step will be to get rid of the some of the lengthy and not very elegant code and make it more concise.

Update - December 2021: Version 2.0 is available

The program now gives a choice of 4 difficulty levels and keeps a running total of games played, games won and games lost.

Please, feel free to play the game and let me know what you think. You can find it on GitHub.

s-mehnert / Battleship

Terminal Game - play the classic Battleship Game against the computer.

The game has been created using Python 3.9.7