Wiki Let's Role - Contributions [fr]

Fork

2026-04-30T09:48:13Z

Neo-Teyrall : premier jet sur ls fork

Most systems available on Let’s Roll are created by the community, for the community.

In this spirit, users are encouraged to copy existing systems in order to:

* get inspiration,
* create a modified version,
* or add custom rules for a specific campaign.

This copying mechanism is called a '''fork''', and it is fully automated by Let’s Roll.

=== How to Fork a System ===
Follow these steps to copy an existing system:

# Go to the '''Store'''.
# Find and select the system you want to copy.
# Open the system’s page.
# Click on the '''Fork''' tab.
# Click the '''Fork''' button to create your copy.

Once the fork is complete:

* The system is copied into your '''System Builder'''.
* You can freely edit and customize it.
* The original system remains unchanged.

Progress bar

2026-04-30T09:11:58Z

Neo-Teyrall : ajout d’une systeme example

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 [https://game-icons.net/1x1/delapouite/plain-square.html ga_plain-square]).
* The '''empty portion''' is displayed using another symbol (for example a [https://game-icons.net/1x1/delapouite/square.html ga_square] or a space " ").

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

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

<li>A '''NumberInput''' for the current value → <code>"bar1_current_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>⚠️ Check the markdown checkbox of the label to have the proper display</li>

[[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:

<ul><li> Changing the classes of <code>"bar1_progress"</code> by changing the [[Styling character sheets with classes|color or the size]].</li>
<li>Adjusting the line length argument.</li>
<li>Using any available icon in LetsRole ([https://fontawesome.com/v5/search?o=r&m=free&s=solid list1] [https://yesicon.app/game-icons liste2]).</li></ul>

== 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''':

<li>A '''NumberInput''' for the current value → <code>"bar2_current_value"</code></li>
<li>A NumberInput for the maximum value → <code>"bar2_max_value"</code></li>
*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)
<li>A '''Label above''' for fully filled lines → <code>"bar3_progress_c1"</code></li>
*A '''Label below''' for fully empty lines → <code>"bar3_progress_c2"</code>
[[Fichier:Tuto_progress_bar2.png|centré|700x700px]]
init = function(sheet){
initProgressBarTwoColor(sheet, "bar2_progress_c1", "bar2_progress_middle_c1",
"bar2_progress_c2", "bar2_progress_middle_c2",
"bar2_current_value", "bar2_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 easily 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).
*Each icon can display a différent icon.

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

[[Fichier:Tuto_progress_bar3_ex.png|700x700px]]
<hr />

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

<ul><li> A '''NumberInput''' for the current value → <code>"bar4_current_value"</code></li>
<li>A NumberInput for the maximum value → <code>"bar4_max_value"</code></li>
<li>A '''series of Labels or Icons''' equal to the max size whithe precise id name (e.g., <code resource="Fichier:Tuto progress bar3.png" height width>bar4_0</code>, <code>bar4_1</code>, ..., <code>bar4_30</code>, ...)</li></ul>
[[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 button_container = sheet.get(button_container_id);

let empty_class_list = empty_class.split(" ");
let fill_class_list = fill_class.split(" ");

const addClasses = function(cmp, class_liste){
for(let i = 0; i< class_liste.length; i++){
cmp.addClass(class_liste[i]);
}
}

const removeClasses = function(cmp, class_liste){
for(let i = 0; i< class_liste.length; i++){
cmp.removeClass(class_liste[i]);
}
}

const updateBarOnButton = function(progress){
let i = 0;
while (i < bar_nb_element){
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);
}
i++;
}
}

const updateMax = function(){
let i = 0;
let max_value = max.value()-1;
while (i < bar_nb_element){
let button_i = sheet.get(bar_prefix + i);
if ( i <= max_value){
button_i.removeClass(disable_class);
} else {
button_i.addClass(disable_class);
}
i++;
}
}

const barClicked = function(btn){
if(btn.id().includes(bar_prefix)){
let n = parseInt(btn.id().split(bar_prefix)[1]);
current.value(n);
updateBarOnButton(n);
}
}

button_container.on("click",".label",barClicked);
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]]

=== 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.

Asynchrone play

2025-11-28T22:00:11Z

Neo-Teyrall :

Let’s Roll is not designed to be used asynchronously. There is no native way to play asynchronously.

However, there are methods to play asynchronously by tracking your players’ actions with a timestamp.

This page explains how to set up a timestamp system and how to link it to bindings in order to follow each action performed by your players.
[[Fichier:Date example.png|centré]]

'''Getting the date and time'''

To obtain the current time, you can use the following function. It gives you the current date, which is very useful for asynchronous sessions that take place over a week. For longer sessions, use the [[Advanced time function|advanced function]] (link).

const heure = function (time_zone) {
const jours = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
now = Date.now(); // epoc
dateBase = new Date("2025-01-06"); // A Monday
delta = (now - dateBase) / 1000 + time_zone * 60 * 60; // seconds
s = delta % 60;
delta = Math.floor(delta / 60); // minutes
m = delta % 60;
delta = Math.floor(delta / 60); // hours
h = delta % 24;
delta = Math.floor(delta / 24); // Day
j = jours[delta % 7];
return j + " " + h + ":" + (m < 10 ? "0" + m : m);
}

'''Sending a timestamped message'''

To send a timestamped message, you will need to set up a message sender so your players can specify the action they want to perform and the contextual roll.

'''Writing the message'''
[[Fichier:Chate date.png|vignette]]
The following example shows a view that you can add to one of your tabs.

– a field for the action name: id “date_title”

– an area for writing a long message: “date_message”

– a field for the roll title: “date_roll_title”

– a field to enter a roll to perform: “date_roll”

– a button to send the message to the chat: “date_send_message”

– a field to specify your time zone: “date_time_zone”

[[Fichier:Message date.png|vignette]]
'''Displaying the message'''

You must create a view (id: “view_message”) to display the message in the chat.

It must contain at least:

– a label to display the message text (text = “if(#text = 0, ‘[Text]’, #text)”)

– a label to display the result of the action (text = “if(#roll = 0, ‘[Roll]’, #roll)”)

– a label containing the name of the character who performed the action (text = “if(#perso = 0, ‘[Perso]’, #perso)”)

– a label that contains the date of the action (text = “if(#time = 0, ‘[Time]’, #time)”)

Once all of this is in place, you can use the following script, which connects everything together.

init = function(sheet) {
if (sheet.id() === "main") {
initMain(sheet);
}
};
const initMain = function(sheet) {
// Main initialization
dateMessage(sheet);
};

const dateMessage = function (sheet) {
let date_send_message = "date_send_message";
let title = sheet.get("date_title");
let dice_roll = sheet.get("date_roll");
let roll_title = sheet.get("date_roll_title");
let message = sheet.get("date_message");
let button_message = sheet.get(date_send_message);
let time_zone = sheet.get("date_time_zone");
// display the message with the roll results
const result_message = function (result) {
log("START : action roll cliked");
messageChat(sheet, title.value(), message.value(), result.total, time_zone.value());
}
// setup the roll
const button_click = function () {
log("START : roll cliked");
let roll = new RollBuilder(sheet);
if (dice_roll.value() == ""){
roll = roll.expression("0");
} else {
roll = roll.expression(dice_roll.value());
}
roll = roll.visibility("all");
roll = roll.title(roll_title.value());
// renseigner la fonction automatique
roll = roll.onRoll(result_message);
roll.roll();
log("END : roll clicked")
}
button_message.on("click", button_click);
// The functoin Send the message in the chat.
const messageChat = function (sheet, titre, texte, result, time_zone) {
let binding_name = sheet.properName() + " : " + titre;
Bindings.add(binding_name, "sheet", "view_message", function (sheet) {
const h = time_complete(time_zone);
const data = {
text: texte,
roll: result,
perso: sheet.properName(),
time: h
};
return data;
})
Bindings.send(sheet, binding_name); // Send message to chat
Bindings.remove(binding_name); // Delete the binding
}
}

Asynchrone play

2025-11-28T21:55:30Z

Neo-Teyrall :

Let’s Roll is not designed to be used asynchronously. There is no native way to play asynchronously.

However, there are methods to play asynchronously by tracking your players’ actions with a timestamp.

This page explains how to set up a timestamp system and how to link it to bindings in order to follow each action performed by your players.
[[Fichier:Date example.png|centré]]

'''Getting the date and time'''

To obtain the current time, you can use the following function. It gives you the current date, which is very useful for asynchronous sessions that take place over a week. For longer sessions, use the [[Advanced time function|advanced function]] (link).

const heure = function (time_zone) {
const jours = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
now = Date.now(); // epoc
dateBase = new Date("2025-01-06"); // A Monday
delta = (now - dateBase) / 1000 + time_zone * 60 * 60; // seconds
s = delta % 60;
delta = Math.floor(delta / 60); // minutes
m = delta % 60;
delta = Math.floor(delta / 60); // hours
h = delta % 24;
delta = Math.floor(delta / 24); // Day
j = jours[delta % 7];
return j + " " + h + ":" + (m < 10 ? "0" + m : m);
}

'''Sending a timestamped message'''

To send a timestamped message, you will need to set up a message sender so your players can specify the action they want to perform and the contextual roll.

'''Writing the message'''
[[Fichier:Chate date.png|vignette]]
The following example shows a view that you can add to one of your tabs.

– a field for the action name: id “date_title”

– an area for writing a long message: “date_message”

– a field for the roll title: “date_roll_title”

– a field to enter a roll to perform: “date_roll”

– a button to send the message to the chat: “date_send_message”

– a field to specify your time zone: “date_time_zone”

[[Fichier:Message date.png|vignette]]
'''Displaying the message'''

You must create a view (id: “view_message”) to display the message in the chat.

It must contain at least:

– a label to display the message text (text = “if(#text = 0, ‘[Text]’, #text)”)

– a label to display the result of the action (text = “if(#roll = 0, ‘[Roll]’, #roll)”)

– a label containing the name of the character who performed the action (text = “if(#perso = 0, ‘[Perso]’, #perso)”)

– a label that contains the date of the action (text = “if(#time = 0, ‘[Time]’, #time)”)

Once all of this is in place, you can use the following script, which connects everything together.

const dateMessage = function (sheet) {
let date_send_message = "date_send_message";
let title = sheet.get("date_title");
let dice_roll = sheet.get("date_roll");
let roll_title = sheet.get("date_roll_title");
let message = sheet.get("date_message");
let button_message = sheet.get(date_send_message);
let time_zone = sheet.get("date_time_zone");
// display the message with the roll results
const result_message = function (result) {
log("START : action roll cliked");
messageChat(sheet, title.value(), message.value(), result.total, time_zone.value());
}
// setup the roll
const button_click = function () {
log("START : roll cliked");
let roll = new RollBuilder(sheet);
if (dice_roll.value() == ""){
roll = roll.expression("0");
} else {
roll = roll.expression(dice_roll.value());
}
roll = roll.visibility("all");
roll = roll.title(roll_title.value());
// renseigner la fonction automatique
roll = roll.onRoll(result_message);
roll.roll();
log("END : roll clicked")
}
button_message.on("click", button_click);
// The functoin Send the message in the chat.
const messageChat = function (sheet, titre, texte, result, time_zone) {
let binding_name = sheet.properName() + " : " + titre;
Bindings.add(binding_name, "sheet", "view_message", function (sheet) {
const h = time_complete(time_zone);
const data = {
text: texte,
roll: result,
perso: sheet.properName(),
time: h
};
return data;
})
Bindings.send(sheet, binding_name); // Send message to chat
Bindings.remove(binding_name); // Delete the binding
}
}

Fichier:Date example.png

2025-11-28T21:54:34Z

Neo-Teyrall :

Asynchrone play

2025-11-28T21:41:36Z

Neo-Teyrall : premier jet de finalisation

Let’s Roll is not designed to be used asynchronously. There is no native way to play asynchronously.

However, there are methods to play asynchronously by tracking your players’ actions with a timestamp.

This page explains how to set up a timestamp system and how to link it to bindings in order to follow each action performed by your players.

'''Getting the date and time'''

To obtain the current time, you can use the following function. It gives you the current date, which is very useful for asynchronous sessions that take place over a week. For longer sessions, use the [[Advanced time function|advanced function]] (link).

const heure = function (time_zone) {
const jours = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
now = Date.now(); // epoc
dateBase = new Date("2025-01-06"); // A Monday
delta = (now - dateBase) / 1000 + time_zone * 60 * 60; // seconds
s = delta % 60;
delta = Math.floor(delta / 60); // minutes
m = delta % 60;
delta = Math.floor(delta / 60); // hours
h = delta % 24;
delta = Math.floor(delta / 24); // Day
j = jours[delta % 7];
return j + " " + h + ":" + (m < 10 ? "0" + m : m);
}

'''Sending a timestamped message'''

To send a timestamped message, you will need to set up a message sender so your players can specify the action they want to perform and the contextual roll.

'''Writing the message'''
[[Fichier:Chate date.png|vignette]]
The following example shows a view that you can add to one of your tabs.

– a field for the action name: id “date_title”

– an area for writing a long message: “date_message”

– a field for the roll title: “date_roll_title”

– a field to enter a roll to perform: “date_roll”

– a button to send the message to the chat: “date_send_message”

– a field to specify your time zone: “date_time_zone”

[[Fichier:Message date.png|vignette]]
'''Displaying the message'''

You must create a view (id: “view_message”) to display the message in the chat.

It must contain at least:

– a label to display the message text (text = “if(#text = 0, ‘[Text]’, #text)”)

– a label to display the result of the action (text = “if(#roll = 0, ‘[Roll]’, #roll)”)

– a label containing the name of the character who performed the action (text = “if(#perso = 0, ‘[Perso]’, #perso)”)

– a label that contains the date of the action (text = “if(#time = 0, ‘[Time]’, #time)”)

Once all of this is in place, you can use the following script, which connects everything together.

const dateMessage = function (sheet) {
let date_send_message = "date_send_message";
let title = sheet.get("date_title");
let dice_roll = sheet.get("date_roll");
let roll_title = sheet.get("date_roll_title");
let message = sheet.get("date_message");
let button_message = sheet.get(date_send_message);
let time_zone = sheet.get("date_time_zone");
// display the message with the roll results
const result_message = function (result) {
log("START : action roll cliked");
messageChat(sheet, title.value(), message.value(), result.total, time_zone.value());
}
// setup the roll
const button_click = function () {
log("START : roll cliked");
let roll = new RollBuilder(sheet);
if (dice_roll.value() == ""){
roll = roll.expression("0");
} else {
roll = roll.expression(dice_roll.value());
}
roll = roll.visibility("all");
roll = roll.title(roll_title.value());
// renseigner la fonction automatique
roll = roll.onRoll(result_message);
roll.roll();
log("END : roll clicked")
}
button_message.on("click", button_click);
// The functoin Send the message in the chat.
const messageChat = function (sheet, titre, texte, result, time_zone) {
let binding_name = sheet.properName() + " : " + titre;
Bindings.add(binding_name, "sheet", "view_message", function (sheet) {
const h = time_complete(time_zone);
const data = {
text: texte,
roll: result,
perso: sheet.properName(),
time: h
};
return data;
})
Bindings.send(sheet, binding_name); // Send message to chat
Bindings.remove(binding_name); // Delete the binding
}
}

Fichier:Chate date.png

2025-11-28T21:39:54Z

Neo-Teyrall :

Fichier:Message date.png

2025-11-28T21:39:47Z

Neo-Teyrall :

Asynchrone play

2025-11-28T21:37:10Z

Neo-Teyrall : Page créée avec « Let’s Roll is not designed to be used asynchronously. There is no native way to play asynchronously. However, there are methods to play asynchronously by tracking your players’ actions with a timestamp. This page explains how to set up a timestamp system and how to link it to bindings in order to follow each action performed by your players. '''Getting the date and time''' To obtain the current time, you can use the following function. It gives you the cu... »

Let’s Roll is not designed to be used asynchronously. There is no native way to play asynchronously.

However, there are methods to play asynchronously by tracking your players’ actions with a timestamp.

This page explains how to set up a timestamp system and how to link it to bindings in order to follow each action performed by your players.

'''Getting the date and time'''

To obtain the current time, you can use the following function. It gives you the current date, which is very useful for asynchronous sessions that take place over a week. For longer sessions, use the [[Advanced time function|advanced function]] (link).

const heure = function (time_zone) {
const jours = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
now = Date.now(); // epoc
dateBase = new Date("2025-01-06"); // A Monday
delta = (now - dateBase) / 1000 + time_zone * 60 * 60; // seconds
s = delta % 60;
delta = Math.floor(delta / 60); // minutes
m = delta % 60;
delta = Math.floor(delta / 60); // hours
h = delta % 24;
delta = Math.floor(delta / 24); // Day
j = jours[delta % 7];
return j + " " + h + ":" + (m < 10 ? "0" + m : m);
}

'''Sending a timestamped message'''

To send a timestamped message, you will need to set up a message sender so your players can specify the action they want to perform and the contextual roll.

'''Writing the message'''

The following example shows a view that you can add to one of your tabs.

– a field for the action name: id “date_title”

– an area for writing a long message: “date_message”

– a field for the roll title: “date_roll_title”

– a field to enter a roll to perform: “date_roll”

– a button to send the message to the chat: “date_send_message”

– a field to specify your time zone: “date_time_zone”

'''Displaying the message'''

You must create a view (id: “view_message”) to display the message in the chat.

It must contain at least:

– a label to display the message text (text = “if(#text = 0, ‘[Text]’, #text)”)

– a label to display the result of the action (text = “if(#roll = 0, ‘[Roll]’, #roll)”)

– a label containing the name of the character who performed the action (text = “if(#perso = 0, ‘[Perso]’, #perso)”)

– a label that contains the date of the action (text = “if(#time = 0, ‘[Time]’, #time)”)

Once all of this is in place, you can use the following script, which connects everything together.

const dateMessage = function (sheet) {
let date_send_message = "date_send_message";
let title = sheet.get("date_title");
let dice_roll = sheet.get("date_roll");
let roll_title = sheet.get("date_roll_title");
let message = sheet.get("date_message");
let button_message = sheet.get(date_send_message);
let time_zone = sheet.get("date_time_zone");
// display the message with the roll results
const result_message = function (result) {
log("START : action roll cliked");
messageChat(sheet, title.value(), message.value(), result.total, time_zone.value());
}
// setup the roll
const button_click = function () {
log("START : roll cliked");
let roll = new RollBuilder(sheet);
if (dice_roll.value() == ""){
roll = roll.expression("0");
} else {
roll = roll.expression(dice_roll.value());
}
roll = roll.visibility("all");
roll = roll.title(roll_title.value());
// renseigner la fonction automatique
roll = roll.onRoll(result_message);
roll.roll();
log("END : roll clicked")
}
button_message.on("click", button_click);
// The functoin Send the message in the chat.
const messageChat = function (sheet, titre, texte, result, time_zone) {
let binding_name = sheet.properName() + " : " + titre;
Bindings.add(binding_name, "sheet", "view_message", function (sheet) {
const h = time_complete(time_zone);
const data = {
text: texte,
roll: result,
perso: sheet.properName(),
time: h
};
return data;
})
Bindings.send(sheet, binding_name); // Send message to chat
Bindings.remove(binding_name); // Delete the binding
}
}

Advanced time function

2025-11-28T21:33:36Z

Neo-Teyrall : fonction avancé pour obtenir l’heure

System Builder

2025-11-28T21:22:07Z

Neo-Teyrall : ajout d’un section sur le jeu asynchrone

The System Builder is a tool for creating game systems for the [https://lets-role.com/ Let's Roll] gaming tables. It allows for the comprehensive construction of various essential tools such as player character sheets, as well as the creation of non-player character sheets, objects, and game monitoring tools for Game Masters.

The tool is accessible to anyone with a Let's Roll account. It is designed so that anyone can develop their own system without any coding knowledge. The System Builder is equipped with coding tools (pseudoJS) that allow for the creation of complex, non-essential functionalities that will add a bit of convenience.

=== First step ===
Quickstart video guide for creating systems in Let’s Role (🇫🇷 ''French only)''

https://www.youtube.com/watch?v=F141URrFVwo
[[Fichier:Video_thumbnail_Start_on_SB.png|néant|vignette]]

==== Interface ====
[[Fichier:Systemebuilder global.png|centré|vignette|900x900px]]

# The title of the edited system
# [[Manage views|C]]<nowiki/>[[Manage views|reate new views]], navigate between [views]...
# The list of [[components|c]]<nowiki/>[[components|omponents]] usable for building a view
# [[Manage views|The dependency tree of views]]
# Launch the system on a table to [test the system]
# The tabs [view], [table], [script], [translation], the tools to develop a system
# The [preview of the sheet]
# The buttons [[Save, Deploy, and Exit]].
# The panel of the selected [component parameters]

===== Views =====
Views are trees of components. They can be instantiated by the [tab] component or the [repeater] component to create complex and well-organized sheets.

==== Creating a New View ====
To create a new view, click on the "Create a new view" button. Fill in the popup with an ID (no capital letters, no special characters, no numbers, and use underscores to separate words), for example: "vue_armes". To switch views, use the dropdown list.

==== Building a View ====
To build a view, use the components in window 3 by dragging and dropping them into the component tree of the view in window 4.

===== Layout Components =====
Layout components are used to structure and organize components among themselves, such as rows, columns, and containers.

TODO: Link to a tutorial

===== Form Components =====
Form components are designed to contain the information for your character sheet.

===== Container Components =====
Containers are components that can contain views to create complete and dynamic sheets.

=== Special Components ===
Special components allow you to perform specific and essential actions for a character sheet.

==== Tables ====
Tables are spreadsheets that allow you to provide information for certain components, such as lists, tabs, etc.

==== Script ====
The script is a JS file that allows you to perform more complete and complex actions than managing views alone.

[[FirstScript|Your first step in the script]]

=== Tutorials ===

#[[Styling character sheets with classes|Build character sheets with Bootstrap]]
# [[Put a dice roll result in the sheet]]
# [[Use lists]]
# [[Use tabs]]
# [[Use repeaters]]
# [[Use Prompt]]
# [[Button|Use Button]]
# [[Manage Roll]]
# [[Show or hide components]]
# [[Progress bar]]
# [https://lets-role.com/help/fr/documentation/v1/component/avatar Configure the avatar properly]
# [[Create your first game table]]
# [[Asynchrone play]]

Use tabs

2025-10-09T14:05:32Z

Neo-Teyrall : ajout d’un lien

= Using Tabs =

== Step 1: Insert the Tab component ==
Insert a '''Tab''' component in your main view. You don’t need to place anything else inside the view.

== Step 2: Create a table ==
Create a new '''Table''' (click on '''Tables''' on the right of '''Views''' in the ''SystemBuilder''). This table should contain:

* an '''id''' column
* a '''title''' column
* a '''view''' column

Add one row for each Tab you want to include in your Tab component (see image 3).

== Step 3: Link the table to the Tab component ==
Select your Tab component (in the main view) and fill in the following fields:

* '''Table''' → your created table
* '''Title''' → the ''title'' column
* '''View ID''' → the ''view'' column

== Step 4: Customize the display ==
You can customize how the Tabs are displayed:

* Show Tabs as a column instead of a row (check '''Vertical''')
* Display labels vertically (check '''Vertical text''')
* Show Tab labels on the right instead of the left (via the drop-down menu)

== Step 5: Create subviews ==
For each Tab, create a '''Subview''' ('''[[Manage views|Create a new view]]''' → Type '''SubComponent''').

* Use the '''id''' corresponding to the ''view'' column
* Optional: use the ''title'' column value as the subview name

These subviews will contain the content of each Tab.

System Builder

2025-10-08T17:22:21Z

Neo-Teyrall : ajout de l’image du tuto

System Builder

2025-10-08T17:00:57Z

Neo-Teyrall : ajout d’un nouveau tuto pour les bouton

The System Builder is a tool for creating game systems for the [https://lets-role.com/ Let's Roll] gaming tables. It allows for the comprehensive construction of various essential tools such as player character sheets, as well as the creation of non-player character sheets, objects, and game monitoring tools for Game Masters.

The tool is accessible to anyone with a Let's Roll account. It is designed so that anyone can develop their own system without any coding knowledge. The System Builder is equipped with coding tools (pseudoJS) that allow for the creation of complex, non-essential functionalities that will add a bit of convenience.

=== First step ===
Quickstart video guide for creating systems in Let’s Role (🇫🇷 ''French only)''

https://www.youtube.com/watch?v=F141URrFVwo
[[Fichier:Video_thumbnail_Start_on_SB.png|néant|vignette]]

==== Interface ====
Inserez l'image de l'interface

# The title of the edited system
# [[Manage views|C]]<nowiki/>[[Manage views|reate new views]], navigate between [views]...
# The list of [[components|c]]<nowiki/>[[components|omponents]] usable for building a view
# [The dependency tree of views]
# Launch the system on a table to [test the system]
# The tabs [view], [table], [script], [translation], the tools to develop a system
# The [preview of the sheet]
# The buttons [[Save, Deploy, and Exit]].
# The panel of the selected [component parameters]

===== Views =====
Views are trees of components. They can be instantiated by the [tab] component or the [repeater] component to create complex and well-organized sheets.

==== Creating a New View ====
To create a new view, click on the "Create a new view" button. Fill in the popup with an ID (no capital letters, no special characters, no numbers, and use underscores to separate words), for example: "vue_armes". To switch views, use the dropdown list.

==== Building a View ====
To build a view, use the components in window 3 by dragging and dropping them into the component tree of the view in window 4.

===== Layout Components =====
Layout components are used to structure and organize components among themselves, such as rows, columns, and containers.

TODO: Link to a tutorial

===== Form Components =====
Form components are designed to contain the information for your character sheet.

===== Container Components =====
Containers are components that can contain views to create complete and dynamic sheets.

=== Special Components ===
Special components allow you to perform specific and essential actions for a character sheet.

==== Tables ====
Tables are spreadsheets that allow you to provide information for certain components, such as lists, tabs, etc.

==== Script ====
The script is a JS file that allows you to perform more complete and complex actions than managing views alone.

[[FirstScript|Your first step in the script]]

=== Tutorials ===

#[[Styling character sheets with classes|Build character sheets with Bootstrap]]
# [[Put a dice roll result in the sheet]]
# [[Use lists]]
# [[Use tabs]]
# [[Use repeaters]]
# [[Use Prompt]]
# [[Button|Use Button]]
# [[Manage Roll]]
# [[Show or hide components]]
# [[Progress bar]]
# [https://lets-role.com/help/fr/documentation/v1/component/avatar Configure the avatar properly]
# [[Create your first game table]]

Manage Roll

2025-10-08T16:59:36Z

Neo-Teyrall : Page créée avec «  This page explains how to perform dice rolls using a script, how to present sub-rolls to the user, and how to interact with the results. Several examples of roll construction are presented here. Among the different ways to build a roll, the most recommended one is using the '''RollBuilder'''. ---- == Simple Roll == A simple roll consists of performing a dice roll triggered by a button through a script. This action can be done without a complex script. === R... »

This page explains how to perform dice rolls using a script, how to present sub-rolls to the user, and how to interact with the results. Several examples of roll construction are presented here.

Among the different ways to build a roll, the most recommended one is using the '''RollBuilder'''.
----

== Simple Roll ==
A simple roll consists of performing a dice roll triggered by a button through a script. This action can be done without a complex script.

=== Required Components ===
For this script, you will need:

* an icon that acts as a button (''<code>roll1_button</code>''),
* a text input containing the dice expression (''<code>roll1_value</code>'').

=== The script performs the following actions: ===

# retrieves the components by their ID,
# creates a function that prepares the roll using the provided expression (for example: ''1d20''),
# connects this function to the “click” event of the button.

const initSimpleRoll = function (sheet, id_roll_button, id_roll_value) {
// 1
let roll_button = sheet.get(id_roll_button);
let roll_value = sheet.get(id_roll_value);
// 2
const roll = function () {
log("START : simple roll cliked");
// creer le jet
let roll = new RollBuilder(sheet);
// configuer le jet
roll = roll.expression(roll_value.value());
roll = roll.visibility("all");
roll = roll.title("Simple Roll");
// lancer le jet
roll.roll();
log("END : simple roll clicked");
}
// 3
roll_button.on("click", roll);
}

== Add an Action to a Roll ==
In many game systems, player actions consist of multiple rolls. For example, an attack may require a first roll to determine if the target is hit, and a second roll to calculate the damage.

You can add '''sub-actions''' to your rolls. These actions appear as small white buttons below the result of the main roll.

=== View Composition ===
For this example, you will need:

* two text inputs containing the expressions of the main and sub-rolls (''<code>roll2_value</code>'' and ''<code>roll2_action_value</code>''),
* one button to trigger the first roll (''<code>roll2_button</code>'').

The corresponding script:

# retrieves the components by their IDs,
# creates a function that performs the sub-action when it is clicked,
# prepares the first roll and attaches the action to it,
# connects everything to the click event on the button.

const initActionRoll = function (sheet, id_roll_button, id_roll_value, id_roll_action_value) {
// 1
let roll_button = sheet.get(id_roll_button);
let roll_value = sheet.get(id_roll_value);
let roll_action_value = sheet.get(id_roll_action_value);
// 2
const rollAction = function (result) {
log("START : action roll cliked");
let roll_action = new RollBuilder(sheet);
roll_action = roll_action.expression(roll_action_value.value());
roll_action = roll_action.visibility("all");
roll_action = roll_action.title("Action Roll");
roll_action.roll();
log("END : action roll clicked");
}
// 3
const roll = function () {
log("START : roll cliked");
let roll = new RollBuilder(sheet);
roll = roll.expression(roll_value.value());
roll = roll.visibility("all");
roll = roll.title("Roll");
roll = roll.addAction("Action name", rollAction);
roll.roll();
log("END : roll clicked");
}
// 4
roll_button.on("click", roll);
}
This allows you to add multiple actions to your rolls.

For each additional action, simply create a new function (<nowiki>''rollAction1'', ''rollAction2''</nowiki>, etc.) with the desired behavior and add it to the main roll.

The <nowiki>''results''</nowiki> argument passed to an action function contains the result of the parent roll.

This allows you to detect specific cases such as critical hits and adjust the behavior accordingly.

== Automatic Action ==
An automatic action is a secondary effect that triggers as soon as a roll is completed. It can be used, for example, to:

* automatically record the result of a roll on the sheet,
* update a resource such as mana or health points.

==== Building the View ====
For this example, you will need:

* a button to trigger the roll (<code>roll3_button</code>),
* a text input containing the roll expression (<code>roll3_value</code>),
* a component where the result will be displayed (<code>roll3_mark</code>).

The associated script:

# retrieves the components by their IDs,
# creates a function that writes the roll result automatically in the designated component,
# creates a function that is triggered when the button is clicked,
# links both functions together to execute the automatic action.

const initAutoAction = function(sheet,id_roll_button, id_roll_value, id_roll_mark){
// 1
let roll_button = sheet.get(id_roll_button);
let roll_value = sheet.get(id_roll_value);
let roll_mark = sheet.get(id_roll_mark);
//2
const autoAction = function (result) {
log("START : action roll cliked");
roll_mark.value(result.total);
}
// 3
const roll = function () {
log("START : roll cliked");
let roll = new RollBuilder(sheet);
roll = roll.expression(roll_value.value());
roll = roll.visibility("all");
roll = roll.title("Roll");
// renseigner la fonction automatique
roll = roll.onRoll(autoAction);
roll.roll();
log("END : roll clicked")
}
//4
roll_button.on("click", roll);
}
This approach allows you to add many automation features to your character sheet.

You can also combine regular and automatic actions, or even nest actions inside other actions to create complex game mechanics.

Button

2025-10-08T16:27:24Z

Neo-Teyrall : ajout d’un tuto pour les lancé de jet

= Buttons =
Buttons are components that can trigger multiple actions.

There are three main ways to create a button: the first two are simple, while the third allows you to build more complex buttons.

== Button with an icon ==

# Add an '''Icon''' component and choose the desired icon.
# You can assign an action to the icon in two different ways:
#* Fill in the '''Roll''' field with a dice roll and the roll’s title.
#* Add the class '''clickable''' and [link|connect the button to a JS script].

== Button with a label ==

# Add a '''Label''' component and set the text to the value you want.
# Create an action for the button in two ways:
#* Fill in the '''Roll''' field with a dice roll and check the '''Clickable''' option.
#* Add the class '''clickable''' and connect the button to a JS script.

== Complex button with a container ==
Sometimes, you may want to create more advanced buttons by overlaying multiple elements (icons, labels, etc.).

# Place a '''Container'''.
# Add the elements you want to overlay inside this container.
# Add the '''position-absolute''' class to each of the components inside the container so that they overlap.
# Use m and p] classes to adjust positioning.
# Adjust opacity, size, and color to differentiate the elements.
# Finally, add the '''clickable''' class to the parent container so that the whole button reacts on hover.
# Assign an '''id''' to the container (e.g., ''button_action'') so you can connect it to your script.

== Connect the button to a script ==
To link a button to a scripted action:

# Define a clear '''id''' for your button (e.g., ''button_action'', ''button_roll'', ''button_hide''...).
# Create an initialization function to connect the button to an action.

init = function(sheet) {
if (sheet.id() === "main") {
initMain(sheet);
}
};
const initMain = function(sheet) {
// Main initialization
initButton(sheet);
};
const initButton = function(sheet){
log("START INIT BUTTON");
// Define the button action when clicked
const buttonAction = function () {
// Add instructions to execute here
};
// Get the button component using its ID
let button = sheet.get("button_action");
// Connect the "click" action to the buttonAction function
button.on("click", buttonAction);
log("END INIT BUTTON");
};

== Using buttons ==
You can find tutorials that use buttons here:

# [[Manage Roll]]
# Hide and show elements [TODO]
# Send information to the chat [TODO]
# Move a view inside a repeater [TODO]

System Builder

2025-10-01T12:06:02Z

Neo-Teyrall : ajout du fien vers le boutton

The System Builder is a tool for creating game systems for the [https://lets-role.com/ Let's Roll] gaming tables. It allows for the comprehensive construction of various essential tools such as player character sheets, as well as the creation of non-player character sheets, objects, and game monitoring tools for Game Masters.

The tool is accessible to anyone with a Let's Roll account. It is designed so that anyone can develop their own system without any coding knowledge. The System Builder is equipped with coding tools (pseudoJS) that allow for the creation of complex, non-essential functionalities that will add a bit of convenience.

=== First step ===
Quickstart video guide for creating systems in Let’s Role (🇫🇷 ''French only)''

https://www.youtube.com/watch?v=F141URrFVwo
[[Fichier:Video_thumbnail_Start_on_SB.png|néant|vignette]]

==== Interface ====
Inserez l'image de l'interface

# The title of the edited system
# [[Manage views|C]]<nowiki/>[[Manage views|reate new views]], navigate between [views]...
# The list of [[components|c]]<nowiki/>[[components|omponents]] usable for building a view
# [The dependency tree of views]
# Launch the system on a table to [test the system]
# The tabs [view], [table], [script], [translation], the tools to develop a system
# The [preview of the sheet]
# The buttons [[Save, Deploy, and Exit]].
# The panel of the selected [component parameters]

===== Views =====
Views are trees of components. They can be instantiated by the [tab] component or the [repeater] component to create complex and well-organized sheets.

==== Creating a New View ====
To create a new view, click on the "Create a new view" button. Fill in the popup with an ID (no capital letters, no special characters, no numbers, and use underscores to separate words), for example: "vue_armes". To switch views, use the dropdown list.

==== Building a View ====
To build a view, use the components in window 3 by dragging and dropping them into the component tree of the view in window 4.

===== Layout Components =====
Layout components are used to structure and organize components among themselves, such as rows, columns, and containers.

TODO: Link to a tutorial

===== Form Components =====
Form components are designed to contain the information for your character sheet.

===== Container Components =====
Containers are components that can contain views to create complete and dynamic sheets.

=== Special Components ===
Special components allow you to perform specific and essential actions for a character sheet.

==== Tables ====
Tables are spreadsheets that allow you to provide information for certain components, such as lists, tabs, etc.

==== Script ====
The script is a JS file that allows you to perform more complete and complex actions than managing views alone.

[[FirstScript|Your first step in the script]]

=== Tutorials ===

#[[Styling character sheets with classes|Build character sheets with Bootstrap]]
# [[Put a dice roll result in the sheet]]
# [[Use lists]]
# [[Use tabs]]
# [[Use repeaters]]
# [[Use Prompt]]
# [[Button|Use Button]]
# [[Show or hide components]]
# [[Progress bar]]
# [https://lets-role.com/help/fr/documentation/v1/component/avatar Configure the avatar properly]
# [[Create your first game table]]

Use Prompt

2025-09-27T21:42:23Z

Neo-Teyrall : correction des tablutation

In Let's Role, '''prompts''' are used to display a window showing text or a form to collect information.
This is very useful to ask for confirmation, or to request bonuses or penalties related to a roll.

To create and use a prompt, you need to use a '''script''' and build a '''view'''.

This page shows three tutorials, from the simplest to the most advanced:

* a tutorial to create a prompt that simply displays text (for tutorials or tooltips),
* a tutorial to chain multiple prompts to build a multi-page tutorial,
* a tutorial to use prompts as forms to input modifiers or additional dice in a roll.

== Tutorial 1: Create a simple prompt ==

=== Create a button ===
The first step is to create a [[button]] that triggers the script.

Note: you can trigger a prompt with any other event in your script.
[[Fichier:Tuto prompt tutorial view 1.png|vignette]]

=== Build a prompt view ===
The prompt that appears is actually a '''[[Manage views|view]]''' you need to build.

The ID of this view must be defined properly, since it will be used in the script.

=== Script ===
Here is a script that manages the prompt display.
This function does three things:

* detects the click on the button,
* shows the prompt,
* handles the closing of the prompt.

Most of these actions are handled by the '''[https://lets-role.com/help/fr/documentation/v1/scripting/api-prompt sheet.prompt(...)]''' function.

The third argument is optional, but allows you to close the prompt when the ''Continue'' button is clicked.
[[Fichier:Tuto prompt example 1.png|vignette]]
const promptTutorial = function(sheet){
let tutorial_view = "view_prompt_tutorial";
let tutorial_title = "prompt tutorial";
let tutorial_button = sheet.get("display_tutorial_1");

tutorial_button.on("click", function(){
sheet.prompt(tutorial_title, tutorial_view, function(){});
})
}

== Tutorial 2: Chained prompts ==
A chained tutorial shows several pages in sequence.
When you click ''Continue'', the next page is displayed.
[[Fichier:Tuto prompt tutorial view 2.png|vignette]]

=== Create a button ===
As in the first tutorial, create a button to trigger the prompt.

=== Create the views ===
Each page of the tutorial must be created as a separate view.

=== Script ===
The display of the next page is requested in the closing function of the previous prompt.
const promptTutorial2 = function(sheet){
let tutorial_view_1 = "view_prompt_tutorial";
let tutorial_view_2 = "view_prompt_tutorial_2";
let tutorial_title = "prompt tutorial";
let tutorial_button = sheet.get("display_tutorial_2");

tutorial_button.on("click", function(){
sheet.prompt(tutorial_title + " (1/2)", tutorial_view_1, function(){
sheet.prompt(tutorial_title + " (2/2)", tutorial_view_2, function(){})
});
})
}

== Tutorial 3: Prompt as a form ==
A prompt can also be used as a '''form''' to collect information, fill fields, or add variables to a roll.
[[Fichier:Tuto prompt form button.png|vignette]]

=== Create a button ===
Prepare a button that will open the prompt, just like a roll [[button]].
[[Fichier:Tuto prompt form.png|vignette]]

=== Create the prompts ===
Build your prompts with appropriate input fields ('''TextInput''', '''NumberInput''', etc.).

For example, a prompt that asks for the roll name and a modifier.

=== Prepare a script ===
The script must include a closing function to handle and process the entered data.

You can also define an initialization function to configure the display (e.g. pre-fill some fields).
const initPromptExample = function (sheet) {
log("START init prompt");

// Prompt initialization
const promptInitialization = function (prompte_view) {
log("START prompt initialization");
prompte_view.get("prompt_name").value(sheet.get("prompt_name").value());
prompte_view.get("prompt_roll").value(sheet.get("prompt_roll").value());
log("END prompt initialization");
}

// Process prompt results
const promptAccepte = function (prompte_results) {
log("START prompt results");
let roll = prompte_results.prompt_roll;
log("mod : [" + prompte_results.prompt_modificator + "]");
if (prompte_results.prompt_modificator != undefined && prompte_results.prompt_modificator != 0) {
roll += "+" + prompte_results.prompt_modificator + "[Modifier]";
}
log("-- roll : " + roll);
Dice.roll(sheet, roll, prompte_results.prompt_name);
log("END prompt results");
}

// ID of the view displayed as prompt
let prompt_view = "view_prompt";
let prompt_name = "";
let roll_button = sheet.get("prompt_roll_button");

// Show the prompt when the button is clicked
roll_button.on("click", function () {
sheet.prompt(prompt_name, prompt_view, promptAccepte, promptInitialization);
});
log("END init prompt");
}
[[Fichier:Tuto prompt form display.png|centré]]

Use Prompt

2025-09-27T21:33:02Z

Neo-Teyrall : fin des ajput

Fichier:Tuto prompt form display.png

2025-09-27T21:31:04Z

Neo-Teyrall :

Use Prompt

2025-09-27T21:17:09Z

Neo-Teyrall : les image sont ajouter

Fichier:Tuto prompt tutorial view 2.png

2025-09-27T21:14:11Z

Neo-Teyrall : Neo-Teyrall a téléversé une nouvelle version de Fichier:Tuto prompt tutorial view 2.png

Use Prompt

2025-09-27T21:06:04Z

Neo-Teyrall : premier jet sans les image

= Prompts =
In Let's Role, '''prompts''' are used to display a window showing text or a form to collect information.
This is very useful to ask for confirmation, or to request bonuses or penalties related to a roll.

To create and use a prompt, you need to use a '''script''' and build a '''view'''.

This page shows three tutorials, from the simplest to the most advanced:

* a tutorial to create a prompt that simply displays text (for tutorials or tooltips),
* a tutorial to chain multiple prompts to build a multi-page tutorial,
* a tutorial to use prompts as forms to input modifiers or additional dice in a roll.

== Tutorial 1: Create a simple prompt ==

=== Create a button ===
The first step is to create a [[button]] that triggers the script.

Note: you can trigger a prompt with any other event in your script.

=== Build a prompt view ===
The prompt that appears is actually a '''[[Manage views|view]]''' you need to build.

The ID of this view must be defined properly, since it will be used in the script.

=== Script ===
Here is a script that manages the prompt display.
This function does three things:

* detects the click on the button,
* shows the prompt,
* handles the closing of the prompt.

Most of these actions are handled by the '''[https://lets-role.com/help/fr/documentation/v1/scripting/api-prompt sheet.prompt(...)]''' function.

The third argument is optional, but allows you to close the prompt when the ''Continue'' button is clicked.

const promptTutorial = function(sheet){
let tutorial_view = "view_prompt_tutorial";
let tutorial_title = "prompt tutorial";
let tutorial_button = sheet.get("display_tutorial_1");

tutorial_button.on("click", function(){
sheet.prompt(tutorial_title, tutorial_view, function(){});
})
}

== Tutorial 2: Chained prompts ==
A chained tutorial shows several pages in sequence.
When you click ''Continue'', the next page is displayed.

=== Create a button ===
As in the first tutorial, create a button to trigger the prompt.

=== Create the views ===
Each page of the tutorial must be created as a separate view.

=== Script ===
The display of the next page is requested in the closing function of the previous prompt.
const promptTutorial2 = function(sheet){
let tutorial_view_1 = "view_prompt_tutorial";
let tutorial_view_2 = "view_prompt_tutorial_2";
let tutorial_title = "prompt tutorial";
let tutorial_button = sheet.get("display_tutorial_2");

tutorial_button.on("click", function(){
sheet.prompt(tutorial_title + " (1/2)", tutorial_view_1, function(){
sheet.prompt(tutorial_title + " (2/2)", tutorial_view_2, function(){})
});
})
}

== Tutorial 3: Prompt as a form ==
A prompt can also be used as a '''form''' to collect information, fill fields, or add variables to a roll.

=== Create a button ===
Prepare a button that will open the prompt, just like a roll [[button]].

=== Create the prompts ===
Build your prompts with appropriate input fields ('''TextInput''', '''NumberInput''', etc.).

For example, a prompt that asks for the roll name and a modifier.

=== Prepare a script ===
The script must include a closing function to handle and process the entered data.

You can also define an initialization function to configure the display (e.g. pre-fill some fields).
const initPromptExample = function (sheet) {
log("START init prompt");

// Prompt initialization
const promptInitialization = function (prompte_view) {
log("START prompt initialization");
prompte_view.get("prompt_name").value(sheet.get("prompt_name").value());
prompte_view.get("prompt_roll").value(sheet.get("prompt_roll").value());
log("END prompt initialization");
}

// Process prompt results
const promptAccepte = function (prompte_results) {
log("START prompt results");
let roll = prompte_results.prompt_roll;
log("mod : [" + prompte_results.prompt_modificator + "]");
if (prompte_results.prompt_modificator != undefined && prompte_results.prompt_modificator != 0) {
roll += "+" + prompte_results.prompt_modificator + "[Modifier]";
}
log("-- roll : " + roll);
Dice.roll(sheet, roll, prompte_results.prompt_name);
log("END prompt results");
}

// ID of the view displayed as prompt
let prompt_view = "view_prompt";
let prompt_name = "";
let roll_button = sheet.get("prompt_roll_button");

// Show the prompt when the button is clicked
roll_button.on("click", function () {
sheet.prompt(prompt_name, prompt_view, promptAccepte, promptInitialization);
});
log("END init prompt");
}

Fichier:Tuto prompt tutorial view 1.png

2025-09-27T21:05:46Z

Neo-Teyrall :

Fichier:Tuto prompt tutorial view 2.png

2025-09-27T21:05:38Z

Neo-Teyrall :

Fichier:Tuto prompt example 1.png

2025-09-27T21:05:30Z

Neo-Teyrall :

Fichier:Tuto prompt form.png

2025-09-27T21:05:19Z

Neo-Teyrall :

Fichier:Tuto prompt form button.png

2025-09-27T21:05:02Z

Neo-Teyrall :

System Builder

2025-09-27T20:21:15Z

Neo-Teyrall : ajout du lien vers prompte

The System Builder is a tool for creating game systems for the [https://lets-role.com/ Let's Roll] gaming tables. It allows for the comprehensive construction of various essential tools such as player character sheets, as well as the creation of non-player character sheets, objects, and game monitoring tools for Game Masters.

The tool is accessible to anyone with a Let's Roll account. It is designed so that anyone can develop their own system without any coding knowledge. The System Builder is equipped with coding tools (pseudoJS) that allow for the creation of complex, non-essential functionalities that will add a bit of convenience.

=== First step ===
Quickstart video guide for creating systems in Let’s Role (🇫🇷 ''French only)''

https://www.youtube.com/watch?v=F141URrFVwo
[[Fichier:Video_thumbnail_Start_on_SB.png|néant|vignette]]

==== Interface ====
Inserez l'image de l'interface

# The title of the edited system
# [[Manage views|C]]<nowiki/>[[Manage views|reate new views]], navigate between [views]...
# The list of [[components|c]]<nowiki/>[[components|omponents]] usable for building a view
# [The dependency tree of views]
# Launch the system on a table to [test the system]
# The tabs [view], [table], [script], [translation], the tools to develop a system
# The [preview of the sheet]
# The buttons [[Save, Deploy, and Exit]].
# The panel of the selected [component parameters]

===== Views =====
Views are trees of components. They can be instantiated by the [tab] component or the [repeater] component to create complex and well-organized sheets.

==== Creating a New View ====
To create a new view, click on the "Create a new view" button. Fill in the popup with an ID (no capital letters, no special characters, no numbers, and use underscores to separate words), for example: "vue_armes". To switch views, use the dropdown list.

==== Building a View ====
To build a view, use the components in window 3 by dragging and dropping them into the component tree of the view in window 4.

===== Layout Components =====
Layout components are used to structure and organize components among themselves, such as rows, columns, and containers.

TODO: Link to a tutorial

===== Form Components =====
Form components are designed to contain the information for your character sheet.

===== Container Components =====
Containers are components that can contain views to create complete and dynamic sheets.

=== Special Components ===
Special components allow you to perform specific and essential actions for a character sheet.

==== Tables ====
Tables are spreadsheets that allow you to provide information for certain components, such as lists, tabs, etc.

==== Script ====
The script is a JS file that allows you to perform more complete and complex actions than managing views alone.

[[FirstScript|Your first step in the script]]

=== Tutorials ===

#[[Styling character sheets with classes|Build character sheets with Bootstrap]]
# [[Put a dice roll result in the sheet]]
# [[Use lists]]
# [[Use tabs]]
# [[Use repeaters]]
# [[Use Prompt]]
# [[Show or hide components]]
# [[Progress bar]]
# [https://lets-role.com/help/fr/documentation/v1/component/avatar Configure the avatar properly]
# [[Create your first game table]]

Create your first game table

2025-09-23T10:03:18Z

Neo-Teyrall :

It’s the big day! You’re ready and want to create your game table, either from an existing system or from your own custom system. This page explains step by step how to do it.

== Using an existing system ==

=== From the store ===
[[Fichier:Tuto creat table shop.png|droite|486x486px]]
If you want to play one of the most famous role-playing games, go to the '''Store'''. Search for the system of your choice (for example D&D), click on '''View system''', and then on '''Create a new table'''. Follow the instructions in the table creation wizard.

=== From the table manager ===
[[Fichier:Tuto_creat_table_table.png|droite|486x486px]]
Go to the '''Tables''' tab, then click on '''Create a table'''. Select a system, enter a title, and validate. Then follow the table creation wizard.

== Using a system you created ==
You have created a system from scratch, or forked an existing one, and now you want to create a table based on it.

=== Private system ===
[[Fichier:Tuto creat table systeme.png|droite|691x691px]]
If you want to keep your system private so others cannot see it:

*go to the '''System Builder''';
*click on '''Create a new table'''.

=== Public system ===
If you want to share your system with all Let's Role users, you can publish it. To do so, open the management menu of your system and check the option '''Publish this system'''.

==== ⚠️ Warning: the System Builder table ====
In your tables list, there is a special table that starts with '''[Builder]'''. This table is used by the ''System Builder'' to test your system. You cannot join this table from the Tables tab: the connection will fail and an error message will be displayed.

Fichier:Tuto creat table systeme.png

2025-09-23T09:51:23Z

Neo-Teyrall :

Create your first game table

2025-09-22T18:46:17Z

Neo-Teyrall : ajout des deux image

It’s the big day! You’re ready and want to create your game table, either from an existing system or from your own custom system. This page explains step by step how to do it.

== Using an existing system ==

=== From the store ===
[[Fichier:Tuto creat table shop.png|droite|486x486px]]
If you want to play one of the most famous role-playing games, go to the '''Store'''. Search for the system of your choice (for example D&D), click on '''View system''', and then on '''Create a new table'''. Follow the instructions in the table creation wizard.

=== From the table manager ===
[[Fichier:Tuto_creat_table_table.png|droite|486x486px]]
Go to the '''Tables''' tab, then click on '''Create a table'''. Select a system, enter a title, and validate. Then follow the table creation wizard.

== Using a system you created ==
You have created a system from scratch, or forked an existing one, and now you want to create a table based on it.

=== Private system ===
If you want to keep your system private so others cannot see it:

*go to the '''System Builder''';
*click on '''Create a new table'''.

=== Public system ===
If you want to share your system with all Let's Role users, you can publish it. To do so, open the management menu of your system and check the option '''Publish this system'''.

==== ⚠️ Warning: the System Builder table ====
In your tables list, there is a special table that starts with '''[Builder]'''. This table is used by the ''System Builder'' to test your system. You cannot join this table from the Tables tab: the connection will fail and an error message will be displayed.

Fichier:Tuto creat table shop.png

2025-09-22T18:42:28Z

Neo-Teyrall :

Fichier:Tuto creat table table.png

2025-09-22T18:40:44Z

Neo-Teyrall :

System Builder

2025-09-22T18:39:51Z

Neo-Teyrall : ajout d'un autre tuto sur la création d'un tuto

The System Builder is a tool for creating game systems for the [https://lets-role.com/ Let's Roll] gaming tables. It allows for the comprehensive construction of various essential tools such as player character sheets, as well as the creation of non-player character sheets, objects, and game monitoring tools for Game Masters.

The tool is accessible to anyone with a Let's Roll account. It is designed so that anyone can develop their own system without any coding knowledge. The System Builder is equipped with coding tools (pseudoJS) that allow for the creation of complex, non-essential functionalities that will add a bit of convenience.

=== First step ===
Quickstart video guide for creating systems in Let’s Role (🇫🇷 ''French only)''

https://www.youtube.com/watch?v=F141URrFVwo
[[Fichier:Video_thumbnail_Start_on_SB.png|néant|vignette]]

==== Interface ====
Inserez l'image de l'interface

# The title of the edited system
# [[Manage views|C]]<nowiki/>[[Manage views|reate new views]], navigate between [views]...
# The list of [[components|c]]<nowiki/>[[components|omponents]] usable for building a view
# [The dependency tree of views]
# Launch the system on a table to [test the system]
# The tabs [view], [table], [script], [translation], the tools to develop a system
# The [preview of the sheet]
# The buttons [[Save, Deploy, and Exit]].
# The panel of the selected [component parameters]

===== Views =====
Views are trees of components. They can be instantiated by the [tab] component or the [repeater] component to create complex and well-organized sheets.

==== Creating a New View ====
To create a new view, click on the "Create a new view" button. Fill in the popup with an ID (no capital letters, no special characters, no numbers, and use underscores to separate words), for example: "vue_armes". To switch views, use the dropdown list.

==== Building a View ====
To build a view, use the components in window 3 by dragging and dropping them into the component tree of the view in window 4.

===== Layout Components =====
Layout components are used to structure and organize components among themselves, such as rows, columns, and containers.

TODO: Link to a tutorial

===== Form Components =====
Form components are designed to contain the information for your character sheet.

===== Container Components =====
Containers are components that can contain views to create complete and dynamic sheets.

=== Special Components ===
Special components allow you to perform specific and essential actions for a character sheet.

==== Tables ====
Tables are spreadsheets that allow you to provide information for certain components, such as lists, tabs, etc.

==== Script ====
The script is a JS file that allows you to perform more complete and complex actions than managing views alone.

[[FirstScript|Your first step in the script]]

=== Tutorials ===

#[[Styling character sheets with classes|Build character sheets with Bootstrap]]
# [[Put a dice roll result in the sheet]]
# [[Use lists]]
# [[Use tabs]]
# [[Use repeaters]]
# [[Show or hide components]]
# [[Progress bar]]
# [https://lets-role.com/help/fr/documentation/v1/component/avatar Configure the avatar properly]
# [[Create your first game table]]

Create your first game table

2025-09-22T17:11:08Z

Neo-Teyrall : premier jet de la page

It’s the big day! You’re ready and want to create your game table, either from an existing system or from your own custom system. This page explains step by step how to do it.

== Using an existing system ==

=== From the store ===
If you want to play one of the most famous role-playing games, go to the '''Store'''. Search for the system of your choice (for example D&D), click on '''View system''', and then on '''Create a new table'''. Follow the instructions in the table creation wizard.

=== From the table manager ===
Go to the '''Tables''' tab, then click on '''Create a table'''. Select a system, enter a title, and validate. Then follow the table creation wizard.

== Using a system you created ==
You have created a system from scratch, or forked an existing one, and now you want to create a table based on it.

=== Private system ===
If you want to keep your system private so others cannot see it:

* go to the '''System Builder''';
* click on '''Create a new table'''.

=== Public system ===
If you want to share your system with all Let's Role users, you can publish it. To do so, open the management menu of your system and check the option '''Publish this system'''.

==== ⚠️ Warning: the System Builder table ====
In your tables list, there is a special table that starts with '''[Builder]'''. This table is used by the ''System Builder'' to test your system. You cannot join this table from the Tables tab: the connection will fail and an error message will be displayed.

Save, Deploy, and Exit

2025-09-22T16:52:54Z

Neo-Teyrall : ajout d'une image pour illustrer

[[Fichier:Tuto button save deploy exit.png|droite]]
This page explains the three buttons: '''Save''', '''Deploy''', and '''Exit'''.

== Exit ==
The '''Exit''' button allows you to leave the System Builder editor.

If you try to exit without saving, a warning will notify you that your work has not been saved.

== Save ==
The '''Save''' button stores your current work so you can continue later.

Make sure to save frequently, either by clicking '''Save''' or using the '''Ctrl + S''' shortcut.

⚠️ To make your changes visible in the '''test tabl'''*, you must save your system.

Note that '''Save''' does '''not''' update your live game tables.

== Deploy a system ==
The '''Deploy''' button creates a new version of your system. The deploy action give the possibility to add a comment that is crucial to keep tracs on the modification.

- This version is automatically updated on all your game tables using this system.

- A '''restore point''' is automatically created, allowing you to roll back if you make a mistake.

Deploy your system carefully:

- when a feature is ready,

- or after significant progress in your development.

⚠️ Warning: '''deploying''' a system immediately updates your players’ tables. Avoid deploying a system that is still under development

Fichier:Tuto button save deploy exit.png

2025-09-22T16:51:31Z

Neo-Teyrall :

System Builder

2025-09-22T16:49:10Z

Neo-Teyrall : ajout du lien vers la nouvelle page save deploy and exit

The System Builder is a tool for creating game systems for the [https://lets-role.com/ Let's Roll] gaming tables. It allows for the comprehensive construction of various essential tools such as player character sheets, as well as the creation of non-player character sheets, objects, and game monitoring tools for Game Masters.

The tool is accessible to anyone with a Let's Roll account. It is designed so that anyone can develop their own system without any coding knowledge. The System Builder is equipped with coding tools (pseudoJS) that allow for the creation of complex, non-essential functionalities that will add a bit of convenience.

=== First step ===
Quickstart video guide for creating systems in Let’s Role (🇫🇷 ''French only)''

https://www.youtube.com/watch?v=F141URrFVwo
[[Fichier:Video_thumbnail_Start_on_SB.png|néant|vignette]]

==== Interface ====
Inserez l'image de l'interface

# The title of the edited system
# [[Manage views|C]]<nowiki/>[[Manage views|reate new views]], navigate between [views]...
# The list of [[components|c]]<nowiki/>[[components|omponents]] usable for building a view
# [The dependency tree of views]
# Launch the system on a table to [test the system]
# The tabs [view], [table], [script], [translation], the tools to develop a system
# The [preview of the sheet]
# The buttons [[Save, Deploy, and Exit]].
# The panel of the selected [component parameters]

===== Views =====
Views are trees of components. They can be instantiated by the [tab] component or the [repeater] component to create complex and well-organized sheets.

==== Creating a New View ====
To create a new view, click on the "Create a new view" button. Fill in the popup with an ID (no capital letters, no special characters, no numbers, and use underscores to separate words), for example: "vue_armes". To switch views, use the dropdown list.

==== Building a View ====
To build a view, use the components in window 3 by dragging and dropping them into the component tree of the view in window 4.

===== Layout Components =====
Layout components are used to structure and organize components among themselves, such as rows, columns, and containers.

TODO: Link to a tutorial

===== Form Components =====
Form components are designed to contain the information for your character sheet.

===== Container Components =====
Containers are components that can contain views to create complete and dynamic sheets.

=== Special Components ===
Special components allow you to perform specific and essential actions for a character sheet.

==== Tables ====
Tables are spreadsheets that allow you to provide information for certain components, such as lists, tabs, etc.

==== Script ====
The script is a JS file that allows you to perform more complete and complex actions than managing views alone.

[[FirstScript|Your first step in the script]]

=== Tutorials ===

#[[Styling character sheets with classes|Build character sheets with Bootstrap]]
# [[Put a dice roll result in the sheet]]
# [[Use lists]]
# [[Use tabs]]
# [[Use repeaters]]
# [[Show or hide components]]
# [[Progress bar]]
# [https://lets-role.com/help/fr/documentation/v1/component/avatar Configure the avatar properly]

Save, Deploy, and Exit

2025-09-22T16:45:47Z

Neo-Teyrall : petit ajustement par apport a la premiere version

This page explains the three buttons: '''Save''', '''Deploy''', and '''Exit'''.

== Exit ==
The '''Exit''' button allows you to leave the System Builder editor.

If you try to exit without saving, a warning will notify you that your work has not been saved.

== Save ==
The '''Save''' button stores your current work so you can continue later.

Make sure to save frequently, either by clicking '''Save''' or using the '''Ctrl + S''' shortcut.

⚠️ To make your changes visible in the '''test tabl'''*, you must save your system.

Note that '''Save''' does '''not''' update your live game tables.

== Deploy a system ==
The '''Deploy''' button creates a new version of your system. The deploy action give the possibility to add a comment that is crucial to keep tracs on the modification.

- This version is automatically updated on all your game tables using this system.

- A '''restore point''' is automatically created, allowing you to roll back if you make a mistake.

Deploy your system carefully:

- when a feature is ready,

- or after significant progress in your development.

⚠️ Warning: '''deploying''' a system immediately updates your players’ tables. Avoid deploying a system that is still under development

Save, Deploy, and Exit

2025-09-22T16:41:47Z

Neo-Teyrall : premier jet textuel du wiki

= Save, Deploy and Exit =
This page explains the three buttons: **Save**, **Deploy**, and **Exit**.

== Exit ==
The **Exit** button allows you to leave the System Builder editor.

If you try to exit without saving, a warning will notify you that your work has not been saved.

== Save ==
The **Save** button stores your current work so you can continue later.

Make sure to save frequently, either by clicking **Save** or using the **Ctrl + S** shortcut.

⚠️ To make your changes visible in the **test table**, you must save your system.

Note that **Save** does **not** update your live game tables.

== **** Deploy a system ==
The **Deploy** button creates a new version of your system. The deploy action give the possibility to add a comment that is crucial to keep tracs on the modification.

- This version is automatically updated on all your game tables using this system.

- A **restore point** is automatically created, allowing you to roll back if you make a mistake.

Deploy your system carefully:

- when a feature is ready,

- or after significant progress in your development.

⚠️ Warning: **deploying** a system immediately updates your players’ tables. Avoid deploying a system that is still under development.

Progress bar

2025-09-20T19:46:18Z

Neo-Teyrall :

Manage views

2025-09-19T11:59:42Z

Neo-Teyrall : petit probleme d'image corriger

= Manage views =

== Create New Views ==
To create a new view, click on Create New View. Once clicked, a prompt will open with three fields:
[[Fichier:Tuto create views.png|vignette]]

# View ID – must respect the ID formatting rules.
# Name – can contain any characters.
# Type – choose between:
#* Main component
#* Sub component

Once the view is accepted, the new view is opened, made of a single root component.

== Edit Views ==
=== View Parameters ===
[[Fichier:Tuto view parameters.png|gauche|280x280px]]
Once the view is created, you can edit its parameters by selecting the root component:

* ID
* Name
* Classes
* Type
* Height
* Width
* Is a craft
* Can be used on the map
* Can be drag & dropped onto another sheet
* ID of the avatar component

=== Add Components ===
To add a component, drag and drop it from the Component List into the Component Tree.

The Layout component can contain other components to organize their display.
[[Fichier:Tuto add component.png|centré|vignette|300x300px]]

=== Change Component Order ===
To adjust the display, drag and drop a component inside the tree.
Components contained in a layout component will follow the order defined.
[[Fichier:Tuto move component 1.png|centré|vignette|[[Fichier:Tuto move component 2.png|300x300px]]]]

=== Duplicate Component Set ===
You can duplicate a component to copy its settings within the same component.

Duplicating a layout component will also duplicate all components it contains.

The component ID will not be duplicated; instead, a random ID will be generated.
[[Fichier:Tuto Duplicate.png|centré|vignette]]

=== Move Component Set to Another View ===
A component can be moved to another view.

All components contained in a layout component will also be moved.
[[Fichier:Tuto move to other view.png|centré|vignette]]

== Change Current View ==
To switch between views, use the dropdown menu.
[[Fichier:Tuto Change views.png|centré|vignette]]

== Edit the Source Code ==
The tree of components is stored in the source code.
If you encounter difficulties with the tree, you can edit the source directly.

⚠ Warning: Editing the source code may break your system. Always deploy or back up your system before editing.

System Builder

2025-09-13T18:37:14Z

Neo-Teyrall : ajustement mineur

The System Builder is a tool for creating game systems for the [https://lets-role.com/ Let's Roll] gaming tables. It allows for the comprehensive construction of various essential tools such as player character sheets, as well as the creation of non-player character sheets, objects, and game monitoring tools for Game Masters.

The tool is accessible to anyone with a Let's Roll account. It is designed so that anyone can develop their own system without any coding knowledge. The System Builder is equipped with coding tools (pseudoJS) that allow for the creation of complex, non-essential functionalities that will add a bit of convenience.

=== First step ===
Quickstart video guide for creating systems in Let’s Role (🇫🇷 ''French only)''

https://www.youtube.com/watch?v=F141URrFVwo
[[Fichier:Video_thumbnail_Start_on_SB.png|néant|vignette]]

==== Interface ====
Inserez l'image de l'interface

# The title of the edited system
# [[Manage views|C]]<nowiki/>[[Manage views|reate new views]], navigate between [views]...
# The list of [[components|c]]<nowiki/>[[components|omponents]] usable for building a view
# [The dependency tree of views]
# Launch the system on a table to [test the system]
# The tabs [view], [table], [script], [translation], the tools to develop a system
# The [preview of the sheet]
# The buttons [save], [deploy], and [exit]
# The panel of the selected [component parameters]

===== Views =====
Views are trees of components. They can be instantiated by the [tab] component or the [repeater] component to create complex and well-organized sheets.

==== Creating a New View ====
To create a new view, click on the "Create a new view" button. Fill in the popup with an ID (no capital letters, no special characters, no numbers, and use underscores to separate words), for example: "vue_armes". To switch views, use the dropdown list.

==== Building a View ====
To build a view, use the components in window 3 by dragging and dropping them into the component tree of the view in window 4.

===== Layout Components =====
Layout components are used to structure and organize components among themselves, such as rows, columns, and containers.

TODO: Link to a tutorial

===== Form Components =====
Form components are designed to contain the information for your character sheet.

===== Container Components =====
Containers are components that can contain views to create complete and dynamic sheets.

=== Special Components ===
Special components allow you to perform specific and essential actions for a character sheet.

==== Tables ====
Tables are spreadsheets that allow you to provide information for certain components, such as lists, tabs, etc.

==== Script ====
The script is a JS file that allows you to perform more complete and complex actions than managing views alone.

[[FirstScript|Your first step in the script]]

=== Tutorials ===

#[[Styling character sheets with classes|Build character sheets with Bootstrap]]
# [[Put a dice roll result in the sheet]]
# [[Use lists]]
# [[Use tabs]]
# [[Use repeaters]]
# [[Show or hide components]]
# [[Progress bar]]
# [https://lets-role.com/help/fr/documentation/v1/component/avatar Configure the avatar properly]

Manage views

2025-09-13T18:35:51Z

Neo-Teyrall : ajout des image

= Manage views =

== Create New Views ==
To create a new view, click on Create New View. Once clicked, a prompt will open with three fields:
[[Fichier:Tuto create views.png|vignette]]

# View ID – must respect the ID formatting rules.
# Name – can contain any characters.
# Type – choose between:
#* Main component
#* Sub component

Once the view is accepted, the new view is opened, made of a single root component.

== Edit Views ==
=== View Parameters ===
[[Fichier:Tuto view parameters.png|gauche|280x280px]]
Once the view is created, you can edit its parameters by selecting the root component:

* ID
* Name
* Classes
* Type
* Height
* Width
* Is a craft
* Can be used on the map
* Can be drag & dropped onto another sheet
* ID of the avatar component

=== Add Components ===
To add a component, drag and drop it from the Component List into the Component Tree.

The Layout component can contain other components to organize their display.
[[Fichier:Tuto add component.png|centré|vignette|300x300px]]

=== Change Component Order ===
To adjust the display, drag and drop a component inside the tree.
Components contained in a layout component will follow the order defined.
[[Fichier:Tuto move component 2.png|centré|vignette|[[Fichier:Tuto move component 2.png|300x300px]]]]

=== Duplicate Component Set ===
You can duplicate a component to copy its settings within the same component.

Duplicating a layout component will also duplicate all components it contains.

The component ID will not be duplicated; instead, a random ID will be generated.
[[Fichier:Tuto Duplicate.png|centré|vignette]]

=== Move Component Set to Another View ===
A component can be moved to another view.

All components contained in a layout component will also be moved.
[[Fichier:Tuto move to other view.png|centré|vignette]]

== Change Current View ==
To switch between views, use the dropdown menu.
[[Fichier:Tuto Change views.png|centré|vignette]]

== Edit the Source Code ==
The tree of components is stored in the source code.
If you encounter difficulties with the tree, you can edit the source directly.

⚠ Warning: Editing the source code may break your system. Always deploy or back up your system before editing.

Fichier:Tuto create views.png

2025-09-13T18:26:42Z

Neo-Teyrall :

Fichier:Tuto view parameters.png

2025-09-13T18:26:34Z

Neo-Teyrall :

Manage views

2025-09-13T18:23:50Z

Neo-Teyrall : the views managing

= Manage views =

== Create New Views ==
To create a new view, click on Create New View. Once clicked, a prompt will open with three fields:

# View ID – must respect the ID formatting rules.
# Name – can contain any characters.
# Type – choose between:
#* Main component
#* Sub component

Once the view is accepted, the new view is opened, made of a single root component.

== Edit Views ==
=== View Parameters ===
Once the view is created, you can edit its parameters by selecting the root component:

* ID
* Name
* Classes
* Type
* Height
* Width
* Is a craft
* Can be used on the map
* Can be drag & dropped onto another sheet
* ID of the avatar component

=== Add Components ===
To add a component, drag and drop it from the Component List into the Component Tree.

The Layout component can contain other components to organize their display.

=== Change Component Order ===
To adjust the display, drag and drop a component inside the tree.
Components contained in a layout component will follow the order defined.

=== Duplicate Component Set ===
You can duplicate a component to copy its settings within the same component.

Duplicating a layout component will also duplicate all components it contains.

The component ID will not be duplicated; instead, a random ID will be generated.

=== Move Component Set to Another View ===
A component can be moved to another view.

All components contained in a layout component will also be moved.

== Change Current View ==
To switch between views, use the dropdown menu.

== Edit the Source Code ==
The tree of components is stored in the source code.
If you encounter difficulties with the tree, you can edit the source directly.

⚠ Warning: Editing the source code may break your system. Always deploy or back up your system before editing.

Fichier:Tuto move component 2.png

2025-09-13T18:23:26Z

Neo-Teyrall :

Fichier:Tuto move component 1.png

2025-09-13T18:23:18Z

Neo-Teyrall :