add hover on pet. working on add pet functionality and ui

src-tauri/Cargo.toml

@@ -16,6 +16,7 @@ tauri-build = { version = "1.4", features = [] }
 tauri = { version = "1.4.0", features = [ "window-all", "dialog-all", "fs-all", "path-all", "macos-private-api", "system-tray", "shell-open"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
+mouse_position = "0.1.3"
 tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }

src-tauri/src/app/cmd.rs

@@ -0,0 +1,23 @@
+use mouse_position::mouse_position::Mouse;
+use serde_json::json;
+
+#[tauri::command]
+pub fn get_mouse_position() -> serde_json::Value {
+    /*
+     * because we set the window to ignore cursor events, we cannot use 
+     * javascript to get the mouse position, so we use get mouse position manually
+     */
+    let position = Mouse::get_mouse_position();
+    match position {
+        Mouse::Position { x, y } => {
+            json!({
+                "clientX": x,
+                "clientY": y
+            })
+        }
+        Mouse::Error => {
+            println!("Error getting mouse position");
+            json!(null)
+        }
+    }
+}

src-tauri/src/app/default/settings.json

@@ -1,5 +1,6 @@
 {
     "theme": "dark",
     "language": "en",
-    "isPetAboveTaskbar": false
+    "isPetAboveTaskbar": false,
+    "isAllowHoverOnPet": true
 }

src-tauri/src/app/mod.rs

@@ -1,3 +1,4 @@
 pub mod conf;
 pub mod tray;
-pub mod utils;
+pub mod utils;
+pub mod cmd;

src-tauri/src/main.rs

@@ -2,6 +2,7 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
 mod app;
+use app::cmd::get_mouse_position;
 use app::conf::{combine_config_path, convert_path, if_app_config_does_not_exist_create_default};
 use app::tray::{handle_tray_event, init_system_tray};
 use tauri::Manager;
@@ -39,7 +40,11 @@ fn main() {
         })
         .system_tray(init_system_tray())
         .on_system_tray_event(handle_tray_event)
-        .invoke_handler(tauri::generate_handler![convert_path, combine_config_path])
+        .invoke_handler(tauri::generate_handler![
+            convert_path,
+            combine_config_path,
+            get_mouse_position
+        ])
         .build(tauri::generate_context!())
         .expect("error while running tauri application")
         .run(|_app_handle, event| {

src/Canvas.tsx

@@ -3,6 +3,7 @@ import { usePetStore } from "./hooks/usePetStore";
 import { listen } from '@tauri-apps/api/event';
 import { clonePetsFromSettings } from "./utils/clonePetsFromSettings";
 import { useSettingStore } from "./hooks/useSettingStore";
+import { TRenderEventListener } from "./types/IEvents";
 
 function Canvas() {
     // credit: https://stackoverflow.com/questions/16277383/javascript-screen-height-and-screen-width-returns-incorrect-values
@@ -14,16 +15,25 @@ function Canvas() {
     const requestAnimateFrameId = useRef<number>(0);
 
     const { pets, isPetsInitialized, setIsPetsInitialized } = usePetStore();
-    const { setIsPetAboveTaskbar } = useSettingStore();
+    const { setIsPetAboveTaskbar, setIsAllowHoverOnPet } = useSettingStore();
 
     // disable right click (context menu) for build version only. uncomment for development
     // credit: https://github.com/tauri-apps/wry/issues/30
     document.addEventListener('contextmenu', event => event.preventDefault());
 
     useEffect(() => {
         let unListen: () => void;
-        listen<any>('render', (event) => {
-            setIsPetAboveTaskbar(event.payload!.isPetAboveTaskbar);
+        listen<any>('render', (event: TRenderEventListener) => {
+            switch (event.payload.dispatchType) {
+                case 'switchPetAboveTaskBar':
+                    setIsPetAboveTaskbar(event.payload!.value as boolean);
+                    break;
+                case 'switchAllowHoverOnPet':
+                    setIsAllowHoverOnPet(event.payload!.value as boolean);
+                    break;
+                default:
+                    return;
+            }
             clonePetsFromSettings();
         }).then((unListenFn) => {
             unListen = unListenFn;

src/SettingWindow.tsx

@@ -28,7 +28,6 @@ function SettingWindow() {
   // disable right click (context menu) for build version only. uncomment for development
   // credit: https://github.com/tauri-apps/wry/issues/30
   document.addEventListener('contextmenu', event => event.preventDefault());
-
   // get object theme change it name to colorScheme for readability
   const { theme: colorScheme, language } = useSettingStore();
   const { t, i18n } = useTranslation();
@@ -50,6 +49,7 @@ function SettingWindow() {
   }
 
   let CurrentSettingTab = SettingTabComponent[page];
+
   if (!CurrentSettingTab) {
     CurrentSettingTab = memo(() => <Text component='h1'>{t("Seem like the content of this page doesn't exist or has not been updated")}</Text>);
   }
@@ -102,4 +102,4 @@ function SettingWindow() {
   );
 }
 
-export default SettingWindow;
+export default memo(SettingWindow);

src/__tests__/functions/function.test.ts

@@ -4,7 +4,7 @@
  */
 
 import { mockIPC, mockWindows, clearMocks } from '@tauri-apps/api/mocks'
-import { getAppSettings } from "../../utils/settingsHelper";
+import { getAppSettings } from "../../utils/settings";
 import { expect, test, afterEach } from "vitest";
 
 afterEach(() => {

src/class/Pet.ts

@@ -2,9 +2,10 @@
  * A good resource to learn about canvas, the project is based on this tutorial.
  * credit: https://www.youtube.com/watch?v=vyqbNFMDRGQ&t=8593s&ab_channel=ChrisCourses
  */
+import { invoke } from "@tauri-apps/api";
 import { useSettingStore } from "../hooks/useSettingStore";
 import { IPetParams, TStates, TCurrentPetState } from "../types/IPet";
-
+import { IMousePosition } from "../types/IMousePosition";
 export default class Pet {
     position: { x: number; y: number };
     name: string;
@@ -130,16 +131,39 @@ export default class Pet {
 
         }
 
-        if (this.isBeingSelected) {
-            context.strokeStyle = "red";
-            context.lineWidth = 1;
-            context.strokeRect(
-                dx_start_draw_position,
-                dy_start_draw_position - this.offset.y * this.scale,
-                dWidth_draw_width,
-                dHeight_draw_height
-            )
+        const isAllowHoverOnPet = useSettingStore.getState().isAllowHoverOnPet;
+        if (isAllowHoverOnPet) {
+            invoke<IMousePosition>('get_mouse_position').then((mousePosition) => {
+                // if hover on the pet set isBeingSelected to true
+                if (
+                    mousePosition.clientX >= dx_start_draw_position &&
+                    mousePosition.clientX <= dx_start_draw_position + dWidth_draw_width &&
+                    mousePosition.clientY >= dy_start_draw_position - this.offset.y * this.scale &&
+                    mousePosition.clientY <= dy_start_draw_position + dHeight_draw_height - this.offset.y * this.scale
+                ) {
+                    this.isBeingSelected = true;
+                    // check state before switch because not all pets have the same states
+                    if (this.states.meow) this.switchState('meow');
+                    else if (this.states.attack) this.switchState('attack');
+                    return
+                }
+
+                this.isBeingSelected = false;
+                if (this.states.walk) this.switchState('walk');
+                else if (this.states.run) this.switchState('run');
+            });
         }
+
+        // if (this.isBeingSelected) {
+        //     context.strokeStyle = "red";
+        //     context.lineWidth = 1;
+        //     context.strokeRect(
+        //         dx_start_draw_position,
+        //         dy_start_draw_position - this.offset.y * this.scale,
+        //         dWidth_draw_width,
+        //         dHeight_draw_height
+        //     )
+        // }
     }
 
     // used to control the animation speed,

src/default/defaultPetExport.ts

@@ -0,0 +1,4 @@
+import { IPetParams } from '../types/IPet';
+import defaultPetConfig from './pets.json';
+
+export const defaultPetOptions: IPetParams[] = JSON.parse(JSON.stringify(defaultPetConfig));