HTML Any css templates/framework to import in sugarcube

[Karatus]

I noticed that most of the games now have the same templates for dialogues with the portrait in a box on the left and a coloured background in a box, is this just copy pasting the css from other games or is there a template project somewhere to download to start with?

 

[Alcahest]

I think you're talking about Chapel's macro.

You must be registered to see the links

 

[guest1492]

On another note, you can find templates on itch.io. There's also this

You must be registered to see the links

, but please only add the custom macros that you'll actually use. (I've seen someone who added everything to their project and asking for help with troubleshooting.)

 

[Satori6]

I built my own, but it's meant to be used with JS, instead of Sugar/TwineScript, as I don't like coding in the Twine IDE.

It also allows me to throw dozens of passages into a single file, instead of having to find the one that I want to edit on Twine's "map".

The options linked on the replies above are probably best, but I'll leave it here in case somebody wants to use it as a template for their own projects:



It looks like this (you can infer what functions like getFolder do):

window.chat=function(passage_data){
    let values=['TYPE','RECURRING','RANDOM'];       
    let firstIndex=values.indexOf('RANDOM')+1;   
    let folder=getFolder();   
    let path=getPath('img');
    let html='', i=firstIndex-1, data=passage_data, l=data.length, key, portrait='right', last='',char='', rec;   
    html+='<div class="container">';   
    while(++i<l){
        key=data[i].substring(0,1);
        if(key=='*'){        // Narration
            html+='<p class="narration">'+data[i].substring(1)+'</p>';
            continue;           
        }
        else if(key=='-'){    // Dialogue
            if(!last){
                last=data[i].substring(1);
                portrait='left';
            }
            else{
                if(last!=data[i].substring(1)){
                    last=data[i].substring(1);
                    portrait=portrait=='left'?'right':'left';
                }
            }       
            char=charCSS(data[i].substring(1));
            html+='<p class="dialogue '+char+'">';           
            if(char=='player'){
                html+='<img class="portrait '+portrait+' '+char+'" src="'+SugarCube.State.variables._my.picture+'">';   
            }
            else{
                rec=(data[values.indexOf('RECURRING')].hasOwnProperty(char));                           
                html+='<img class="portrait '+portrait+' '+char+'" src="'+path/*+'portraits/'*/;
                if(rec){
                    html+='npc/'+char+'/'+data[values.indexOf('RECURRING')][char];}
                else{html+=data[values.indexOf('RANDOM')[char]];}
                html+='">';
            }
            html+='<div class="char_name '+portrait+' '+(white(char)?'white':'')+'">';
            if(SugarCube.settings.dialogueNames){
                html+='<span class="charname ">'+charName(char)+'</span>';
                html+='<hr>';
                if(data[i+1].includes('\n')){
                    closed=true;
                }
            }
            html+=data[++i];
            if(!closed){
                html+='</div>'
            }           
            html+='</p>';
            continue;
        }
    }
    html+='</div>';
    return html;
}

And then you use it like:

window.dinner_news=function(){    // Before the news
    return [
    'chat',
    {'woman_1':'default.jpg',
     'man_1':'default.jpg'},
    {},
    '*As you take a bite of the pimento cheeseburger, the creamy cheese oozes out and blends perfectly with the juicy patty, \
    making your taste buds dance with delight.',
    '-player',
    'The food, on the other hand, could be nominated for a... what are food awards called?',
    '-woman_1',
    'Yummies?',
    '-man_1',
    'Close enough: Sammies.  At least for sandwiches.',
    '-woman_1',
    'Nerd.',
    '-man_1',
    'We\'re all nerds in here.  Besides, I saw it in an episode of...',
    '*Your chat is interrupted by the dimming of the lights in the room.'
    ];
}