Merge pull request #13732 from AffectedArc07/tgui-slotmachines

[TGUI] Slot Machines - Example PR for NanoUI --> TGUI conversions

code/game/machinery/slotmachine.dm

@@ -12,29 +12,26 @@
 	var/resultlvl = null
 
 /obj/machinery/slot_machine/attack_hand(mob/user as mob)
+	tgui_interact(user)
+
+/obj/machinery/slot_machine/tgui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = 0, datum/tgui/master_ui = null, datum/tgui_state/state = GLOB.tgui_default_state)
+	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
+	if(!ui)
+		ui = new(user, src, ui_key, "SlotMachine", name, 350, 200, master_ui, state)
+		ui.open()
+
+/obj/machinery/slot_machine/tgui_data(mob/user)
+	var/list/data = list()
+	// Get account
 	account = user.get_worn_id_account()
 	if(!account)
 		if(istype(user.get_active_hand(), /obj/item/card/id))
 			account = get_card_account(user.get_active_hand())
 		else
 			account = null
-	ui_interact(user)
 
-/obj/machinery/slot_machine/wrench_act(mob/user, obj/item/I)
-	. = TRUE
-	if(!I.tool_use_check(user, 0))
-		return
-	default_unfasten_wrench(user, I)
 
-/obj/machinery/slot_machine/ui_interact(mob/user, ui_key = "main", var/datum/nanoui/ui = null, var/force_open = 1)
-	ui = SSnanoui.try_update_ui(user, src, ui_key, ui, force_open)
-	if(!ui)
-		ui = new(user, src, ui_key, "slotmachine.tmpl", name, 350, 200)
-		ui.open()
-		ui.set_auto_update(1)
-
-/obj/machinery/slot_machine/ui_data(mob/user, ui_key = "main", datum/topic_state/state = GLOB.default_state)
-	var/data[0]
+	// Send data
 	data["working"] = working
 	data["money"] = account ? account.money : null
 	data["plays"] = plays
@@ -42,22 +39,23 @@
 	data["resultlvl"] = resultlvl
 	return data
 
-/obj/machinery/slot_machine/Topic(href, href_list)
+/obj/machinery/slot_machine/tgui_act(action, params)
+	if(..())
+		return
 	add_fingerprint(usr)
 
-	if(href_list["ops"])
-		if(text2num(href_list["ops"]))	// Play
-			if(working)
-				return
-			if(!account || account.money < 10)
-				return
-			if(!account.charge(10, null, "Bet", "Slot Machine", "Slot Machine"))
-				return
-			plays++
-			working = 1
-			icon_state = "slots-on"
-			playsound(src.loc, 'sound/machines/ding.ogg', 50, 1)
-			addtimer(CALLBACK(src, .proc/spin_slots, usr.name), 25)
+	if(action == "spin")
+		if(working)
+			return
+		if(!account || account.money < 10)
+			return
+		if(!account.charge(10, null, "Bet", "Slot Machine", "Slot Machine"))
+			return
+		plays++
+		working = TRUE
+		icon_state = "slots-on"
+		playsound(src.loc, 'sound/machines/ding.ogg', 50, 1)
+		addtimer(CALLBACK(src, .proc/spin_slots, usr.name), 25)
 
 /obj/machinery/slot_machine/proc/spin_slots(userName)
 	switch(rand(1,4050))
@@ -65,44 +63,45 @@
 			atom_say("JACKPOT! [userName] has won a MILLION CREDITS!")
 			GLOB.event_announcement.Announce("Congratulations to [userName] on winning the Jackpot of ONE MILLION CREDITS!", "Jackpot Winner")
 			result = "JACKPOT! You win one million credits!"
-			resultlvl = "highlight"
+			resultlvl = "teal"
 			win_money(1000000, 'sound/goonstation/misc/airraid_loop.ogg')
 		if(2 to 5) // .07%
 			atom_say("Big Winner! [userName] has won a hundred thousand credits!")
 			GLOB.event_announcement.Announce("Congratulations to [userName] on winning a hundred thousand credits!", "Big Winner")
 			result = "Big Winner! You win a hundred thousand credits!"
-			resultlvl = "good"
+			resultlvl = "green"
 			win_money(100000, 'sound/goonstation/misc/klaxon.ogg')
 		if(6 to 50) // 1.08%
 			atom_say("Big Winner! [userName] has won ten thousand credits!")
 			result = "You win ten thousand credits!"
-			resultlvl = "good"
+			resultlvl = "green"
 			win_money(10000, 'sound/goonstation/misc/klaxon.ogg')
 		if(51 to 100) // 1.21%
 			atom_say("Winner! [userName] has won a thousand credits!")
 			result = "You win a thousand credits!"
-			resultlvl = "good"
+			resultlvl = "green"
 			win_money(1000, 'sound/goonstation/misc/bell.ogg')
 		if(101 to 200) // 2.44%
 			atom_say("Winner! [userName] has won a hundred credits!")
 			result = "You win a hundred credits!"
-			resultlvl = "good"
+			resultlvl = "green"
 			win_money(100, 'sound/goonstation/misc/bell.ogg')
 		if(201 to 300) // 2.44%
 			atom_say("Winner! [userName] has won fifty credits!")
 			result = "You win fifty credits!"
-			resultlvl = "good"
+			resultlvl = "green"
 			win_money(50)
 		if(301 to 1000) // 17.26%
 			atom_say("Winner! [userName] has won ten credits!")
 			result = "You win ten credits!"
-			resultlvl = "good"
+			resultlvl = "green"
 			win_money(10)
 		else // 75.31%
-			result = "<span class='warning'>No luck!</span>"
-			resultlvl = "average"
-	working = 0
+			result = "No luck!"
+			resultlvl = "orange"
+	working = FALSE
 	icon_state = "slots-off"
+	SStgui.update_uis(src) // Push a UI update
 
 /obj/machinery/slot_machine/proc/win_money(amt, sound='sound/machines/ping.ogg')
 	if(sound)
@@ -110,3 +109,9 @@
 	if(!account)
 		return
 	account.credit(amt, "Slot Winnings", "Slot Machine", account.owner_name)
+
+/obj/machinery/slot_machine/wrench_act(mob/user, obj/item/I)
+	. = TRUE
+	if(!I.tool_use_check(user, 0))
+		return
+	default_unfasten_wrench(user, I)

nano/templates/slotmachine.tmpl

@@ -1,34 +0,0 @@
-<!--
-Title: Slot Machine UI
-Used In File(s): /code/game/machinery/slotmachine.dm
--->
-{{if data.money != null}}
-	<div class="line">
-		{{:data.plays}} players have tried their luck today!
-	</div>
-	<div class="line">
-		<div class="statusLabel">Credits Remaining:</div>
-		{{:helper.string("<div class='statusValue {0}'>{1}</div>", data.money >= 10 ? "" : "bad", helper.smoothRound(data.money))}}
-	</div>
-	<div class="item">
-		<div class="statusLabel">
-			Ten credits to play!
-		</div>
-		<div class="statusValue">
-			{{:helper.link('SPIN!', 'refresh', {'ops' : 1}, data.money >= 10 && !data.working ? null : 'disabled')}}
-		</div>
-	</div>
-	{{if data.result}}
-		<div class="line {{:data.resultlvl}}">
-			{{:data.result}}
-		</div>
-	{{/if}}
-	{{if data.working}}
-		<div class="notice">Spinning!</div>
-	{{/if}}
-{{else}}
-	<div class="notice">
-		Could not scan your card or could not find account!<br>
-		Please wear or hold your ID and try again.	
-	</div>
-{{/if}}

tgui/packages/tgui/interfaces/SlotMachine.js

@@ -0,0 +1,58 @@
+import { useBackend } from "../backend";
+import { Button, LabeledList, Box, AnimatedNumber, Section } from "../components";
+import { Window } from "../layouts";
+
+export const SlotMachine = (props, context) => {
+  const { act, data } = useBackend(context);
+  if (data.money === null) {
+    return (
+      <Window>
+        <Window.Content>
+          <Section>
+            <Box>
+              Could not scan your card or could not find account!
+            </Box>
+            <Box>
+              Please wear or hold your ID and try again.
+            </Box>
+          </Section>
+        </Window.Content>
+      </Window>
+    );
+  } else {
+    let playerText;
+    if (data.plays === 1) {
+      playerText = data.plays + " player has tried their luck today!";
+    } else {
+      playerText = data.plays + " players have tried their luck today!";
+    }
+    return (
+      <Window>
+        <Window.Content>
+          <Section>
+            <Box lineHeight={2}>
+              {playerText}
+            </Box>
+            <LabeledList>
+              <LabeledList.Item label="Credits Remaining">
+                <AnimatedNumber
+                  value={data.money}
+                />
+              </LabeledList.Item>
+              <LabeledList.Item label="10 credits to spin">
+                <Button
+                  icon="coins"
+                  disabled={data.working}
+                  content={data.working ? "Spinning..." : "Spin"}
+                  onClick={() => act("spin")} />
+              </LabeledList.Item>
+            </LabeledList>
+            <Box bold lineHeight={2} color={data.resultlvl}>
+              {data.result}
+            </Box>
+          </Section>
+        </Window.Content>
+      </Window>
+    );
+  }
+};