control CSS-positioning via variable (SC 2)

richVIE

Hey everybody!

[img][/img] For my colaborative writing project (I've bugged the forum with it on other occasions), I want to show the writers position within the arc of tension dynamically using the image I attached.

Here is what I'd like to accomplish:

1. There is a finishing date, when the all the stories are supposed to have been finished.
2. There is a determined amount of steps (e.g. weekly meetings) which divide the period from the start to the finish date.
3. Using the provided image, I'd like a pointer (basically a vertical line which moves horizontally) to show the position within the arc of suspense. This means that let's say after three weeks the pointer moved e.g. 30% from left to right.

My question concerns mainly the styling part of this problem. I guess I could just go and calculate the position of the pointer manually and toggle classes as time moves on, but I am sure there is a better solution which can calculate the "animation" of the pointer.

richVIE

Sorry, me again. I was thinking that using SVG could work. Is there maybe a way to control elements of SVG-graphics using SugarCube variables?

Can anybody think of a game, where SVG is used dynamically?

Carradee

I believe you'll need JavaScript. You get the date, do a bit of math to calculate the % position relative to deadline, then change the pertinent DOM property on the specific element or ID you need changed.

The CSS calc function mostly works, but that won't get you a date for calculating where the line needs to be located.

TheMadExile

How are you creating the vertical line you refer to?

richVIE

Thank you, @Carradee , I'look into that, my principal concern in the moment is the DOM maniulation part.

@TheMadExile : I'd use whatever suits best (easiest). I was thinking of a very narrow div put on top of the image. Is there a way to set e.g. $pointerXvalue and assign this to the CSS of said element?

TheMadExile

Exactly what you'll have to do will depend on how you ultimately implement all of this, however, as far as changing the line's style properties, you could simply use jQuery to do that—all versions of SugarCube include jQuery.

For example. Assume the line is something like <div id="line"></div> and you're positioning it via its left property. The following will set it to 300px in from its initial position:

<<script>>
$('#line').css({ left : '+=300px' });
<</script>>

To do the same thing, but animated over three seconds:

<<script>>
$('#line').animate({ left : '+=300px' }, 3000);
<</script>>

SEE: <jQuery>.css() method and <jQuery>.animate() method.

richVIE

One last question - I am almost there: How can I pass a SugarCube variable to the jQuery method (e.g. +=$xOffSet instead of +=300px)?

Here is what I came up with to calculate the pointer position in respect to start, finish and current date:

<<silently>>
<<set $startDate to new Date("January 1, 2017")>>
<<set $finishDate to new Date("May 31, 2017")>>
<<set $currentDate to new Date()>>
<<set $days to 1000*60*60*24>>
<<set $duration to $finishDate - $startDate>>
<<set $timeToEnd to $finishDate - $currentDate>>
<<set $imageWidth to 800>>
<<set $steps to Math.floor($duration / $days / 7)>>
<<set $timePassed to $currentDate - $startDate>>
<<set $weeksPassed to Math.floor($timePassed / $days / 7)>>
<<set $stepWidth to Math.floor($imageWidth / $steps)>>
<<set $progressOffset to $stepWidth * $weeksPassed>>
<</silently>>


<div id="container">
<img id="arc" src="https://placehold.it/800x600.png">;
<img id="pointer" src="https://placehold.it/3x600.png/cc0000">;
</div>

<<script>>
	$('#pointer').css({ left : '+=20px' });
<</script>>

The CSS to have the pointer appear on top of the image, just in case it might be useful to somebody is

#container {
  position: relative;
  top: 0;
  left: 0;
}
#arc {
  position: absolute;
	z-index:1;
}
#pointer {
  position: relative;
  top: -30px;
  left: 0px;
	z-index:3;
}

richVIE

Sorry to push this one again. Is there really no way to control the pixel value in

<<script>>
$('#line').css({ left : '+=300px' });
<</script>>

using a SugarCube variable (e.g. "+=" + $progress + "px" instead of +=300px)?

TheMadExile

My apologies. I seem to have missed your reply somehow.

richVIE wrote: »

[…] Is there really no way to control the pixel value in

<<script>>
$('#line').css({ left : '+=300px' });
<</script>>

using a SugarCube variable (e.g. "+=" + $progress + "px" instead of +=300px)?

As noted in the <<script>> macro's documentation, it executes code as JavaScript, not TwineScript. The relevant line (bold emphasis added):

Silently executes its contents as pure JavaScript code (i.e. it performs no story or temporary variable substitution or TwineScript operator processing). […]

That being the case, you'll need to use one of the methods of accessing story variables—since $progress is a story variable—available within pure JavaScript. To access the current story variable store, you may use either State.variables or the variables() function—n.b. you do not use the story variable sigil ($) in this case. For example:

// Using State.variables
$('#line').css({ left : '+=' + State.variables.progress + 'px' });

// Using variables()
$('#line').css({ left : '+=' + variables().progress + 'px' });

I tend to prefer using State.variables as it doesn't require an extra function call.