123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- const menuState = {
-
- create: function () {
-
- if (moodle && iLMparameters.iLM_PARAM_SendAnswer == 'false') {
-
- playerName = game.lang.student;
- getiLMContent();
- } else {
-
- if (moodle && iLMparameters.iLM_PARAM_SendAnswer == 'true')
- playerName = game.lang.professor;
-
- gameId = null;
- gameMode = null;
- gameOperation = null;
- gameDifficulty = null;
- showFractions = true;
- renderBackground();
-
- game.add.text(
- context.canvas.width / 2,
- 60,
- game.lang.welcome + ', ' + playerName + '!',
- { ...textStyles.h3_, fill: colors.maroon }
- );
-
- game.add.text(context.canvas.width / 2, 120, game.lang.menu_title, {
- ...textStyles.h1_,
- fill: colors.green,
- });
-
- this.lbl_game = game.add.text(
- context.canvas.width / 2,
- 170,
- '',
- textStyles.h2_
- );
-
- navigation.add.right(['audio', 'lang']);
- this.menuIcons = [];
-
- const offset = game.math.getOffset(context.canvas.width, gameList.length);
- for (let i = 0, x = offset; i < gameList.length; i++, x += offset) {
- const icon = game.add.image(
- x,
- context.canvas.height / 2 - 70,
- gameList[i].assets.menu.gameNameBtn,
- 1.5
- );
- icon.anchor(0.5, 0.5);
- icon.gameId = i;
- icon.iconType = 'game';
- this.menuIcons.push(icon);
-
- const infoIcon = game.add.image(
- x + 110,
- context.canvas.height / 2 - 100 - 80 - 10,
- 'info',
- 0.8,
- 0.6
- );
- infoIcon.anchor(0.5, 0.5);
- infoIcon.iconType = 'infoIcon';
- infoIcon.id = i;
- this.menuIcons.push(infoIcon);
- }
-
- this.setInfoBoxes();
-
- game.event.add('click', this.onInputDown);
- game.event.add('mousemove', this.onInputOver);
- if (isDebugMode && debugState.menu.skip) {
-
- const id = debugState.menu.id;
- gameId = id;
- gameName = gameList[id].gameName;
- gameShape = gameList[id].gameShape;
- audioStatus = debugState.menu.audioStatus || false;
- self.menuIcons =
- game.lang[gameShape] + ' ' + gameName.slice(-3) == 'One' ? 'I' : 'II';
- game.state.start('customMenu');
- }
- }
- },
- 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';
- }
- };
- },
-
- showInfoBox: function (icon) {
- if (gameList?.[icon.id]?.assets?.menu?.infoBox) {
- self.infoBox.style.display = 'block';
- const data = gameList[icon.id].assets.menu.infoBox();
- const content = `<h3>${data.title}</h3>
- <p>${data.body}</p>
- ${data.img}`;
- document.querySelector('.ifr-modal__infobox').innerHTML = content;
- } else {
- console.error('Error: no info box was setup for this game.');
- }
- },
-
- load: function (icon) {
- if (audioStatus) game.audio.popSound.play();
- switch (icon.iconType) {
- case 'infoIcon':
- self.showInfoBox(icon);
- break;
- case 'game':
- gameId = icon.gameId;
- gameName = gameList[gameId].gameName;
- gameShape = gameList[gameId].gameShape;
- if (!gameList.find((game) => game.gameName === gameName))
- console.error('Game error: the name of the game is not valid.');
- if (isDebugMode) console.log('Game Name: ' + gameName);
- self.menuIcons = self.lbl_game.name;
- game.state.start('customMenu');
- break;
- }
- },
-
- showTitle: function (icon) {
- const number =
- gameList[icon.gameId].gameName.slice(-3) == 'One' ? 'I' : 'II';
- const shape = gameList[icon.gameId].gameName.slice(0, -3);
- self.lbl_game.name = game.lang[shape] + ' ' + number;
- },
-
- clearTitle: function () {
- self.lbl_game.name = '';
- },
-
- onInputDown: function (mouseEvent) {
- const x = game.math.getMouse(mouseEvent).x;
- const y = game.math.getMouse(mouseEvent).y;
-
- for (let i in self.menuIcons) {
-
- if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
-
- self.load(self.menuIcons[i]);
- break;
- }
- }
-
- 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';
- if (self.menuIcons[overIcon].iconType == 'game')
- self.showTitle(self.menuIcons[overIcon]);
- self.menuIcons.forEach((cur) => {
- if (cur.iconType == self.menuIcons[overIcon].iconType) {
-
- if (cur == self.menuIcons[overIcon]) {
-
- cur.scale = cur.initialScale * 1.1;
- } else {
- cur.scale = cur.initialScale;
- }
- }
- });
- } else {
-
- self.clearTitle();
- self.menuIcons.forEach((cur) => {
- cur.scale = cur.initialScale;
- });
- document.body.style.cursor = 'auto';
- }
-
- navigation.onInputOver(x, y);
- game.render.all();
- },
- };
|