Hello all!
I’m making a game for schools using Twine at the moment, and at a few points in the game we want the students to stop and talk about what they’ve read so far.
We thought the best way to do this was to add a little countdown clock than can be set for 5 minutes or so, and I found a neat little sample game to help implement one.
http://www.glorioustrainwrecks.com/files/Timer%20Test.tws
(download link)
the problem with this however is that the clock is displayed in the games sidebar, and we do not have one in our game (or a back button, since we don’t want kids gaming the choices).
I’ve tried my best to move the clock to the body of the game instead but all my effors only result in it not displaying at all…
The addon in the sample game reads as follows:
<<silently>>
<<set $TimerAddon =
function()
{
var div_timer_container = document.createElement('div');
div_timer_container.setAttribute('id', 'timer');
var div_timer_canvas = document.createElement('canvas');
div_timer_canvas.setAttribute('id', 'timer_canvas');
div_timer_canvas.setAttribute('width', '150');
div_timer_canvas.setAttribute('height', '150');
div_timer_canvas.width = div_timer_canvas.width;
div_timer_container.appendChild(div_timer_canvas);
var div_timer_text = document.createElement('span');
div_timer_text.setAttribute('id', 'timer_text');
div_timer_text.innerHTML = "Hurry Up!";
div_timer_container.appendChild(div_timer_text);
var Timer_Active = false;
var Timer_Paused = false;
var Timer_Mode = 'none';
var Timer_Param = "";
var Timer_Max = 0;
var Timer_Now = 0;
var div_jonah_floater = document.getElementById('floater');
if(div_jonah_floater) div_jonah_floater.appendChild(div_timer_container);
var div_sugarcane_menu = document.getElementById('sidebar');
if(div_sugarcane_menu) div_sugarcane_menu.appendChild(div_timer_container);
function StartTimer(val)
{
Timer_Active = true;
Timer_Paused = false;
Timer_Max = val;
Timer_Now = val;
div_timer_text.style.display = 'block';
div_timer_canvas.style.display = 'block';
}
function StopTimer()
{
Timer_Active = false;
div_timer_text.style.display = 'none';
div_timer_canvas.style.display = 'none';
}
function PauseTimer()
{
Timer_Paused = true;
}
function ResumeTimer()
{
Timer_Paused = false;
}
function SetTimerText(text)
{
div_timer_text.innerHTML = text;
}
function SetTimerMode(mode)
{
if(mode == 'display')
{
Timer_Mode = 'display';
}
else if(mode == 'restart')
{
Timer_Mode = 'restart';
}
else Timer_Mode = 'none';
}
function SetTimerParam(param)
{
Timer_Param = param;
}
function OnTimerEnd()
{
StopTimer();
if(Timer_Mode == 'restart')
{
state.restart();
if(Timer_Param) alert(Timer_Param);
window.location.reload(true);
}
else if(Timer_Mode == 'display')
{
state.display(Timer_Param[0]);
}
}
function OnTimerTick()
{
if(Timer_Active && !Timer_Paused)
{
Timer_Now = Timer_Now - 0.1;
if(Timer_Now <= 0) Timer_Now = 0;
var context = div_timer_canvas.getContext("2d");
div_timer_canvas.width = div_timer_canvas.width;
var x = div_timer_canvas.width / 2;
var y = div_timer_canvas.height / 2;
var radius = 65;
var startAngle = 1.5 * Math.PI;
var endAngle = (1.5 + (2 / Timer_Max * Timer_Now)) * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
if(div_jonah_floater) context.strokeStyle = "black";
if(div_sugarcane_menu) context.strokeStyle = "#BBBBBB";
context.stroke();
context.font = 'bold 30px sans-serif';
if(div_jonah_floater) context.fillStyle = "black";
if(div_sugarcane_menu) context.fillStyle = "#BBBBBB";
context.fillText(Timer_Now.toFixed(1), 55, 85);
if(Timer_Now <= 0) OnTimerEnd();
}
}
setInterval(function(){ OnTimerTick(); }, 100);
macros['start_timer'] =
{
handler: function(obj, fnc, val)
{
StartTimer(val);
}
}
macros['stop_timer'] =
{
handler: function(obj, fnc, val)
{
StopTimer();
}
}
macros['pause_timer'] =
{
handler: function(obj, fnc, val)
{
PauseTimer();
}
}
macros['resume_timer'] =
{
handler: function(obj, fnc, val)
{
ResumeTimer();
}
}
macros['set_timer_text'] =
{
handler: function(obj, fnc, val)
{
SetTimerText(val);
}
}
macros['set_timer_mode'] =
{
handler: function(obj, fnc, val)
{
SetTimerMode(val);
}
}
macros['set_timer_param'] =
{
handler: function(obj, fnc, val)
{
SetTimerParam(val);
}
}
}
>>
<<print $TimerAddon()>>
<<endsilently>>
Plenty of this can be removed for our game (everything about Jonah for example) but the change i’m looking for is how to get it out of that nonexistant sidebar.
…can anyone help?
