Neo-Teyrall : ajout d’une systeme example

2026-04-30T09:11:58Z

ajout d’une systeme example

← Version précédente		Version du 30 avril 2026 à 11:11
Ligne 226 :		Ligne 226 :
	Also, the buttons don’t need perfect formatting — you can arrange them however you like.		Also, the buttons don’t need perfect formatting — you can arrange them however you like.
	[[Fichier:Tuto_progress_bar3_ex2.png\|centré\|700x700px]]		[[Fichier:Tuto_progress_bar3_ex2.png\|centré\|700x700px]]

			=== Live example ===
			You can see a live example in the [https://lets-role.com/system/wikic-progress-bar-27601 Wikic - ProgressBar.] To see the code and the components [[Fork]] it in your systems libarry.

Neo-Teyrall le 20 septembre 2025 à 19:46

2025-09-20T19:46:18Z

← Version précédente		Version du 20 septembre 2025 à 21:46
Ligne 25 :		Ligne 25 :
	<li>A '''NumberInput''' for the maximum value → <code>"bar1_max_value"</code></li>		<li>A '''NumberInput''' for the maximum value → <code>"bar1_max_value"</code></li>
	<li>A '''Label''' that will display the progress bar → <code>"bar1_progress"</code></li>		<li>A '''Label''' that will display the progress bar → <code>"bar1_progress"</code></li>
			<li>⚠️ Check the markdown checkbox of the label to have the proper display</li>

	[[Fichier:Tuto_progress_bar1.png\|centré\|700x700px]]		[[Fichier:Tuto_progress_bar1.png\|centré\|700x700px]]
	init = function(sheet){		init = function(sheet){

Neo-Teyrall : petit ajustement et correction de certain bug

2025-09-10T10:53:02Z

petit ajustement et correction de certain bug

Voir les modifications

Neo-Teyrall : premier jet pour la progress bar

2025-09-01T23:12:15Z

premier jet pour la progress bar

Nouvelle page

= Progress Bars =
A progress bar is a visual element that can be used to display, in a more playful way, the number of hit points, mana, or any other resource of your character sheet.

There are several methods to build a progress bar. In this page, we’ll cover '''four different approaches''', each with its own advantages and disadvantages.
----

== Dynamic Progress Bar ==
Let’s start with the simplest method. The '''dynamic progress bar''' makes it easy to manage large ranges of values and is highly customizable, since its appearance can be modified in just a few clicks.

With some coding skill, you can even make progress bars that players themselves can personalize.

The bar works in a very simple way:

* The '''filled portion''' of the bar is displayed using one symbol (for example, a filled square).
* The '''empty portion''' is displayed using another symbol (or left blank).

⚠️ The drawback is that this bar is '''not interactive'''. To change its value, you’ll need to add [+] and [–] buttons or directly edit the NumberInput components.
[[Fichier:Tuto progress bar1 ex.png|centré|700x700px]]
----

=== 🔧 How to Build It ===
You need '''3 components''':

* A '''NumberInput''' for the current value → <code>"bar1_current_value"</code>
* A '''NumberInput''' for the maximum value → <code>"bar1_max_value"</code>
* A '''Label''' that will display the progress bar → <code>"bar1_progress"</code>
[[Fichier:Tuto progress bar1.png|centré|700x700px]]
init = function(sheet){
initProgressBar(sheet,"bar1_progress", "bar1_current_value",
"bar1_max_value", ":ga_plain-square:",
":ga_square:",10);
}
const initProgressBar = function(sheet,bar_id, current_value_id, max_value_id, fill_icon, empty_icon, line_length ){
let current = sheet.get(current_value_id);
let max = sheet.get(max_value_id);
let bar = sheet.get(bar_id);
const updateBar = function(){
let current_value = current.value();
let max_value = max.value();
let bar_value = "";
for(let i = 0; i < max_value; i++) {
if (i != 0 && i%line_length==0){
bar_value += "\n";
}
if ( i < current_value){
bar_value += fill_icon;
} else {
bar_value += empty_icon;
}
}
if (max_value < current_value){
current.value(max_value);
}
bar.value(bar_value);
}
current.on("update", updateBar);
max.on("update", updateBar);
}

✨ You can modify its appearance by:

* Changing the classes of <code>"bar1_progress"</code>.
* Adjusting the line length argument.
* Using any available icon in LetsRole.

== Two-Color Progress Bar ==
This progress bar is an upgrade of the first one: it differentiates the '''filled''' and '''empty''' portions with '''two different colors'''.
[[Fichier:Tuto progress bar2 ex.png|centré|700x700px]]
----

=== 🔧 How to Build It ===
You’ll need '''5 components''':

* A '''NumberInput''' for the current value → <code>"bar2_current_value"</code>
* A '''NumberInput''' for the maximum value → <code>"bar2_max_value"</code>
* Two '''Labels side by side''' → <code>"bar3_progress_middle_c1"</code> and <code>"bar3_progress_middle_c2"</code> (these form the mixed line with the last filled + empty parts)
* A '''Label above''' for fully filled lines → <code>"bar3_progress_c1"</code>
* A '''Label below''' for fully empty lines → <code>"bar3_progress_c2"</code>
[[Fichier:Tuto progress bar2.png|centré|700x700px]]
init = function(sheet){
initProgressBarTwoColor(sheet, "bar3_progress_c1", "bar3_progress_middle_c1",
"bar3_progress_c2", "bar3_progress_middle_c2",
"bar3_current_value", "bar3_max_value",
":ga_plain-square:", ":ga_plain-square:",10);
}
const initProgressBarTwoColor = function(sheet,sub_bar_c1_id, bar_c1_id,
sub_bar_c2_id,bar_c2_id,
current_value_id, max_value_id,
fill_icon, empty_icon, line_length){
let current = sheet.get(current_value_id);
let max = sheet.get(max_value_id);
let sub_bar1 = sheet.get(sub_bar_c1_id);
let bar1 = sheet.get(bar_c1_id);
let sub_bar2 = sheet.get(sub_bar_c2_id);
let bar2 = sheet.get(bar_c2_id);
const stringMul = function(string, mul){
let out_string = "";
for(let i = 0 ; i < mul ; i++){
if(i != 0 && i % line_length == 0){
out_string += "\n";
}
out_string += string;
}
return out_string;
}
const updateBar = function(){
let current_value = current.value();
let max_value = max.value();
if (max_value < current_value){
current.value(max_value);
current_value = max_value;
}
let left = max_value - current_value;
let on_top_bar = current_value - (current_value % line_length);
let on_midle_bar1 = current_value % line_length;
let on_midle_bar2 = (left < line_length - on_midle_bar1) ? left : line_length - on_midle_bar1;
let on_bot_bar = max_value - current_value - on_midle_bar2;
sub_bar1.value(stringMul(fill_icon, on_top_bar));
bar1.value(stringMul(fill_icon, on_midle_bar1));
bar2.value(stringMul(empty_icon, on_midle_bar2));
sub_bar2.value(stringMul(empty_icon , on_bot_bar));
}
current.on("update", updateBar);
max.on("update", updateBar);
}

✨ Like the first version, it’s fully customizable — but with an '''extra color''' to highlight different resources.
----

== Clickable Progress Bar ==
This progress bar is '''interactive''': players can click on it to change its value.

⚠️ Drawbacks:

* More difficult and time-consuming to set up.
* The maximum value must be fixed when designing the sheet (not dynamic).

Here, the '''NumberInputs can be hidden''' so only the bar is visible.

[[Fichier:Tuto progress bar3 ex.png|700x700px]]
----

=== 🔧 How to Build It ===
You’ll need:

* A '''NumberInput''' for the current value → <code>"bar4_current_value"</code>
* A '''NumberInput''' for the maximum value → <code>"bar4_max_value"</code>
* A '''series of Labels or Icons''' equal to the max size (e.g., <code>bar4_0</code>, <code>bar4_1</code>, ..., <code>bar4_30</code>)
[[Fichier:Tuto progress bar3.png|700x700px]]
init = function(sheet){
initButtonProgressBar(sheet,"bar4_", 20, "bar4_current_value", "bar4_max_value", "text-success ", "text-danger opacity-50" , "d-none");
}
const initButtonProgressBar = function(sheet,bar_prefix, bar_nb_element, current_value_id, max_value_id, fill_class, empty_class, disable_class ){
let current= sheet.get(current_value_id);
let max = sheet.get(max_value_id);
let empty_class_list = empty_class.split(" ");
let fill_class_list = fill_class.split(" ");
const addClasses = function(cmp, class_list){
for(let c of class_list){ cmp.addClass(c); }
}
const removeClasses = function(cmp, class_list){
for(let c of class_list){ cmp.removeClass(c); }
}
const updateBarOnButton = function(progress){
for (let i = 0; i < bar_nb_element; i++){
let button_i = sheet.get(bar_prefix + i);
if (i <= progress){
removeClasses(button_i, empty_class_list);
addClasses(button_i, fill_class_list);
} else {
removeClasses(button_i, fill_class_list);
addClasses(button_i, empty_class_list);
}
}
}
const updateMax = function(){
let max_value = max.value()-1;
for (let i = 0; i < bar_nb_element; i++){
let button_i = sheet.get(bar_prefix + i);
if ( i <= max_value){
button_i.removeClass(disable_class);
} else {
button_i.addClass(disable_class);
}
}
}
const init_a_button = function(n){
let button_i = sheet.get(bar_prefix + n);
button_i.on("click", function(){
current.value(n);
updateBarOnButton(n);
});
}
for(let i = 0 ; i < bar_nb_element ; i++){
init_a_button(i);
}
max.on("update",updateMax);
current.on("update",function(){updateBarOnButton(current.value()-1)});
updateBarOnButton(current.value()-1);
updateMax();
}

✨ Although harder to implement, this bar is '''very user-friendly''' since players can simply click on it.

Also, the buttons don’t need perfect formatting — you can arrange them however you like.
[[Fichier:Tuto progress bar3 ex2.png|centré|700x700px]]

Progress bar - Historique des versions

Neo-Teyrall : ajout d’une systeme example

Neo-Teyrall le 20 septembre 2025 à 19:46

Neo-Teyrall : petit ajustement et correction de certain bug

Neo-Teyrall : premier jet pour la progress bar

Neo-Teyrall : ajout d’une systeme example

Neo-Teyrall : petit ajustement et correction de certain bug

Neo-Teyrall : premier jet pour la progress bar