initial commit

a20f87c2 · Raphael Storm Larsen · 0302e22f · a20f87c2 · a20f87c2 · a20f87c2
Commit a20f87c2 authored 2 years ago by Raphael Storm Larsen
--- a/frontend/index.html
+++ b/frontend/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Spinnable Wheel</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+  <div id="container">
+    <canvas id="wheelCanvas"></canvas>
+    <button id="spinButton" onclick="spinWheel()">Spin</button>
+  </div>
+
+  <p id="stats"></p>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+  <script src="script.js"></script>
+</body>
+</html>
--- a/frontend/script.js
+++ b/frontend/script.js
+let stats = document.getElementById('stats')
+
+let rotation = 0;
+let isSpinning = false;
+let wheelCanvas;
+let targetAngle = 0;
+let rotationSpeed = 0.1;
+
+window.onload = function() {
+  wheelCanvas = document.getElementById('wheelCanvas');
+  wheelCanvas.style.cursor = 'pointer';
+};
+
+function setup() {
+  wheelCanvas = createCanvas(800, 800);
+  wheelCanvas.parent('container');
+  wheelCanvas.mousePressed(spinWheel);
+}
+
+function draw() {
+    background(220);
+    translate(width / 2, height / 2);
+  
+    const distance = targetAngle - rotation;
+    if (isSpinning && abs(distance) > rotationSpeed) {
+      rotate(rotationSpeed * Math.sign(distance));
+      rotation += rotationSpeed * Math.sign(distance);
+    } else {
+      rotation = targetAngle;
+      isSpinning = false;
+    }
+  
+    stats.innerHTML = "rotation: " + rotation + " angle: " + angle + " targetangle: " + targetAngle; 
+    drawWheel();
+  }
+
+function drawWheel() {
+  const colors = [
+    "#FFF56D", // Curious
+    "#FFEE00", // Adventurous
+    "#FFD700", // Intriguing
+    "#FF9933", // Enigmatic
+    "#FF6600", // Eerie/Creepy
+    "#FF4500", // Foreboding
+    "#FF0000", // Violent
+    "#C71585", // Ambitious
+    "#993399", // Scheming
+    "#800080", // Grim/Pessimistic
+    "#4682B4", // Sad
+    "#6495ED", // Nostalgic
+    "#00BFFF", // Serene
+    "#00FF7F", // Hopeful
+    "#32CD32", // Triumphant
+    "#7CFC00", // Hearty
+    "#FFFF00", // Daring
+    "#FFD700"  // Silly
+  ];
+
+  const moods = [
+    "Curious",
+    "Adventurous",
+    "Intriguing",
+    "Enigmatic",
+    "Eerie/Creepy",
+    "Foreboding",
+    "Violent",
+    "Ambitious",
+    "Scheming",
+    "Grim/Pessimistic",
+    "Sad",
+    "Nostalgic",
+    "Serene",
+    "Hopeful",
+    "Triumphant",
+    "Hearty",
+    "Daring",
+    "Silly"
+  ];
+  
+  const numSegments = colors.length;
+  const angleIncrement = TWO_PI / numSegments;
+
+  for (let i = 0; i < numSegments; i++) {
+    const startAngle = i * angleIncrement + rotation % (2 * PI);
+    const endAngle = startAngle + angleIncrement;
+
+    fill(colors[i]);
+    arc(0, 0, width * 0.8, height * 0.8, startAngle, endAngle, PIE);
+
+    push();
+    rotate(startAngle + angleIncrement / 2);
+    textAlign(CENTER, CENTER);
+    fill(255);
+    textSize(24);
+    text(moods[i], width * 0.2, 0);
+    pop();
+  }
+}
+
+
+function spinWheel(event) {
+  if (!isSpinning) {
+    const canvasRect = wheelCanvas.getBoundingClientRect();
+    const mouseX = event.clientX - canvasRect.left;
+    const mouseY = event.clientY - canvasRect.top;
+    const clickAngle = atan2(mouseY - height / 2, mouseX - width / 2);
+
+    const currentAngle = rotation % (2 * PI);
+    const remainder = currentAngle % (TWO_PI / 18); // 18 segments
+
+    targetAngle = clickAngle - (PI / 2) - remainder; // Rotate to make clicked sector face 90 degrees from the top
+    
+    isSpinning = true;
+  }
+}
+
+function stopSpinning() {
+  isSpinning = false;
+}
+
--- a/frontend/styles.css
+++ b/frontend/styles.css
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+
+#container {
+  position: relative;
+}
+
+#spinButton {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 10px 20px;
+  font-size: 18px;
+}
--- a/go.mod
+++ b/go.mod
+module bardicarchives
+
+go 1.20