Major dialogueSys.js Update 1.3.20f

Change Log

• remade the typeOnBox system
• line break prediction (kinda)
• text style can now be changed

Code:

// variables are assigned the same way
// as css style attributes
// 
// dialogueSys.textColor = color
// dialogueSys.textBg = background
// dialogueSys.textStyle = font-style
// dialogueSys.textWeight = font-weight

diaSys.clearBox();

diaSys.typeOnBox("You can now use ", 1, "claire", "Happy", () => { diaSys.textColor = "yellow"; });
diaSys.typeOnBox("color, ", 1, "claire", "Happy", () => { diaSys.textColor = "#f0f0f0"; diaSys.textBg = "linear-gradient(red, orange, yellow, green, blue, indigo, violet)"; });
diaSys.typeOnBox("background", 1, "claire", "Happy", () => { diaSys.textColor = "inherit"; diaSys.textBg = "none"; diaSys.textStyle = "italic"; });
diaSys.typeOnBox(", style ", 1, "claire", "Happy", () => { diaSys.textStyle = "normal";});
diaSys.typeOnBox("and ", 1, "claire", "Happy", () => { diaSys.textWeight = "1000"; });
diaSys.typeOnBox("weight " , 1, "claire", "Happy", () => { diaSys.textWeight = "normal"; });
diaSys.typeOnBox("in text.", 1, "claire", "Happy");

• text characters can now be manipulated individually

Code:

// Every text characters are in a span which can be
// manipulated
// 
// The element has an id of `dialogueSysChar_${charIndex}`
// charIndex defines a count of characters from start to end
// charIndex starts counting from 0
// 
// The element can be simply get by using
// document.querySelector

diaSys.typeOnBox("Welcome to ", 1, "claire", "Happy", () => { diaSys.textColor = "red"; });
diaSys.typeOnBox("Hell", 1, "claire", "Happy", () => {
    
    // Magik starts here
    
    // We set an array of the elements/chars we will use
    var chars = [
        document.querySelector("#dialogueSysChar_11"),
        document.querySelector("#dialogueSysChar_12"),
        document.querySelector("#dialogueSysChar_13"),
        document.querySelector("#dialogueSysChar_14")
    ];
    
    // For each variable in chars
    for (let i = 0; i < chars.length; i++)
    {
        // We need to set the display to inline-block
        // because inline element cannot be animated
        chars[i].style.display = "inline-block";
        
        // Add the animation
        chars[i].style.animation = `shake${i} 0.12s infinite`;
    }
});

• functions now ONLY run when another function from the same object is not active (this means functions are now queued(example can be seen on previous examples))
• less horror code (usually spaghetti code)

Before:

After:

Credits

• styles in example from SpiritAxolotl's Cool Site
• sprites in example by Temmie Chang from their cool game Dweller's Empty Path which can also be found in SpiritAxolotl's Site
• font used in example by Temmie Chang from Dweller's Empty Path. Remade from bitmap to font formats by SpiritAxolotl which can be found here