Progress

irdkwmnsb · May 8, 2024 · 9d02a3b · 9d02a3b
1 parent fa0e6b2
commit 9d02a3b
Show file tree

Hide file tree

Showing 13 changed files with 289 additions and 45 deletions.
diff --git a/package.json b/package.json
@@ -8,8 +8,9 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "lint": "eslint --fix .",
-    "tsc": "tsc"
+    "lint": "concurrently --group \"npm run lint:*\"",
+    "lint:js": "eslint .",
+    "lint:typecheck": "tsc --noEmit"
   },
   "license": "GPL-3.0+",
   "devDependencies": {
@@ -20,6 +21,7 @@
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "concurrently": "^8.2.2",
     "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
     "prettier": "^3.1.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.module.scss b/src/App.module.scss
@@ -59,12 +59,28 @@ html, body {
         grid-column-start: 2;
         grid-column-end: 3;
         border-left: solid 2px #c3c3c3;
+        display: flex;
+        flex-direction: column;
         .player {
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
+            margin-bottom: 20px;
         }
         .events {
-
+            overflow-y: auto;
+            display: grid;
+            .event {
+                cursor: pointer;
+                box-sizing: border-box;
+                border-top: 1px #c3c3c3 solid;
+                &:last-child {
+                    border-bottom: 1px #c3c3c3 solid;
+                }
+                &.selected {
+                    background-color: #eee;
+                    border-top: 1px #c3c3c3 solid;
+                }
+            }
         }
     }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -20,6 +20,7 @@ const App = ({ manifest, store }: AppProps) => {
     const vis = useVisualizer(store)
     const {curState, curEvent, events, currentStep, start, next} = vis
     const [eventOverride, setEventOverride] = useState<number | undefined>(undefined)
+    const [skipCounter, setSkipCounter] = useState<number>(undefined)
     const curEventOverride = eventOverride !== undefined && events !== undefined ? events[eventOverride] : curEvent
     const curStateOverride = eventOverride !== undefined && events !== undefined ? events[eventOverride].state : curState
     const isRunning = curEventOverride !== undefined && curStateOverride !== undefined
@@ -36,7 +37,7 @@ const App = ({ manifest, store }: AppProps) => {
         }
     }
     const doPrev = () => {
-        if(currentStep === undefined || events === undefined || !vis.config.storeEvents) {
+        if(currentStep === undefined || events === undefined || !vis.config.storeEvents || currentStep === 0 || eventOverride === 0) {
             return
         }
         if(eventOverride === undefined) {
@@ -47,6 +48,7 @@ const App = ({ manifest, store }: AppProps) => {
     }
     const doStart: typeof start = (...args) => {
         setCurTab(Tab.Render)
+        setEventOverride(undefined)
         start(...args)
     }
     useEffect(() => {
@@ -68,6 +70,7 @@ const App = ({ manifest, store }: AppProps) => {
 
     return <div className={styles.app}>
         <div className={styles.header}>
+            <a onClick={(_) => history.back()}>&larr; Go back</a>
             <h1>{manifest.nameRu}</h1>
             <article>{manifest.descriptionRu}</article>
             <section className={styles.tabSwitcher}>
@@ -89,23 +92,33 @@ const App = ({ manifest, store }: AppProps) => {
         </section>
         <div className={styles.sidebar}>
             <section className={styles.player}>
-                <div>Current Step: {currentStep}</div>
-                <button onClick={doNext}>Next</button>
-                <button disabled={!vis.config.storeEvents} onClick={doPrev}>Prev</button>
-                <button disabled={!vis.config.storeEvents} onClick={() => setEventOverride(undefined)}>Reset</button>
-                <button disabled={!vis.config.storeEvents} onClick={() => setEventOverride(0)}>Beginning</button>
-                <button disabled={!vis.config.storeEvents} onClick={() => setEventOverride(events!.length - 1)}>End</button>
+                <div>
+                    {currentStep === undefined ? 
+                        "Not started" : 
+                        "Step " + (eventOverride === undefined ? currentStep : eventOverride + 1)
+                    }
+                </div>
+                <div className={styles.controls}>
+                    <button onClick={doNext}>Next</button>
+                    <button disabled={!vis.config.storeEvents} onClick={doPrev}>Prev</button>
+                    <button disabled={!vis.config.storeEvents} onClick={() => setEventOverride(0)}>Beginning</button>
+                    <button disabled={!vis.config.storeEvents} onClick={() => setEventOverride(events!.length - 1)}>End</button>
+                </div>
                 <small>Use arrow keys to navigate</small>
             </section>
             <section className={styles.events}>
-                {events && events.map((x, i) => {
-                    return <div key={i}>
-                        {i === eventOverride ? "OVERRIDE" : ""}
-                        {i === currentStep! - 1 ? "CUR" : ""}
-                        {JSON.stringify(x)}
-                        <button onClick={() => setEventOverride(i)}>Jump</button>
-                    </div>
-                })}
+                Events:
+                <div>
+                    {events ? events.map((x, i) => {
+                        const isSelected = i === eventOverride || (eventOverride === undefined && i === currentStep! - 1)
+                        return <div key={i} className={classNames(styles.event, {
+                            [styles.selected]: isSelected
+                        })} onClick={() => setEventOverride(i)}>
+                            <button onClick={() => setEventOverride(i)} disabled={isSelected}>&rarr;</button>
+                            {i + 1} {x.name}
+                        </div>
+                    }) : "Nothing yet.."}
+                </div>
             </section>
         </div>
     </div>