eightball/eightball.js

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const choices = [
  "It is certain", "It is decidedly so", "Without a doubt", "Yes definitely",
  "You may rely on it", "As I see it, yes", "Most likely", "Outlook good", "Yes",
  "Signs point to yes", "Better not tell you now", "Cannot predict now",
  "Concentrate and ask again", "My sources say no", "Outlook not so good", "Very doubtful"
];

function start(choice = '') {
  drawBall();
  drawText('shake me uwu', colour='grey');
  canvas.addEventListener('click', (event) => {
    console.log('click');
    canvas.onmousedown = function() {
      drawBall();
    }
    eightball(getRandomAnswer());
  });
}

function eightball(choice = '') {
  drawBall();
  if(choice !== '') {
    drawText(choice)
  }
}

function drawBall() {
  console.log('Drawing ball');
  drawCircle();
  drawTriangle();
}

function drawText(choice, colour = 'white') {
  console.log('Answer is: ' + choice);
  context.fillStyle = colour;
  context.font = '20px sans-serif';
  context.textAlign = 'center';
  context.fillText(choice, 150, 150);
}

function drawCircle() {
  context.fillStyle = 'black';
  context.beginPath();
  context.arc(150, 150, 150, 0, 2 * Math.PI);
  context.fill();
  context.closePath();
}

function drawTriangle() {
  context.fillStyle = 'blue';
  context.beginPath();
  context.moveTo(150, 50);
  context.lineTo(250, 200);
  context.lineTo(150, 50);
  context.fill();
  context.closePath();
}

function getRandomAnswer() {
  let randomIndex = Math.floor(Math.random() * choices.length);
  return choices[randomIndex];
}

start();