worldshardestgame/js/main_menu.js

const BOTTOM_BUTTONS_Y = cwh(CANVAS_HEIGHT - BAR_HEIGHT - 10);
const BOTTOM_FONT = cwh(20) + "px Arial";

function drawMainMenu() {
  // music
  if (firstTimeOnMainMenu && !muteMusic) {
    music.play();
    firstTimeOnMainMenu = false;
  }

  // buttons
  if (!mobile) {
    if (onButton("mm_playGame")) canvas.drawImage(img_mainMenu_playGame, 0, BAR_HEIGHT);
    else if (onButton("mm_loadGame")) canvas.drawImage(img_mainMenu_loadGame, 0, BAR_HEIGHT);
    else if (onButton("mm_levelSelect")) canvas.drawImage(img_mainMenu_levelSelect, 0, BAR_HEIGHT);
    else if (onButton("mm_moreGames")) canvas.drawImage(img_mainMenu_moreGames, 0, BAR_HEIGHT);
    else canvas.drawImage(img_mainMenu, 0, BAR_HEIGHT);
  } else {
    canvas.drawImage(img_mainMenu, os.x, cwh(BAR_HEIGHT) + os.y, cwh(MENU_IMG_WIDTH), cwh(MENU_IMG_HEIGHT));
  }

  /*
	// bottom text - label
	canvas.fillStyle = "black";
	canvas.font = BOTTOM_FONT;
	canvas.textAlign = "left";
	canvas.fillText("MORE FROM THE SERIES:", 128, BOTTOM_BUTTONS_Y);

	// bottom text - twhg2
	if (onButton("mm_twhg2"))
		canvas.fillStyle = LS_BUTTON_HOVER_COLOR;
	else
		canvas.fillStyle = "black";
	canvas.font = "bold " + BOTTOM_FONT;
	canvas.textAlign = "left";
	canvas.fillText("TWHG2", 393, BOTTOM_BUTTONS_Y);

	// bottom text - sep 0
	drawSep(482, 533);

	// bottom text - twhg3
	if (onButton("mm_twhg3"))
		canvas.fillStyle = LS_BUTTON_HOVER_COLOR;
	else
		canvas.fillStyle = "black";
	canvas.font = "bold " + BOTTOM_FONT;
	canvas.textAlign = "left";
	canvas.fillText("TWHG3", 497, BOTTOM_BUTTONS_Y);

	// bottom text - sep 1
	drawSep(585, 533);

	// bottom text - twhg4
	if (onButton("mm_twhg4"))
		canvas.fillStyle = LS_BUTTON_HOVER_COLOR;
	else
		canvas.fillStyle = "black";
	canvas.font = "bold " + BOTTOM_FONT;
	canvas.textAlign = "left";
	canvas.fillText("TWHG4", 600, BOTTOM_BUTTONS_Y);
	
	// coming soon
	if (onButton("mm_twhg2"))
		drawComingSoon(430);
	else if (onButton("mm_twhg3"))
		drawComingSoon(534);
	else if (onButton("mm_twhg4"))
		drawComingSoon(637);
	*/
}

/*
function drawSep(x, y) {
	const SEP_SIZE = 10;
	const SEP_OUTLINE_SIZE = 3;
	canvas.beginPath();
	canvas.arc(x, y, SEP_SIZE / 2, 0, 2 * Math.PI, false);
	canvas.fillStyle = ENEMY_FILL_COLOR_0;
	canvas.fill();
	canvas.lineWidth = SEP_OUTLINE_SIZE;
	canvas.strokeStyle = ENEMY_OUTLINE_COLOR_0;
	canvas.stroke();
}

function drawComingSoon(x) {
	var y = 515;
	var triangle = 15;
	var rectWidth = 280;
	var rectHeight = 40;
	var strokeWidth = 2;
	var shadowOffset = 7;
	
	// shadow
	canvas.beginPath();
	canvas.moveTo(x + shadowOffset, y + shadowOffset);
	canvas.lineTo(x - triangle + shadowOffset, y - triangle + shadowOffset);
	canvas.lineTo(x - rectWidth / 2 + shadowOffset, y - triangle + shadowOffset);
	canvas.lineTo(x - rectWidth / 2 + shadowOffset, y - triangle - rectHeight + shadowOffset);
	canvas.lineTo(x + rectWidth / 2 + shadowOffset, y - triangle - rectHeight + shadowOffset);
	canvas.lineTo(x + rectWidth / 2 + shadowOffset, y - triangle + shadowOffset);
	canvas.lineTo(x + triangle + shadowOffset, y - triangle + shadowOffset);
	canvas.closePath();
	canvas.fillStyle = MENU_SHADOW_COLOR;
	canvas.fill();
	
	// main bubble
	canvas.beginPath();
	canvas.moveTo(x, y);
	canvas.lineTo(x - triangle, y - triangle);
	canvas.lineTo(x - rectWidth / 2, y - triangle);
	canvas.lineTo(x - rectWidth / 2, y - triangle - rectHeight);
	canvas.lineTo(x + rectWidth / 2, y - triangle - rectHeight);
	canvas.lineTo(x + rectWidth / 2, y - triangle);
	canvas.lineTo(x + triangle, y - triangle);
	canvas.closePath();
	canvas.fillStyle = "#fff";
	canvas.fill();
    canvas.lineWidth = strokeWidth;
    canvas.strokeStyle = "#000";
    canvas.stroke();
    
    // text
    canvas.fillStyle = "black";
	canvas.font = "bold " + BOTTOM_FONT;
	canvas.textAlign = "center";
	canvas.fillText("HTML5 COMING SOON...", x, y - 28);
}
*/