ByteMe

A Hackathon RPG that explores the functions of Hackathons in a fun way

Comment

Inspiration

Everybody needs to have a good laugh. The eventual goal was to build a live website. It's the content that was in question. During brainstorm sessions, several hacker jokes were made and then jokingly we began working on a Hackathon Creed. Inspiration was pulled from the event going on around us and how moved we were by the spirit of the event. We all thought wouldn't it be nice to acknowledge all the amazing things happening as well as have a little fun? At one point a type of false error page was created with a joke about needing to be the proper level with slack access and ever quest. From then on what was only supposed to be one page became the centerfold of the website.

What it does

Byteme provides a humorous RPG platform that is simple yet addicting. Each page is designed to entertain and keep the player clicking with a smile on their face. While this version of Byteme is a hackathon RPG the coding used for the website and the template could easily be implemented for different types of gameplay adventures. The idea is this could function as a way to explore Hackathons and allow those who've never attended one before know what to expect and where to go. An eventual possibility it to get it rolling in time with a schedule or update the story script depending on the Hackathon to match Sponsors and important figures. The current people listed in the RPG were all real individuals at the Hackathon and granted their permission. Many of the events and items that were mentioned could be found at the Hackathon allowing a Hackathon gower to get become more knowledgeable about things locations, what was there to do and who to see about what problem.

How we built it

Byte me was built with HTML code in Atom. A few of the finer mechanics such as the alternate Paths such as Path A and Path B available after the Jenga Challange were made possible due to Javascript. The RPG's coding is at its heart simple each page links to the next using images making it interactive. An RPG game is nothing without it's classic graphics which were created using stock images and an editor tool called Pixler which is a Photoshop equivalent. Photoshop was also used to create then Hacker Anatomy image which was made from scratch hand drawn with other shapes implemented.

Challenges we ran into

The only one with prior Hackathon experience L. Jordan-Thunderrock the team lead and they had only done one Hackathon previously (Hack GSU Spring 2017) Despite over 1/4th of us being newbies ranging from Highschool Sophomores to recent graduates with no prior learning. Motivation was high this helped when we encountered problems figuring out everything from how to get the navigation bar to move left (actually ended up being vertical), to learning what it took to make image links, and how to get them to link to each other for the RPG as well as coding the two different Paths.

The different paths, Path A and Path B begin after the image titled Challange Jenga where "your hands shake vigorously". One path leads you to a direct victory against the Grandmaster in the other you must go on a quest to regain your honor. The hard part was making the Challange Jenga randomize the two Paths as well as take the Adventurer to these pages.

Trying to render a version of the website besides the static that could be used by other Hackathon goers. No matter what is attempted the git hub version of the site refuses to accept the hacka.png or the Hacker Anatomy image. The static version doesn't have these problems. The brackets weren't closed properly for some links. The image path at one point was wrong.Had trouble committing to Git Hub since it was new experience for the team. Eventually, a viable version was accomplished.

A lot of the code was made from scratch, mistakes were made lessons were learned and the Navigation bar often fought with. The Nav bar at first was intended to go overtop the site but it was quickly decided that putting it to the left of an image and descending would be optimal. There was a lot of hunting through lines of CSS to make the vertical move happen. The Navigation bar now always works but depending on the device be it mobile or a certain computer the Navigation bar will be moved on the screen possibly above or below as opposed to the left side.

Accomplishments that we're proud of / What we learned

As an entire group headed up by highschoolers were proud to have a functioning static website! We have to admit to being very proud of the Hacker Creed and memeing one of our very own members into the graphic as well as the writing overall. The coding itself is perhaps our most enormous feet particularly creating the different paths for the RPG and making the setting be random every game requires a bit of luck and chance. How far everyone has come in learning HTML and working Java Script to configure this website in such a short time. This really was a team effort all the page graphics, the script, the code could not have been written in a time without everyone. Getting the Git Hub site to work.

What's next for ByteMe

Fixing up the Navigation so it doesn't drop below the image depending on what device your using. Adding some more abouts for Navigation and a map matching a schedule for whatever event this could be used to represent. It would be nice to have more optional paths for the players and make a further continued storyline. Byteme can be for sure used again to create other RPG style games. There was an error page created that can be viewed in the code but we didn't have time to optimize.

Optimizing it for multiple platforms is another thing on the to do list. More implement more interactive features such as a real dice rolls and animated images.

Cleaning up the Navigation page and some of the layout of the sight while retaining that classic RPG & MMO, keeping things fun and fresh. Making the images smaller and compressing the file is another task.

We made a custom domain it is registered with Domain.com we have not had time to set up our project with the domain. Here is the domain: bytemerpg.com

Built With

Share this project:

Updates