Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

auto-scroll group chat...format?

edited September 2016 in Help! with 2.0
so i'm a complete novice and i'm not sure if this is even possible? but i've been googling ferociously for two days because i really wanna make this happen.

i'm using sugarcube in twine 2.0.11 and i'm wanting to simulate a group chat happening in "live" time (i.e. a skype group chat, irc chat, texting). so, each line would automatically appear at intervals underneath the previous line, and the lines/dialogue/passage text are all contained in a window/box with a scroll bar. ideally the lines would auto-scroll upwards as each new message appears at the bottom, but if not, the user will have to manually scroll as they read!

i'm not sure if this is possible but thank you so much for replying if you do!! i know this is a huge ask! please let me know if you think i should be using something else.

here's a quick picture of what i have so far...it's basic content. i don't know how to contain the text in the border either unfortunately.
GxpzBhC.png

Comments

  • edited September 2016
    so i discovered iframes? could be what i want but i don't know how to put the text inside it lol! plus i think that needs an external source for content which is no good for linking to the next passage?
  • I think what you need to look at is the Jonah Story Format. However, I notice you're using SugarCube, and I'm not sure if SC has anything that can do it, at least not simply.
  • Keep all the lines currently displayed in an array. Then when a new line arrives, simply remove the first line from the array and add the new line to the end.
  • edited September 2016
    @thebigh im not sure how to use arrays sorry! i'm googling that up though. would you be able to explain further or an example T-T (edit) i'm seeing a push method and shift method? can i combine those i have no idea. would that work automatically somehow without a button?

    @storymasterq i was thinking that but i don't think jonah has the option to do an inventory in the sidebar too like i want to? haha. complicated. i also want to have multiple chat logs, so i don't want them all still there after going through them.

    (i did work out how to confine the text to a scrollbar box though lol.)
  • okay, i think i need just push if i can get that to push multiple elements into the array consecutively. i'm not sure how to do multiple elements like that! that's step one and then...getting it to do it without a click.

    i can't work out where i even put all the code in twine!! or translate it into sugarcube language. huge newb. so frustrating.

    ..should i use harlowe instead? seems tough to learn it all over again.
  • cahoots wrote: »
    ..should i use harlowe instead? seems tough to learn it all over again.
    What you want to do would not be any easier to implement in Harlowe.

  • edited September 2016
    SugarCube v1? Ugh.

    What you want is totally doable, but I'll need to know a few things first. What markup and CSS are you using for your chat area?
  • What markup and CSS are you using for your chat area?

    awesome it's doable!
    in the css its
    .box {
        width: 620px;
        height: 400px;
    		
    	
    		padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
    	
        background-color: black;
        animation-name: example;
        animation-duration: 4s;
    		overflow:auto;
    }
    
    that

    and then this html around the text
    <div class="box"></div>
    
    the text has extra html per line for colours too

    i'm not sure what that "animation-name" part is i just straight up copied it from a site.
    let me know if you need more? thankyou!
  • edited September 2016
    The screenshot above shows a doubled border around the chat area, where is that coming from?

    EDIT: Also, without additional setup, the animation properties you're showing there are nonsense—meaning you probably should remove them.
  • edited September 2016
    Nevermind. Here's an example to look at. It includes a JavaScript module to handle the faux-chat. On any passage where you want to have a chat window, you'll need to add two elements #chat-display and #chat-messages. The former is the chat window itself and the latter is a hidden element where you place your chat messages, which are moved over to the window at a certain interval. The example shows both.

    Download the attached Twine 2 archive (right-click and save as), import it into Twine 2, and give it a play. If that looks like what you're after, dig in and examine the details.
  • @TheMadExile wow that's exactly what i want! thank you so much!! the double border was actually just in the #passages section, separate to the box, sorry. but this is perfect thanks a bunch!
Sign In or Register to comment.