@Sushmita

Devlog #1: Intro script and map/journal buttons

I’ve mainly made really small projects for Hack Club and this is the first bigger one I’m making so I’m super excited to start this on Stardance! Gonna start making much longer and more detailed devlogs since that was feedback that I got from my last project. I’m making a visual novel game for the Congressional App Challenge this year.

The story revolves around a 16-year-old girl (Ada, named after Ada Lovelace) trying to get community service hours for graduation. Her school requires her to volunteer in each area of the 17 Sustainable Development Goals by the United Nations. She gets help from her teacher, Ms. Katherine (named after Katherine Johnson). The game is called 17@16 because Ada is trying to work towards these 17 areas at 16 years old and is trying to make an impact in her local area, which is the 16th congressional district in her state.

However, the unique part about the game is that it’s based around real volunteer opportunities in my area. I think that if students can play a game and see a story behind some of the programs where I live, they will be much more interested in becoming involved rather than if it were just listed in a database. The game will have a map of different community service opportunities in my local area.

I’ve mostly just done planning for this on paper, but as for my actual coding progress, I started writing the script for the intro part of the VN. This will take place before the actual game (which is divided into 17 levels, each is one UN goal) to set the story, introduce the characters, and explain what the SDGs are. This part was easy to do since I am coding in Ren’Py.

Then, I started making buttons because I plan on having a journal and map feature. I didn’t feel like making final assets since Lapse has been really buggy for me in the past so I used some basic elements on Canva. This part was more challenging since I’ve never made new GUI screens or buttons in Ren’Py. At one point I used ChatGPT for help because my code didn’t show the buttons at all no matter what I tried. Turns out there was an append screen command for configuration that I somehow completely missed lol

TLDR I learned:

• How to update scripts in Ren’Py (took me way longer to figure out than I’d like to admit lol, every time I make a change I have to save it in VS Code first with CTRL + S and then reload in Ren’Py with SHIFT + R)
• How to make buttons on the home screen, quick menu, and as an in-game button
• How to hide buttons (ex. I don’t want the journal button to show if the journal is already open)
• How to transform images

Devlog #3: Styling
I added basic styling by following step 6 of the guide. I had trouble making the zig-zag lines because I was indecisive and didn’t want to make the points by hand. Like the guide suggested, I tried using https://bennettfeely.com/clippy/, but it didn’t fit what I wanted, so I generated the the points using AI. The rest of the styling was done by hand. I added two fonts from Google, Black Ops One and Noto Sans Mono. My next step is to make the date picker functional.

Devlog #2: Loading NASA’s Data
This devlog is all from part 4 of the guide. I learned more about JavaScript and used it to load an image and fun fact/explanation. I used a conditional statement to check what data type the media was (I checked for video and image using the guide and iframe/Youtube videos as the challenge note) and added basic error handling to show the error message on screen. The next step is to start styling with CSS (because myy website lowkey looks like a chud right now lol)

Devlog #1: Setting Up
I learned how to set up Node.js and Vite! The guide taught me about how APIs worked and how to keep them private using a .env and .gitignore file. I learned how to set up a Vite development server in my terminal (which is similar to Live Server extensions on VS Code/GitHub Codespaces). I had an error when deploying my project to GitHub Pages, but after rereading the guide I realized I missed the part that said to delete everything in src/main.js and src/style.css as good dev practice.

Devlog #1: Basic About Me and Resume
I am creating a professional portfolio website for business cards and my account profiles (such as LinkedIn). I simply used HTML and CSS for this project. My website will include About Me, Resume, Coding Projects, and Other Projects sections, as well as a link to my GitHub and LinkedIn. While this is a bare-bones website for the requirements of the missions, I plan to add more features soon after. A full list of planned features is available in my README.

Devlog #2: Styling
I added/changed the following features:

• Made the nav bar cleaner
• Added a border around the DV definition and facts
• Changed the font to something that fits the topic better
• Fixed image styling (made them the same size and added a border)
• Added better coloring (ex. the nav bar button is darker when hovered over)

Devlog #1: Basic website
I decided to create a website for a domestic violence instiute capstone project and Girls Who Code’s Pathways program (Web Development). The website currently features 3 pages: a home page with the definition of domestic violence, a fact generator that circles through different DV facts, and resources by My Sister’s Place on types/signs of DV compared to healthy relationships. I plan to add better styling, animations, and fix the navigation bar.

Devlog #1: Basic prototype and storyline
I am making a choose your own adventure (CYOA) game using p5.js and p5play for Girls Who Code’s Pathways Program (Game Design). I made the basic storyline (enter a haunted house, meet a skeleton and a witch, and try to escape) where the player chooses the way the plot goes. For my next devlog, I will decorate the screen more and add more choices to the story.

Devlog #1: Added a traffic light and a stop/go sign

I am creating a road simulator with a traffic light, stop/go sign, moving cars, and people crossing. So far, I’ve made a very basic light and sign prototype using just HTML and CSS. I want to challenge my skills by only using HTML and CSS, but I may need to use JS for the other aspects of my project. The light and sign stays at green/go for 18 seconds, yellow/slow down for 3 seconds, and red/stop for 12 seconds.

I got started on the Make Your Own Slack Bot tutorial! I looked into Node.js and got started on a few commands (I made a Discord bot in Python before and the syntax looks really similar!)