Merge pull request #24 from cohstats/master

Add streamer Overlay settings

package.json

@@ -1,7 +1,7 @@
 {
     "name": "coh3-stats-desktop-app",
     "private": true,
-    "version": "1.0.1",
+    "version": "1.1.0",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -19,6 +19,7 @@
         "axios": "^1.3.4",
         "coh-stats-components": "github:cohstats/coh-stats-components#0.0.7",
         "coh3-data-types-library": "github:cohstats/coh3-data-types-library#0.0.2",
+        "mixpanel-browser": "^2.45.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.4.5",
@@ -29,6 +30,7 @@
         "@tauri-apps/cli": "^1.2.2",
         "@types/react": "^18.0.26",
         "@types/react-dom": "^18.0.9",
+        "@types/mixpanel-browser": "^2.38.1",
         "@vitejs/plugin-react": "^3.0.0",
         "prettier": "^2.8.1",
         "typescript": "^4.9.3",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "coh3-stats-desktop-app"
-version = "1.0.1"
+version = "1.1.0"
 description = "A Tauri App"
 authors = ["you"]
 license = ""
@@ -24,6 +24,7 @@ window-shadows = "0.2.0"
 tauri-plugin-window-state = "0.1"
 tauri-plugin-fs-watch = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "dev" }
 tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "dev" }
+machine-uid = "0.2.0"
 
 [features]
 # by default Tauri runs in production mode

src-tauri/src/main.rs

@@ -3,6 +3,7 @@
     windows_subsystem = "windows"
 )]
 
+extern crate machine_uid;
 use tauri_plugin_fs_watch;
 use std::path::Path;
 use tauri::Manager;
@@ -11,7 +12,7 @@ mod parse_log_file;
 
 fn main() {
     tauri::Builder::default()
-        .invoke_handler(tauri::generate_handler![get_default_log_file_path, check_log_file_exists, parse_log_file::parse_log_file_reverse])
+        .invoke_handler(tauri::generate_handler![get_default_log_file_path, check_log_file_exists, get_machine_id, parse_log_file::parse_log_file_reverse])
         .plugin(tauri_plugin_fs_watch::init())
         .plugin(tauri_plugin_window_state::Builder::default().build())
         .plugin(tauri_plugin_store::Builder::default().build())
@@ -38,4 +39,10 @@ fn get_default_log_file_path() -> String {
 #[tauri::command]
 fn check_log_file_exists(path: &str) -> bool {
     Path::new(path).exists()
+}
+
+/// get the system machine id
+#[tauri::command]
+fn get_machine_id() -> String {
+    machine_uid::get().unwrap()
 }

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
     },
     "package": {
         "productName": "Coh3 Stats Desktop App",
-        "version": "1.0.1"
+        "version": "1.1.0"
     },
     "tauri": {
         "allowlist": {

src/About.tsx

@@ -17,11 +17,13 @@ import {
     Grid,
 } from "@mantine/core"
 import logoBig from "./assets/logo/Square310x310Logo.png"
+import events from "./mixpanel/mixpanel"
 
 export const About: React.FC = () => {
     const [appVersion, setAppVersion] = useState<string>()
     useEffect(() => {
         getVersion().then((version) => setAppVersion(version))
+        events.open_about()
     }, [])
 
     return (

src/Game.tsx

@@ -1,7 +1,7 @@
 import { useGameData } from "./game-data-provider/GameDataProvider"
-import { Title, Grid, Button, Loader, Group, Box, Badge } from "@mantine/core"
+import { Title, Grid, Loader, Group, Box, Badge } from "@mantine/core"
 import { PlayerCard } from "./components/PlayerCard"
-import { useLogFilePath } from "./configStore"
+import { useLogFilePath } from "./game-data-provider/configValues"
 
 export const Game: React.FC = () => {
     const gameData = useGameData()

src/Settings.tsx

@@ -19,19 +19,32 @@ import { writeText } from "@tauri-apps/api/clipboard"
 import { useEffect, useState } from "react"
 import { IconCheck, IconCopy, IconPlayerPlay, IconX } from "@tabler/icons-react"
 import { open } from "@tauri-apps/api/dialog"
+import { useLogFilePath } from "./game-data-provider/configValues"
 import {
-    trySetLogFilePath,
-    useLogFilePath,
     usePlaySound,
     usePlaySoundVolume,
-} from "./configStore"
+} from "./game-found-sound/configValues"
+import {
+    useShowFlagsOverlay,
+    useAlwaysShowOverlay,
+} from "./streamer-overlay/configValues"
 import { playSound as playSoundFunc } from "./game-found-sound/playSound"
+import events from "./mixpanel/mixpanel"
+import { useGameData } from "./game-data-provider/GameDataProvider"
 
 export const Settings: React.FC = () => {
-    const logFilePath = useLogFilePath()
-    const { playSound, setPlaySound } = usePlaySound()
-    const { playSoundVolume, setPlaySoundVolume } = usePlaySoundVolume()
+    const gameData = useGameData()
+    const [logFilePath, setLogFilePath] = useLogFilePath()
+    const [playSound, setPlaySound] = usePlaySound()
+    const [playSoundVolume, setPlaySoundVolume] = usePlaySoundVolume()
+    const [showFlagsOverlay, setShowFlagsOverlay] = useShowFlagsOverlay()
+    const [alwaysShowOverlay, setAlwaysShowOverlay] = useAlwaysShowOverlay()
     const [appDataPath, setAppDataPath] = useState<string>("")
+
+    useEffect(() => {
+        events.open_settings()
+    }, [])
+
     useEffect(() => {
         const getAppDataPath = async () => {
             const path = await appDataDir()
@@ -56,7 +69,8 @@ export const Settings: React.FC = () => {
             ],
         })
         if (selected !== null) {
-            trySetLogFilePath(selected as string)
+            events.settings_changed("logFilePath", selected as string)
+            setLogFilePath(selected as string)
         }
     }
 
@@ -117,8 +131,16 @@ export const Settings: React.FC = () => {
                         <div>
                             <Group>
                                 <Checkbox
-                                    checked={playSound}
+                                    checked={
+                                        playSound === undefined
+                                            ? false
+                                            : playSound
+                                    }
                                     onChange={(event) => {
+                                        events.settings_changed(
+                                            "play_sound",
+                                            `${event.currentTarget.checked}`
+                                        )
                                         setPlaySound(
                                             event.currentTarget.checked
                                         )
@@ -132,6 +154,12 @@ export const Settings: React.FC = () => {
                                     style={{ width: "100px" }}
                                     value={playSoundVolume}
                                     onChange={setPlaySoundVolume}
+                                    onChangeEnd={(value) => {
+                                        events.settings_changed(
+                                            "play_sound_volume",
+                                            value
+                                        )
+                                    }}
                                 />
                                 <ActionIcon
                                     radius="xl"
@@ -145,10 +173,57 @@ export const Settings: React.FC = () => {
                         </div>
                     </Group>
                     <Divider />
+                    <Text weight={700}>OBS Streamer Overlay:</Text>
+                    <Group>
+                        <div>Only show stats when loading / ingame:</div>
+                        <div>
+                            <Checkbox
+                                checked={
+                                    alwaysShowOverlay === undefined
+                                        ? false
+                                        : alwaysShowOverlay
+                                }
+                                onChange={(event) => {
+                                    events.settings_changed(
+                                        "alwaysShowOverlay",
+                                        `${event.currentTarget.checked}`
+                                    )
+                                    setAlwaysShowOverlay(
+                                        event.currentTarget.checked
+                                    )
+                                    if (gameData) {
+                                        gameData.reloadLogFile()
+                                    }
+                                }}
+                            />
+                        </div>
+                    </Group>
+                    <Group>
+                        <div>Show flags:</div>
+                        <div>
+                            <Checkbox
+                                checked={
+                                    showFlagsOverlay === undefined
+                                        ? false
+                                        : showFlagsOverlay
+                                }
+                                onChange={(event) => {
+                                    events.settings_changed(
+                                        "showFlagsOverlay",
+                                        `${event.currentTarget.checked}`
+                                    )
+                                    setShowFlagsOverlay(
+                                        event.currentTarget.checked
+                                    )
+                                    if (gameData) {
+                                        gameData.reloadLogFile()
+                                    }
+                                }}
+                            />
+                        </div>
+                    </Group>
                     <div>
-                        <Text weight={700}>
-                            OBS Streamer Overlay instructions:
-                        </Text>
+                        <Text weight={700}>Setup instructions:</Text>
                         <List type="ordered">
                             <List.Item>
                                 In OBS Sources section click on "Add Source" and