Merge pull request #15 from cohstats/master

Add streamer overlay functionality
cohstats · Mar 4, 2023 · 77ef866 · 77ef866
2 parents 5e4076e + 99aef64
commit 77ef866
Show file tree

Hide file tree

Showing 17 changed files with 596 additions and 119 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <link rel="icon" type="image/png" href="/ms-icon-310x310.png" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Coh3 Stats Desktop App (Alpha)</title>
+        <title>Coh3 Stats Desktop App</title>
     </head>
     <body style="overscroll-behavior: none">
         <div id="root"></div>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "coh3-stats-desktop-app",
     "private": true,
-    "version": "0.0.8",
+    "version": "0.0.9",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -14,6 +14,7 @@
         "@emotion/react": "^11.10.6",
         "@mantine/core": "^6.0.0",
         "@mantine/hooks": "^6.0.0",
+        "@tabler/icons-react": "^2.7.0",
         "@tauri-apps/api": "^1.2.0",
         "axios": "^1.3.4",
         "coh-stats-components": "github:cohstats/coh-stats-components#0.0.7",

diff --git a/public/instructions/navigateToPath.png b/public/instructions/navigateToPath.png
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "coh3-stats-desktop-app"
-version = "0.0.8"
+version = "0.0.9"
 description = "A Tauri App"
 authors = ["you"]
 license = ""

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -7,7 +7,7 @@
     },
     "package": {
         "productName": "Coh3 Stats Desktop App",
-        "version": "0.0.8"
+        "version": "0.0.9"
     },
     "tauri": {
         "allowlist": {
@@ -16,6 +16,16 @@
                 "all": true,
                 "request": true,
                 "scope": ["https://coh3-api.reliclink.com/*"]
+            },
+            "fs": {
+                "writeFile": true,
+                "scope": ["$APPDATA/*"]
+            },
+            "path": {
+                "all": false
+            },
+            "clipboard": {
+                "writeText": true
             }
         },
         "bundle": {

diff --git a/src/Game.tsx b/src/Game.tsx
@@ -4,7 +4,6 @@ import { PlayerCard } from "./components/PlayerCard"
 
 export const Game: React.FC = () => {
     const gameData = useGameData()
-    console.log("gamedata", gameData)
     return (
         <>
             {gameData.logFileFound ? (
@@ -53,7 +52,12 @@ export const Game: React.FC = () => {
                     )}
                 </>
             ) : (
-                <>Could not find Log File</>
+                <Group position="center" mt={50}>
+                    <Title>
+                        <Loader mr="md" />
+                        Waiting for logfile
+                    </Title>
+                </Group>
             )}
         </>
     )

diff --git a/src/Settings.tsx b/src/Settings.tsx
@@ -1,12 +1,98 @@
 import { useGameData } from "./game-data-provider/GameDataProvider"
 import { ColorSchemeToggle } from "coh-stats-components"
-import { Box } from "@mantine/core"
+import {
+    Box,
+    Group,
+    Stack,
+    Divider,
+    Input,
+    ActionIcon,
+    Text,
+    List,
+    Image,
+} from "@mantine/core"
+import { appDataDir } from "@tauri-apps/api/path"
+import { writeText } from "@tauri-apps/api/clipboard"
+import { useEffect, useState } from "react"
+import { IconCopy } from "@tabler/icons-react"
 
 export const Settings: React.FC = () => {
+    const [appDataPath, setAppDataPath] = useState<string>("")
+    useEffect(() => {
+        const getAppDataPath = async () => {
+            const path = await appDataDir()
+            setAppDataPath(path)
+        }
+        if (appDataPath === "") {
+            getAppDataPath()
+        }
+    }, [appDataPath])
+
     return (
         <>
             <Box p="xl">
-                Color Theme: <ColorSchemeToggle />
+                <Stack>
+                    <Group>
+                        <div>Color Theme:</div>
+                        <div>
+                            <ColorSchemeToggle />
+                        </div>
+                    </Group>
+                    <Divider />
+                    <div>
+                        <Text weight={700}>
+                            OBS Streamer Overlay instructions:
+                        </Text>
+                        <List type="ordered">
+                            <List.Item>
+                                In OBS Sources section click on "Add Source" and
+                                select Browser
+                            </List.Item>
+                            <List.Item>
+                                In the Browser source settings tick "Local File"
+                            </List.Item>
+                            <List.Item>
+                                <Text>Copy this path:</Text>{" "}
+                                <Group>
+                                    <Input
+                                        value={appDataPath}
+                                        style={{ width: 300 }}
+                                        readOnly
+                                    />
+                                    <ActionIcon
+                                        onClick={() => {
+                                            writeText(appDataPath)
+                                        }}
+                                    >
+                                        <IconCopy size="1.125rem" />
+                                    </ActionIcon>
+                                </Group>
+                            </List.Item>
+                            <List.Item>
+                                In the Local File section click on "Browse"
+                            </List.Item>
+                            <List.Item>
+                                An explorer window opens. Paste the copied path
+                                into the path field shown in the image below:
+                                <Image
+                                    src={"/instructions/navigateToPath.png"}
+                                    height={100}
+                                />
+                            </List.Item>
+                            <List.Item>
+                                Select the file "streamerOverlay.html" and click
+                                on open
+                            </List.Item>
+                            <List.Item>
+                                Set the Width to 1920 and the Height to 1080
+                            </List.Item>
+                            <List.Item>
+                                Click ok. All Done! The overlay will display
+                                player ranks only when loading or ingame!
+                            </List.Item>
+                        </List>
+                    </div>
+                </Stack>
             </Box>
         </>
     )

diff --git a/src/game-data-provider/gameClosedObject b/src/game-data-provider/gameClosedObject
diff --git a/src/game-data-provider/gameStateObject b/src/game-data-provider/gameStateObject
diff --git a/src/game-data-provider/useFullGameData.tsx b/src/game-data-provider/useFullGameData.tsx
@@ -4,10 +4,8 @@ import {
     FullGameData,
     FullPlayerData,
     GameState,
-    GameType,
     RawGameData,
     RawTeamData,
-    TeamSide,
 } from "./GameData"
 import { useRawGameData } from "./useRawGameData"
 import { fetch } from "@tauri-apps/api/http"
@@ -18,6 +16,7 @@ import {
     logFileRaceTypeToRaceType,
 } from "coh3-data-types-library"
 import { MantineColor } from "@mantine/core"
+import { renderStreamerHTML } from "../streamer-overlay/renderStreamerOverlay"
 
 const PLAYER_COLOR_OBJECT: { left: MantineColor[]; right: MantineColor[] } = {
     left: ["blue", "blue", "blue", "blue"],
@@ -33,6 +32,7 @@ export const useFullGameData = () => {
         reloadLogFile,
     } = useRawGameData()
     const lastGameUniqueKeyRef = useRef<string>("")
+    const lastGameStateRef = useRef<GameState>()
     const [gameData, setGameData] = useState<FullGameData>()
 
     const generateUniqueGameKey = useCallback((rawGameData: RawGameData) => {
@@ -106,11 +106,8 @@ export const useFullGameData = () => {
                             member.level
                         refinedPlayerData[refinedPlayerIndex].xp = member.xp
                     }
-                    console.log(gameMode)
-                    console.log(response.faction)
                     const leaderboardID =
                         leaderboardsIDAsObject[gameMode][response.faction]
-                    console.log(leaderboardID)
                     const leaderboard = data.leaderboardStats.find(
                         (leaderboard) =>
                             leaderboard.leaderboard_id === leaderboardID
@@ -151,7 +148,7 @@ export const useFullGameData = () => {
                     refineSide(rawGameData.left, true),
                     refineSide(rawGameData.right, false),
                 ])
-                setGameData({
+                const newGameData: FullGameData = {
                     uniqueID: generateUniqueGameKey(rawGameData),
                     state: rawGameData.game_state,
                     type: rawGameData.game_type,
@@ -167,21 +164,31 @@ export const useFullGameData = () => {
                         side: rawGameData.right.side,
                         players: rightRefined,
                     },
-                })
-                console.log("done")
+                }
+                renderStreamerHTML(newGameData)
+                setGameData(newGameData)
             } catch (e: any) {
                 console.error(e)
             }
         }
-        if (
-            logFileFound &&
-            rawGameData &&
-            lastGameUniqueKeyRef.current !== generateUniqueGameKey(rawGameData)
-        ) {
-            console.log("Refine log file data")
-            console.log(rawGameData)
-            refineLogFileData(rawGameData)
-            lastGameUniqueKeyRef.current = generateUniqueGameKey(rawGameData)
+        // when raw data from log file changes check if its a new game with the generated unique key and refine data external api data
+        if (logFileFound && rawGameData) {
+            if (
+                lastGameUniqueKeyRef.current !==
+                generateUniqueGameKey(rawGameData)
+            ) {
+                refineLogFileData(rawGameData)
+                lastGameUniqueKeyRef.current =
+                    generateUniqueGameKey(rawGameData)
+            } else if (lastGameStateRef.current !== rawGameData.game_state) {
+                if (gameData) {
+                    lastGameStateRef.current = rawGameData.game_state
+                    const newGameData = gameData
+                    newGameData.state = rawGameData.game_state
+                    renderStreamerHTML(newGameData)
+                    setGameData(newGameData)
+                }
+            }
         }
     }, [logFilePath, rawGameData])
 

diff --git a/src/game-data-provider/useRawGameData.tsx b/src/game-data-provider/useRawGameData.tsx
@@ -14,7 +14,6 @@ export const useRawGameData = () => {
         setRawGameData(data)
     }
     const interval = useInterval(() => {
-        console.log("Check log file")
         if (logFilePath !== undefined) {
             getLogFileData(logFilePath)
         }