Accessib.lol seeks to augment the League of Legends in-game experience to provide validation to members of the LGBTQ+ community and other minority groups. Accessib.lol includes a website and desktop Overwolf companion app, enabling users to extend their client for more well-rounded gameplay.
Demo Video: https://www.youtube.com/watch?v=Xeds_n0SROU
Authors:
Accessib.lol was created to address lack of inclusion and accessibility features across many modern esports titles. Both the communities of these games--as well as the accessibility tools available within--aren't able to reach the needs of every potential player. Video games are for everyone, and this project seeks to augment inclusion and access in one of the world's biggest titles: League of Legends.
Accessib.lol is composed of three primary pieces:
- The website is the landing spot for new users of Accessib.lol. Here users can learn about the application, create an account, and download the desktop app.
- The server hosts our API (Application Programming Interface). This communicates between the website, our database, and the desktop app. It protects user information by making sure only verified connections can be made between the project.
- The desktop app is what extends League of Legends to add new accessibility features. The desktop App hooks into the Overwolf platform to read events in-game and allow the custom software to respond.
- The website is a
Reactproject leaning pretty light on extra packages. It makes use of modern ES6 JavaScript syntax, a few custom hooks, and a focus on easy navigation withreact-router. For styling, we decided to go with vanillaCSS3to make it easier to translate styles between the website and the desktop Overwolf app. The styling is also scaffolded with the best drag-and-drop CSS package: water.css. For hosting, the site is hosted on aNetlifyinstance with a custom domain fromNamecheap.
- The API server is built with
NodeJSusingExpress. The API connects with aMongoDBdata source forNoSQL-based data management--which works quite well with our stack. The server utilizes acontroller-model-routearchitecture making it easy to extend and maintain as a project. The API server is hosted on aHerokudyno.
- The desktop app is built using
Overwolf's platform. As a custom app ontop ofOverwolf, the tech stack consists ofHTML,CSS, andTypeScript--just like a website! There are two halves of the app. One half is the out-of-game desktop app which gives directions on how to # and use the application and the other half is the in-game app.
- The website can be run locally by using
npm--if you do not havenpminstalled, you will need that first! Then, open a development terminal in thefrontendfolder. Runnpm installto get all the packages and thennpm startThe React project will be run on a local development server in the web browser athttp://localhost:3000. To close the live preview, simply pressCTRL + Cin the terminal the project was started it.
- Just like the website, the back end also uses
npm! First, create a.envfile in thebackendfolder. Inside the file you will provide a database URI and a port number.
MONGO_URI="(Your database connection string)"
PORT=1127
- Run
npm installto get all the packages and thennpm startThe API will be live athttp://localhost:1127. This can then be connected tool with an API tool likePostmanorHoppscotch. To close the live preview, simply pressCTRL + Cin the terminal the project was started it.
- To run Accessib.lol on your pc you will need to download both the overwolf-dist folder and the Overwolf App https://www.overwolf.com/.
- When you have Overwolf installed click through Settings -> About -> Development options.
- In the new packages window select "Load unpacked extensions..." and find the dist folder you downloaded before.
- Finally click "launch" and the app should open!
- If you create and account on Accessib.lol and launch a game of League of Legends, you will be able to see your pronouns and anyone else that has used Accessib.lol in the past!
- My experience has leaned more towards front-end than back-end programming. Setting up a robust and proficient API server was a large undertaking, but with encouragement from Ed we were able to muscle through it. Additionally, I spent a great sum of our initial worktime researching into possible serverless backend set-ups like AWS Lambda functions. We ended up moving away from this approach to get more hands-on practice with back-end, but it was an early sunk cost.
- Before this hackathon I had done very little in the terms of front end or web development. I had to learn a lot about JavaScript, HTML, and CSS to create the desktop app. Never before had I made a desktop app either. It took me more time then I would've liked to complete simple tasks such as making the API calls to the Accessib.lol servers. Luckily I had Riley to help me through a lot of these issues since he had a lot more experience then me.
-
I'm incredibly happy to have produced a fully-functional and robust app within this Hackathon. In the competitions I've participated in before, I always walk away feeling like a chunk was missing or had to be mocked-up. For Accessib.lol, I'm wholly satisfied with my individual and team contributions to a well-made project
Additionally, it means a ton to me to have a demonstrable project connected to inclusivity, accessibilty and A11y. Making tech and gaming more welcoming is a huge long-term career goal of mine and Accessib.lol + PrideMakers has helped me have an early piece of the puzzle.
- I am extremely proud of how well the Overwolf app ended up working! When we first started I was frightened that I would have too much trouble getting the app working, let alone look decent. It was satisfying to be able to see my work come together rather quickly!
- I learned that Ed is a pretty awesome teammate! 😄 In all earnesty, I was able to use this project to better round-out my software development soft skills. I acted as both the team's project manager, setting up all our project management tools on GitHub and handling deploys. I'm happy to have had a role to help mentor Ed in programming languages/frameworks he has never used before--he did a great job!
- I learned that Riley has the patience of a saint. I am sure I was not the easiest student every day. I learned so much about how modern software is developed. Outside of the few Computer Science classes that I have had I haven't programmed any "complete" apps like this. I also had close to zero knowledge about Javascript, CSS, and HTML before this hackathon.
- In addition to pronoun representation, Accessib.lol would like to extend to include different sexuality flags in addition to player pronouns. These will take the form of custom pride flag emojis that will sit alongside the in-game display for users who have registered. This would be a great way to extend the pride of Pride Month beyond when many companies run their own in-game events.
- Some champions in League of Legends (such as Sion, Kled, and Corki) have massively impactful abilities that are announced via a global sound effect. While nice and thematic, they do leave dear/hard of hearing players at a clear disadvantage, as they have no way of knowing when these abilities are actived/prepped. Overwolf seeks to implement an action-log for abilities that have only auditory tells. This way, every player can respond fairly to these key skills.
- Colorblindness in videogames is a difficult thing to get right. Colorblindness can come in various forms and intensities, with different players having different needs. Some titles approach this