gingerkiwi / alice-game

An open source vanilla javascript text based web game for us new devs to collaborate on and learn together. Look for version 2.0 in Sept/Oct 2023!

Summer 2023: What's Happening with The Alice in Wonderland Project?

Update on https://gingerkiwi.blog

The Alice in Wonderland Project started a lot of enthusiasm, but without much planning during Hacktoberfest 2022. Getting involved in open source and learning GitHub workflows can be intimidating and challenging for new developers. So I created an open source repo to help other new developers learn GitHub work flows, learn how to contribute to a remote team project, get involved with open source while being social and making something fun.

However, I've since realized that I was actually creating something more than an open source project. It's the fledgling curriculum of a project based learning program. I stopped teaching in 2019, but I guess I've never actually stopped being a teacher. The best way to accomplish the goals of the project are to take a pause, reflect, and start over using my teacher skills to create a comprehensive experiential, project based learning curriculum.

So instead of just building something as we go, I'm going to have to:

• completely build out the project in a private repo
• create a new public repo so we can start fresh
• pre-plan the steps in building the project
• develop onboarding
• figure out roles, responsibilities, and how many devs are ideal at once
• create lesson plans, and written and/or video lessons
• find one or more experienced devs that would be willing to serve as mentors/maintainers on different parts of the project (eg, html, css, js)
• create a landing page and signup form
• most likely create a discord community to allow video chat, screen sharing, and a place for longer discussions. The challenge will be to be clear about what discussions belong on discord, and what should be part of the GitHub repo.

I'm aiming to have things ready for September so we're ready for the influx of people during Hacktoberfest 2023.

December 06, 2022

After a whirlwind busy November, I'm back maintaining this project. I've finally learned how to manage an open source repo in VSCode on my local MacBook, so I can help others and have an organized project. Over this week I'll be publishing some step-by-step guidelines for beginners on how to create, name, and work with branches so we can all keep the Alice in Wonderland Project organized.

You'll notice that I've moved most of the .md (markdown) files into their own new directory "Documentation". That makes our main file list easier to read, and should make the resources easier to find too.

If you want to be ahead of the game when we start posting more issues, have a read and even try to follow along with this awesome, recent article while you're waiting. Create Your First Github Project in VSCode. By Jean-Christophe Chouinard, 12 October 2022

Thank you to everyone who contributed during Hacktoberfest!
Happy Coding, and Welcome to Wonderland!
Liz, GingerKiwi

---

About

Welcome to Wonderland! The Alice in Wonderland Project is a html/css/vanilla javascript text-based game with an Alice in Wonderland theme.

This is a repo geared towards new web devs who are learning open source and want to work and socialize with other devs. That includes the maintainer(s)! Most issues and PRs are small. To keep things managable, I'm limiting the contributors to 10 for now. Quality over quantity.

If You'd Like to Contribute Please Follow These Three Steps:

1. Please introduce yourself in the discussions tab
2. Have a quick read through the CONTRIBUTING.md and README.md files
3. Comment in the issue that you'd like to work on.

If we still have contributor spots open I'll assign the issue.

A great example of a text-based game is the classic Oregon Trail. Alice will have much better font and graphics, but will still be text-based without animated elements.

Alice Game Background

This game was orignally created as a python console game as part of a computer science course at Massey University, New Zealand in 2020. Part of the assignment was documenting the thought process using comments. (So there's a lot of comments in the .py file!). The assignment was the classic Camel game from "Program Arcade Games and With Python And Pygame" and orginally concevied in 1979 in "More BASIC Computer Games".

However, the premise of the game is both racist and colonlialist - stealing an camel from the "natives" and racing away from them across the Mobi desert. So I changed the theme to Alice from Tim Burton's Alice in Wonderland movie rescuing the Red Queen's Bandersnatch from his imprissionment and racing across Underland to get to the White Queen's castle. I also added a random chance that the player would be attacked by the Jabberwocky, be killed, and the Jabberwocky poem would print on the screen.

From Python Console to Javascript Text Based Web App

The goal is to take the existing python code and turn it into an accessible text based web game in html, css, and vanilla javascript. The game type is much like the classic text based "Oregon Trail" PC game.

Repo Started with Minimal Code

The repo is being started with only a small amount of code and the app will not be functional. Instead comments have been added in the project files to show where code blocks should go and what they should do. The point is to collaborate in changing the orginal python file into a fun, working, and accessible web game.

Supporting Other New Devs Learning Open Source & GitHub

In 2022, I participated in my first Hacktoberfest and Hacksquad while in the Scrimba Frontend Developer Career Path. Starting in open source can be intimidating! Turning this Alice python game into a vanilla javascript text based game web app could be a fun way for new devs like myself to collaborate and learn how to work on an open source project together.

Version control was completely lacking from the unviersity courses I took in 2020-2021, so maintaining an open source repo geared towards new devs seems a good social way to learn and contrinute to the open source community. I know I will make mistakes (likely many), but that's a good way to learn. I hope others working on this project will bear with me while I learn how to maintain an open source repo.

Intentionally Small Issues and Pull Requests

Given that this is a repo for us new devs to learn together, I'm aiming for the issues and the PRs that solve them to be small and doable for first time web devs. These can be as simple as adding a single heading and text, a short basic vanilla javascript function, or changing the colour variable in the CSS. This makes contributing to open source accessible for really new devs that are just learning the basics of html and/or markdown, as well as those of us that know more advanced css and javascript.

Accessibility - Part of Every PR - Not Retrofitted and Refactored

This project is being developed with accessibility in mind from the beginning and at every step. That starts with sematic html, labelling elements, and having a "skip to main content". It also means that even if planned accessibilty features such as theme switching aren't being released in a particular version, the code is still written to make those features easily added.

This is one reason why CSS variables are being used, instead of hard coding colours and font/text attributes. While CSS variables are a more intermediate level skill, they make it easier to switch colours, type/font and implement theme switching instead of having to refactor the entire stylesheet.

alice-game's Issues

add skip to main content in index.html

Add a skip to main content link in index.html
Another issue will be created later in styles.css so only screen reader users will see this.
For help with this issue please Google "Kevin Powell" and "skip to main content".

Add self hosted Alice font to styles.css

• Add Alice in Wonderland font from the /assets folder to styles.css starting at line 31 using @font-face . See resources below for examples.

Resources

1. Digital Ocean: Loading a Self-hosted font
2. W3C Schools: CSS Web Fonts

add message to player div to index.html

On line 38 of index.html

• Press enter to add a blank line
• add a div with the following characteristics:
• id "player-status-message"
• class "player-status-message"
• Placeholder text between angle brackets like this: >Player Status Message Goes Here<
• Press enter to add a new blank line

add nav links in footer on about.html

Starting on line 24 of about.html:

• create an unordered list
• add a link to index.html as a li
• add a link to about.html as a li
• add a link to this repo (https://github.com/GingerKiwi/alice-game) as an li

Add LinkedIn and headshot to team.json

Organize and colour code project labels

• Figure out a colour coding scheme
• Implement it.

Add name guidelines to CONTRIBUTING.md

Example:
html elements ids 'description-elementname' eg 'player-choices-radio'
javascript variable names that match html elements are camel cased 'playerChoicesRadio.

Create bug template

Create bug issue template from template issues

Add description and ReadMe to The Alice in Wonderland Project in GitHub projects

create submit choice button in index.html

Create a button that will submit the users chosen option from the radio buttons. This issue is just the html.

create radio buttons for player choices in index.html

The text for the radio buttons can be found on lines 54 to 59 of the .py file.

Create ACCESSIBILITY-GUIDELINES.md file and add section on semantic html

This is a low code issue. You just need to be able to read html and markdown. There's a link to a markdown cheatsheet below.

• Create ACCESSIBILITY-GUIDELINES.md file and
• Using markdown create a section with a level two heading '##' for 'Semantic HTML'
• Create a level 3 heading '###' 'Heading Levels' then under this heading provide a quick guideline on:
• (a) how many level 1 headings should be per page (one!)
• (b) when to use level 2, 3, 4 headings
• (c) how headings should be styled (using css not html heading elements)

Resources:

1. Markdown Cheatsheet
2. MDN - HTML: A good basis for accessibility

Create folder and quick placeholder site for alicegame.app

This is to have our project listed on UpForGrabs.net

• create /AliceGameTemp
• create /AliceGameTemp/index.html
• Write quick content for index.html
• create /AliceGameTemp/styles.html
• create new site on Netlify

Create Figma team space for project

Adding information to the About Us section

Hi @GingerKiwi! :) I was scrolling through the project's html file and noticed that the About Section is empty. I'm thinking of filling it out, but I'm not sure what direction you're going with the game. Can you help?

Introduce Yourself

Discussed in #4

^{Originally posted by GingerKiwi October 29, 2022}
This is a project for new devs wanting to learn open source web development and version control (github) with others. The first step is to introduce yourself in the discussions tab. Please answer the following quick questions.

1. What is your real first name and Github profile link?
2. Where in the world are you (country and time zone)?
3. Where are you in your learning journey? -> Just learning html, know html and css, just started learning javascript, comforatble with more advanced javascript such as promises, api, etc.?
4. How are you learning? -> Self taught, bootcamp, computer science courses
5. What would you like to work on in this repo

Create a quick list with everyone's GitHub usernames

Using the "introduce yourself" discussion create a quick team.md file listing all the contributor's GitHub usernames, each one starting with a @ and separated by a comma and a space. eg:

@madhatter, @whiterabbit, @RedQueen,

This will help us maintainers efficiently message everyone.
Thanks,
Liz

Provide jpg of mobile layout so we can set up the CSS grid.

create ALICE-REFERENCES.md

Include:

• About Alice References
• Table of Contents
  Level 1 Headings for:
• Classic Alice's Adventures in Wonderland
• Tim Burton's Alice and Underland
• Maps

Outline the geography of underland in ALICE-REFERENCES.md

Starting on line 31 and using this fandom pageas a reference add the following as level 3 headings with ____ after them:
Please number them: 2.1.1, 2.1.2 etc

• Entrances
• Marmoreal Region
• Crims Region
• Witzend Region
• Iplam Region
• Outlands
• Time's Castle
• The Ocean of Time

Resources:

Markdown Cheatsheet

*Note: Hacktoberfest 2022. I will be checking issues and PRs around 7:30-8pm EDT (Toronto time), then I will be offline. *

create dark colour scheme and add css color variables to styles.css

This is a basic clean three colour design to get the app up and running.
Colours should be in hsla format. It would be helpful to have the hex codes for the colours added as comments to the styles.css file.

create /assets and upload Alice font

Decide on sprint/iteration length

Create about.html with boilerplate

• create about.html file
• copy and paste the boilerplate from line 1 to line 21 in index.html
• Add a h1 for "About This Project"
• Add blank
• Copy and paste the footer code from index.html

Assign someone to admin team list

Task is open. This issue is just for me (Liz/GingerKiwi) to assign someone to it. Ideally two people should buddy up for this.

This role is both a project admin and coding one. You will need to be able to check the repo 2-4 x/week, or 1-2x/week if two people buddy up for this (which is way more fun!).
Role description:

1. Add new team members to team.json
2. Add and edit team.json when needed
3. Keep track of onboarding tasks for new team members. (Note: I'm currently working on a list of those onboarding tasks.)
4. Eventually use team.json to make a team.html on our https://alicegame.app site
5. Maintain the https://alicegame/team.app page

Create Figma design file for project

Create a simple Figma design file for the first version of alicegame.app

Create team.json doc from discussion

Timeline: Ideally by 2022.11.12 (November 12, 2022)

I won't be able to really look at this until that weekend.

Tasks

• 1. Create a branch for this issue first please!
• 2. Create a JSON doc from the introduce yourself discussion.

Some of the fields like LinkedIn will be blank. Add "null" as the value.

This will eventually turn into a MongoDB or other noSQL database that can be populated by a web form. (yeah! automation!). It's a json doc because MongoDB can use JSON files to populate a database.

Items in each person object:

• Name e.g. { "first name": "Jane", "last name": "Weaver", "handle": AdaRocks} last name can be "null"
• Date joined project in YYYY.MM.DD format eg{2022.10.31}
• GitHub link
• Location e.g. { "timezone": "EDT", "country": "Canada", "city": Toronto}
• Comfortable with (use an array for this) e.g. ["html", "css", "basic javascript", "advanced javascript", "react", "markdown",]
• Learning via (use an array for this) e.g. '["Scrimba", "Free code camp", "Udemy", "University courses", "Bootcamp"]'
• What would you like to learn? (use an array for this) e.g. ["html", "css", "basic javascript", "advanced javascript", "react", "markdown", "frontend", "documentation"]
• LinkedIn e.g. `{"LinkedIn": "Null"}
• Twitter
• Email
• Website/portfolio link

Check out Termino.js

Stumbled upon this! Check out Termino.js for 2023. Cheers. Termino.js

Hope this helps!

List The Alice Project on UpForGrabs.net

Up for Grabs Doc on how to list projectL:

GK: Learn how to use GitHub projects to manage this project.

GitHub Projects Docs:

create RESOURCES-FOR-NEW-DEVS.md

• Create RESOURCES-FOR-NEW-DEVS.md
• Using Markdown add level 1 headings on separate pages for:
• Table of Contents
• 1. Open Source
• 2. Markdown
• 3. HTML
• 4. CSS
• 5. Javascript
• 6. Git/Github

Each page will only have the heading.