UI: Show effective amount of shared RAM when using UI (#2691)

src/Faction/ui/ShareOption.tsx

@@ -4,6 +4,8 @@ import { TextField } from "@mui/material";
 import Button from "@mui/material/Button";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
+import InfoIcon from "@mui/icons-material/Info";
 
 import { Player } from "@player";
 import {
@@ -24,6 +26,7 @@ export function ShareOption({ rerender }: { rerender: () => void }): React.React
 
   const home = Player.getHomeComputer();
   const threads = Math.floor(ram / 4);
+  const ramUsage = roundToTwo(4 * threads);
 
   function onShare(): void {
     if (threads === 0) {
@@ -34,7 +37,6 @@ export function ShareOption({ rerender }: { rerender: () => void }): React.React
       return;
     }
     const freeRAM = home.maxRam - home.ramUsed;
-    const ramUsage = roundToTwo(4 * threads);
     if (ramUsage > freeRAM + 0.001) {
       dialogBoxCreate("Not enough RAM.");
       return;
@@ -50,6 +52,7 @@ export function ShareOption({ rerender }: { rerender: () => void }): React.React
       rerender();
     }, ShareBonusTime);
     pendingUIShareJobIds.push(jobId);
+    rerender();
   }
 
   return (
@@ -62,27 +65,40 @@ export function ShareOption({ rerender }: { rerender: () => void }): React.React
         <br />
         Free RAM on home computer: {formatRam(home.maxRam - home.ramUsed)}.
         <br />
-        Current bonus: {formatNumber(calculateCurrentShareBonus(), 6)}. Bonus with {formatRam(ram)}:{" "}
+        Current bonus: {formatNumber(calculateCurrentShareBonus(), 6)}. Bonus with {formatRam(ramUsage)}:{" "}
         {formatNumber(calculateShareBonusWithAdditionalThreads(threads, home.cpuCores), 6)}
       </Typography>
 
-      <TextField
-        value={ram}
-        onChange={(event) => {
-          if (event.target.value === "") {
-            setRam(0);
-            return;
+      <Typography component="div" style={{ display: "flex" }}>
+        <TextField
+          value={ram}
+          onChange={(event) => {
+            if (event.target.value === "") {
+              setRam(0);
+              return;
+            }
+            const value = Number.parseFloat(event.target.value);
+            if (!Number.isFinite(value) || value < 0) {
+              return;
+            }
+            setRam(value);
+          }}
+        />
+        <Tooltip
+          title={
+            <Typography>
+              RAM shared via this tool is rounded down to the nearest multiple of 4.
+              <br />
+              For example, a value of 18 GB results in 16 GB.
+            </Typography>
           }
-          const value = Number.parseFloat(event.target.value);
-          if (!Number.isFinite(value) || value < 0) {
-            return;
-          }
-          setRam(value);
-        }}
-        InputProps={{
-          endAdornment: <Button onClick={onShare}>Share</Button>,
-        }}
-      />
+        >
+          <Typography component="div" style={{ display: "flex", alignItems: "center" }}>
+            <Button onClick={onShare}>Share</Button>
+            <InfoIcon sx={{ fontSize: "1.5em", marginLeft: "10px" }} />
+          </Typography>
+        </Tooltip>
+      </Typography>
     </Paper>
   );
 }