Seraaron / roll20-character-sheets

Character sheet templates created by the community for use in Roll20 VTT. Contact team@roll20.net if critical hotfixes need to be requested.
https://roll20.net/
MIT License
0 stars 0 forks source link

ICON sheet 'double-click bug' on Effort / Strain #16

Open Seraaron opened 1 year ago

Seraaron commented 1 year ago

This is a known bug that I haven't been able to solve before releasing the sheet to go live on roll20. Basically when you want to choose your current effort or strain you must double-click the diamond to make it stick (unless your maximum is the max for that stat: 6 and 8 respectively). Furthermore, if you close and reopen the sheet it resets. The number displayed on the left stays accurate, but the 'fillLeft' radio appears to be filled.

I have some ideas as to why this happens, and it's something to do with loading all of the respective fillLeft fields and then selectively hiding them using a dropdown filter, like so in the _resources.pug file:

    .flex-box.resource
      if name === 'effort'
        +hidden({name:`${name}_max`, class:'resource-switch', value:'3'})
      else
        +hidden({name:`${name}_max`, class:'resource-switch', value:'5'})
      if name === 'effort'
        .resource_2.center
          each num in [0,1,2]
            if num === 0
              +input({name, type:'radio', class:'fill-left diamonds radio-zero', value:`${num}`})
              span
            else
              +input({name, type:'radio', class:'fill-left diamonds', value:`${num}`})
              span
      .resource_3.center
          each num in [0,1,2,3]
            if num === 0
              +input({name, type:'radio', class:'fill-left diamonds radio-zero', value:`${num}`})
              span
            else
              +input({name, type:'radio', class:'fill-left diamonds', value:`${num}`})
              span
      .resource_4.center
          each num in [0,1,2,3,4]
            if num === 0
              +input({name, type:'radio', class:'fill-left diamonds radio-zero', value:`${num}`})
              span
            else
              +input({name, type:'radio', class:'fill-left diamonds', value:`${num}`})
              span
      .resource_5.center
          each num in [0,1,2,3,4,5]
            if num === 0
              +input({name, type:'radio', class:'fill-left diamonds radio-zero', value:`${num}`})
              span
            else
              +input({name, type:'radio', class:'fill-left diamonds', value:`${num}`})
              span
      .resource_6.center
          each num in [0,1,2,3,4,5,6]
            if num === 0
              +input({name, type:'radio', class:'fill-left diamonds radio-zero', value:`${num}`})
              span
            else
              +input({name, type:'radio', class:'fill-left diamonds resource-small', value:`${num}`})
              span
      if name === 'strain'
        .resource_7.center
          each num in [0,1,2,3,4,5,6,7]
            if num === 0
              +input({name, type:'radio', class:'fill-left diamonds resource-small radio-zero', value:`${num}`})
              span
            else
              +input({name, type:'radio', class:'fill-left diamonds resource-smaller', value:`${num}`})
              span
        .resource_8.center
          each num in [0,1,2,3,4,5,6,7,8]
            if num === 0
              +input({name, type:'radio', class:'fill-left diamonds resource-smaller radio-zero', value:`${num}`})
              span
            else
              +input({name, type:'radio', class:'fill-left diamonds resource-smallerer', value:`${num}`})
              span
    .flex-box.center
      +label({name:`${name} size`, class:'input-label capitalize status', 'data-i18n':`max ${name}`, 'aria-label':5}) 
      +select({name:`${name}_max`, class:'dropdown stat resource underlined', style:'width:40%;'})
        if name === 'effort'
          each val in [2,3,4,5,6]
            if val === 3
              option(value=`${val}`, selected=true) #{val}
            else
              option(value=`${val}`) #{val}
        else
          each val in [3,4,5,6,7,8]
            if val === 5
              option(value=`${val}`, selected=true) #{val}
            else
              option(value=`${val}`) #{val}

I solved a similar problem for clocks by re-naming each radio to be unique (ie. burden clock size 4, burden clock size 6, burden clock size 8, etc.) but this creates a lot of attributes to track and is only really an appropriate solution for repeating fieldsets for things like clocks that will be deleted and re-instanced frequently by the user -- flushing the attributes in the process.

For the static case of effort and strain I suspect the solution may involve a sheetworker to either do the hiding and revealing of each radio, or to somehow select and set the right bar each time you click on it (to avoid double clicking) and to silently set it back to what it should be everytime you close and repopen the sheet. Currently, I have no idea how to implement either of these ideas, as my brain is like a sieve when it comes to grasping javascript.