becoming the friendliest noodle

Sigh. Spent a lot of time trying to make CSS Modules work with Webpacker tonight. In the beginning, CSS Modules was working with the hashed class name but the stylesheet itself was being moved to some unknown place by extract-text-webpack-plugin. Then, doing some more reading, I tried to figure out where it was going / didn’t realize that I needed to write more config for other loaders (? at least I think so? for version 3.5?) to process the S/CSS. Still no cigar, unfortunately. It is a struggle... Even though I’ve worked with it before (hello, migrating several dozens of stylesheets to webpack), the config is a whole other beast. 

Added some basic components today. I wasn’t sure exactly how to structure my app, and what I have right now is a World component and a Stats component. I intend the World component to be the parent of All The Things™ and the Stats component is text that displays the state for easy reference.

Currently, I intend on tracking in the state: the length of the snake, the number of mice friends, and the (x, y) coordinates of the snake head.

(x, y) position: Tracking the coordinates involves simple arithmetic with the arrow keys. I ended up going with a vanilla JS keyup event listener on document instead of on a component. I know the performance isn’t as good, but until I figure out how to get the equivalent of a global key listener via a component, this will do. The eventual goal is to have the user be able to hold down the arrow keys and debounce per second the keys that are pressed.

Length of snake: Every time the snake lands on the same coordinates as a fruit, the length of the snake increases by one and its sprite should grow by one segment. The reach goal is to have an animation that shows a bulge in the snake’s body where the fruit was, until it reaches the last segment and it becomes the new tail of the snake.

Number of mice friends: Every time the snake hits the same coordinates as a mouse, the mouse will join the line following the snake. Ooh, should the mice be moving around the screen? Should they compete for the fruit, too? This will make things complicated, hahaha. Exciting!

Initialized my Rails app with ReactJS and Webpack all ready to go. This tutorial was a good place to start - many thanks. It still catches me off-guard how troublesome setting up a new application can be, especially with all of different modules that are now being incorporated. Git, too - you’d think things would be more straightforward sometimes, but...

👋 Hi there! Saw a post on TIGSource about The Wholesome Competition when logging into Steam the other day and what can I say. I can definitely get onboard with spreading some soothing energies. My entry into the competition will be a wholesome version of Snake, named friendly noodle. friendly noodle: a snake who eats fruit and befriends mice. I'm imagining a 3D game with pixel art, coded in React.

Right now, the month of October is looking pretty rough and am not sure how far I'll be able to go, but am looking forward to learning a lot and making this first game on my own. I haven’t worked with Redux before, and I’m looking forward to working with it. My experience with game development has mostly been in Unity, which is a game engine with which I’ve found powerful and baffling at times to work, with the duality of the editor and written code. For the purpose of friendly noodle though, I don’t think Unity is necessary and I’m excited to see how performant React will be :-)

Other parts of the game dev that I’m looking forward to is creating the art and overall atmosphere of the game. My goal is to have a working game by the end of the month and to share a little bit everyday of what I’ve done. Looking forward to seeing what other folks will come up with, too.