State of the Game: Snowshoe I

src/components/BlogPost.astro

@@ -26,7 +26,6 @@ const { url, title, description } = Astro.props;
 		padding: 1em;
 		gap: 1em;
 		flex: 1;
-		flex-basis: 300px;
 	}
 
 	.blog-post-card .info span {

src/layouts/BlogLayout.astro

@@ -8,11 +8,13 @@ const { frontmatter } = Astro.props;
         <a href="/"><span class="highlight">Back to root</span></a>
         <article>
             <h1>{frontmatter.title}</h1>
-            <i class="pub">{new Date(frontmatter.pubDate).toLocaleDateString("en-US", {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric'
-            })}</i>
+	    <i class="pub">
+		{new Date(frontmatter.pubDate).toLocaleDateString("en-US", {
+                	year: 'numeric',
+	                month: 'long',
+        	        day: 'numeric'
+			})}, by {frontmatter.author.join(", ")}
+	    </i>
             <slot />
         </article>
     </main>

src/pages/blog/jan-01-2024.md

@@ -3,9 +3,9 @@ layout: ../../layouts/BlogLayout.astro
 title: 'The Start of Something New'
 pubDate: 2024-01-01
 description: 'The start of our blog.'
-author: 'Hazel Hofmann'
+author: ['hazelthatsme']
 tags: ['gamedev', 'webdev', 'blog']
 ---
 This is our new blog post, and the beginning of our journey.
 
-Thanks for checking out our first blog post!
+Thanks for checking out our first blog post!

src/pages/blog/jun-01-2024.md

@@ -0,0 +1,38 @@
+---
+layout: ../../layouts/BlogLayout.astro
+title: 'State of the Game: Snowshoe I'
+pubDate: 2024-06-01
+description: 'The moves and the grooves!'
+author: ['hazelthatsme', 'zoey-on-github']
+tags: ['gamedev', 'platformer', '2d']
+---
+Hello there!
+
+Thanks for checking into our first _real_ blog post on our website! _State of the Game_ is where we write a little about developments on one of our projects, in this case, our first game as Code Calico; 'Snowshoe'!
+
+# Introducing: Snowshoe
+Snowshoe (working title, not our final title) is a 2D platformer in development at Code Calico. For Snowshoe, we're drawing inspiration from both recent platforming classics and the good old collect-a-thons of our youth. Snowshoe will follow a cat (I know, big shocker!) on their way to collect trinkets from the wild to bring back to their owner's home. Before I get into the technical nitty-gritty, I'll hand things off to Julie for a little bit of background on what she's doing for the audio of the game!
+
+# Audio
+With the audio for this game, I decided to take kind of a unique approach to things. I am working on both SFX and music, so I've taken somewhat similar but different approaches to both of those things.
+For UI sounds, I'm actually using a synth preset I found by complete accident while trying to make a song for another game I was working on. I hit a few notes together with this preset and I realized that it would actually sound great for ui sound effects, so I saved the project folder and .wav file just in case the perfect time would come and I would get to use these. I am basing most things off of the one sound effect, with everything being in the same/similar key(s).
+For those curious, here is the preset itself:
+![a preset for the virtual synthesizer Helm](../../images/FL64_G4sZL6eYtQ.png)
+
+As for the music in this game, I decided, keeping in with the cat theme to use the [MeowSynth](https://plugins4free.com/plugin/633/). There isn't really any levels yet so I don't have anything planned out for that(usually I build songs for levels around the theme of the level and the gimmicks of it and whatnot), but for the main menu I have two meowsynths, both with a vibrato effect to create sort of a slow vibe, and I took some inspiration from ambient music by using kind of long, drawn out notes fading into each other. I didn't really apply too many effects to the synths because I still want the fact that they're meows to be very audible.
+
+# Code and Engine
+To make Snowshoe, we're building in [Godot](https://godotengine.org/), an open-source, fresh yet powerful game engine for both 2D and 3D projects. Despite the common recommendations provided by Godot users, our team has chosen to use C# for development. Some of us needing to familiarize ourselves with the Godot API, others needing to understand the differences between GDScript and C#. So far, however, most of our work has involved laying down a good framework to build upon; making sure we get the basics just right. Early on we've decided that implementing some third-party tools may actually be beneficial to ease development. This has consisted of Isabelle implementing an easy-to-use debugging interface powered by [imgui-godot](https://github.com/pkdawson/imgui-godot) and [discord-rpc](https://godotengine.org/asset-library/asset/1968), Isabelle/Julie have been working on helping lay the groundwork for the player, scene management, ui navigation, gameplay settings and building levels. For a team with varied levels of experience with game engines like Godot, such is the case with Code Calico, it's important to make the game easy to develop for every part of our team. 
+
+A brief overview of classes and scripts, from Isabelle:
+- PlayerController ... some basic unpolished implementations of coyote time / jump buffering, otherwise nothing exceptionally noteworthy about this class.
+- PlayerStats ... a user-defined Godot resource that can be saved to the editor, this drives how the character feels, and is designed to be appended to the player controller. The motivation behind using Godot resources for player stats is that we can create easily defined presets that can be loaded at run-time and an added benefit is that we can create multiple variations of the stats during development so that we can all find something that feels right for the player without creating unwanted commits that the team doesn't agree on.
+- CharacterDebugger ... an ImGUI script that both reads live information from the player, and allows you to modify it at runtime as well using the player stats members passed as a reference so their values can be manipulated by the ImGUI window, also includes some additional features like customizability and some basic "cheats". (Should definitely be named PlayerDebugger for parity, but this was something that was set up a while ago!) 
+- GameSettings ... a singleton for reading and writing to configs from anywhere, anytime, absolutely a must have for creating flexible systems that can alter functionality deep within the game.
+- SceneManager ... a singleton for loading scenes, effectively a wrapper for some boilerplate currently, includes some functionality for automatically adding scene transitions on scene change with some limitations.
+- ConfigKey ... a class dedicated to storing all the data needed for configurable options for Godot's [ConfigFile](https://docs.godotengine.org/en/stable/classes/class_configfile.html) class, stores a section key, section specific key, and default value.
+- ConfigKeys ... a sort of registry list for config keys for a category, here's an example of reading and writing a config key from GameSettings currently:  
+`GameSettings.ConfigRead(ConfigKeys.Video.VSyncMode).AsInt()`  
+`GameSettings.ConfigWrite(ConfigKeys.Video.VSyncMode, DisplayServer.VSyncMode.Enabled)`
+
+- SceneFiles ... a class dedicated to defining common string constants for scenes, and functions to build paths to specific scene directories. This class is a byproduct of Godot and its heavy use of strings in a lot of parts of the API. With GDScript this would be less of an issue as most things down to scene unique names, paths to scenes or other resources all have autocomplete within the main Godot script editor. Autocomplete for these things are not available in an external editor as of yet, even with the use of extensions, but maybe in time! As a result the choice to create constants to reduce unavoidable human error was one that I didn't need to think twice about.

src/pages/index.astro

@@ -16,9 +16,11 @@ const members = await Astro.glob('../pages/members/*.md');
 		<p>Welcome to our website! We're a team of hobbyist programmers, working together to craft something fun.</p>
 
 		<h2>What are we up to?</h2>
-		{posts.sort((a, b) => a.frontmatter.pubDate > b.frontmatter.pubDate ? -1 : 1).slice(0, 3).map((post) =>
-			<BlogPost url={post.url} {...post.frontmatter} />
-		)}
+		<div class="posts">
+			{posts.sort((a, b) => a.frontmatter.pubDate > b.frontmatter.pubDate ? -1 : 1).slice(0, 3).map((post) =>
+				<BlogPost url={post.url} {...post.frontmatter} />
+			)}
+		</div>
 
 		<h2>Who are we?</h2>
 		<div class="members">
@@ -62,4 +64,10 @@ const members = await Astro.glob('../pages/members/*.md');
 		gap: 1em;
 		flex-wrap: wrap;
 	}
+
+	.posts {
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
 </style>