123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465 |
- const customMenuState = {
-
- preload: function () {
-
- game.load.sprite(url[gameName].sprite);
- game.load.image(url[gameName].image);
- },
-
- create: function () {
-
- if (moodle && iLMparameters.iLM_PARAM_SendAnswer == 'false') {
-
- game.state.start('map');
- } else {
- renderBackground();
-
- game.add.text(
- context.canvas.width / 2,
- 60,
- game.lang.game.toUpperCase() + ': ' + menuState.menuIcons,
- { ...textStyles.h3_, fill: colors.maroon }
- );
-
- game.add.text(context.canvas.width / 2, 120, game.lang.custom_game, {
- ...textStyles.h1_,
- fill: colors.green,
- });
-
- navigation.add.left(['back'], 'menu');
- navigation.add.right(['audio', 'lang']);
- const curGame = gameList[gameId];
- this.menuIcons = [];
- let offsetW = game.math.getOffset(getFrameInfo().width, 5);
- let offsetH = game.math.getOffset(
- getFrameInfo().height,
- curGame.gameMode.length
- );
- let x = getFrameInfo().x;
- let y = getFrameInfo().y;
- this.renderSectionTitles(x, y, offsetW, offsetH);
- this.renderCheckBox(x, y, offsetW, offsetH);
- this.renderModeSection(x, y, offsetW, offsetH, curGame);
- this.renderOperationSection(x, y, offsetW, offsetH, curGame);
- this.renderDifficultySection(x, y, offsetW, offsetH, curGame);
- this.renderEnterSection(x, y);
- this.setInfoBoxes();
-
- game.event.add('click', this.onInputDown);
- game.event.add('mousemove', this.onInputOver);
- if (isDebugMode && debugState.customMenu.skip) {
-
- const { mode, operation, difficulty, label } =
- debugState.customMenu.getData();
- gameMode = mode;
- gameOperation = operation;
- gameDifficulty = difficulty || 1;
- showFractions = label || true;
- curMapPosition = 0;
- canGoToNextMapPosition = true;
- completedLevels = 0;
- game.state.start('map');
- }
- }
- },
-
- load: function (icon) {
- const type = icon.iconType;
- if (audioStatus) game.audio.popSound.play();
- switch (type) {
- case 'gameMode':
- gameMode = icon.gameMode;
- break;
- case 'gameOperation':
- gameOperation = icon.gameOperation;
- break;
- case 'difficulty':
- gameDifficulty = icon.difficulty;
- break;
- case 'infoIcon':
- self.showInfoBox(icon);
- break;
- case 'selectionBox':
- if (icon.curFrame == 0) {
- icon.curFrame = 1;
- showFractions = true;
- } else {
- icon.curFrame = 0;
- showFractions = false;
- }
- game.render.all();
- break;
- case 'enter':
- if (isDebugMode) {
- console.log(
- '------------------------------' +
- '\nGame Mode: ' +
- gameMode +
- '\nGame Operation: ' +
- gameOperation +
- '\nGame Difficulty: ' +
- gameDifficulty +
- '\nDisplay Fraction Labels: ' +
- showFractions +
- '\n------------------------------'
- );
- }
- curMapPosition = 0;
- canGoToNextMapPosition = true;
- completedLevels = 0;
- game.state.start('map');
- break;
- }
- },
-
- onInputDown: function (mouseEvent) {
- const x = game.math.getMouse(mouseEvent).x;
- const y = game.math.getMouse(mouseEvent).y;
- let overIcon;
-
- for (let i in self.menuIcons) {
- if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
- overIcon = i;
- break;
- }
- }
-
- if (overIcon) {
-
- document.body.style.cursor = 'pointer';
- self.menuIcons.forEach((cur) => {
- if (cur.iconType == self.menuIcons[overIcon].iconType) {
-
- if (cur == self.menuIcons[overIcon]) {
-
- if (cur.iconType == 'gameMode' || cur.iconType == 'gameOperation')
- cur.curFrame = 1;
- else if (cur.iconType == 'difficulty') cur.curFrame = 0;
- } else {
- if (cur.iconType == 'gameMode' || cur.iconType == 'gameOperation')
- cur.curFrame = 0;
- else if (cur.iconType == 'difficulty') cur.curFrame = 1;
- }
- }
- });
- self.load(self.menuIcons[overIcon]);
- } else document.body.style.cursor = 'auto';
- navigation.onInputDown(x, y);
- game.render.all();
- },
-
- onInputOver: function (mouseEvent) {
- const x = game.math.getMouse(mouseEvent).x;
- const y = game.math.getMouse(mouseEvent).y;
- let overIcon;
-
- for (let i in self.menuIcons) {
- if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
- overIcon = i;
- break;
- }
- }
-
- if (overIcon) {
-
- document.body.style.cursor = 'pointer';
- self.menuIcons.forEach((cur) => {
- if (cur.iconType == self.menuIcons[overIcon].iconType) {
-
- if (cur == self.menuIcons[overIcon]) {
-
- if (cur.iconType == 'enter')
- self.enterText.style = textStyles.btnLg;
- cur.scale = cur.initialScale * 1.1;
- } else {
- cur.scale = cur.initialScale;
- }
- }
- });
- } else {
-
- if (self.enterText) self.enterText.style = textStyles.btn;
- self.menuIcons.forEach((cur) => {
- cur.scale = cur.initialScale;
- });
- document.body.style.cursor = 'auto';
- }
-
- navigation.onInputOver(x, y);
- game.render.all();
- },
- renderSectionTitles: function (x, y, offsetW, offsetH) {
- let infoIcon;
-
- game.add.text(x + offsetW, y, game.lang.game_modes, textStyles.h2_);
- infoIcon = game.add.image(x + 2 * offsetW - 30, y - 20, 'info', 0.7, 0.8);
- infoIcon.anchor(0.5, 0.5);
- infoIcon.iconType = 'infoIcon';
- infoIcon.id = 'gameMode';
- self.menuIcons.push(infoIcon);
-
- game.add.text(x + 3 * offsetW, y, game.lang.operations, textStyles.h2_);
- infoIcon = game.add.image(x + 4 * offsetW - 30, y - 20, 'info', 0.7, 0.8);
- infoIcon.anchor(0.5, 0.5);
- infoIcon.iconType = 'infoIcon';
- infoIcon.id = 'gameOperation';
- self.menuIcons.push(infoIcon);
-
- game.add.text(x + 5 * offsetW, y, game.lang.difficulties, textStyles.h2_);
- infoIcon = game.add.image(x + 6 * offsetW - 30, y - 20, 'info', 0.7, 0.8);
- infoIcon.anchor(0.5, 0.5);
- infoIcon.iconType = 'infoIcon';
- infoIcon.id = 'gameDifficulty';
- self.menuIcons.push(infoIcon);
-
- gameList[gameId].assets.customMenu.auxiliarTitle(x, y, offsetW, offsetH);
- },
- renderCheckBox: function (x, y, offsetW, offsetH) {
- y += 60;
- const frame = showFractions ? 1 : 0;
- const selectionBox = game.add.sprite(
- x + 5 * offsetW,
- y + offsetH + 90,
- 'select_input',
- frame,
- 1.4
- );
- selectionBox.anchor(0.5, 0.5);
- selectionBox.iconType = 'selectionBox';
- self.menuIcons.push(selectionBox);
- },
- renderModeSection: function (x, y, offsetW, offsetH, curGame) {
- x = getFrameInfo().x + offsetW;
- y = getFrameInfo().y + offsetH / 2;
- if (!gameMode) gameMode = gameList[gameId].gameMode[0];
- for (
- let i = 0;
- i < curGame.assets.customMenu.gameModeBtn.length;
- i++, y += offsetH
- ) {
- const icon = game.add.sprite(
- x,
- y,
- curGame.assets.customMenu.gameModeBtn[i],
- 0,
- 1,
- 1
- );
- icon.anchor(0.5, 0.5);
- icon.gameMode = curGame.gameMode[i];
- icon.iconType = 'gameMode';
- if (gameList[gameId].gameMode[i] == gameMode) {
- icon.curFrame = 1;
- }
- self.menuIcons.push(icon);
- }
- },
- renderOperationSection: function (x, y, offsetW, offsetH, curGame) {
- x += 3 * offsetW;
- y = getFrameInfo().y + offsetH / 2;
- offsetH = game.math.getOffset(
- getFrameInfo().height,
- curGame.gameOperation.length - 1
- );
- if (!gameOperation) gameOperation = gameList[gameId].gameOperation[0];
- let icon;
-
- for (let i = 0; i < curGame.gameOperation.length; i++, y += offsetH) {
- icon = game.add.sprite(
- x,
- y,
- curGame.assets.customMenu.gameOperationBtn[i],
- 0,
- 1,
- 1
- );
- icon.anchor(0.5, 0.5);
- icon.gameOperation = curGame.gameOperation[i];
- icon.iconType = 'gameOperation';
- if (gameList[gameId].gameOperation[i] == gameOperation) {
- icon.curFrame = 1;
- }
- self.menuIcons.push(icon);
- }
- },
- renderDifficultySection: function (x, y, offsetW, offsetH, curGame) {
- x = getFrameInfo().x - 50 + 5 * offsetW;
- offsetH = game.math.getOffset(
- getFrameInfo().height,
- curGame.gameMode.length
- );
- y = getFrameInfo().y + offsetH / 3;
- if (!gameDifficulty) gameDifficulty = 1;
- if (gameName === 'squareTwo') x -= 70;
- for (let i = 0; i < curGame.gameDifficulty; i++) {
-
- const curX = x + (50 + 10) * i;
- const icon = game.add.sprite(curX, y - 5, 'btn_square', 1, 0.8);
- icon.anchor(0.5, 0.5);
- icon.difficulty = i + 1;
- icon.iconType = 'difficulty';
- if (i == gameDifficulty - 1) {
- icon.curFrame = 0;
- }
- self.menuIcons.push(icon);
-
- game.add.text(curX, y + 7, i + 1, textStyles.h4_);
- }
- },
- renderEnterSection: function (x, y) {
-
- if (!moodle) {
- x = context.canvas.width - 150;
- y = context.canvas.height - 180;
- const enterIcon = game.add.image(x, y, 'bush', 2);
- enterIcon.anchor(0.5, 0.5);
- enterIcon.iconType = 'enter';
- self.menuIcons.push(enterIcon);
- self.enterText = game.add.text(x, y, game.lang.continue, textStyles.btn);
- }
- },
- setInfoBoxes: function () {
-
- self.infoBox = document.querySelector('.ifr-modal');
-
- document.querySelector('.ifr-modal__closeButton').onclick = function () {
- self.infoBox.style.display = 'none';
- };
-
- window.onclick = function (event) {
- if (event.target == self.infoBox) {
- self.infoBox.style.display = 'none';
- }
- };
- self.gameOperationContent = {
- title: game.lang.operation_math,
- body: game.lang.infoBox_oper,
- img: `<table class="table">
- <tr>
- <td><img width=50 src="${game.image['op_plus'].src}"></td>
- <td><img width=50 src="${game.image['op_mix'].src}"></td>
- <td><img width=50 src="${game.image['op_min'].src}"></td>
- <td><img width=50 src="${game.image['op_eq'].src}"></td>
- </tr>
- <tr>
- <td class="text-center">${game.lang.plus}</td>
- <td class="text-center">${game.lang.mixed}</td>
- <td class="text-center">${game.lang.minus}</td>
- <td class="text-center">${game.lang.equals}</td>
- </tr>
- </table>`,
- };
- },
-
- showInfoBox: function (icon) {
- self.infoBox.style.display = 'block';
- const data =
- icon.id == 'gameOperation'
- ? self.gameOperationContent
- : gameList[gameId].assets.customMenu.infoBox()[icon.id];
- const content = `<h2>${data.title}</h2>
- <div>${data.body}</div>
- ${data.img}`;
- document.querySelector('.ifr-modal__infobox').innerHTML = content;
- },
- };
|