Run prettier

Author: govizlora

.github/workflows/deploy-to-gh-pages.yml

@@ -34,4 +34,4 @@ jobs:
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
+          publish_dir: ./dist

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "editor.tabSize": 2
-}
+  "editor.tabSize": 2,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

jest.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
-};
+}

readme.md

@@ -5,20 +5,24 @@ An online Cyberpunk 2077 breach protocol minigame solver using camera + OCR
 Website: https://govizlora.github.io/optical-breacher
 
 ## Details
+
 The puzzle solving algorithm is simply brute force. (Better ideas welcomed!)
 
 The target sequences are weighted from top to bottom as this: `1`, `1.1`, `1.2`, ... So it will focus on more hit first, and when even, the lower sequences will have higher priority.
 
 The OCR part took the most time. I initailly used the default English OCR provided by tesseract, but it fails randomly (like recognizing "55" into "5") and the success rate is below 50%. Eventually I trained the model by myself, using tesstrain. Instead of recognizing single English characters, I let the program treat the byte as a whole, so the computer actually think "55" or "1C" as a single character in a mysterious language. The self-trained model worked better, but still not perfect. TBH I think maybe tesseract is not the best option, but since it's the only popular choice in JavaScript and I'm not famailiar with WASM, this will be the way to go for now.
 
 ## Local develop
+
 Make sure you have `node` and `yarn` installed, then clone the repo and run `yarn start`.
 
 ## Screenshots
+
 ![Screenshot 1](assets/sc1.PNG)
 ![Screenshot 2](assets/sc2.PNG)
 
 ## Acknowledgement
+
 - https://github.com/kyle-rader/breach for test data
 - https://github.com/naptha/tesseract.js which made this web app possible
 - https://github.com/tesseract-ocr/tesseract and https://github.com/tesseract-ocr/tesstrain tesstrain made training the model a lot easier

src/app.tsx

@@ -1,12 +1,15 @@
-import { useCallback, useEffect, useRef, useState } from "react"
-import { Camera } from "./camera";
-import { Logger, OCR } from "./ocr";
-import { Result } from "./result";
-import { processMatrix, processTargets } from "./utils";
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Camera } from './camera'
+import { Logger, OCR } from './ocr'
+import { Result } from './result'
+import { processMatrix, processTargets } from './utils'
 
-const defaultOcrProgress = { matrixProgress: 0, targetsProgress: 0, status: '' };
-const defaultOcrResult: { matrix: string[][], targets: string[][], finished: boolean } =
-  { matrix: [], targets: [], finished: false }
+const defaultOcrProgress = { matrixProgress: 0, targetsProgress: 0, status: '' }
+const defaultOcrResult: {
+  matrix: string[][]
+  targets: string[][]
+  finished: boolean
+} = { matrix: [], targets: [], finished: false }
 
 // const matrix = [
 //   ["1c", "55", "ff", "bd", "e9"],
@@ -24,26 +27,28 @@ const defaultOcrResult: { matrix: string[][], targets: string[][], finished: boo
 // ];
 
 export function App() {
-  const OCRref = useRef<OCR>();
+  const OCRref = useRef<OCR>()
   const [ocrResult, setOcrResult] = useState(defaultOcrResult)
-  const [ocrProgress, setOcrProgress] = useState(defaultOcrProgress);
-  const [showCamera, setShowCamera] = useState(true);
+  const [ocrProgress, setOcrProgress] = useState(defaultOcrProgress)
+  const [showCamera, setShowCamera] = useState(true)
   // const canvasRef = useRef<HTMLCanvasElement>(null);
   // const [outputs, setOutputs] = useState<string[]>([]);
 
   const logger: Logger = useCallback(({ name, status, progress = 0 }) => {
     if (status === 'recognizing text') {
-      setOcrProgress(prev => ({
+      setOcrProgress((prev) => ({
         status,
         matrixProgress: name === 'matrix' ? progress : prev.matrixProgress,
-        targetsProgress: name === 'targets' ? progress : prev.targetsProgress
+        targetsProgress: name === 'targets' ? progress : prev.targetsProgress,
       }))
     }
   }, [])
 
   useEffect(() => {
-    OCRref.current = new OCR(logger);
-    return () => { OCRref.current?.terminate(); }
+    OCRref.current = new OCR(logger)
+    return () => {
+      OCRref.current?.terminate()
+    }
   }, [])
 
   return (
@@ -55,12 +60,18 @@ export function App() {
         // position: "relative"
       }}
     >
-      {showCamera ?
+      {showCamera ? (
         <Camera
           onCapture={async (canvas) => {
-            setShowCamera(false);
-            const result = await OCRref.current!.recognize(canvas, canvas.width, canvas.height);
-            const { lines: matrix, chars } = processMatrix(result.matrixData.text)
+            setShowCamera(false)
+            const result = await OCRref.current!.recognize(
+              canvas,
+              canvas.width,
+              canvas.height
+            )
+            const { lines: matrix, chars } = processMatrix(
+              result.matrixData.text
+            )
             const targets = processTargets(result.targetsData.text, chars)
             setOcrResult({ matrix, targets, finished: true })
             // setOutputs([
@@ -79,23 +90,27 @@ export function App() {
             //   canvasRef.current.getContext('2d')?.drawImage(canvas, 0, 0);
             // }
           }}
-        /> :
-        ocrResult.finished ?
-          <Result
-            matrix={ocrResult.matrix}
-            targets={ocrResult.targets}
-            onStartOver={() => {
-              setOcrProgress(defaultOcrProgress);
-              setOcrResult(defaultOcrResult);
-              setShowCamera(true);
-            }}
-          /> :
-          <progress
-            style={{ margin: 'auto' }}
-            value={ocrProgress.status === 'recognizing text' ?
-              (ocrProgress.matrixProgress + ocrProgress.targetsProgress) / 2 : 0}
-          />
-      }
+        />
+      ) : ocrResult.finished ? (
+        <Result
+          matrix={ocrResult.matrix}
+          targets={ocrResult.targets}
+          onStartOver={() => {
+            setOcrProgress(defaultOcrProgress)
+            setOcrResult(defaultOcrResult)
+            setShowCamera(true)
+          }}
+        />
+      ) : (
+        <progress
+          style={{ margin: 'auto' }}
+          value={
+            ocrProgress.status === 'recognizing text'
+              ? (ocrProgress.matrixProgress + ocrProgress.targetsProgress) / 2
+              : 0
+          }
+        />
+      )}
       {/* <div>
         <canvas ref={canvasRef} />
       </div> */}
@@ -105,4 +120,4 @@ export function App() {
       }
     </div>
   )
-}
+}