From a1441b31f251b10e37e9103e0c7c8b2cdbc4d135 Mon Sep 17 00:00:00 2001
From: Minzenkatze <70774627+Minzenkatze@users.noreply.github.com>
Date: Tue, 28 Mar 2023 17:23:36 +0200
Subject: [PATCH] UI: Improvements to Create Program tab (#449)

* Progress indicator for programs that are in progress
* Button for a program that is currently being worked (unfocused) is just a refocus button
---
 src/Programs/ui/ProgramsRoot.tsx | 54 ++++++++++++++++++++++----------
 1 file changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/Programs/ui/ProgramsRoot.tsx b/src/Programs/ui/ProgramsRoot.tsx
index 81202d18d..2a397bca2 100644
--- a/src/Programs/ui/ProgramsRoot.tsx
+++ b/src/Programs/ui/ProgramsRoot.tsx
@@ -86,22 +86,37 @@ export function ProgramsRoot(): React.ReactElement {
                     (create.req() && <Create sx={{ mr: 1 }} />) || <Lock sx={{ mr: 1 }} />}
                   {program.name}
                 </Typography>
-                {!Player.hasProgram(program.name) && create.req() && (
-                  <Button
-                    sx={{ my: 1, width: "100%" }}
-                    onClick={(event) => {
-                      if (!event.isTrusted) return;
-                      if (isCreateProgramWork(Player.currentWork)) {
-                        Player.finishWork(true);
-                      }
-                      Player.startWork(new CreateProgramWork({ singularity: false, programName: program.name }));
-                      Player.startFocusing();
-                      Router.toPage(Page.Work);
-                    }}
-                  >
-                    Create program
-                  </Button>
-                )}
+                {!Player.hasProgram(program.name) &&
+                  create.req() &&
+                  (isCreateProgramWork(Player.currentWork) && Player.currentWork?.programName === program.name ? (
+                    //Button if the program is currently being worked on
+                    <Button
+                      sx={{ my: 1, width: "100%" }}
+                      onClick={(event) => {
+                        if (!event.isTrusted) return;
+                        Player.startFocusing();
+                        Router.toPage(Page.Work);
+                      }}
+                    >
+                      Resume focus
+                    </Button>
+                  ) : (
+                    //Button if the program is not currently worked on
+                    <Button
+                      sx={{ my: 1, width: "100%" }}
+                      onClick={(event) => {
+                        if (!event.isTrusted) return;
+                        if (isCreateProgramWork(Player.currentWork)) {
+                          Player.finishWork(true);
+                        }
+                        Player.startWork(new CreateProgramWork({ singularity: false, programName: program.name }));
+                        Player.startFocusing();
+                        Router.toPage(Page.Work);
+                      }}
+                    >
+                      Create program
+                    </Button>
+                  ))}
                 {Player.hasProgram(program.name) || getHackingLevelRemaining(create.level) === 0 || (
                   <Typography color={Settings.theme.hack}>
                     <b>Unlocks in:</b> {getHackingLevelRemaining(create.level)} hacking levels
@@ -112,6 +127,13 @@ export function ProgramsRoot(): React.ReactElement {
                     <b>Current completion:</b> {curCompletion}%
                   </Typography>
                 )}
+                {/*Displays the current completion of the program currently being created*/}
+                {isCreateProgramWork(Player.currentWork) && Player.currentWork?.programName === program.name && (
+                  <Typography color={Settings.theme.infolight}>
+                    <b>Current completion:</b>{" "}
+                    {((100 * Player.currentWork.unitCompleted) / Player.currentWork.unitNeeded()).toFixed(2)}%
+                  </Typography>
+                )}
                 <Typography>{create.tooltip}</Typography>
               </>
             </Box>