bakeoff_2/prototype1.html at main · cmukdao/bakeoff_2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bakeoff 2</title>
    <style type="text/css">
      /* This CSS is not required, but recommended. */
      body {
        height: 100vh;
        width: 100vw;
        border: none;
        margin: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 80px; /* Added space for the footer buttons */
      }
      body.active {
        border-left: 3px #f06 solid;
      }
      footer {
        width: 100vw;
        text-align: center;
        position: absolute;
        bottom: 0px;
        padding: 0.75em;
        border-top: 1px #ddd solid;
      }
      svg {
        border: 1px #ddd solid;
      }
      /* Custom slider container styling */
      #custom-sliders {
        margin-top: 20px;
        text-align: center;
      }
      #custom-sliders div {
        margin-bottom: 10px;
      }
    </style>
    <!-- Two required scripts -->
    <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
    <script src="https://dhcs-s25-bakeoff2.glitch.me/framework.js"></script>
  </head>
  <body>
    <!-- SVG drawing area -->
    <div id="main"></div>

    <!-- Custom slider -->
    <div id="custom-sliders">
      <div>
        <label for="rotationSlider">Rotation: <span id="rotationValue">0</span>°</label>
        <input type="range" id="rotationSlider" min="0" max="360" value="0">
      </div>
      <div>
        <label for="sizeSlider">Size: <span id="sizeValue">40</span>px</label>
        <input type="range" id="sizeSlider" min="4" max="300" value="40">
      </div>
    </div>
  </body>
  <script type="text/javascript">
    // =========== This part is required: ===========
    // This constant can be changed while you are experimenting, but it should be set back to 10 for the Bakeoff:
    const tasksLength = 10;

    // Create an SVG drawing area in the div with ID "main". Centering is handled by CSS.
    let svg = SVG().addTo('#main').size(canvasSize + "px", canvasSize + "px");

    // Initialize the "judge" object with the number of tasks per trial, your SVG drawing area, and a team name.
    const judge = new Judge(tasksLength, svg, "teamName");
    // =========== /end required ===========

    // Existing event handlers and example code:
    const startColor = "#6677ee";
    const goalColor = "#777";
    let squareBeingClicked = false;
    let manipulator = svg.group();
    let goal = svg.group();

    // Global variable for the current task's start square (to be used by the sliders)
    let currentSquare = null;

    // Any time the mouse moves over the SVG area...
    svg.on("mousemove", (e) => {
      if (squareBeingClicked) {
        manipulator.center(e.offsetX, e.offsetY);
      }
    });

    // When a new task is assigned...
    judge.on("newTask", () => {
      let task = judge.getCurrentTask();

      // Style the start and goal squares.
      task.start.square.fill(startColor);
      task.goal.square.fill('none');
      task.goal.square.stroke(goalColor);

      // Add the new squares to their groups.
      manipulator.add(task.start.square);
      goal.add(task.goal.square);

      // Set the global currentSquare for slider controls.
      currentSquare = task.start.square;

      // Optional: Add some event handlers.
      let squareClickHandler = function() {
        console.log("Click!");
      };
      task.start.square.on("click", squareClickHandler);
      task.start.square.on("mousedown", () => {
        squareBeingClicked = true;
      });
      task.start.square.on("mouseup", () => {
        squareBeingClicked = false;
      });
    });

    judge.on("testOver", (data) => {
      for (let i=1; i<data.scores.length; i++) { // starting on the second one, since the first one is the "learning" trial, which doesn't affect the score
        let score = data.scores[i];
        let summedScore = (8*score.distance) + (900*score.scaleFactor) + (4*score.rotationFactor); // using the weight values as listed on Canvas
        console.log("Trial "+i+": "+summedScore);
      }
    });

    // Start the judge's process.
    judge.setup();

    // ===== Slider Control Code =====
    const rotationSlider = document.getElementById("rotationSlider");
    const rotationValueDisplay = document.getElementById("rotationValue");
    const sizeSlider = document.getElementById("sizeSlider");
    const sizeValueDisplay = document.getElementById("sizeValue");
    let currentRotation = 0;
    // Update rotation when the rotation slider moves.
    rotationSlider.addEventListener("input", (e) => {
      const newAngle = parseFloat(e.target.value);
      const angleChange = newAngle - currentRotation;
      currentRotation = newAngle;
      rotationValueDisplay.textContent = newAngle;
      if (currentSquare) {
        currentSquare.rotate(angleChange,currentSquare.cx(),currentSquare.cy());
      }
    });

    // Update size when the size slider moves.
    sizeSlider.addEventListener("input", (e) => {
      const newSize = parseFloat(e.target.value);
      sizeValueDisplay.textContent = newSize;
      if (currentSquare) {
        // Resize the square and re-center it.
        currentSquare.size(newSize, newSize);
        const bbox = currentSquare.bbox();
        currentSquare.center(bbox.cx, bbox.cy);
      }
    });
  </script>
</html>