Call js script in html5 game

Questions
#1

Hi!
I have this script:

<script

      crossorigin

   src="https://unpkg.com/react@17/umd/react.production.min.js"

    ></script>

    <script

      crossorigin

      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"

    ></script>

    <script src="https://unpkg.com/@sberdevices/assistant-client@3.4.2/umd/assistant.min.js"></script>

    <script>

      window.assistant.createAssistant({

        getState: () => {

          return {};

        },

      });

   </script>

How can I connect it to my project (html5) in the best way? I’ve been studying Default for about a month, I really like the engine. But I have a difficulty with this task.

#2

You need that snippet of code to be included in the generated index.html? If that is the case then simply copy the template file from builtins/manifests/web/engine_template.html to a location in your project, modify the file, and then reference it from the html shell field in game.project for the HTML5 section.

5 Likes
#3

@britzl, thenk you! Its work for me!
Can I ask you right away: how would you recommend calling js code when you click on a button in a game, for example? Thank you very much!

2 Likes
#4

I don’t know the exact answer to your question, so let’s wait for some other response, but in the other direction (from JS to Lua) I recollect this:

You can check out if it is working and useful for you :blush:

EDIT:
For the other direction Defold has a HTML5 API, so for example you can use html5.run() in your Lua code responsible for in-game button handling, to run a chunk of html with script tags inside :wink:

You can check out more in this thread - it might have a ready answer for you:

2 Likes
#5

Yes, html.run() is a nice and easy way of running some JS code and getting a result back.

1 Like
#6

Thank you so much for information! Yes, this task isn’t difficult like:

  1. There is a script that calls a pop-up with the evaluation of the game:
    (<script cross origin src="https://unpkg.com/react@17/umd/react.production.min.js "><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js "><script src="https://unpkg.com/@salutejs/client@1.2.1/umd/assistant.production.min.js "> )

  2. I call it by pressing a button like this:
    html5.run("<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js "><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js "><script src="https://unpkg.com/@salutejs/client@1.2.1/umd/assistant.production.min.js “><script type=“text/javascript”>window.assistant.createAssistant({getState: () => {return {};},});window.assistant.sendData({ action: { action_id: ‘SHOW_RATING_SUGGEST’} });”)

  3. But when you start the game, the interface does not respond to pressing the button. I will think more … :))

1 Like
#7

Could you create a small repro? Or share a part of code available for GUI handling? (gui_script)

1 Like
#8

Sure! HG5Test.zip — Яндекс.Диск

#9

Let me only check - Do you try in Editor builds or did you build html5 and uploaded the project to some website?

html5 is a module available only in html5 builds, maybe this is why you don’t get any reaction?

For example, when running in Editor you’ll get an output in Console saying:
ERROR:SCRIPT: main/splash.gui_script:54: attempt to index global ‘html5’ (a nil value)
stack traceback:
main/splash.gui_script:54: in function <main/splash.gui_script:49>

When I build a HTML5 version, the button is “clickable”, but the error in browser occurs just after clicking :wink: You can check out a console (syntax problem):

image
image2053×326 79 KB

#10

This game should start on the platform https://salute.sber.ru / This is their script. It allows you to show the user the evaluation form of the game. Yes, that’s right. I run it on the web server and inside the salute. I can’t figure out if the error is in the incorrect script launch or on the salute side. Maybe I’m wrapping the script in html incorrectly?

1 Like
#11

There is surely a syntax error in a string provided to html5.run(), check out if a count of < and > pairs is correct :wink:
When I replaced it with just html5.run("") - it works (proceeds to main screen) :wink:

2 Likes
#12

This is a new hypothesis for me! :)) I will try it! Thank you for your time!

#13

I’m sorry, I checked out an API for html5.run() - it executes the provided string as JS, not HTML, hence a problem with < in the very beginning. You must provide here a JS chunk :confused:

#14

Try something like this, it should work: :wink:

html5.run(“document.write(<script crossorigin src=\"https://unpkg.com/react@17/umd/react.production.min.js\"></script><script crossorigin src=\"https://unpkg.com/react-dom@17/umd/react-dom.production.min.js\"></script><script src=\"https://unpkg.com/@salutejs/client@1.2.1/umd/assistant.production.min.js\"></script><script type=\"text/javascript\">window.assistant.createAssistant({getState: () => {return {};},});window.assistant.sendData({ action: { action_id: 'SHOW_RATING_SUGGEST'} });</script>)”)

1 Like
#15

Thank you very much! This code has been added to my project. Unfortunately, so far the result is the same. I think the problem may be on the salute side. The ticket was created for them. I’ll wait for the answer.

1 Like
#16

Ok, great! But was it pushing something after clicking with this code? For me there were some errors in console, but the splash gui changed :wink:

1 Like
#17

Unfortunately, it hasn’t changed yet… This problem seems simple, but my head is broken :)) https://hgvk.startgram.space/
The screen saver loaded in salute, but there is no reaction to pressing

1 Like