albericod / overwolf-hooks

Custom hooks to help use overwolf api with the new react hooks technology.

Overwolf Hooks

Custom hooks to help use overwolf api with the new react hooks technology.

Install

$ npm install --save overwolf-hooks
$ pnpm install --save overwolf-hooks
$ yarn add overwolf-hooks

How to use

• If you are not familiar with Overwolf overwolf api
• If you are not familiar with React hooks, take a look at the documentation

Hooks

1. useWindow.tsx

import { useWindow } from 'overwolf-hooks';

const shouldDisplayLog = true;
const shouldListenToWindowStateChanges = true;

const Panel = () => {

const [desktopWindow] = useWindow("desktop", shouldDisplayLog,shouldListenToWindowStateChanges);

return (
    <div>
      <h1>Desktop Window</h1>
      <button onClick={()=> desktopWindow?.minimize()}>Minimize</button>
      <button onClick={()=> desktopWindow?.restore()}>Restore</button>
      <button onClick={()=> desktopWindow?.maximize()}>Maximize</button>
      <button onClick={()=> desktopWindow?.close()}>Close</button>
    </div>
  )
}

Force Window update

If you need to force update the window state, you can use the refreshState function.

import { useWindow } from "overwolf-hooks";

const shouldDisplayLog = true;
const shouldListenToWindowStateChanges = true;

//listenToWindowStateChanges is set to true to listen to window state changes, so you can read the window state from the desktopWindowStateChanged variable
const [desktopWindow, desktopWindowStateChanged, refreshState] = useWindow(
  "desktop",
  shouldDisplayLog,
  shouldListenToWindowStateChanges
);

const Panel = () => {
  useEffect(() => {
    //........ any other code
    //force update/rebind the window object
    refreshState();
  }, [refreshState]);

  useEffect(() => {
    //........ any other code
    console.info("desktopWindowStateChanged", desktopWindowStateChanged);
  }, [desktopWindowStateChanged]);

  return <CustomComponent {...desktopWindow} />;
};

2. useDrag.tsx

import { useEffect, useCallback } from "react";
import { useDrag, useWindow } from 'overwolf-hooks'

const shouldDisplayLog = true;

const Header = () => {

const [desktopWindow] = useWindow("desktop", shouldDisplayLog);
const { onDragStart, onMouseMove, setCurrentWindowID } = useDrag(null, shouldDisplayLog);

const updateDragWindow = useCallback(() => {
  if (desktopWindow?.id) setCurrentWindowID(desktopWindow.id);
}, [desktopWindow, setCurrentWindowID]);

useEffect(updateDragWindow, [updateDragWindow])

return (
    <header
      onMouseDown={event => onDragStart(event)}
      onMouseMove={event => onMouseMove(event)}>
        Header Text
    </header>
  )
}

3. useGameEventProvider.tsx

const REQUIRED_FEATURES = ["game_info", "match_info", "game_events"];
const RETRY_TIMES = 10;
const DISPLAY_OVERWOLF_HOOKS_LOGS = true;

const BackgroundWindow = () => {
  const [ingame] = useWindow("ingame", DISPLAY_OVERWOLF_HOOKS_LOGS);
  const { started, start, stop } = useGameEventProvider(
    {
      onInfoUpdates: (info) => { console.log("info", info); },
      onNewEvents: (events) =>  { console.log("events", events); }),
    },
    REQUIRED_FEATURES,
    RETRY_TIMES,
    DISPLAY_OVERWOLF_HOOKS_LOGS
  );

  useEffect(() => {
    start();
    return () => stop();
  }, [start, stop]);

  return null;
}

4. useRunningGame.tsx

import { useEffect } from "react";
import { useGameEventProvider, useRunningGame } from 'overwolf-hooks'

const shouldDisplayLog = true;

const Alert = () => {

  const [currentGame] = useRunningGame(shouldDisplayLog);

  useEffect(() => {
    console.info("currentGame", currentGame);
  }, [currentGame]);

return <p>Alert Window</p>

}

License

MIT © AlbericoD

overwolf-hooks's Issues

useGameEventProvider does not emit any data

Describe the bug
While the targeted game running rebuilding the react app causes some issues. the useGameEventProvider does not emit any data

To Reproduce
Steps to reproduce the behavior:

1. change any file and save
2. rebuild
3. info and event will be undefined

Expected behavior
get info and event that are emitted by OW from useGameEventProvider

Screenshots

Create automatic publish to NPM with GitHub Actions

Is your feature request related to a problem? Please describe.

There is a better way with GitHub Actions to release and publish a new version in every new commit automatic.

Describe the solution you'd like

Create a Github Action to release and publish a new package.

The automated release is failing 🚨

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀