DEV Community: Ingeborg Adolfs

Multiple Game Loops in Pygame-ce

Ingeborg Adolfs — Wed, 05 Mar 2025 22:15:46 +0000

When building a game in Pygame Community Edition (pygame-ce), the typical approach is to have a single game loop handling everything—events, updates, and rendering. For more complex games with menus, cutscenes, or different gameplay modes, it’s often useful to implement multiple game loops instead of stuffing everything into one big loop.

In this article, we’ll explore how to structure a Pygame-ce project with multiple game loops for better organization and flexibility.

Most basic Pygame tutorials show a single game loop, which looks something like this:

import pygame

pygame.init()
screen = pygame.display.set_mode((800, 600))
clock = pygame.time.Clock()

running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    screen.fill((0, 0, 0))
    pygame.display.flip()
    clock.tick(60)

pygame.quit()

Here, we are creating the window the game opens in, the game screen, setting the frame rate, and allowing users to quit the game. This is nice and simple now, but becomes rather complex and hard-to-read once you start incorporating things like a menu or different game modes. Trying to cram these elements into one game loop would require many conditionals that quickly create an overly complex and hard-to-read code.

Instead, we can create multiple game loops to separate different aspects of the game. The different loops will be handled by a game state manager to switch in and out of different loops.

To start, let's use a function based approach to store the different game states and switch between them dynamically.

import pygame

pygame.init()
screen = pygame.display.set_mode((800, 600))
clock = pygame.time.Clock()

# Game state manager
def game_state_manager(state):
    while state is not None:
        state = state()  # Call the current state function and get the next state

# Placeholder states
def main_menu():
    print("Main Menu")
    running = True
    while running:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                return None  # Exit the game
            if event.type == pygame.KEYDOWN and event.key == pygame.K_RETURN:
                return game_loop  # Switch to game loop

        screen.fill((30, 30, 30))
        pygame.display.flip()
        clock.tick(60)

def game_loop():
    print("Game Loop")
    running = True
    while running:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                return None  # Exit the game
            if event.type == pygame.KEYDOWN and event.key == pygame.K_p:
                return pause_menu  # Switch to pause menu

        screen.fill((0, 0, 255))
        pygame.display.flip()
        clock.tick(60)

def pause_menu():
    print("Pause Menu")
    running = True
    while running:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                return None  # Exit the game
            if event.type == pygame.KEYDOWN:
                if event.key == pygame.K_RETURN:
                    return game_loop  # Resume game
                if event.key == pygame.K_ESCAPE:
                    return main_menu  # Go back to main menu

        screen.fill((100, 100, 100))
        pygame.display.flip()
        clock.tick(60)

# Start the game at the main menu
game_state_manager(main_menu)

pygame.quit()

How this works:
The function game_state_manager() keeps calling different state functions until None is returned. Once None is returned, it will exit the game.

Each state is defined as a function with its own game loop.

When a state needs to switch, it returns another function which becomes the new active state.

It might sound complicated at first, but once you get the hang of switching states to switch game loops you'll realize the individual game loops will be easier to manage since they are now more modular. This approach also allows for more flexibility in adding and removing new states without breaking the existing logic. Finally, separating game loops improves readabilty, leading to a cleaner, more organized code.

If you're building a more complex game, consider using this multiple game loop approach to keep your code clean and maintained!

Flask Applications

Ingeborg Adolfs — Thu, 13 Feb 2025 17:18:55 +0000

Flask is a lightweight yet powerful web framework for Python that makes building web applications simple. Whether you're developing a small project or a more complex application, Flask provides the flexibility needed for both beginners and experienced developers.

A Brief History:
Flask was created by Armin Ronacher in 2010. It was originally meant as an April Fool's joke, but it became so surprisingly popular that it is now one of Python's most popuar web framworks.

Why Choose Flask?
Flask is lightweight and minimalistic; it doesn’t impose a rigid structure, allowing developers to build applications with more freedom.
Flask's intent was to be minimalistic and simple. Using extensions allows a developer to really custoize their program.

Flask's simplicity also makes it easy to learn with a small learning curve to get your first project started. Flask is a great choice for beginners entering web development.

Developers can also add libraries and extensions as needed, making it highly customizable.

Setting Up Flask:
To get started, install Flask using pip:

pip install flask

Creating a Simple Flask Application

Let’s create a basic web app that returns “Hello, World!” when accessed.

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, World!"

if __name__ == '__main__':
    app.run(debug=True)

Save this as app.py and run it using:

python app.py

This starts a local web server, and visiting http://127.0.0.1:5000/, or Localhost with the given port number, will display “Hello, World!”.

That's it! A very simple Flask application. Of course, there are plenty of ways to make it much more complex, but the barrier to entry is quite low.

Flask allows you to handle dynamic routes, integrate databases, and use templates for rendering HTML pages. Here’s an example of handling dynamic URLs:

@app.get('/user/<name>')
def user(name):
    return f"Hello, {name}!"

Conclusion

Flask is an excellent choice for developers who want a simple yet flexible framework for web development. Its ease of use and extensive community support make it a go-to solution for projects of all sizes. Flask is also great for beginners as it is quite easy to learn the basics. Give it a try, you never know where a little joke might take you!

Getting Started With Pipenv

Ingeborg Adolfs — Thu, 23 Jan 2025 06:16:59 +0000

When working on Python projects, managing dependencies efficiently is crucial. Pipenv is a useful tool that helps us handle virtual environments and dependencies simply.

What is Pipenv?
Pipenv is a tool that helps you manage your Python project’s dependencies, automatically creating and managing a virtual environment for your project, as well as adding and removing packages from your Pipfile. Pipenv is a combination of pip, a package manager for python, and virtualenv, a tool for creating virtual environments. Pipenv can be used with Python 3.7 and above.

With Pipenv, you can handle both your virtual environments and your dependencies at once.

A key Benefit of using pipenv is it automatically creates your virtual environment if one doesn’t already exist. Using a virtual environment ensures that the dependencies you install are isolated from the global Python environment, preventing version conflicts.

If you haven’t installed Pipenv yet, you can install it globally using pip:

pip install pipenv

Create a new project and navigate to the root of your directory.

mkdir new_project
cd new_project

The simplest option to get started with pipenv is to run:

pipenv install

This will create your virtual environment. If a pipfile/pipfile.lock already exist, it will also install the dependencies exactly as specified. If no such file exists, it will create them.

To enter the virtual environment, you will need to run:

pipenv shell

In your terminal there should be some sort of success message. There will also be a path where your virtual environment is located. Next, open your interpreter list, select enter interpreter path, and paste your virtual environment path. Now you can work inside of your new virtual environment!

As an alternative to pipenv install to be more explicit you can run:

pipenv install --python <version number>

This will only set up your environment without installing dependencies while specifying the python version you want to use. It can be advantageous to run commands individually for more control if you have safety concerns, or if you want to be explicit about version numbers.

To install a new, specific package, run:

pipenv install <package>

After running this command replacing <package> with the package you wish to use, pipenv will update or create a pipfile in your project directory and install the library inside the virtual environment. Running the command above will also update the pipfile.lock with exact versions.

What is a pipfile?

Pipfile is a file that defines your project's dependencies.

Pipfile.lock is a file that locks your dependencies to specific versions, ensuring that every developer working on the project installs the exact same versions of packages. It also contains other metadata.

Pipenv checks for version conflicts among dependencies and resolves them automatically. For example, if two packages require different versions of the same dependency, Pipenv tries to find a compatible version that works for both.

Where can I find packages available for me to use in my project? At https://pypi.org/ of course!

Additional flags and commands that are useful are:

--dev

These are packages we can install that are only needed for development (e.g., testing libraries). This will add pytest to the [dev-packages] section in your Pipfile.
Here's an example:

pipenv install pytest --dev

To update or uninstall packages, simply use:

pipenv update <package>
pipenv uninstall <package>

To exit your virtual environment:

exit

To remove your virtual environment:

pipenv --rm

When should you use pipenv?
Pipenv is ideal in the following scenarios:

Project Isolation: When you want to isolate your project’s dependencies from your global Python environment, ensuring compatibility across different systems.

Team Collaboration: When working on a team, Pipenv ensures everyone uses the same dependency versions by sharing the Pipfile.lock.

Easy Setup: If you want to quickly set up a project environment with automatic dependency resolution, Pipenv provides a streamlined process.

Before pipenv, there was Virtualenv and Requirements.txt.
While there is nothing wrong with using virtualenv and requirements.txt, Pipenv offers several advantages. Pipenv automatically creates a virtual environment; you no longer need to manually create it.The pipfile provides a more readable and modern way to specify dependencies. Dependency management (installation, version locking) is also more automated and error-resistant.

Conclusion
Pipenv is a powerful tool that simplifies dependency management in Python. It automates the creation of virtual environments, provides dependency resolution, enhances security, and makes collaboration easier. If you're working on a Python project and haven't tried Pipenv yet, it's worth giving it a try for a more streamlined development experience.

Creating a Neon Theme Using Tailwind CSS

Ingeborg Adolfs — Thu, 02 Jan 2025 01:47:46 +0000

Themes are an easy way to add memorable elements to an application. Themes can range from sleek and modern to bold and gaudy. In this article, I'll show you how to make a neon theme with glow animations.

To start, let's use an empty tailwind.config.js file template:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Add the paths to your HTML, JavaScript, JSX, TSX, or other template files
    // Example: './src/**/*.{html,js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {
      // Customize your theme here (colors, fonts, spacing, etc.)
      // Example: colors: { primary: '#ff6347' }
    },
  },
  plugins: [
    // Add any Tailwind plugins here (like forms, typography, etc.)
  ],
}

Under content, add the paths to the files tailwind will be styling. The project using this theme and animation was built using React and React Router.

content: [
    "./index.html",
    "./src/pages/**/*.{js,jsx}",
    "./src/components/**/*.{js,jsx}"
  ],

Under theme, we want to define all of the elements of our styling theme. By adding extend:{} we can extend the default theme and add our own custom values. Let's start with colors. We want a dark background and bright, neon colors. I chose these specific hex codes, but you can use any hex codes that you like.

 theme: {
    extend: {
      colors: {
        backgroundDark: '#121212', // Dark grey
        darkBlue: "#1A2A4B", // Dark blue 
        neonPurple: '#9B59B6', // Neon purple 
        neonPink: '#FF00FF',    // Neon pink
        neonCyan: '#00FFFF',    // Neon cyan
        neonBlue: '#3498DB',    // Bright blue
        neonGreen: '#2ECC71',   // Bright green
        neonYellow: '#FFEB3B',  // Neon yellow
      }
    }
  }

Next, I wanted a fun, blocky font. I chose Bungee with sans-serif as the default in case the browser can't read Bungee.

fontFamily: {
        sans: ['Bungee', 'Helvetica', 'Arial', 'sans-serif'], // You can add more fonts or use your custom ones
      },

Now we have a generally nice and usable theme. However, we can take our theme one step further by adding animations. Neon signs are known for that special glow they emit, and we can recreate that as an animation. This animation will look like a glowing effect that transitions between two colors.

To create an animation, we use keyframes. Let's call this animation neonGlow. Within neonGlow, we need to define what is happening at 0%, 50%, and 100%. You can think of this as what the animation looks like in a snapshot of the begining, middle, and end. You can change the percentages to get different effects, but we'll stick to 0%, 50%, and 100%. At each snapshot, we want a textShadow that layers shadows at different intensities around text. The syntax for textShadow is:

text-shadow: horizontal-offset vertical-offset blur-radius color;

By setting horizontal and vertical offsets to 0, the shadow will appear around all of the text rather than to one side like a real-life shadow.
For this animation, the color will start as neon pink and transition to neon cyan. Each shadow inside a textShadow will receive an increasing blur-radius size. Here is what the entire neonGlow should look like:

neonGlow: {
          '0%': {
            textShadow: '0 0 5px #FF00FF, 0 0 10px #FF00FF, 0 0 15px #FF00FF, 0 0 20px #FF00FF',
          },
          '50%': {
            textShadow: '0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF, 0 0 40px #00FFFF',
          },
          '100%': {
            textShadow: '0 0 5px #FF00FF, 0 0 10px #FF00FF, 0 0 15px #FF00FF, 0 0 20px #FF00FF',
          },
        }

Now we need to define that neonGlow as a custom animation and what those animation properties are.

animation: {
  neonGlow: 'neonGlow 1.5s ease-in-out infinite alternate',
}

This defines neonGlow as the animation name. It has a duration of 1.5 seconds to cycle all the way through the colors. ease-in-out is the timing function that means the animation will start slowly, speed up in the middle, then slow down at the end. This creates a very smooth transition. infinite is the iteration count that tells us to continuously loop the animation. alternate defines the direction of the animation. After the first cycle of the animation, it will reverse the direction for the second cycle, then reverse again for the next, and so on. This adds a smooth, pulsing effect.

That's it for animation. The last thing we'll add is boxShadow. Our custom shadow will be named neon. Neon will have two layered shadows. Just like then animation, we will set both of our shadow's horizontal and vertical offsets to 0 to create a shadow around the entire element. For the first, larger shadow, we'll define the blur radius as 30px to create a wider, diffused. This shadow will be defined as blue. The second shadow will be pink and be smaller at 15px. The final boxShadow will look like this:

boxShadow: {
        neon: '0 0 15px rgba(255, 0, 255, 0.7), 0 0 30px rgba(0, 255, 255, 0.7)', // Neon shadow effect
      }

Now our theme is complete, and we can use our custom colors, animations, and shadow to style our elements!

Reflections On My First Challenge

Ingeborg Adolfs — Sat, 30 Nov 2024 01:01:10 +0000

Learning the basics of Javascript and HTML is fun and challenging, just like learning your first words in a foreign language. Going in, you don't know what you don't know. Each lesson opens a new door giving you a glimpse of exactly what you don't know yet. It's thrilling to take a little deep dive into one of those rabbit holes and coming out with a deeper understanding of a concept. But there's nothing more thrilling than completing your first project.

My first project was a very basic task-lister. I was provided a very basic HTML layout, a complete CSS file, and an empty JavaScript file. My tasks were to create a task list where a user can type a task input into a field, click a submit button, and see the task appear on a list. Pretty simple, right? Create a form in HTML that is visible upon loading the page, take input, and add an event listener that appends text content to the list once the submit button is clicked. Where it got really interesting was in the stretch deliverables where I tried to make the list behave in a way that I would want if i were actually using it.

First, I added another button that would delete the task from the list when clicked. Again, it sounded like such a simple task, but with every refresh I realized there was yet another step. The button needed to only appear once a task was created. The button needed to contain text, in this case, and "x". The button needs to "listen" for a click on it to perform its actions. Oh my gosh it works

But actually, I really like being able to cross off my tasks when they're done and see what I've accomplished in the day. Okay, let's try something else. I created another button, this time with the text "Done". My goal was to take a task, turn the color grey, and strike through the text. I had created a few buttons by this point, so the set-up was easy peasy. But now I had entered new territory. How on earth do I strike through text or change the color? This is CSS territory, not JavaScript territory, right? A quick search later: well, yeah. But only kind-of. I learned that I can, in fact, change how text appears using JavaScript because it needs to be able to happen after an event, not just upon loading. A quick little event listener and 2 lines later:
and some fixing spelling/syntax errors one too many times

newTask.style.textDecoration = "line-through";
newTask.style.color = "grey";

It works AGAIN!!!
Now I'm on top of the world. I can change ANYTHING. How about the color of every task based on priority that the user selects from a drop-down menu?
Okay, I may have gotten a little carried away here, but I learned how to create a drop down using <select> and I saw that there were not only options, but also optgroups. I wanted to use all of it. I wanted to see all of my options. I wanted to know what it would look like. And was it useful?

  <select id="importance" name="i-am-confused" placeholder="importance">
        <option value="" disabled selected>Select Importance</option>
        <optgroup label="Critical">
          <option value="black">Black</option>
        </optgroup>
        <optgroup label="High">
          <option value="red">Red</option>
          <option value="orange">Orange</option>
        </optgroup>
        <optgroup label="Medium">
          <option value="yellow">Yellow</option>
          <option value="green">Green</option>
        </optgroup>
        <optgroup label="Low">
          <option value="blue">Blue</option>
          <option value="purple">Purple</option>
        </optgroup>
      </select>

Yes- I used every color. Even a barely visible yellow.
Yes- for some reason black is the most critical color.
Yes- I set the name attribute for my drop-down selector to "i-am-confused".
No- It's not really practical for a user.
I had figured out that "placeholder" is the text that shows up within the element, and that "value="" disabled" allows the text assigned to "placeholder" to show up as default instead of the first option. I had no idea what "name" did. And I didn't figure it out until after completing another project later. Now I know that the "name" attribute allows me to select it with specific syntax if I wanted to do something with it using JavaScript. But, for now, in my task-lister this selection menu is still named "i-am-confused" as a little reminder of my learning progress.

But what about all those colors? Yeah, I probably wouldn't do that again. It was great to learn from and see my pretty little rainbow of a list populate as if they were throwing confetti as little celebration of my successful progress. But its functionality was wildly impractical.

Before that little celebration, though, I had to figure out a way to assign the text of each little task a different color. At first I wrote every color into an if/else statement. It kind-of worked, but I realized there was a much neater way to do it. Switch statements!

 switch (importanceColor) {
      case 'red': 
        newTask.style.color = "red"; 
        break;
      case 'orange': 
        newTask.style.color = "orange"; 
        break;
      case 'yellow': 
        newTask.style.color = "gold"; 
        break;
      case 'green': 
        newTask.style.color = "green"; 
        break;
      case 'blue': 
        newTask.style.color = "blue"; 
        break;
      case 'purple': 
        newTask.style.color = "purple"; 
        break;
      default: 
        newTask.style.color = "black"; 
        break;
    }

I learned why a default in a switch statement is useful. In this case, it takes care of what happens when the user doesn't make a selection in the drop down. I also learned that yellow is completely unreadable on a pink background - and gold isn't much better. But I wanted my rainbow.

Okay, amazing. I have a list, a done function, a delete function, and I can color my text. But it would be much more helpful if tasks of equal importance and color were grouped together, and if the tasks were listed in order of importance.

I'm not going to lie, this part was rather hard and took a couple searches to figure out.

  // Sort tasks by color priority
  function sortTasksByColor() {
    const tasksList = document.querySelector("#tasks");
    const taskArray = Array.from(tasksList.children);

    const colorPriority = {
      red: 1,
      orange: 2,
      gold: 3,
      green: 4,
      blue: 5,
      purple: 6,
      grey: 7
    };

    taskArray.sort((taskA, taskB) => {
      const colorA = taskA.style.color;
      const colorB = taskB.style.color;
      return colorPriority[colorA] - colorPriority[colorB];
    });

In simple terms, I assigned each color a number that represents its priority. I put the tasks into an array and sorted them by comparing the numerical value of the tasks against each other. Wow, what a pretty rainbow! More importantly, the most important tasks are now at the top with priority decreasing as you read down the list. And tasks marked "Done" are sent to the bottom.

...But what if I make a mistake and want to fix my task

Big sigh

Okay, last step, I promise.

I started with a step I've done several times in this project alone. Create a button. Then, add an event listener. I'm a pro at this now. So, what happens if I click this button now?

First I tried to make new text boxes and dropsdowns appear on the task clicked. It worked but I was confused and the user flow was clunky, so I tried again. This time, I used the original text boxes and drop down selection. The idea was to type an edit into the original box or make a new selection and click the "edit" button on a task to implement those changes on an individual task. The user flow is not intuitive and quite clunky, but I decided that that's a problem for another day.

To edit the task, the event listener needs to listen for the click and change the text content of the task to whatever is in the text box now. Pretty simple. The priority assignment took a few more tries. At first, the task would be edited, but the original assignment and importance selections were not retained. This was an issue I was not expecting.
I wrote a series of if statements to try to retain the original values, then I realized that this would be a great use for comparison operators!

 const newText = form.querySelector("#new-task-description").value || currentText;
      const newAssignment = form.querySelector("#assigned-to-description").value || currentAssignment;

I also copy-and-pasted the color assignment block to take care of the color selection. If I were to continue on with this project, I would see if I could turn that block of code into a callback function so that it can be called to color tasks rather than write it all out each time.

Another surprise: all of my buttons disappeared! No biggie, I re-appended each button and everything looked great again.

I have so many more ideas still-
What if I want to make check-boxes? Or create a separate list of finished tasks? Or make a date due option? Or or or...

But those will need to be saved for another day.

Oh, and lets not forget

form.reset();

And now, I am ready for the next task.