Sugarcube Time System Help

Authoring Twine
,
1

If you are requesting technical assistance with Twine, please specify:
Twine Version: 2.5.1.0
Story Format: SugarCube 2.36.1
I want to make Day times like “Morning” - “Noon” etc. I use this time code;

/*
	Date & Time Widget Setup
*/
<<set
	/* This must be set to whatever the initial game date/time should be. */
	$gameDate to new Date("2015-03-17T03:24Z"); /* Must use UTC time. */
>>
<<set
	window.GameDays to [
		"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"
	];
	window.GameMonths to [
		"Jan", "Feb", "Mar", "Apr", "May", "Jun",
		"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
	];
>>


/*
	Date & Time Advancement Widget Definitions
*/
/* Adds the specified number of minutes. */
<<widget "addmins">>\
<<run $gameDate.setUTCMinutes($gameDate.getUTCMinutes() + $args[0])>>\
<</widget>>

/* Adds the specified number of hours. */
<<widget "addhours">>\
<<run $gameDate.setUTCHours($gameDate.getUTCHours() + $args[0])>>\
<</widget>>

/* Adds the specified number of days. */
<<widget "adddays">>\
<<run $gameDate.setUTCHours($gameDate.getUTCHours() + $args[0] * 24)>>\
<</widget>>


/*
	Date & Time Printing Widget Definitions
*/
/* Prints the current date ("{weekday} {month} {day}, {year}"). */
<<widget "date">>\
<<print String.format("{0} {1} {2}, {3}",
	GameDays[$gameDate.getDay()],
	GameMonths[$gameDate.getMonth()],
	$gameDate.getDate(),
	$gameDate.getFullYear()
)>>\
<</widget>>

/* Prints the current time (12H). */
<<widget "time12h">>\
<<if $gameDate.getUTCHours() eq 0>>\
12\
<<elseif $gameDate.getUTCHours() gt 12>>\
<<print $gameDate.getUTCHours() - 12>>\
<<else>>\
<<print $gameDate.getUTCHours()>>\
<</if>>:\
<<if $gameDate.getUTCMinutes() lt 10>>0<</if>><<print $gameDate.getUTCMinutes()>> \
<<if $gameDate.getUTCHours() gte 12>>PM<<else>>AM<</if>>\
<</widget>>

/* Prints the current time (24H). */
<<widget "time24h">>\
<<if $gameDate.getUTCHours() lt 10>>0<</if>><<print $gameDate.getUTCHours()>>:\
<<if $gameDate.getUTCMinutes() lt 10>>0<</if>><<print $gameDate.getUTCMinutes()>>\
<</widget>>

/* Prints the current date and time (12H). */
<<widget "datetime">><<date>> <<time12h>><</widget>>

And this one is what I’m trying to do. It works only halfway as example Night doesn’t show and sometimes the others are not in correct hours can anyone help me?

I added in StoryInit this:
<<set $DayTime to "Morning">>

And I added this to the StoryCaption;
<<if $gameDate.getUTCHours() gte 6 and $gameDate.getUTCHours() lte 11>>
<<set $DayTime to "Morning">>
<<elseif $gameDate.getUTCHours() gte 12 and $gameDate.getUTCHours() lte 16>>
<<set $DayTime to "Afternoon">>
<<elseif $gameDate.getUTCHours() gte 17 and $gameDate.getUTCHours() lte 20>>
<<set $DayTime to "Evening">>
<<elseif $gameDate.getUTCHours() gte 21 and $gameDate.getUTCHours() lte 4>>
<<set $DayTime to "Night">>
<</if>>
2

The number representing the hours can’t be both >= 21 and <= 4. You need a logical “or” instead of an “and” in there.

And the number 5 isn’t represented in your structure; depending on whether you’d want to count that as morning or night, you should change “gte 6” to “gte 5” in the first condition or “lte 4” to “lte 5” in the last condition.

3

I did what you said, but it didn’t work, it changes from Morning to Afternon with delay but it works the same with Afternoon to Evening. But Night doesn’t work at all.

Can you show me an example how to make it with “or”?

4

Going by the Sugarcube docs, it should be possible by just replacing the “and” with an “or”:

<<elseif $gameDate.getUTCHours() gte 21 or $gameDate.getUTCHours() lte 4>>
5

I changed the code a bit and it works now like the way I wanted. I’ll leave the code here so anyone can use it.

<<if $gameDate.getUTCHours() is 6>>
<<set $Period to "Early Morning">>
<<elseif $gameDate.getUTCHours() is 7>>
<<set $Period to "Early Morning">>
<<elseif $gameDate.getUTCHours() is 8>>
<<set $Period to "Early Morning">>
<<elseif $gameDate.getUTCHours() is 9>>
<<set $Period to "Morning">>
<<elseif $gameDate.getUTCHours() is 10>>
<<set $Period to "Late Morning">>
<<elseif $gameDate.getUTCHours() is 11>>
<<set $Period to "Late Morning">>
<<elseif $gameDate.getUTCHours() is 12>>
<<set $Period to "Noon">>
<<elseif $gameDate.getUTCHours() is 13>>
<<set $Period to "Afternoon">>
<<elseif $gameDate.getUTCHours() is 14>>
<<set $Period to "Afternoon">>
<<elseif $gameDate.getUTCHours() is 15>>
<<set $Period to "Afternoon">>
<<elseif $gameDate.getUTCHours() is 16>>
<<set $Period to "Afternoon">>
<<elseif $gameDate.getUTCHours() is 17>>
<<set $Period to "Evening">>
<<elseif $gameDate.getUTCHours() is 18>>
<<set $Period to "Evening">>
<<elseif $gameDate.getUTCHours() is 19>>
<<set $Period to "Evening">>
<<elseif $gameDate.getUTCHours() is 20>>
<<set $Period to "Night">>
<<elseif $gameDate.getUTCHours() is 21>>
<<set $Period to "Night">>
<<elseif $gameDate.getUTCHours() is 22>>
<<set $Period to "Night">>
<<elseif $gameDate.getUTCHours() is 23>>
<<set $Period to "Night">>
<<elseif $gameDate.getUTCHours() is 24>>
<<set $Period to "Night">>
<<elseif $gameDate.getUTCHours() is 1>>
<<set $Period to "Night">>
<<elseif $gameDate.getUTCHours() is 2>>
<<set $Period to "Night">>
<<elseif $gameDate.getUTCHours() is 3>>
<<set $Period to "Night">>
<<elseif $gameDate.getUTCHours() is 4>>
<<set $Period to "Night">>
<<elseif $gameDate.getUTCHours() is 5>>
<<set $Period to "Night">>
<</if>>

But I have one question how can I make it as image version? Should I just add the image path to the “Night” in <<set $Period to "Night">> or with css?

6

I think the shorter earlier version which combines the outcomes into the minimally necessary branches should work equally well (with modifications for different morning phases, noon etc.)? But if it works as intended, that’s okay, of course.

I think there are various ways to do that; it depends on the general context: how/where you want to insert images, when do you switch passages/contents/time, how you have named the files, and so on.

It should be possible to combine the Period with a filename ending, roughly like this:

<<set $picname to $Period + ".png">>

and then, somewhere else in a passage:

[img[$picname]]

or something like:

<img @src="$Period + '.png'">

(Assuming you have image files called Evening.png etc.; but pay attention to capitalization and spaces with regard to the filenames. It’s usually best to keep filenames in lowercase and with hyphens, like “early-morning.png”; so you might want to set them explicitly in the branches, like <<set $picname to "early-morning.png">>). Or you can later check the time period in an if statement, and then load the image as appropriate.

See also these posts, for example:
Variable image using widget - #2 by HiEv, Variable Avatar Image - #2 by manonamora

If it’s not working, it might be best to open a new thread, so that people can see at a glance that there’s an unsolved problem.

1 Like