Skip to content
This repository has been archived by the owner on Mar 17, 2021. It is now read-only.

Commit

Permalink
Select Screen Index (#285)
Browse files Browse the repository at this point in the history 
* Select screen index zero based to match config array.
  • Loading branch information
@FostUK
FostUK authored Jul 30, 2019
1 parent ace18b0 commit 4e4daaa
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 28 deletions.
5 changes: 3 additions & 2 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@

| Version | Description |
|---------|-------------|
| Unreleased | |
| | Remove achievement audio
| 2.0.3 | |
| | Select screen index zero based to match config array. |
| | Remove achievement audio. |
| 2.0.2 | |
| | transientData automatically passed between screens. |
| | Fix Chrome race condition with removed DOM elements triggering blur event with accessible elements.. |
Expand Down
24 changes: 10 additions & 14 deletions src/components/select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import { createTestHarnessDisplay } from "./test-harness/layout-harness.js";
import * as accessibleCarouselElements from "../core/accessibility/accessible-carousel-elements.js";
import { gmi } from "../core/gmi/gmi.js";

const wrapRange = (value, max) => ((value % max) + max) % max;

export class Select extends Screen {
constructor() {
super();
Expand All @@ -24,7 +26,7 @@ export class Select extends Screen {
createTestHarnessDisplay(this.game, this.context, this.scene);

const theme = this.context.config.theme[this.game.state.current];
this.currentIndex = 1;
this.currentIndex = 0;
this.choiceSprites = this.createChoiceSprites(theme.choices);
this.scene.addToBackground(this.game.add.image(0, -170, this.getAsset("title")));

Expand Down Expand Up @@ -54,34 +56,28 @@ export class Select extends Screen {
}

leftButton() {
this.currentIndex--;
if (this.currentIndex < 1) {
this.currentIndex = this.choiceSprites.length;
}
this.currentIndex = wrapRange(--this.currentIndex, this.choiceSprites.length);
this.showChoice();
}

rightButton() {
this.currentIndex++;
if (this.currentIndex > this.choiceSprites.length) {
this.currentIndex = 1;
}
this.currentIndex = wrapRange(++this.currentIndex, this.choiceSprites.length);
this.showChoice();
}

showChoice() {
this.choiceSprites.forEach((item, index) => {
item.visible = index === this.currentIndex - 1;
item.visible = index === this.currentIndex;
});
this.accessibleElements.forEach((element, index) => {
element.setAttribute("aria-hidden", index !== this.currentIndex - 1);
element.style.display = index !== this.currentIndex - 1 ? "none" : "block"; //Needed for Firefox
element.setAttribute("aria-hidden", index !== this.currentIndex);
element.style.display = index !== this.currentIndex ? "none" : "block"; //Needed for Firefox
});
}

startGame() {
const theme = this.context.config.theme[this.game.state.current];
const metaData = { metadata: `ELE=[${theme.choices[this.currentIndex - 1].asset}]` };
const metaData = { metadata: `ELE=[${theme.choices[this.currentIndex].asset}]` };
const screenType = this.game.state.current.split("-")[0];
gmi.sendStatsEvent(screenType, "select", metaData);

Expand Down Expand Up @@ -125,7 +121,7 @@ export class Select extends Screen {
name: "play",
callback: () => {
// makes the screenreader announce the selected option
this.accessibleElements[this.currentIndex - 1].setAttribute("aria-hidden", false);
this.accessibleElements[this.currentIndex].setAttribute("aria-hidden", false);
},
});
}
Expand Down
24 changes: 12 additions & 12 deletions test/components/select.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ describe("Select Screen", () => {
selectScreen.currentIndex = 1;
signal.bus.subscribe.mock.calls[2][0].callback();
expect(mockGmi.sendStatsEvent).toHaveBeenCalledWith("test", "select", {
metadata: "ELE=[character1]",
metadata: "ELE=[character2]",
});
});

Expand All @@ -175,7 +175,7 @@ describe("Select Screen", () => {
});

test("shows the current accessible element when the game is unpaused (by pressing play)", () => {
selectScreen.currentIndex = 3;
selectScreen.currentIndex = 2;
signal.bus.subscribe.mock.calls[3][0].callback(); //pauses
signal.bus.subscribe.mock.calls[4][0].callback(); //unpauses

Expand All @@ -186,9 +186,9 @@ describe("Select Screen", () => {

describe("previous button", () => {
test("switches to the last item when the first item is showing", () => {
selectScreen.currentIndex = 1;
selectScreen.currentIndex = 0;
signal.bus.subscribe.mock.calls[0][0].callback();
expect(selectScreen.currentIndex === 3).toBeTruthy();
expect(selectScreen.currentIndex === 2).toBeTruthy();
});

test("switches to the previous item when any other choice is showing", () => {
Expand All @@ -198,7 +198,7 @@ describe("Select Screen", () => {
});

test("hides all the choices except the current one", () => {
selectScreen.currentIndex = 3;
selectScreen.currentIndex = 2;
signal.bus.subscribe.mock.calls[0][0].callback();

expect(selectScreen.choiceSprites[0].visible).toBe(false);
Expand All @@ -207,7 +207,7 @@ describe("Select Screen", () => {
});

test("set 'aria-hidden' = true on all the choices except the current one", () => {
selectScreen.currentIndex = 3;
selectScreen.currentIndex = 2;
signal.bus.subscribe.mock.calls[0][0].callback();

expect(mockAccessibleElements[0].attributes["aria-hidden"]).toBe(true);
Expand All @@ -216,7 +216,7 @@ describe("Select Screen", () => {
});

test("set display: none on all the choices except the current one", () => {
selectScreen.currentIndex = 3;
selectScreen.currentIndex = 2;
signal.bus.subscribe.mock.calls[0][0].callback();

expect(selectScreen.accessibleElements[0].style.display).toEqual("none");
Expand All @@ -233,21 +233,21 @@ describe("Select Screen", () => {
});

test("switches to the next item when any other choice is showing", () => {
selectScreen.currentIndex = 2;
selectScreen.currentIndex = 1;
signal.bus.subscribe.mock.calls[1][0].callback();
expect(selectScreen.currentIndex === 3).toBeTruthy();
expect(selectScreen.currentIndex === 2).toBeTruthy();
});

test("hides all the choices except the current one", () => {
selectScreen.currentIndex = 1;
selectScreen.currentIndex = 0;
signal.bus.subscribe.mock.calls[1][0].callback();
expect(selectScreen.choiceSprites[0].visible).toBe(false);
expect(selectScreen.choiceSprites[1].visible).toBe(true);
expect(selectScreen.choiceSprites[2].visible).toBe(false);
});

test("set 'aria-hidden' = true on all the choices except the current one", () => {
selectScreen.currentIndex = 1;
selectScreen.currentIndex = 0;
signal.bus.subscribe.mock.calls[1][0].callback();

expect(mockAccessibleElements[0].attributes["aria-hidden"]).toBe(true);
Expand All @@ -256,7 +256,7 @@ describe("Select Screen", () => {
});

test("set display: none on all the choices except the current one", () => {
selectScreen.currentIndex = 1;
selectScreen.currentIndex = 0;
signal.bus.subscribe.mock.calls[1][0].callback();

expect(selectScreen.accessibleElements[0].style.display).toBe("none");
Expand Down

0 comments on commit 4e4daaa

Please sign in to comment.