First commit of this dumb thing lmao

2023-02-15 18:20:36 +02:00 · 2023-02-15 18:20:36 +02:00 · fa8c104951
commit fa8c104951
3 changed files with 115 additions and 0 deletions
--- a/eightball.js
+++ b/eightball.js
@ -0,0 +1,66 @@
+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();
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Criminally Cute Eight Ball</title>
+    <link rel="stylesheet" href="./style.css">
+  </head>
+  <p>Ask your question and then press and hold to shake.</p>
+  <body>
+    <canvas id="canvas" height="300" width="300"></canvas>
+    <script type="text/javascript" src="./eightball.js"></script>
+    <footer>This is a dumb work-in-progress project by Siina.</footer>
+  </body>
+</html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,36 @@
+body {
+    text-align: center;
+}
+
+footer {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    text-align: center;
+    padding-bottom: 2em;
+}
+
+#canvas {
+    padding-top: 10%;
+    display: block;
+    margin: auto;
+}
+
+#canvas:active {
+    animation: shake 0.5s;
+    animation-iteration-count: infinite;
+}
+
+@keyframes shake {
+    0% { transform: translate(1px, 1px) rotate(0deg); }
+    10% { transform: translate(-1px, -2px) rotate(-1deg); }
+    20% { transform: translate(-3px, 0px) rotate(1deg); }
+    30% { transform: translate(3px, 2px) rotate(0deg); }
+    40% { transform: translate(1px, -1px) rotate(1deg); }
+    50% { transform: translate(-1px, 2px) rotate(-1deg); }
+    60% { transform: translate(-3px, 1px) rotate(0deg); }
+    70% { transform: translate(3px, 1px) rotate(-1deg); }
+    80% { transform: translate(-1px, -1px) rotate(1deg); }
+    90% { transform: translate(1px, 2px) rotate(0deg); }
+    100% { transform: translate(1px, -2px) rotate(-1deg); }
+}