Is there any possible to detect if the game start and end?

General Questions
1

I’m using react to build my app. I’m using this template.

I cannot figure out where to detect when the game starts and ends.
I want to close the in_game window when I leave the game, and open the desktop window.

btw, Is that correct I need to call all the overwolf.XXX API by useEffect our just call it by trigger or sometime global?

2

Hi!
First of all, for detecting when a game is launched/closed, I recommend taking a look at the official sample app, as it implements this exact behavior. The general gist however, is that you want to use launch events to detect that the game was launched, and you want to detect that the game was closed through the relevant api, in order to shift back to “desktop mode”

As for using overwolf apis from within useEffect, I’ll quote one of our developers’ response to the question:

For a sample?
Should be good enough. If it was an actual app I would probably abstract it into a service
Or another hook which uses the service

Hope this helps!

1 Like
3

Thanks for the reply!!
I’ve used the official sample app, so I know there is a way can do it like that.
I’ll try to figure our with the quote you sent, Thanks!!

The last thing I want to ask is it possible to turn the sample app to a react app?

4

Glad I could help!
Now, to answer the two follow-ups:

  1. It might help to narrow down the search in the code of the sample app to the actual behaviors it exhibits when the game opens/closes. If you’ll notice, it will usually (there are specific edge-cases) close the desktop window and allow interaction with the second monitor/in game windows when the game starts. It will then close those and show the desktop window once it closes. The actual commands are relatively simple, but it never hurts to see it all come together.
  2. As for making the sample app a react app - There are currently two versions of it - there is the native version, and the typescript version. The typescript version will have many similarities with a react one, as it relies on webpack in order to be bundled. Either way though, those are the only two “official” versions as of now. There are plans to change that in the future, but we don’t have any ETAs for that as of now.

Hope that answers those questions!

1 Like
5

Yeah, you help me a lot!!
I’m starting my coding journey~

And I have one last question hope you can give some advise,
Is it good to new a function to call overwolf function for clean code or just use it is fine?

Like the code below

function startCapture(
  pastDuration: number,
  callback: CallbackFunction<FileResult>
): void {
  overwolf.media.replays.startCapture(pastDuration, callback);
}
1 Like
6

Generally speaking, this would most likely boil down to preference at least to some degree, as I wouldn’t say there is any one true way for this.

However, the approach that we often take would be to use “services”. Essentially, offloading most if not api calls to, for example, recording-related things, to their own “service” file. That way, all calls to a specific recording-related logical component, all pass through one method. Which means that you can easily swap it out for another component if you have to, or just in general tweak (ie logging every call to startRecording)

Where should that line pass? (aka should every single call be a service, or only things like recording. or maybe everything but file manipulation? also what about “vanilla js” apis)?
That’s up to you and your preferred coding practices. There are clear advantages to services, but they also add some code redundancy overhead.

Hope that helps!

1 Like
7

Thank you for sharing your experience.
You make me think a lot, and it’s help!!
Maybe it is because my project has just begun, so I didn’t think about using service.
But now, I will re-organize my thought, and try to write it that way!!

Thanks for your patient reply!!!

1 Like