Chat is never cleared

[crazy2be]

This makes the game get slower all the time as you are playing if there is any chat activity.

We should probably just keep a fixed buffer of messages and remove anything bigger than that.

[yeerkkiller1]

Fixed on q, the change is just:

while(messages.children.length > 50) {
    messages.removeChild(messages.children[0]);
}

Also, the manual tweens are expensive when there are a lot of messages (like 150 AI, all killing each other). On q I removed them, we should try to do them with pure css animations.

[crazy2be]

Yeah, tricky to do with pure css though, because you don't want the animations to restart when you open the chat window again (like the ones that have already disappeared should disappear immediately when you close the chat again).

Could try drawing it w/ canvas too. Might be faster (or it might be slower, who knows) On Nov 24, 2013 11:32 AM, "yeerkkiller1" notifications@github.com wrote:

Fixed on q, the change is just:

while(messages.children.length > 50) { messages.removeChild(messages.children[0]); }

Also, the manual tweens are expensive when there are a lot of messages (like 150 AI, all killing each other). On q I removed them, we should try to do them with pure css animations.

— Reply to this email directly or view it on GitHubhttps://github.com/crazy2be/buildblast/issues/135#issuecomment-29160618 .

[yeerkkiller1]

Yeah, css animations are the boss ;D For future reference, the css to do this is:

(Basically just a regular animation, but delay it, and NOT when it is active, cause that should override the fadeout).

#chat.active .message {
    color: black;
    opacity: 1;
}

#chat:not(.active) .message{
    -webkit-animation-delay: 3s;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
    0% {
            opacity: 1;
    }

    100% {
            opacity: 0;
    }
}

[yeerkkiller1]

Oh, I suppose the ones that have disappeared don't disappear immediately when you close the chat. It may be possible, but the animations are overriding my opacity even if I set it as !important. If that can be fixed... it may be possible.

Looks like a bug in !firefox browsers (http://tosbourn.com/2013/03/development/firefox-honours-important-in-css-animations-no-one-else-seems-to/).

[crazy2be]

Yeah... That's why we had to implement it in JavaScript. I think the CSS animations are cleaner code-wise, but we couldn't figure out how to implement it correctly using them.

I am curious if the CSS approach is faster though, and if so, what makes it so much faster. Is it just the CSS recalculations? I guess the browser can optimize it better, but we might be able to "trick" it into giving us those optimizations with something like -webkit-transform: traslate3d(0,0,0) (at least this used to work). Basically forces the div into it's own renderlayer, which is basically a GPU texture, so operations like changing opacity and using translate3d are basically "free" (since they are implemented in hardware).