Merge pull request #1577 from danielyxie/dev

few fixes

doc/source/basicgameplay/infiltration.rst

@@ -27,6 +27,10 @@ to attempt infiltrations above mid-normal.
 ** Slash when his guard is down! **
 
 Press space when the guard is attacking you.
+There's 3 phase
+The first is guarding, where attacking back will result in failure.
+The 2nd is preparing, this informs you that in 250ms there will be an opening window to attack.
+The 3rd is attack, during this phase you can press space to slash and kill the enemy.
 
 ** Close the brackets **
 

src/Infiltration/ui/Intro.tsx

@@ -3,6 +3,7 @@ import { Location } from "../../Locations/Location";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
+import { numeralWrapper } from "../../ui/numeralFormat";
 
 interface IProps {
   Location: Location;
@@ -60,6 +61,21 @@ export function Intro(props: IProps): React.ReactElement {
             Maximum level: {props.MaxLevel}
           </Typography>
         </Grid>
+        <Grid item xs={10}>
+          <Typography variant="h5" color="primary">
+            Difficulty: {numeralWrapper.format(props.Difficulty * 33.3333, "0")} / 100
+          </Typography>
+        </Grid>
+
+        {props.Difficulty > 1.5 && (
+          <Grid item xs={10}>
+            <Typography variant="h5" color="primary">
+              Warning: This location is too heavily guarded for your current stats, try training or finding an easier
+              location.
+            </Typography>
+          </Grid>
+        )}
+
         <Grid item xs={10}>
           <Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>[{coloredArrow(props.Difficulty)}]</Typography>
           <Typography

src/Infiltration/ui/SlashGame.tsx

@@ -26,12 +26,12 @@ const difficulties: {
 export function SlashGame(props: IMinigameProps): React.ReactElement {
   const difficulty: Difficulty = { window: 0 };
   interpolate(difficulties, props.difficulty, difficulty);
-  const [guarding, setGuarding] = useState(true);
+  const [phase, setPhase] = useState(0);
 
   function press(this: Document, event: KeyboardEvent): void {
     event.preventDefault();
     if (event.keyCode !== 32) return;
-    if (guarding) {
+    if (phase !== 2) {
       props.onFailure();
     } else {
       props.onSuccess();
@@ -39,14 +39,15 @@ export function SlashGame(props: IMinigameProps): React.ReactElement {
   }
 
   useEffect(() => {
-    let id2 = -1;
-    const id = window.setTimeout(() => {
-      setGuarding(false);
-      id2 = window.setTimeout(() => setGuarding(true), difficulty.window);
+    let id = window.setTimeout(() => {
+      setPhase(1);
+      id = window.setTimeout(() => {
+        setPhase(2);
+        id = window.setTimeout(() => setPhase(0), difficulty.window);
+      }, 250);
     }, Math.random() * 3250 + 1500);
     return () => {
       clearInterval(id);
-      if (id2 !== -1) clearInterval(id2);
     };
   }, []);
 
@@ -55,7 +56,9 @@ export function SlashGame(props: IMinigameProps): React.ReactElement {
       <GameTimer millis={5000} onExpire={props.onFailure} />
       <Grid item xs={12}>
         <Typography variant="h4">Slash when his guard is down!</Typography>
-        <Typography variant="h4">{guarding ? "!Guarding!" : "!ATTACKING!"}</Typography>
+        {phase === 0 && <Typography variant="h4">Guarding ...</Typography>}
+        {phase === 1 && <Typography variant="h4">Preparing?</Typography>}
+        {phase === 2 && <Typography variant="h4">ATTACKING!</Typography>}
         <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
       </Grid>
     </Grid>