Merge pull request #14649 from farie82/TGUI-dnavault

[TGUI] DNA vault

code/modules/station_goals/dna_vault.dm

@@ -197,18 +197,18 @@ GLOBAL_LIST_INIT(non_simple_animals, typecacheof(list(/mob/living/carbon/human/m
 /obj/machinery/dna_vault/attack_ghost(mob/user)
 	if(stat & (BROKEN|MAINT))
 		return
-	return ui_interact(user)
+	return tgui_interact(user)
 
 /obj/machinery/dna_vault/attack_hand(mob/user)
 	if(..())
-		return 1
-	ui_interact(user)
+		return TRUE
+	tgui_interact(user)
 
-/obj/machinery/dna_vault/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)
+/obj/machinery/dna_vault/tgui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, 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)
 		roll_powers(user)
-		ui = new(user, src, ui_key, "dna_vault.tmpl", name, 550, 400)
+		ui = new(user, src, ui_key, "DnaVault", name, 350, 400, master_ui, state)
 		ui.open()
 
 /obj/machinery/dna_vault/proc/roll_powers(mob/user)
@@ -220,33 +220,35 @@ GLOBAL_LIST_INIT(non_simple_animals, typecacheof(list(/mob/living/carbon/human/m
 	L += pick_n_take(possible_powers)
 	power_lottery[user] = L
 
-/obj/machinery/dna_vault/ui_data(mob/user, ui_key = "main", datum/topic_state/state = GLOB.default_state) //TODO Make it % bars maybe
-	var/list/data = list()
-	data["plants"] = plants.len
-	data["plants_max"] = plants_max
-	data["animals"] = animals.len
-	data["animals_max"] = animals_max
-	data["dna"] = dna.len
-	data["dna_max"] = dna_max
-	data["completed"] = completed
-	data["used"] = TRUE
-	data["choiceA"] = ""
-	data["choiceB"] = ""
+/obj/machinery/dna_vault/tgui_data(mob/user)
+	var/list/data = list(
+		"plants" = length(plants),
+		"plants_max" = plants_max,
+		"animals" = length(animals),
+		"animals_max" = animals_max,
+		"dna" = length(dna),
+		"dna_max" = dna_max,
+		"completed" = completed,
+		"used" = TRUE,
+		"choiceA" = "",
+		"choiceB" = ""
+	)
 	if(user && completed)
 		var/list/L = power_lottery[user]
-		if(L && L.len)
+		if(length(L))
 			data["used"] = FALSE
 			data["choiceA"] = L[1]
 			data["choiceB"] = L[2]
 	return data
 
-/obj/machinery/dna_vault/Topic(href, href_list)
+/obj/machinery/dna_vault/tgui_act(action, params)
 	if(..())
-		return 1
+		return
 
-	if(href_list["gene"])
-		upgrade(usr,href_list["choice"])
-		. = TRUE
+	switch(action)
+		if("gene")
+			upgrade(usr, params["choice"])
+			return TRUE
 
 /obj/machinery/dna_vault/proc/check_goal()
 	if(plants.len >= plants_max && animals.len >= animals_max && dna.len >= dna_max)

nano/templates/dna_vault.tmpl

@@ -1,49 +0,0 @@
-<!--
-Title: DNA Vault UI
-Used In File(s): \code\modules\station_goals\dna_vault.dm
--->
-<h3>DNA Vault Database</h3>
-<div class="item">
-	<div class="itemLabel">
-		Human DNA:
-	</div>
-	<div class="itemContent">
-		{{:helper.displayBar(data.dna, 0, data.dna_max, data.dna >= data.dna_max ? 'good' : 'average')}}
-		<div class="statusValue">
-			{{:data.dna}}/{{:data.dna_max}} Samples
-		</div>
-	</div>
-</div>
-<div class="item">
-	<div class="itemLabel">
-		Plant Data:
-	</div>
-	<div class="itemContent">
-		{{:helper.displayBar(data.plants, 0, data.plants_max, data.plants >= data.plants_max ? 'good' : 'average')}}
-		<div class="statusValue">
-			{{:data.plants}}/{{:data.plants_max}} Samples
-		</div>
-	</div>
-</div>
-<div class="item">
-	<div class="itemLabel">
-		Animal Data:
-	</div>
-	<div class="itemContent">
-		{{:helper.displayBar(data.animals, 0, data.animals_max, data.animals >= data.animals_max ? 'good' : 'average')}}
-		<div class="statusValue">
-			{{:data.animals}}/{{:data.animals_max}} Samples
-		</div>
-	</div>
-</div>
-{{if data.completed && !data.used}}
-<div class="item">
-	<div class="itemLabel">
-		Applicable gene therapy treatments:
-	</div>
-	<div class="itemContent">
-		{{:helper.link(data.choiceA, null, {'gene' : 1, 'choice' : data.choiceA})}}
-		{{:helper.link(data.choiceB, null, {'gene' : 1, 'choice' : data.choiceB})}}
-	</div>
-</div>
-{{/if}}

tgui/packages/tgui/interfaces/DnaVault.js

@@ -0,0 +1,114 @@
+import { useBackend } from '../backend';
+import { Box, Button, Grid, LabeledList, ProgressBar, Section } from '../components';
+import { Window } from '../layouts';
+
+export const DnaVault = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    completed,
+    used,
+  } = data;
+  return (
+    <Window>
+      <Window.Content>
+        <DnaVaultDataBase />
+        {!!(completed && !used) && (
+          <GeneTherapySelection />
+        )}
+      </Window.Content>
+    </Window>
+  );
+};
+
+const DnaVaultDataBase = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    dna,
+    dna_max,
+    plants,
+    plants_max,
+    animals,
+    animals_max,
+  } = data;
+  const average_progress = 0.66;
+  const bad_progress = 0.33;
+  return (
+    <Section title="DNA Vault Database">
+      <LabeledList>
+        <LabeledList.Item label="Human DNA">
+          <ProgressBar
+            value={dna / dna_max}
+            ranges={{
+              good: [average_progress, Infinity],
+              average: [bad_progress, average_progress],
+              bad: [-Infinity, bad_progress],
+            }}>
+            {dna + ' / ' + dna_max + ' Samples'}
+          </ProgressBar>
+        </LabeledList.Item>
+        <LabeledList.Item label="Plant DNA">
+          <ProgressBar
+            value={plants / plants_max}
+            ranges={{
+              good: [average_progress, Infinity],
+              average: [bad_progress, average_progress],
+              bad: [-Infinity, bad_progress],
+            }}>
+            {plants + ' / ' + plants_max + ' Samples'}
+          </ProgressBar>
+        </LabeledList.Item>
+        <LabeledList.Item label="Animal DNA">
+          <ProgressBar
+            value={animals / animals_max}
+            ranges={{
+              good: [average_progress, Infinity],
+              average: [bad_progress, average_progress],
+              bad: [-Infinity, bad_progress],
+            }}>
+            {animals + ' / ' + animals_max + ' Samples'}
+          </ProgressBar>
+        </LabeledList.Item>
+      </LabeledList>
+    </Section>
+  );
+};
+
+const GeneTherapySelection = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    choiceA,
+    choiceB,
+  } = data;
+  return (
+    <Section title="Personal Gene Therapy">
+      <Box
+        bold
+        textAlign="center"
+        mb={1}>
+        Applicable Gene Therapy Treatments
+      </Box>
+      <Grid>
+        <Grid.Column>
+          <Button
+            fluid
+            bold
+            content={choiceA}
+            textAlign="center"
+            onClick={() => act('gene', {
+              choice: choiceA,
+            })} />
+        </Grid.Column>
+        <Grid.Column>
+          <Button
+            fluid
+            bold
+            content={choiceB}
+            textAlign="center"
+            onClick={() => act('gene', {
+              choice: choiceB,
+            })} />
+        </Grid.Column>
+      </Grid>
+    </Section>
+  );
+};