feat: Gráfico de latência

dist/css/joystick.css

@@ -238,13 +238,19 @@ i.mdi {
 	transition: 1s ease;
 }
 
+/* Ping */
+.deviceInfo .ping {
+	font-size: 14px;
+}
+
 /* Status */
 .deviceInfo .status {
 	align-items: center;
 	display: flex;
 	font-size: 14px;
 	height: 20px;
 	justify-content: center;
+	margin-top: 10px;
 	opacity: 1;
 	overflow: hidden;
 	transition: height 0.15s ease, opacity 1s ease 0.15s;
@@ -287,26 +293,28 @@ body.disconnected .deviceInfo .status::after {
 	content: 'Desconectado';
 }
 
-.ping,
+.ping-chart {
+	bottom: 0;
+	height: 120px !important;
+	left: 0;
+	opacity: 0.5;
+	pointer-events: none;
+	position: fixed;
+	width: 210px !important;
+}
+
 .version {
+	bottom: 10px;
 	color: inherit;
 	font-size: 12px;
 	pointer-events: none;
 	position: fixed;
-	bottom: 5px;
+	right: 15px;
 	user-select: none;
 	white-space: pre;
 	z-index: 5;
 }
 
-.ping {
-	left: 5px;
-}
-
-.version {
-	right: 5px;
-}
-
 /* ==========================================================================
    Debug
    ========================================================================== */

dist/index.html

@@ -214,10 +214,6 @@
 							/>
 							<div class="label">Informações</div>
 						</label>
-						<label class="chip hide">
-							<input type="checkbox" name="hide" data-id="mobystk:ping" value="mobystk:ping" />
-							<div class="label">Ping</div>
-						</label>
 						<label class="chip hide">
 							<input
 								type="checkbox"
@@ -227,6 +223,15 @@
 							/>
 							<div class="label">Versão</div>
 						</label>
+						<label class="chip hide">
+							<input
+								type="checkbox"
+								name="hide"
+								data-id="mobystk:ping_chart"
+								value="mobystk:ping_chart"
+							/>
+							<div class="label">Gráfico de latência</div>
+						</label>
 					</div>
 				</main>
 			</section>

dist/joystick.html

@@ -29,10 +29,12 @@
 				<span class="player-number"></span>
 			</span>
 			<br />
+			<span class="ping">Ping: +999ms</span>
+			<br />
 			<span class="status"></span>
 		</div>
 
-		<div class="ping"></div>
+		<canvas class="ping-chart" width="210" height="120"></canvas>
 		<div class="version"></div>
 
 		<!-- Edit button -->

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mobystk",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"repository": "https://github.com/josejefferson/mobystk",
 	"author": "Jefferson Dantas <[email protected]>",
 	"type": "module",
@@ -14,6 +14,7 @@
 	},
 	"devDependencies": {
 		"@josejefferson/eslint-config-typescript": "^1.1.0",
+		"@types/chroma-js": "^3.1.1",
 		"esbuild": "^0.20.2",
 		"esbuild-plugin-clean": "^1.0.1",
 		"eslint": "^8",
@@ -26,6 +27,8 @@
 	"dependencies": {
 		"@simonwep/pickr": "^1.8.2",
 		"@types/semver": "^7.5.8",
+		"chart.js": "^4.4.7",
+		"chroma-js": "^3.1.2",
 		"nipplejs": "^0.9.1",
 		"semver": "^7.6.3",
 		"store2": "^2.14.2"

src/elements/buttons.ts

@@ -595,7 +595,7 @@ const buttons: IButton[] = [
 		anchorX: AnchorX.CENTER,
 		anchorY: AnchorY.CENTER,
 		x: [0, 'px'],
-		y: [-50, 'px'],
+		y: [-70, 'px'],
 		width: [70, 'px'],
 		height: [20, 'px'],
 		content: { type: 'mobystk:text', value: 'Tela cheia' },

src/index/options.ts

@@ -39,7 +39,8 @@ const hidden = getOpt('hidden', [
 	'mobystk:diag_left_up',
 	'mobystk:diag_right_up',
 	'mobystk:diag_left_down',
-	'mobystk:diag_right_down'
+	'mobystk:diag_right_down',
+	'mobystk:ping_chart'
 ])
 for (const item of locked) {
 	const $input = document.querySelector<HTMLInputElement>(

src/joystick/elements.ts

@@ -9,6 +9,7 @@ export const $DIClock = $deviceInfo.querySelector<HTMLElement>('.clock')!
 export const $DIPlayerNumber = $deviceInfo.querySelector<HTMLElement>('.player .player-number')!
 export const $DIStatus = $deviceInfo.querySelector<HTMLElement>('.status')!
 export const $ping = document.querySelector<HTMLElement>('.ping')!
+export const $pingChart = document.querySelector('.ping-chart') as HTMLCanvasElement
 export const $version = document.querySelector<HTMLElement>('.version')!
 export const $controllerIndicator = document.querySelector('.controller-indicator')!
 export const $layout = document.querySelector('.controller-layout')!

src/joystick/user-interface.ts

@@ -1,3 +1,5 @@
+import { BarController, BarElement, CategoryScale, Chart, LinearScale } from 'chart.js'
+import chroma from 'chroma-js'
 import options from '../shared/options'
 import loading from '../utils/loading'
 import { toast } from '../utils/toast'
@@ -10,7 +12,7 @@ import {
 	$DIClock,
 	$DIPlayerNumber,
 	$edit,
-	$ping,
+	$pingChart,
 	$root,
 	$version
 } from './elements'
@@ -19,9 +21,6 @@ import {
 if (options.hidden.includes('mobystk:deviceInfo')) {
 	$deviceInfo.classList.add('hidden')
 }
-if (options.hidden.includes('mobystk:ping')) {
-	$ping.classList.add('hidden')
-}
 if (options.hidden.includes('mobystk:version')) {
 	$version.classList.add('hidden')
 }
@@ -126,4 +125,60 @@ if (options.debug)
 		updateInfo()
 	})
 
-export {}
+// GRÁFICO DE LATÊNCIA
+Chart.register(BarController, CategoryScale, LinearScale, BarElement)
+
+const MAX_PINGS = 30
+const hidePingChart = options.hidden.includes('mobystk:ping_chart')
+const pings = Array(MAX_PINGS).fill(0)
+
+const chart = hidePingChart
+	? null
+	: new Chart($pingChart, {
+			type: 'bar',
+			options: {
+				responsive: false,
+				animation: {
+					duration: 500,
+					easing: 'easeOutQuart'
+				},
+				scales: {
+					x: { display: false },
+					y: { display: false, min: 0, max: 999 }
+				},
+				plugins: {
+					legend: { display: false },
+					tooltip: { enabled: false }
+				}
+			},
+			data: {
+				labels: pings.map((_, i) => i + 1),
+				datasets: [
+					{
+						data: pings,
+						backgroundColor: pings.map(pingBarColor),
+						borderWidth: 0
+					}
+				]
+			}
+	  })
+
+/** Adiciona um novo ping ao gráfico */
+export function addPing(time: number) {
+	if (!chart) return
+	if (pings.length >= MAX_PINGS) pings.shift()
+	pings.push(time)
+	chart.data.labels = pings.map((_, i) => i + 1)
+	chart.data.datasets[0].data = pings
+	chart.data.datasets[0].backgroundColor = pings.map(pingBarColor)
+	chart.update('active')
+}
+
+/** Retorna a cor da barra baseado no valor */
+export function pingBarColor(time: number) {
+	return chroma
+		.scale(['#00bcff', '#fdc700', '#fb2c36'])
+		.domain([0, 300, 999])
+		.mode('lab')(time)
+		.hex()
+}

src/shared/socket.ts

@@ -1,7 +1,7 @@
 import semver from 'semver'
 import { lastMacro, recordingMacro } from '../joystick/element-actions'
 import { $controllerIndicator } from '../joystick/elements'
-import { updateInfo } from '../joystick/user-interface'
+import { addPing, updateInfo } from '../joystick/user-interface'
 import { Joystick, GamepadKey, SocketMessages } from '../types/socket'
 import { toast } from '../utils/toast'
 import vibrate from '../utils/vibrate'
@@ -69,10 +69,13 @@ class MobyStkSocket {
 	}
 
 	sendPing() {
-		if (this.instance.readyState !== this.instance.OPEN) return
-		if (this.pingID && $ping) $ping.innerText = '+999ms'
+		if (this.pingID && $ping) {
+			$ping.innerText = 'Ping: +999ms'
+			addPing(999)
+		}
 		this.pingID = Math.floor(Math.random() * 1000000)
 		this.pingTime = Date.now()
+		if (this.instance.readyState !== this.instance.OPEN) return
 		this.sendCommand('ping', { id: this.pingID })
 	}
 
@@ -141,7 +144,11 @@ class MobyStkSocket {
 
 	onPong(data: SocketMessages.Server.Pong) {
 		if (Number(data.id) === this.pingID) {
-			if ($ping) $ping.innerText = String(Date.now() - this.pingTime) + 'ms'
+			if ($ping) {
+				const pingTime = Date.now() - this.pingTime
+				$ping.innerText = `Ping: ${pingTime}ms`
+				addPing(pingTime)
+			}
 			this.pingID = undefined
 		}
 	}