69 lines
No EOL
2.4 KiB
JavaScript
69 lines
No EOL
2.4 KiB
JavaScript
var colors = ["#e74c3c", "#f1c40f", "#3498db"];
|
|
var hexagonBackgroundColor = 'rgb(236, 240, 241)';
|
|
var hexagonBackgroundColorClear = 'rgba(236, 240, 241, 0.5)';
|
|
var centerBlue = '#2c3e50'; //tumblr?
|
|
|
|
function showModal(text, secondaryText) {
|
|
var buttonSize = 150;
|
|
var fontSizeLarge = 50;
|
|
var fontSizeSmall = 25;
|
|
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2 - 25, 30, hexagonBackgroundColorClear);
|
|
// drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, buttonSize, 30, swegBlue);
|
|
ctx.font = fontSizeLarge + 'px Roboto'; // figure out what is not working
|
|
ctx.textAlign = 'center';
|
|
ctx.fillStyle = centerBlue;
|
|
// ctx.fillStyle = hexagonBackgroundColor;
|
|
ctx.fillText(text, canvas.originalWidth / 2, canvas.originalHeight / 2 + (fontSizeLarge / 4));
|
|
ctx.font = fontSizeSmall + 'px Roboto';
|
|
ctx.fillText(secondaryText, canvas.originalWidth / 2, canvas.originalHeight / 2 + fontSizeLarge / 4 + fontSizeSmall / 4 + 30);
|
|
}
|
|
|
|
function clearShadows() {
|
|
ctx.shadowColor = 0;
|
|
ctx.shadowBlur = 0;
|
|
ctx.shadowOffsetX = 0;
|
|
ctx.shadowOffsetY = 0;
|
|
}
|
|
|
|
function clearGameBoard() {
|
|
ctx.shadowColor = '#2980b9';
|
|
ctx.shadowBlur = 25;
|
|
drawPolygon(canvas.originalWidth / 2, canvas.originalHeight / 2, 6, canvas.originalWidth / 2 - 25, 30, hexagonBackgroundColor);
|
|
clearShadows();
|
|
}
|
|
|
|
function drawPolygon(x, y, sides, radius, theta, color, fill) { // can make more elegant, reduce redundancy, fix readability
|
|
if (fill == undefined) {
|
|
fill = true;
|
|
}
|
|
if (fill) {
|
|
ctx.fillStyle = color;
|
|
} else {
|
|
// ctx.shadowColor = '#2980b9';
|
|
// ctx.shadowColor = color;
|
|
// ctx.shadowColor = '#2ecc71';
|
|
// ctx.shadowBlur = 10;
|
|
// ctx.strokeStyle = rgba(0,0,0,0);
|
|
ctx.lineWidth = 3;
|
|
ctx.strokeStyle = color;
|
|
}
|
|
|
|
ctx.beginPath();
|
|
var coords = rotatePoint(0, radius, theta);
|
|
ctx.moveTo(coords.x + x, coords.y + y);
|
|
var oldX = coords.x;
|
|
var oldY = coords.y;
|
|
for (var i = 0; i < sides; i++) {
|
|
coords = rotatePoint(oldX, oldY, 360 / sides);
|
|
ctx.lineTo(coords.x + x, coords.y + y);
|
|
// ctx.moveTo(coords.x + x, coords.y + y);
|
|
oldX = coords.x;
|
|
oldY = coords.y;
|
|
}
|
|
ctx.closePath();
|
|
if (fill) {
|
|
ctx.fill();
|
|
} else {
|
|
ctx.stroke();
|
|
}
|
|
}; |