From 9ede477e774dceb2d7c25c4ae6c6f9fcfc2bfc4a Mon Sep 17 00:00:00 2001
From: KageIIte <msw7007@gmail.com>
Date: Wed, 9 Oct 2024 19:04:17 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=8B=D1=82=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=BC=D0=B5=D1=80=20=D1=80=D0=B0=D0=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modular_ss220/instruments/_instruments.dme  |  1 +
 modular_ss220/instruments/code/song.dm      | 16 ++++++++++++
 tgui/packages/tgui/interfaces/Instrument.js | 29 +++++++--------------
 3 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 modular_ss220/instruments/code/song.dm

diff --git a/modular_ss220/instruments/_instruments.dme b/modular_ss220/instruments/_instruments.dme
index 5fdd0a8bdd1b..0f35f9db3000 100644
--- a/modular_ss220/instruments/_instruments.dme
+++ b/modular_ss220/instruments/_instruments.dme
@@ -4,3 +4,4 @@
 #include "code/instrument_items.dm"
 #include "code/concertspeaker_fake.dm"
 #include "code/drumskit.dm"
+#include "code/song.dm"
diff --git a/modular_ss220/instruments/code/song.dm b/modular_ss220/instruments/code/song.dm
new file mode 100644
index 000000000000..089a32b8beb0
--- /dev/null
+++ b/modular_ss220/instruments/code/song.dm
@@ -0,0 +1,16 @@
+#define MUSIC_INTERVAL_TICK 0.01
+
+/datum/song/sanitize_tempo(new_tempo)
+	new_tempo = abs(new_tempo)
+	var/result = clamp(round(new_tempo, MUSIC_INTERVAL_TICK), MUSIC_INTERVAL_TICK, 5 SECONDS)
+	return result
+
+/datum/song/ui_act(action, params)
+	. = ..()
+	switch(action)
+		if("setbpm")
+			set_bpm(round(text2num(params["new"]), 1))
+
+/datum/song/set_bpm(bpm)
+	tempo = sanitize_tempo(600 / bpm)
+	SStgui.update_uis(parent)
diff --git a/tgui/packages/tgui/interfaces/Instrument.js b/tgui/packages/tgui/interfaces/Instrument.js
index 3c807a829099..24a6ba0ae8ee 100644
--- a/tgui/packages/tgui/interfaces/Instrument.js
+++ b/tgui/packages/tgui/interfaces/Instrument.js
@@ -341,26 +341,15 @@ const InstrumentStatus = (properties, context) => {
         </LabeledList.Item>
         <LabeledList.Item label="Tempo">
           <Box>
-            <Button
-              disabled={tempo >= maxTempo}
-              content="-"
-              as="span"
-              mr="0.5rem"
-              onClick={() =>
-                act('tempo', {
-                  new: tempo + tickLag,
-                })
-              }
-            />
-            {round(600 / tempo)} BPM
-            <Button
-              disabled={tempo <= minTempo}
-              content="+"
-              as="span"
-              ml="0.5rem"
-              onClick={() =>
-                act('tempo', {
-                  new: tempo - tickLag,
+            <Slider
+              minValue={round(600 / maxTempo)}
+              maxValue={round(600 / minTempo)}
+              value={round(600 / tempo)}
+              stepPixelSize={1}
+              format={(v) => v + ' BPM'}
+              onDrag={(_e, v) =>
+                act('setbpm', {
+                  new: v,
                 })
               }
             />