[EOS/CODE] Eos text styling in variables/evals

[fapnip]

When using text from variables in Eos' Say actions, sometimes you want to dynamically add style to that text (bold, color, etc.)

To do that, you need to embed html (Eos supports a very limited subset of html), like <b>My Bold Text</b>, or <span style="color: hotpink;">My Pink Text</style>, in your string.

Sometimes that can get a bit cumbersome.

To help with that, here are some add-on functions you can put in your tease's Init Script to hopefully make building styled string variables a little easier:

Code: Select all

// Add style functions to String
// See: https://milovana.com/forum/viewtopic.php?f=4&t=23792
String.prototype.color = function (color) {
  return '<span style="color:' +color+ ';">' + this + '</span>'
}

String.prototype.colorShift = function(rgb1, rgb2) {
  var result = ''
  var s = this
  function _gp(s, e, p) {
    var d = e - s
    return Math.floor(s + (d * p))
  }
  for (var i = 0, l = s.length; i < l; i++) {
    var p = i / l
    var r = _gp(rgb1[0], rgb2[0], p)
    var g = _gp(rgb1[1], rgb2[1], p)
    var b = _gp(rgb1[2], rgb2[2], p)
    result += s[i].color('rgb('+r+','+g+','+b+')')
  }
  return result
}

String.prototype.fadeOut = function(rgb, a) {
  a = a || 0
  var result = ''
  var s = this
  function _gp(s, e, p) {
    var d = e - s
    return Math.round((s + (d * p)) * 1000) / 1000
  }
  for (var i = 0, l = s.length; i < l; i++) {
    var o = _gp(1, a, i / l)
    result += s[i].color('rgba('+rgb[0]+','+rgb[1]+','+rgb[2]+','+o+')')
  }
  return result
}

String.prototype.fadeIn = function(rgb, a) {
  a = a || 1
  var result = ''
  var s = this
  function _gp(s, e, p) {
    var d = e - s
    return Math.round((s + (d * p)) * 1000) / 1000
  }
  for (var i = 0, l = s.length; i < l; i++) {
    var o = _gp(0, a, i / l)
    result += s[i].color('rgba('+rgb[0]+','+rgb[1]+','+rgb[2]+','+o+')')
  }
  return result
}

String.prototype.size = function (size) {
  var sz = isNaN(size) ? size : size + 'em';
  return '<span style="font-size:' + sz + ';">' + this + '</span>'
}

String.prototype.spacing = function (spacing) {
  var sp = isNaN(spacing) ? spacing : spacing + 'em';
  return '<span style="letter-spacing:' + sp + ';">' + this + '</span>'
}

String.prototype.style = function (style, clazz) {
  style = style ? ' style="' + style + '"' : ''
  clazz = clazz ? ' class="' + clazz + '"' : ''
  return '<span' + clazz + style + '>' + this + '</span>'
}

String.prototype.bold = function () {
  return '<b>' + this + '</b>'
}

String.prototype.italic = function () {
  return '<i>' + this + '</i>'
}

String.prototype.underline = function () {
  return '<u>' + this + '</u>'
}

String.prototype.p = function (style) {
  style = style ? ' style="' + style + '"' : ''
  return this + '</p><p' + style + '>'
}

String.prototype.br = function () {
  return this + '<br>'
}

Or, minified:

Code: Select all

// Add style functions to String
// See: https://milovana.com/forum/viewtopic.php?f=4&t=23792
String.prototype.color=function(t){return'<span style="color:'+t+';">'+this+"</span>"},String.prototype.colorShift=function(t,r){var n="";function o(t,r,n){var o=r-t;return Math.floor(t+o*n)}for(var i=0,e=this.length;i<e;i++){var p=i/e,s=o(t[0],r[0],p),u=o(t[1],r[1],p),a=o(t[2],r[2],p);n+=this[i].color("rgb("+s+","+u+","+a+")")}return n},String.prototype.fadeOut=function(t,r){r=r||0;var n="";function o(t,r,n){var o=r-t;return Math.round(1e3*(t+o*n))/1e3}for(var i=0,e=this.length;i<e;i++){var p=o(1,r,i/e);n+=this[i].color("rgba("+t[0]+","+t[1]+","+t[2]+","+p+")")}return n},String.prototype.fadeIn=function(t,r){r=r||1;var n="";function o(t,r,n){var o=r-t;return Math.round(1e3*(t+o*n))/1e3}for(var i=0,e=this.length;i<e;i++){var p=o(0,r,i/e);n+=this[i].color("rgba("+t[0]+","+t[1]+","+t[2]+","+p+")")}return n},String.prototype.size=function(t){return'<span style="font-size:'+(isNaN(t)?t:t+"em")+';">'+this+"</span>"},String.prototype.spacing=function(t){return'<span style="letter-spacing:'+(isNaN(t)?t:t+"em")+';">'+this+"</span>"},String.prototype.style=function(t,r){return"<span"+(r=r?' class="'+r+'"':"")+(t=t?' style="'+t+'"':"")+">"+this+"</span>"},String.prototype.bold=function(){return"<b>"+this+"</b>"},String.prototype.italic=function(){return"<i>"+this+"</i>"},String.prototype.underline=function(){return"<u>"+this+"</u>"},String.prototype.p=function(t){return this+"</p><p"+(t=t?' style="'+t+'"':"")+">"},String.prototype.br=function(){return this+"<br>"};

Example use:

Code: Select all

// Create a string variable that will be bold, italic, with color of 'hotpink' 
var myText = "My Bold, Italic, hot pink text".bold().italic().color('hotpink')

// Add another paragraph to that variable
myText = myText.p() + "My Really Big Green Text".color('#75DF7F').size(1.5)

// Create another string variable, with styled text in the middle.
var anotherThing = "It's easy to put " + "styled text".bold().color('yellow') + " right in the middle of a string."

Example tease:
https://milovana.com/webteases/showteas ... 959afb532f
Example JSON (Right-click, save-link-as, "Restore" into new tease):
https://milovana.com/webteases/geteossc ... 959afb532f

All style methods:

Code: Select all

// Set color
var myString = "My String".color([html color code]) // See: https://www.w3schools.com/colors/colors_names.asp
                                             //  and https://www.w3schools.com/colors/colors_hexadecimal.asp
                                             //  and https://htmlcolorcodes.com/color-picker/
// Set size
var myString = "My String".size([decimal size, 1 = 100%, 1.5 = 150%])

// Set letter spacing
var myString = "My String".spacing([decimal size, like 0.2, or 'normal'])

// Set italic
var myString = "My String".italic()

// Set bold
var myString = "My String".bold()

// Set underline
var myString = "My String".underline()

// Add line break
var myString = "My String".br() // Add line break

// Start a new paragraph
var myString = "My String".p() + "My Next Paragraph"
  
//     You can combine styles:
var myString = "My String".bold().italic().size(1.2).color('hotpink')

For html colors, see:
https://www.w3schools.com/colors/colors_hex.asp
and
https://htmlcolorcodes.com/color-picker/

Note: If you find this helpful, please let me know. Feedback, or lack thereof, tells me if it's worth taking time to share this kind of thing in the future, or if I'm just posting into the ether.

[Xardas]

I'm like two weeks late, but as someone who never learned any coding and now is trying to figure out how to make EOS work, this was immensely helpful, so thank you!

[fapnip]

I'm like two weeks late, but as someone who never learned any coding and now is trying to figure out how to make EOS work, this was immensely helpful

I'm almost 3 months late, but thanks!

I don't take donations or do things like Patreon, so feedback like yours is really the only read I have on whether or not I'm wasting my time.