Release 0.3 — External Issue

Sarika Hanif
Nov 16, 2019 · 3 min read

For my external issue for release 0.3, I worked on the AncientBeast repository. This project is a turn based strategy game that is written mainly in JavaScript. When I first started to work on this project I ran into a couple of issues with the environment. Following the documentation I was able to run the project, but any changes that I made to the code didn’t affect the game. I deleted so many functions and they still worked in the game! I eventually noticed that the documentation mentioned gitpod. It pretty much builds the environment and you can edit the code. It was pretty cool to test out and I used it to test my changes.

Gameplay of Ancient Beast

In the issue that I worked on, it was suggested to modify the hotkey functionality for the scoreboard and dash view and also to add a hotkey for fullscreen mode. The requirements were to use Shift + S to open the scoreboard, Shift + D to open the dash board and Shift + F to toggle fullscreen mode. Originally, pressing the g and t key would toggle the scoreboard and dashboard. After looking through the code, I found that the functionality was found in the interface.js file. There was an object created called hotkeys. This stored the ascii values of the hotkeys associated to functionalities in the game.

let hotkeys = {
scoreboard: 84, // T : This toggles the scoreboard
overview: 71, // G : Toggle dash
cycle: 81, // Q : Switches between usable abilities
attack: 87, // W
ability: 69, // E
ultimate: 82, // R
...
}

Then iterating through the list, the KeyDownEvent is listening to see if shift + whatever value in hotkeys was pressed. It will then take the key associated with the value and preform the action within the switch case.

$j.each(hotkeys, (k, v) => {
if (e.shiftKey && v == keypressed) {
switch (k) {
...
}
}

In the switch case, all we need to call is the triggerclick() on the buttons for scoreboard and dash view.

// Score Buttonthis.btnToggleScore = new Button({
$button: $j('.togglescore'),
click: () => this.toggleScoreboard(),
},
game,
);

For the fullscreen functionality it wasn’t as easy. There was a fullscreen button in the script.js file, but I wasn’t sure the best method of implementing this. In the script file I exported the following functions:

export const isNativeFullscreenAPIUse = () =>
document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement;
export const disableFullscreenLayout = () => {
$j('#fullScreen').removeClass('fullscreenMode');
$j('.fullscreen__title').text('Fullscreen');
};
export const enableFullscreenLayout = () => {
$j('#fullScreen').addClass('fullscreenMode');
$j('.fullscreen__title').text('Contract');
};

isNativeFullscreenAPIUse uses document.fullscreenElement which is the standard syntax that returns the displayed element in fullscreen mode or null if it’s not fullscreen. The other two properties are for chrome, safari, opera and mozilla. The other two functions modifies the styling of the code within the fullscreen id. In the switch case, I checked to see if isNativeFullscreenAPIUse was true if so, then exit fullscreen, else request fullscreen for the game.

Now the weirdest part of this was that the fullscreen wasn’t working in my browser. It seemed as though fullscreen only zoomed into one portion of the game. It looked like this on my laptop:

I was unsure of how to fix this, I spent a lot of time trying to fix it. I tried messing around with the css when the game entered fullscreen by using :-webkit-full-screen and :fullscreen but it didn’t work. Wasn’t sure if I need to somehow shrink the background, players, grid etc. I asked the author and surprisingly, my changes worked fine when he tested it. We are both running the same versions of chrome too. Strange, looks like we found a new issue.

After reviewing the changes, my PR was accepted.

This was a fun project and I would like to contribute to this again!

Onto release 0.4 ✌🏼

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade