Team-BTMC · happpy24 · Oct 9, 2024 · Sep 28, 2024 · Oct 8, 2024 · Oct 8, 2024
diff --git a/index.html b/index.html
@@ -28,6 +28,10 @@
 			rel="stylesheet"
 			href="styles/difficulty-graph.css"
 		/>
+        <link
+            rel="stylesheet"
+            href="styles/hit-judgements.css"
+        />
 	</head>
 
 	<body>
@@ -38,7 +42,8 @@
 					id="bg"
 					class="bg-image"
 					src=""
-				/>
+                    alt=""
+                />
 				<div class="bg-overlay"></div>
 				<div class="SongInfo">
 					<div class="ArtistSong">
@@ -189,7 +194,9 @@
 					height="64"
 				></canvas>
 			</div>
+            <div id="hit-judgements"></div>
 		</div>
+
 		<!--        OTHER SCRIPTS        -->
 		<script src="js/odometr.js"></script>
 		<script src="js/countUp.js"></script>

diff --git a/index.js b/index.js
@@ -9,6 +9,8 @@ import {
   fastSmooth,
   max
 } from "./js/fast-smooth.js";
+import { hitJudgementsAdd, hitJudgementsClear } from "./js/hit-judgements.js";
+import GraphFill, { Color } from "./js/GraphFill.js";
 const socket = new WebSocketManager('127.0.0.1:24050');
 
 
@@ -17,6 +19,7 @@ const cache = {
   h100: -1,
   h50: -1,
   h0: -1,
+  sliderBreaks: -1,
   accuracy: -1,
   title: "",
   artist: "",
@@ -32,12 +35,16 @@ const cache = {
   difficultyGraph: ''
 };
 
-let graphSmoothing = 2; // from 0 (no smoothing) to 5 (max smoothing)
-let configDarker = createChartConfig('rgba(185, 234, 255, 0.4)');
-let configLighter = createChartConfig('rgba(185, 234, 255, 0.7)');
+/** @type {0 | 1 | 2 | 3 | 4 | 5} from 0 (no smoothing) to 5 (max smoothing)  */
+let graphSmoothing = 2;
+const gradientDarker = new GraphFill(new Color(185, 234, 255, 0.4), Color.TRANSPARENT);
+const gradientLighter = new GraphFill(new Color(185, 234, 255, 0.7));
+let configDarker = createChartConfig(gradientDarker);
+let configLighter = createChartConfig(gradientLighter);
 let chartDarker;
 let chartLighter;
 let chartProgress;
+let hitJudgementsElement;
 
 function renderGraph(graphData) {
   // Better be sure. In case someone forgets
@@ -123,20 +130,24 @@ socket.commands((data) => {
     }
 
     if (message['GraphColor'] != null) {
-      (chartDarker ?? configDarker).data.datasets[0].backgroundColor = hexToRgbA(message['GraphColor'], 0.4);
-      (configLighter ?? configLighter).data.datasets[0].backgroundColor = hexToRgbA(message['GraphColor'], 0.7);
+      gradientDarker.setFill(Color.fromHex(message['GraphColor']).setAlpha(0.5));
+      gradientDarker.setBorder(Color.TRANSPARENT.clone());
+
+      const fill = Color.fromHex(message['GraphColor']);
+      gradientLighter.setFill(fill.setAlpha(0.5));
+      gradientLighter.setBorder(fill.clone().setAlpha(1));
 
       chartDarker?.update();
       chartLighter?.update();
     }
 
     if (message['GraphSmoothing'] != null) {
       const smoothingMap = {
-        "Raw data": "0",
-        "Small smoothing": "1",
-        "Smoothing": "2",
-        "Big smooth": "3",
-        "Manscaped smooth": "4"
+        "Raw data": 0,
+        "Small smoothing": 1,
+        "Smoothing": 2,
+        "Big smooth": 3,
+        "Manscaped smooth": 4
       };
 
       graphSmoothing = smoothingMap[message['GraphSmoothing']];
@@ -212,6 +223,7 @@ const channels = new Set(["aim", "speed"]);
 
 socket.api_v2(({play, beatmap, directPath, folders, performance, state, resultsScreen}) => {
   try {
+    const percentage = Math.max(0, Math.min(beatmap.time.live / beatmap.time.mp3Length * 100, 100));
     if (chartDarker !== undefined && chartLighter !== undefined && chartProgress !== undefined) {
       const dataString = JSON.stringify(performance.graph);
       if (cache.difficultyGraph !== dataString) {
@@ -220,26 +232,42 @@ socket.api_v2(({play, beatmap, directPath, folders, performance, state, resultsS
         renderGraph(performance.graph);
       }
 
-      const percentage = Math.max(0, Math.min(beatmap.time.live / beatmap.time.mp3Length * 100, 100));
       chartProgress.style.width = String(percentage) + "%";
     }
 
     let pp = state.name === 'ResultScreen' ? resultsScreen.pp : play.pp;
     let hits = state.name === 'ResultScreen' ? resultsScreen.hits : play.hits;
 
+    const isSliderBreak = cache.sliderBreaks !== hits['sliderBreaks'];
+
     if (cache.h100 !== hits['100']) {
       cache.h100 = hits['100'];
       h100.update(hits['100']);
+
+      if (hits['100'] > 0 && state.name === "Play") {
+        cache.sliderBreaks = hits['sliderBreaks'];
+        hitJudgementsAdd(hitJudgementsElement, "100", percentage, isSliderBreak);
+      }
     }
 
     if (cache.h50 !== hits['50']) {
       cache.h50 = hits['50'];
       h50.update(hits['50']);
+
+      if (hits['50'] > 0 && state.name === "Play") {
+        cache.sliderBreaks = hits['sliderBreaks'];
+        hitJudgementsAdd(hitJudgementsElement, "50", percentage, isSliderBreak);
+      }
     }
 
     if (cache.h0 !== hits['0']) {
       cache.h0 = hits['0'];
       h0.update(hits['0']);
+
+      if (hits['0'] > 0 && state.name === "Play") {
+        cache.sliderBreaks = hits['sliderBreaks'];
+        hitJudgementsAdd(hitJudgementsElement, "x", percentage, isSliderBreak);
+      }
     }
 
     if (cache.pp !== Math.round(pp.current)) {
@@ -386,6 +414,8 @@ socket.api_v2(({play, beatmap, directPath, folders, performance, state, resultsS
       hitsCont.style.opacity = 0;
       ppCurrent.style.opacity = 0;
       ppSlash.style.opacity = 0;
+
+      hitJudgementsClear(hitJudgementsElement);
     } else {
       horizontalLine.style.transform = 'translateY(0)';
       hitsCont.style.transform = 'translateY(0)';
@@ -433,6 +463,8 @@ window.addEventListener('load', () => {
       document.querySelector('.difficulty-graph .lighter').getContext('2d'),
     configLighter
   );
+
+  hitJudgementsElement = document.getElementById("hit-judgements");
 });
 
 function reset(item) {

diff --git a/js/GraphFill.js b/js/GraphFill.js
@@ -0,0 +1,141 @@
+export class Color {
+    static TRANSPARENT = new Color(0, 0, 0, 0);
+
+    static fromHex(literal) {
+        let c;
+
+        if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(literal)) {
+            c = literal.substring(1).split('');
+
+            if (c.length === 3) {
+                c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+            }
+
+            c = '0x' + c.join('');
+            return new Color((c >> 16) & 255, (c >> 8) & 255, c & 255);
+        }
+
+        throw new Error('Bad Hex');
+    }
+
+
+
+    #red;
+    #green;
+    #blue;
+    #alpha;
+
+    constructor(red, green, blue, alpha = 1) {
+        this.#red = red;
+        this.#green = green;
+        this.#blue = blue;
+        this.#alpha = alpha;
+    }
+
+
+
+    setAlpha(alpha) {
+        this.#alpha = alpha;
+        return this;
+    }
+
+    getAlpha() {
+        return this.#alpha;
+    }
+
+    clone() {
+        return new Color(
+            this.#red,
+            this.#green,
+            this.#blue,
+            this.#alpha
+        );
+    }
+
+    toString() {
+        return `rgba(${this.#red}, ${this.#green}, ${this.#blue}, ${this.#alpha})`;
+    }
+}
+
+
+
+export default class GraphFill {
+    #gradient;
+    #width;
+    #height;
+    /** @type {Color} */
+    #fill;
+    /** @type {Color} */
+    #border;
+    #colorUsed;
+
+
+
+    /**
+     * @param {Color} fill
+     * @param border
+     */
+    constructor(fill, border = undefined) {
+        this.#fill = fill;
+        this.#border = border !== undefined ? border : fill.clone().setAlpha(1);
+    }
+
+
+
+    /**
+     * @param {Color} color
+     */
+    setFill(color) {
+        this.#fill = color;
+        return this;
+    }
+
+    /**
+     * @param {Color} color
+     */
+    setBorder(color) {
+        this.#border = color;
+        return this;
+    }
+
+    create(context, chartArea) {
+        const chartWidth = chartArea.right - chartArea.left;
+        const chartHeight = chartArea.bottom - chartArea.top;
+
+        if (this.#gradient === undefined
+            || this.#width !== chartWidth
+            || this.#height !== chartHeight
+            || this.#colorUsed !== this.#fill.toString()) {
+            // Create the gradient because this is either the first render or the size of the chart has changed
+
+            this.#width = chartWidth;
+            this.#height = chartHeight;
+            this.#gradient = context.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
+
+            this.#gradient.addColorStop(0, this.#fill.clone().setAlpha(0.1).toString());
+            this.#gradient.addColorStop(0.4, this.#fill.toString());
+        }
+
+        return this.#gradient;
+    }
+
+    border() {
+        return () => this.#border.toString();
+    }
+
+    /**
+     * Creates a function for Chart config. This function can be assigned to borderColor or backgroundColor property
+     * @returns {function(*): CanvasGradient}
+     */
+    background() {
+        return (context) => {
+            const chart = context.chart;
+            if (!chart.chartArea) {
+                // This case happens on initial chart load
+                return;
+            }
+
+            return this.create(chart.ctx, chart.chartArea);
+        };
+    }
+}
diff --git a/js/difficulty-graph.js b/js/difficulty-graph.js
@@ -1,3 +1,7 @@
+import GraphFill from "./GraphFill.js";
+
+
+
 /**
  * @typedef {{ x: number, y: number }} Point
  */
@@ -729,15 +733,20 @@ export function toChartData(filterOutput) {
     return Array.from(filterOutput);
 }
 
-export function createChartConfig(backgroundColor) {
+/**
+ * @param {GraphFill} fill
+ * @returns {{data: {datasets: [{backgroundColor: *, data: *[], fill: boolean}], labels: *[]}, options: {legend: {display: boolean}, elements: {line: {tension: number, cubicInterpolationMode: string}, point: {radius: number}}, responsive: boolean, scales: {x: {display: boolean}, y: {display: boolean}}, tooltips: {enabled: boolean}}, type: string}}
+ */
+export function createChartConfig(fill) {
     return {
         type: 'line',
         data: {
             labels: [],
             datasets: [
                 {
-                    borderColor: 'rgba(0, 0, 0, 0)',
-                    backgroundColor,
+                    borderColor: fill.border(),
+                    borderWidth: 1.5,
+                    backgroundColor: fill.background(),
                     data: [],
                     fill: true,
                 }