EOS Question - Health bar

[boundupone]

I am thinking of my next tease idea, and would like to include health bar type idea (so bar fills up or empties depending on what happens in the tease) like in computer games (think every fighting game)

I have no idea if this is possible in EOS so any help would be great

[Thamrill]

I am thinking of my next tease idea, and would like to include health bar type idea (so bar fills up or empties depending on what happens in the tease) like in computer games (think every fighting game)

I have no idea if this is possible in EOS so any help would be great

This is just a draft idea that came to me; I'm in no way expert of JavaScript nor I have ever created a working tease, but taking some inspiration from viewtopic.php?f=2&t=23415 you can use a notification with only a title set to be a sequence of "█" for part of the bar that is full and "░" for part of the bar that is emptied.
If you create a notification named health and you've got a variable curHealth in your variables you could go something like this in an eval action:

Code: Select all

var healthBar="Health\t";
for (i = 0; i < 10; i++) {
  if(i<curHealth){
    healthBar += "█";
  }else{
    healthBar += "░";
  }
}
Notification.get("health").setTitle(healthBar);

You can test it here:
https://milovana.com/webteases/showteas ... 666fca9467

[boundupone]

That is exactly what I want to do, thank you. But I am having difficulty replicating, can you share the code please for your demo so I can see it all.

Cheers

[Thamrill]

That is exactly what I want to do, thank you. But I am having difficulty replicating, can you share the code please for your demo so I can see it all.

Cheers

Code: Select all

"start": [
      {
        "notification.create": {
          "id": "health",
          "title": "Health"
        }
      },
      {
        "eval": {
          "script": "var curHealth=10;\r\n\r\nvar healthBar=\"Health\\t\";\r\nfor (i = 0; i < 10; i++) {\r\n  if(i<curHealth){\r\n    healthBar += \"█\";\r\n  }else{\r\n    healthBar += \"░\";\r\n  }\r\n}\r\n\r\nNotification.get(\"health\").setTitle(healthBar);"
        }
      },
      {
        "say": {
          "label": "<p>Start</p>",
          "mode": "pause"
        }
      },
      {
        "say": {
          "label": "<p>You suffered damage </p>",
          "mode": "pause"
        }
      },
      {
        "eval": {
          "script": "var curHealth=8;\r\n\r\nvar healthBar=\"Health\\t\";\r\nfor (i = 0; i < 10; i++) {\r\n  if(i<curHealth){\r\n    healthBar += \"█\";\r\n  }else{\r\n    healthBar += \"░\";\r\n  }\r\n}\r\n\r\nNotification.get(\"health\").setTitle(healthBar);"
        }
      }
    ]

Here is the code for the specific page. Clearly rather than using a "var curHealth" at every eval you should have it from your code elsewhere (e.g., from teaseStorage)

[boundupone]

Thanks, I am still missing something, maybe I am not doing the init script for the var right?

var curHealth=0;

[boundupone]

Ah, OK, I got it working, thanks man

[Thamrill]

Thanks, I am still missing something, maybe I am not doing the init script for the var right?

var curHealth=0;

I've got a more "Advanced" version of the solution I posted before.

In your intiScript define:

Code: Select all

var maxHealth=10;		//defines max characeter health
var curHealth=maxHealth;	//defines starting health
var healthBarLength=10;	//defines how many "█" are used to represent health

function updateHeathBar() {
  var healthBar="Health\t";
  var threshold=healthBarLength*curHealth/maxHealth;
  for (i = 0; i < healthBarLength; i++) {
    if(i<threshold){
      healthBar += "█";
    }else{
      healthBar += "░";
    }
  }
Notification.get("health").setTitle(healthBar);
}

Add a Notification.Create action identified as "health". Follow the creation action with an eval action:

Code: Select all

updateHeathBar();

Then in your evals where health is varied:

Code: Select all

curHealth-=2;	//for 2 damage; use += for healing
updateHeathBar();

[boundupone]

awesome, that works perfectly, thanks for your help