Chat scene 'typing indicator' animation close but not perfect

[nopivnick]

Two issues:

1. I can't figure out how to get the CSs typing indicator animation to justify left inside it's parent element. It's nested inside a flexbox but doesn't seem to abide by align-self: flex-start;.

2. I managed to keep pushing the typing indicator animation further down the page after each chat message appears by hiding all the chat transcript messages onEnterScene(). All well and good. Now the question is how to display (i.e., show()) the animation only when a message with CSS class message-recd is next in line to be un-hidden but I don't know how to code logic that checks the CSS class assigned to only the first hidden element on the page.

Perhaps I need another list of cues like the one @noisyneuron advised me to use to get messages to appear only once charIndex reaches the last character of a given chat message. If so, I assume there need to be cues for when to turn off as well as when to turn on. In which case I assume the cue list will be an array of nested arrays with 2 elements: 'ins' and 'outs'.

luna-cycle_typing-animation.mp4

[nopivnick]

@noisyneuron

Fixed the CSS issue.

I've got the displayTypingIndicator() logic closer but it's still not exactly correct:

• If the scene begins with an in-bound message, the typing indicator animation doesn't show

New screen capture:

luna-cycle_typing-animation.mp4

Also, the code used to get typingIndicatorCuesByScene is somewhat duplicative (I don't think I need to create sendMessageCuesByScene any longer since typingIndicatorCuesByScene captures that information) but I can't figure out the following:

• how to get typingIndicatorCueIn w/o relying on sendMessageCue
• how to correctly calculate typingIndicatorCueIn (it should be the equivalent of sendMessageCue + 1

[nopivnick]

@noisyneuron via Signal (with a few edits):

let cumulativeSceneLength = 0
let cues = []

for each paragraph ->
  if (i want to show animation)
    cues.push({cuePoint: cumulativeSceneLenth, type: 'show-animation'})
  if (i want to hide animation)
    cues.push({cuePoint: cumulativeSceneLenth+paragraph.length-1, type: 'hide-animation'})
  cumulativeSceneLength += paragraph.length
  cues.push({cuePoint: cumulativeSceneLenth, type: 'show-text'})

store the type of the animation in an object, you don’t need all those extra arrays

before you add to the cumulative length you are at the location in the timeline that corresponds with the “start” of the text

i have lengths 5, 8 , 10 ...
0-> show animation
3-> hide animation
4-> show text 1
5-> start showing characters for text 2
12-> all chars of text 2 done
13-> show animation for text 3
22-> hide animation
23-> show text 3

write out an example like that with pen and paper, mark the indices of the text ... you just need to know the time/counter value to make something happen; what to make happen; and which paragraph to make it happen to

those indices might be off by 1 here and there, if u write out a toy example you’ll figure out if it’s off and where to fix

also double check that you get a counter value of 0 when the scene starts / that you can use that as a cue point