Merge pull request #19 from cohstats/master

Update
cohstats · Mar 11, 2023 · 05f1ff3 · 05f1ff3
2 parents ef467ec + 160d55b
commit 05f1ff3
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "coh3-stats-desktop-app",
     "private": true,
-    "version": "1.0.0",
+    "version": "1.0.1",
     "type": "module",
     "scripts": {
         "dev": "vite",

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 = "1.0.0"
+version = "1.0.1"
 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": "1.0.0"
+        "version": "1.0.1"
     },
     "tauri": {
         "allowlist": {

diff --git a/src/Settings.tsx b/src/Settings.tsx
@@ -12,17 +12,25 @@ import {
     Button,
     Tooltip,
     Checkbox,
+    Slider,
 } from "@mantine/core"
 import { appDataDir } from "@tauri-apps/api/path"
 import { writeText } from "@tauri-apps/api/clipboard"
 import { useEffect, useState } from "react"
-import { IconCheck, IconCopy, IconX } from "@tabler/icons-react"
+import { IconCheck, IconCopy, IconPlayerPlay, IconX } from "@tabler/icons-react"
 import { open } from "@tauri-apps/api/dialog"
-import { trySetLogFilePath, useLogFilePath, usePlaySound } from "./configStore"
+import {
+    trySetLogFilePath,
+    useLogFilePath,
+    usePlaySound,
+    usePlaySoundVolume,
+} from "./configStore"
+import { playSound as playSoundFunc } from "./game-found-sound/playSound"
 
 export const Settings: React.FC = () => {
     const logFilePath = useLogFilePath()
     const { playSound, setPlaySound } = usePlaySound()
+    const { playSoundVolume, setPlaySoundVolume } = usePlaySoundVolume()
     const [appDataPath, setAppDataPath] = useState<string>("")
     useEffect(() => {
         const getAppDataPath = async () => {
@@ -107,12 +115,33 @@ export const Settings: React.FC = () => {
                     <Group>
                         <div>Play sound on match found:</div>
                         <div>
-                            <Checkbox
-                                checked={playSound}
-                                onChange={(event) => {
-                                    setPlaySound(event.currentTarget.checked)
-                                }}
-                            />
+                            <Group>
+                                <Checkbox
+                                    checked={playSound}
+                                    onChange={(event) => {
+                                        setPlaySound(
+                                            event.currentTarget.checked
+                                        )
+                                    }}
+                                />
+                                <Text>Volume:</Text>
+                                <Slider
+                                    min={0}
+                                    max={1}
+                                    step={0.1}
+                                    style={{ width: "100px" }}
+                                    value={playSoundVolume}
+                                    onChange={setPlaySoundVolume}
+                                />
+                                <ActionIcon
+                                    radius="xl"
+                                    variant="filled"
+                                    color="blue"
+                                    onClick={playSoundFunc}
+                                >
+                                    <IconPlayerPlay size="1.125rem" />
+                                </ActionIcon>
+                            </Group>
                         </div>
                     </Group>
                     <Divider />

diff --git a/src/configStore.ts b/src/configStore.ts
@@ -6,6 +6,7 @@ import { EventEmitter } from "@tauri-apps/api/shell"
 
 const LOG_FILE_PATH_KEY = "logFilePath"
 const PLAY_SOUND_KEY = "playSound"
+const PLAY_SOUND_VOLUME_KEY = "playSoundVolume"
 
 let CONFIG_STORE: Store | undefined
 const CONFIG_CHANGE_EVENT = new EventEmitter()
@@ -40,6 +41,11 @@ export const getStore: () => Promise<Store> = async () => {
             await CONFIG_STORE.set(PLAY_SOUND_KEY, false)
             await CONFIG_STORE.save()
         }
+        const hasPlaySoundVolume = await CONFIG_STORE.has(PLAY_SOUND_VOLUME_KEY)
+        if (!hasPlaySoundVolume) {
+            await CONFIG_STORE.set(PLAY_SOUND_VOLUME_KEY, 0.8)
+            await CONFIG_STORE.save()
+        }
     }
     return CONFIG_STORE
 }
@@ -158,3 +164,49 @@ export const getPlaySound = async () => {
     }
     return value
 }
+
+export const usePlaySoundVolume = () => {
+    const [playSoundVolume, setPlaySoundVolume] = useState(0.8)
+    const valueInitializedRef = useRef(false)
+
+    useEffect(() => {
+        const onChange = (value: number) => {
+            setPlaySoundVolume(value)
+        }
+        const initializeValue = async () => {
+            const store = await getStore()
+            const initialValue = await store.get<number>(PLAY_SOUND_VOLUME_KEY)
+            if (initialValue === null) {
+                setPlaySoundVolume(0.8)
+            } else {
+                setPlaySoundVolume(initialValue)
+            }
+            valueInitializedRef.current = true
+        }
+        if (valueInitializedRef.current === false) {
+            initializeValue()
+        }
+        CONFIG_CHANGE_EVENT.on(PLAY_SOUND_VOLUME_KEY, onChange)
+        return () => {
+            CONFIG_CHANGE_EVENT.off(PLAY_SOUND_VOLUME_KEY, onChange)
+        }
+    }, [])
+
+    const setPlaySoundInStore = async (value: number) => {
+        const store = await getStore()
+        await store.set(PLAY_SOUND_VOLUME_KEY, value)
+        await store.save()
+        CONFIG_CHANGE_EVENT.emit(PLAY_SOUND_VOLUME_KEY, value)
+    }
+
+    return { playSoundVolume, setPlaySoundVolume: setPlaySoundInStore }
+}
+
+export const getPlaySoundVolume = async () => {
+    const store = await getStore()
+    const value = await store.get<number>(PLAY_SOUND_VOLUME_KEY)
+    if (value === null) {
+        return 0.8
+    }
+    return value
+}
diff --git a/src/game-data-provider/useFullGameData.tsx b/src/game-data-provider/useFullGameData.tsx
@@ -18,6 +18,7 @@ import {
 import { MantineColor } from "@mantine/core"
 import { renderStreamerHTML } from "../streamer-overlay/renderStreamerOverlay"
 import { getPlaySound, useLogFilePath } from "../configStore"
+import { playSound as playSoundFunc } from "../game-found-sound/playSound"
 
 const PLAYER_COLOR_OBJECT: { left: MantineColor[]; right: MantineColor[] } = {
     left: ["blue", "blue", "blue", "blue"],
@@ -141,8 +142,7 @@ export const useFullGameData = () => {
         const refineLogFileData = async (rawGameData: RawGameData) => {
             const playSound = await getPlaySound()
             if (playSound && rawGameData.game_state === "Loading") {
-                const audio = new Audio("/hoorah.wav")
-                audio.play()
+                playSoundFunc()
             }
             try {
                 const [leftRefined, rightRefined] = await Promise.all([

diff --git a/src/game-found-sound/playSound.ts b/src/game-found-sound/playSound.ts
@@ -0,0 +1,7 @@
+import { getPlaySoundVolume } from "../configStore"
+
+export const playSound = async () => {
+    const audio = new Audio("/hoorah.wav")
+    audio.volume = await getPlaySoundVolume()
+    audio.play()
+}
diff --git a/src/streamer-overlay/OverlayApp.tsx b/src/streamer-overlay/OverlayApp.tsx
@@ -7,19 +7,21 @@ export interface OverlayAppProps {
     gameData: FullGameData
 }
 
+// gameData.state === "Loading" || gameData.state === "InGame"
+
 export const OverlayApp: React.FC<OverlayAppProps> = ({ gameData }) => {
     return (
         <>
-            {gameData.state === "Loading" || gameData.state === "InGame" ? (
+            {true ? (
                 <div
                     style={{
                         display: "flex",
                         flexWrap: "wrap",
                         justifyContent: "flex-start",
                         alignItems: "stretch",
                         position: "absolute",
-                        left: "calc(calc(100vw / 2) - 450px)",
-                        right: "calc(calc(100vw / 2) - 450px)",
+                        left: "calc(calc(100vw / 2) - 485px)",
+                        right: "calc(calc(100vw / 2) - 485px)",
                         top: 65,
                     }}
                 >

diff --git a/src/streamer-overlay/PlayerEntry.tsx b/src/streamer-overlay/PlayerEntry.tsx
@@ -24,6 +24,16 @@ export const PlayerEntry: React.FC<PlayerEntryProps> = ({ playerData }) => {
                 height={25}
                 style={{ paddingRight: 10 }}
             />
+            <img
+                src={
+                    "https://raw.githubusercontent.com/cohstats/coh3-stats-desktop-app/master/public/flags/4x3/" +
+                    playerData.country +
+                    ".svg"
+                }
+                width={25}
+                height={25}
+                style={{ paddingRight: 10 }}
+            />
             <span
                 style={{
                     paddingRight: 10,