diff --git a/.gitignore b/.gitignore index 17ae5b4..0747ea9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules/ package-lock.json app/dist +app/assets diff --git a/app/gameData.json b/app/gameData.json index 667c23f..103933f 100644 --- a/app/gameData.json +++ b/app/gameData.json @@ -1,19 +1,19 @@ [ { - "question": "Выбери вариант?", - "image": "image.png", + "question": "Выбери вариант МОСТ", + "image": "image_land.jpg", "answer": [ "Мост", "Рудник", "Река", "Солнце" ], "rightAnswer": "мост" }, { "question": "Что горит?", - "image": "image.png", + "image": "image_port.jpg", "answer": [ "Вода", "Огонь", "Ветер", "Земля" ], "rightAnswer": "ОгоНЬ" }, { - "question": "При скольки градусов замерзает вода?", - "image": "image.png", + "question": "t замерзания воды?", + "image": "image_land.jpg", "answer": [ "0", "-1", "1", "-10" ], "rightAnswer": "0" } diff --git a/app/js/index.js b/app/js/index.js index 0301917..24d2eef 100644 --- a/app/js/index.js +++ b/app/js/index.js @@ -38,11 +38,13 @@ window.onload = function() { // TODO: change quest by script questIndex: 0, quest: null, + questImage: null, totalRightAnswers: 0, // количество правильных ответов scene: null, }; + shuffleQuestAnswer(gameData); // shuffle quest game.quest = gameData[game.questIndex]; - shuffleQuestAnswer(gameData[game.questIndex].answer); + shuffleQuestAnswer(gameData[game.questIndex].answer); // shuffle first quest answers // присваем всем квестам статус не выполнен gameData.forEach(element => element.status = null); @@ -54,6 +56,8 @@ window.onload = function() { uiButtons: { x: 10, y: cH - 80, w: cW - 20, h: 70 }, questProgress: { x: 10, y: 10, w: cW - 20, h: 20 }, } + area.image = { x: 10, y: area.questProgress.y + area.questProgress.h + 10, + w: cW - 20, h: area.questionLabel.y - area.questProgress.y - (area.questProgress.h * 2) }; } // TODO: add areas for landscape mode @@ -156,15 +160,38 @@ function draw() { context.fillText(value.data, cW / 2, value.y + 35); }); + // draw image + game.questImage = new Image(); + game.questImage.src = 'assets/images/' + game.quest.image; + + // carculate image ratio by area.image size + if (game.questImage.width >= game.questImage.height) { + if (game.questImage.height > area.image.h) { + let ratio = game.questImage.width / area.image.w; + let newImageW = area.image.w / ratio; + let newImageH = area.image.h; + + context.drawImage(game.questImage, getCenterH(cW, newImageW), area.image.y, + newImageW, newImageH); + } + else { + // TODO: draw image center + // TODO: add option to sizeUp images to engine config + } + } + else { + let ratio = game.questImage.height / area.image.h; + let newImageW = area.image.w / ratio; + + context.drawImage(game.questImage, getCenterH(cW, newImageW), area.image.y, + newImageW, area.image.h); + } + // draw progress bar let sizeProgressItem = area.questProgress.w / gameData.length; context.strokeStyle = "black"; - // for (const [key, value] of Object.entries(area)) { - // context.strokeRect(value.x, value.y, value.w, value.h); - // } - for (let i = 0; i < gameData.length; i++) { // change progress item color by status answer switch (gameData[i].status) {