Alexander Popov
da870f3e08
add namespaces fix BUG (shuffle first quest) make areas.js for set areas update placeImage()
109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
// функции рисоввания
|
|
|
|
export function clearContext(canvas, color) {
|
|
let cW = canvas.width;
|
|
let cH = canvas.height;
|
|
|
|
let context = canvas.getContext('2d');
|
|
|
|
context.fillStyle = color;
|
|
context.fillRect(0, 0, cW, cH);
|
|
}
|
|
|
|
export function placeImage(canvas, area, imageFile, colors) {
|
|
let context = canvas.getContext('2d');
|
|
|
|
let image = new Image();
|
|
image.src = `assets/images/${imageFile}`;
|
|
|
|
context.strokeStyle = colors.buttonStroke;
|
|
context.lineWidth = colors.strokeSize;
|
|
|
|
if (image.width >= image.height) {
|
|
if (image.width > area.w) {
|
|
let newImageW = area.w;
|
|
let newImageH = image.height / (image.width / area.w);
|
|
|
|
context.drawImage(image, getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH);
|
|
context.strokeRect(getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH);
|
|
}
|
|
else {
|
|
// TODO: getCenterV({this}) <= need plus progressBar sizes
|
|
context.drawImage(image, getCenterH(canvas.width, image.width), getCenterV(canvas.height / 2 + area.y, image.height), image.width, image.height);
|
|
context.strokeRect(getCenterH(canvas.width, image.width), getCenterV(canvas.height / 2 + area.y, image.height), image.width, image.height);
|
|
}
|
|
}
|
|
else {
|
|
let newImageH = area.h;
|
|
let newImageW = image.width * (area.h / image.height);
|
|
context.drawImage(image, getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH);
|
|
context.strokeRect(getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH);
|
|
}
|
|
}
|
|
|
|
export function getCenterH(canvasWidth, objectWidth) {
|
|
return canvasWidth / 2 - objectWidth / 2;
|
|
}
|
|
|
|
export function getCenterV(canvasHeight, objectHeight) {
|
|
return canvasHeight / 2 - objectHeight / 2;
|
|
}
|
|
|
|
export function drawGameAreas(context, areas) {
|
|
context.strokeStyle = "#ff0000";
|
|
context.lineWidth = 1;
|
|
|
|
for (const [key, value] of Object.entries(areas)) {
|
|
context.strokeRect(value.x, value.y, value.w, value.h);
|
|
}
|
|
}
|
|
|
|
export function drawInfo(canvas, landscape_orientation) {
|
|
let cW = canvas.width;
|
|
let cH = canvas.height;
|
|
let context = canvas.getContext('2d');
|
|
|
|
console.log("INFO");
|
|
|
|
context.fillStyle = 'rgba(0,0,0,.8)';
|
|
context.fillRect(0, 0, cW, cH);
|
|
|
|
// if(!landscape_orientation) {
|
|
context.fillStyle = '#000000';
|
|
context.fillRect(80, 80, cW - 160, cH - 160);
|
|
// }
|
|
}
|
|
|
|
export function drawProgressBar(context, area, colors, questions) {
|
|
let sizeProgressItem = area.w / questions.length;
|
|
|
|
context.strokeStyle = colors.strokeSize;
|
|
|
|
for (let i = 0; i < questions.length; i++) {
|
|
switch (questions[i].status) {
|
|
case null:
|
|
context.fillStyle = colors.answer.notPassed;
|
|
break;
|
|
case true:
|
|
context.fillStyle = colors.answer.right;
|
|
break;
|
|
case false:
|
|
context.fillStyle = colors.answer.wrong;
|
|
break;
|
|
}
|
|
|
|
context.fillRect(10 + (i * sizeProgressItem), 10, sizeProgressItem, 20);
|
|
context.strokeRect(10 + (i * sizeProgressItem), 10, sizeProgressItem, 20);
|
|
}
|
|
}
|
|
|
|
export function drawQuestionLabel(canvas, area, questLabel) {
|
|
let context = canvas.getContext('2d');
|
|
|
|
context.font = '32px Yanone Kaffeesatz';
|
|
context.textAlign = 'center';
|
|
context.fillStyle = '#ffffff';
|
|
|
|
context.fillText(questLabel, canvas.width / 2, area.y + 30);
|
|
}
|