Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Creating a number adjustor

    I taught myself HTML and stayed far away from anything more complicated than that for a long time. Mostly because I just don't like asking for help. I'm officially desperate!

    I'm making a website for an RPG among friends, and essentially I want them to be able to edit their character stats live on the page. When I asked a friend, she told me she wasn't experienced enough for it, but that it'd probably be a javascript thing.

    Essentially, what I want to code would look and work like this.



    I have no idea where to start, so I'm looking for a point in the right direction. I found that HTML5 will let me adjust numbers perfectly - I just can't figure out a way to adjust the minimum and maximum values via a number outside of each individual field. (Hopefully, that makes sense to someone here...) I was thinking perhaps a combination of HTML5 and Javascript would help me tremendously.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts
    I don't do RPGs so could you explain a bit more what you expect to happen
    with the image you provided?

    Is the strength, endurance and agility supposed to increase and decrease
    each time the '+' or '-' button is clicked? What is the initial setting?

    What are the minimum and maximum values for each power that can be selected?

    Where do the 'remaining points' come from and how are they initialized?

    Is each column supposed to represent a different player?

  • Users who have thanked jmrker for this post:

    elipanda (12-14-2013)

  • #3
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    lol The picture was less helpful than I hoped, sorry. Essentially the first column is the 'before' and the second column is 'after.'

    The + and - should increase and decrease the number between them, yes.

    When they got on their page, they'd have zero in everything, and they would work with 'remaining points'. Which could be, for the sake of example, 20. Then they could split those 20 points into the categories as they choose.

    Each character has a different page, so I'll be doing just one "form" per page.

    I have a very minimal, very flawed code written up;

    <form name="humanstat" oninput="o.value = parseInt(Strength.value) + parseInt(Endurance.value) + parseInt(Agility.value) + parseInt(Intelligence.value) + parseInt(Bonus.value)">
    <input type="number" min="0" max="18" step="1" value="0" name="Strength">
    <br><input type="number" min="0" max="10" step="1" value="5" name="Endurance">
    <br><input type="number" min="0" max="10" step="1" value="5" name="Agility">
    <br><input type="number" min="0" max="10" step="1" value="5" name="Intelligence">
    <br><input type="number" min="0" max="10" step="1" value="5" name="Bonus">
    <br><output name="o"></output> / 10
    <br><input type="submit" value="Finish">
    </form>
    The problems with this code are (A)there is no way to save the data that the player puts in - it refreshes when you hit 'submit.', rather than just staying there. (B) There is no way to limit the points that they can work with.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    Without further input, this is just a SWAG.

    See if you can see the underlying logic and make further modifications...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> RPG Settings </title>
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?p=1380467#post1380467
    
    function player(nom,strength,endurance,agility) {
      this.nom = nom;
      this.strength = strength;
      this.endurance = endurance;
      this.agility = agility;
    }
    
    var myFather = new player('Dad',10,10,10);
    var myMother = new player('Mom',7,8,9);
    
    player.prototype.get = function(power) {
      var info;
      switch (power) {
        case 'nom' : info = this.nom; break;
        case 'strength' : info = this.strength; break;
        case 'endurance' : info = this.endurance; break;
        case 'agility' : info = this.agility; break;
      } return info;
    }
    player.prototype.set = function(power) {
      var info;
      switch (power) {
        case 'nom' : this.nom = info; break;
        case 'strength' : this.strength = info; break;
        case 'endurance' : this.endurance = info; break;
        case 'agility' : this.agility = info; break;
      } return info;
    }
    player.prototype.add = function(power) {
      var info;
      switch (power) {
        case 'strength' : this.strength++; break;
        case 'endurance' : this.endurance++; break;
        case 'agility' : this.agility++; break;
      } return info;
    }
    player.prototype.sub = function(power) {
      var info;
      switch (power) {
        case 'strength' : this.strength--; break;
        case 'endurance' : this.endurance--; break;
        case 'agility' : this.agility--; break;
      } return info;
    }
    </script>
    
    </head>
    <body>
    <div id="debug"></div>
    <table border="0" width="40%">
     <tr>
      <th> Player
       <button onclick="alert(myFather.get('nom'))">Name</button>
      </th>
      <th> Player
       <button onclick="alert(myMother.get('nom'))">Name</button>
      </th>
     </tr>
     <tr>
      <th>
       <button onclick="myFather.sub('strength')">-</button>
       <button onclick="alert(myFather.get('strength'))">Strength</button>
       <button onclick="myFather.add('strength')">+</button>
      </th>
      <th>
       <button onclick="myMother.sub('strength')">-</button>
       <button onclick="alert(myMother.get('strength'))">Strength</button>
       <button onclick="myMother.add('strength')">+</button>
      </th>
     </tr>
     <tr>
      <th>
       <button onclick="myFather.sub('endurance')">-</button>
       <button onclick="alert(myFather.get('endurance'))">Endurance</button>
       <button onclick="myFather.add('endurance')">+</button>
      </th>
      <th>
       <button onclick="myMother.sub('endurance')">-</button>
       <button onclick="alert(myMother.get('endurance'))">Endurance</button>
       <button onclick="myMother.add('endurance')">+</button>
      </th>
     </tr>
     <tr>
      <th>
       <button onclick="myFather.sub('agility')">-</button>
       <button onclick="alert(myFather.get('agility'))">Agility</button>
       <button onclick="myFather.add('agility')">+</button>
      </th>
      <th>
       <button onclick="myMother.sub('agility')">-</button>
       <button onclick="alert(myMother.get('agility'))">Agility</button>
       <button onclick="myMother.add('agility')">+</button>
      </th>
     </tr>
    </table>
    
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    elipanda (12-14-2013)

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Arrow

    Quote Originally Posted by elipanda View Post

    ...

    When they got on their page, they'd have zero in everything, and they would work with 'remaining points'. Which could be, for the sake of example, 20. Then they could split those 20 points into the categories as they choose.

    ...

    The problems with this code are (A)there is no way to save the data that the player puts in - it refreshes when you hit 'submit.', rather than just staying there. (B) There is no way to limit the points that they can work with.
    Initialize the points in the initialization section.

    You will either need to save the parameters to a database or store into a cookie or use localStorage.
    Use of either will depend upon your needs.
    Reload saved parameters to continue game at a later time.

    Limits to points is just a bit more logic, but need to know more
    so I just don't continue guessing.

  • #6
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Initialize the points in the initialization section.

    You will either need to save the parameters to a database or store into a cookie or use localStorage.
    Use of either will depend upon your needs.
    Reload saved parameters to continue game at a later time.

    Limits to points is just a bit more logic, but need to know more
    so I just don't continue guessing.
    The code you gave is very foreign, but very interesting. I'm checking it out.

    I don't know how, but I was thinking of using a cookie from what I've been reading. What is localStorage?

    As for the limits to the character points, they should be different for each character, that's why I wasn't more specific.

    Sorry I'm so bad with explanations. Just an amateur, if you can even call me that, here.

    Really, really thankful for your help.

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    Your image of the before and after of one player confused me at first
    until it determined that your math was wrong.
    If you add 8 clicks to strength of 1 to get 9
    you will reduce the remaining points to 2, not 1.

    This version does NOT check if you add or subtract more points for a particular power
    than you have remaining. I'll leave that to you to change.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> RPG Settings </title>
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthre...67#post1380467
    
    function player(nom,strength,endurance,agility,original) {
      this.nom = nom;
      this.strength = strength;
      this.endurance = endurance;
      this.agility = agility;
      this.original = original;
    }
    
    player.prototype.get = function(power) {
      var info;
      switch (power) {
        case 'nom' : info = this.nom; break;
        case 'strength' : info = this.strength; break;
        case 'endurance' : info = this.endurance; break;
        case 'agility' : info = this.agility; break;
        case 'original' : info = this.original; break;
      } return info;
    }
    player.prototype.set = function(power,info) {
      switch (power) {
        case 'nom' : this.nom = info; break;
        case 'strength' : this.strength = info; break;
        case 'endurance' : this.endurance = info; break;
        case 'agility' : this.agility = info; break;
        case 'original' : this.original = info; break;
      }
    }
    player.prototype.add = function(power) {
      switch (power) {
        case 'strength' : this.strength++; this.original--; break;
        case 'endurance' : this.endurance++; this.original--; break;
        case 'agility' : this.agility++; this.original--; break;
      } updatePlayers();
    }
    player.prototype.sub = function(power) {
      switch (power) {
        case 'strength' : this.strength--; this.original++; break;
        case 'endurance' : this.endurance--; this.original++; break;
        case 'agility' : this.agility--; this.original++; break;
      } updatePlayers();
    }
    </script>
    
    </head>
    <body>
    <div id="debug"></div>
    <table border="0" width="50%">
     <tr>
      <th> Player : <span id="player0"></span> </th>
      <th> Player : <span id="player1"></span> </th>
     </tr>
     <tr>
      <th>
       <button onclick="myFather.sub('strength')">-</button>
       Strength: <span id="strength0"></span>
       <button onclick="myFather.add('strength')">+</button>
      </th>
      <th>
       <button onclick="myMother.sub('strength')">-</button>
       Strength: <span id="strength1"></span>
       <button onclick="myMother.add('strength')">+</button>
      </th>
     </tr>
     <tr>
      <th>
       <button onclick="myFather.sub('endurance')">-</button>
       Endurance: <span id="endurance0"></span>
       <button onclick="myFather.add('endurance')">+</button>
      </th>
      <th>
       <button onclick="myMother.sub('endurance')">-</button>
       Endurance: <span id="endurance1"></span>
       <button onclick="myMother.add('endurance')">+</button>
      </th>
     </tr>
     <tr>
      <th>
       <button onclick="myFather.sub('agility')">-</button>
       Agility: <span id="agility0"></span>
       <button onclick="myFather.add('agility')">+</button>
      </th>
      <th>
       <button onclick="myMother.sub('agility')">-</button>
       Agility: <span id="agility1"></span>
       <button onclick="myMother.add('agility')">+</button>
      </th>
     </tr>
     <tr>
      <th> Remaining: <span id="original0"></span> </th>
      <th> Remaining: <span id="original1"></span> </th>
     </tr>
    </table>
    
    <script type="text/javascript">
    
    var myFather = new player('Dad',1,1,1,10);
    var myMother = new player('Mom',0,0,0,20);
    
    function updatePlayers() {
      document.getElementById('player0').innerHTML = myFather.get('nom');
      document.getElementById('strength0').innerHTML = myFather.get('strength');
      document.getElementById('endurance0').innerHTML = myFather.get('endurance');
      document.getElementById('agility0').innerHTML = myFather.get('agility');
      document.getElementById('original0').innerHTML = myFather.get('original');
    
      document.getElementById('player1').innerHTML = myMother.get('nom');
      document.getElementById('strength1').innerHTML = myMother.get('strength');
      document.getElementById('endurance1').innerHTML = myMother.get('endurance');
      document.getElementById('agility1').innerHTML = myMother.get('agility');
      document.getElementById('original1').innerHTML = myMother.get('original');
    }
    
    window.onload = function() {
      updatePlayers();
    }
    </script>
    
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •