Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

joystick cant be reloaded when change the view #18

Closed
hawkpurpletree opened this issue Jan 5, 2021 · 2 comments
Closed

joystick cant be reloaded when change the view #18

hawkpurpletree opened this issue Jan 5, 2021 · 2 comments

Comments

@hawkpurpletree
Copy link

Im using this code to change the view

var showView = function (id) {
        var view = document.getElementById(id);
        var all_views = document.querySelectorAll('view');
        // Hide all containers
        for (var i = 0; i < all_views.length; i++) {
            all_views[i].style.display = 'none';
        }

        // Show container
        view.style.display = 'block';
    };

in the body, the joystick is defined two times

<body onload="window.app = new App()">
    <!-- Add your HTML elements here -->
    <div id="loading_view" class="view">Loading ...</div>
    <div id="ingame_attack" class="view">
        <div id="pass-button" ontouchstart="window.app.sendMessageToScreen('pass')"></div>
        <div id="shoot-button" ontouchstart="window.app.sendMessageToScreen('shoot')"></div>
        <div id="joyDiv"></div>
    </div>
    <div id="ingame_defense" class="view">
        <div id="change-button" ontouchstart="window.app.sendMessageToScreen('pass')"></div>
        <div id="tackle-button" ontouchstart="window.app.sendMessageToScreen('shoot')"></div>
        <div id="joyDiv"></div>
    </div>
</body>

in css i defined the joystick this way

#joyDiv {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 80%;
            height: 80%;
            background-size: contain;
            background-repeat: no-repeat;
        }

the first time i call showView('ingame_attack'); the joystick works fine
the problem is when i change in the middle of the game to "ingame_defense", the joystick stop moving

im developing an AirConsole game with Unity 2019.4,
for this code, i followed this tutorial
https://franzeus.medium.com/the-airconsole-controller-your-smartphone-is-the-gamepad-588875f944d7#.zfhidyi4j

i tried with a joyDiv2 in the css, body and showview (adding "joy = new JoyStick('joyDiv2');"), but the old joystick remains in the place, and anytime i call showview, a new joystick appear
@hawkpurpletree
Copy link
Author

first, there is a bug, when i change the view, the old stuff remains, this is because the line
var all_views = document.querySelectorAll('view');
must be
var all_views = document.querySelectorAll('div.view');

and second, i found two solutions for this problem

with two separated joysticks for every mode

in the html

var joy;
var joy1;
var joy2;

in the main app in the html

                joy1 = new JoyStick('joyDiv');
		joy = joy1;

		this.airconsole.onMessage = function(from, data) {
		    if (data.view) {
		        showView(data.view);
		        if (joy2 == null)
		            joy2 = new JoyStick('joyDiv2');
		        if (joy == joy1)
		            joy = joy2;
		        else
                            joy = joy1;
		    }
		}

in body

    <div id="ingame_attack" class="view">
        <div id="pass-button" ontouchstart="window.app.sendMessageToScreen('pass')"></div>
        <div id="shoot-button" ontouchstart="window.app.sendMessageToScreen('shoot')"></div>
        <div id="joyDiv"></div>
    </div>
    <div id="ingame_defense" class="view">
        <div id="change-button" ontouchstart="window.app.sendMessageToScreen('pass')"></div>
        <div id="tackle-button" ontouchstart="window.app.sendMessageToScreen('shoot')"></div>
        <div id="joyDiv2"></div>
    </div>

with a separated div for joystick

in body

    <div id="ingame_attack" class="view">
        <div id="pass-button" ontouchstart="window.app.sendMessageToScreen('pass')"></div>
        <div id="shoot-button" ontouchstart="window.app.sendMessageToScreen('shoot')"></div>
    </div>
    <div id="ingame_defense" class="view">
        <div id="change-button" ontouchstart="window.app.sendMessageToScreen('pass')"></div>
        <div id="tackle-button" ontouchstart="window.app.sendMessageToScreen('shoot')"></div>
    </div>
    <div id="ingame_joystick" class="view">
        <div id="joyDiv"></div>
    </div>

in html, in the funcion show view

var showView = function (id) {
    var view = document.getElementById(id);
      var all_views = document.querySelectorAll('div.view');
      // Hide all containers
      for (var i = 0; i < all_views.length; i++) {
          all_views[i].style.display = 'none';
      }

      // Show container
      view.style.display = 'block';

      document.getElementById('ingame_joystick').style.display = 'block';

  };

@bobboteck
Copy link
Owner

Sorry @hawkpurpletree, but I don't understand the problem.
What I can tell you is that if you have to use multiple JoySticks on the page, you must assign each DIV that will contain the JoyStick, a different ID, as you can also see on the example page [https://github.com/bobboteck/JoyStick/blob /master/joy.html].
You could call them Joy1 and Joy2, or to be clearer in your scope code, JoyAttack and JoyDefense.

However if you want to ask a few more questions, you can also use the GitHub Discussions that I have activated and found here [https://github.com/bobboteck/JoyStick/discussions], instead of using the Issues.

If you are interested, I recently published the project as an NPM package.

To close, I would be very curious to see your finished project, to see how you used the JoyStick, then if you want there is a Wiki page where I have published some projects that use it, and if it is possible for you I would like to add yours too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bobboteck @hawkpurpletree