// ---- The Main script of the task ---- // This script use the Konva library to // use the canvas of HTML5 // ---- Define stage and elements var width = window.innerWidth; var height = window.innerHeight; // stage var stage = new Konva.Stage({ container: 'container', width: width, height: height, }); // layer var layer = new Konva.Layer(); // two circles each for an option var option_01 = new Konva.Circle({ x: stage.width() / 4, y: stage.height() / 2, radius: 30, fill: 'red', stroke: 'black', strokeWidth: 4, listening: false, visible: false, }); var option_02 = new Konva.Circle({ x: 3 * stage.width() / 4, y: stage.height() / 2, radius: 30, fill: 'red', stroke: 'black', strokeWidth: 4, listening: false, visible: false, }); var next_round_button = new Konva.Circle({ x: stage.width() / 2, y: 3 * stage.height() / 4, radius: 20, fill: 'blue', stroke: 'black', strokeWidth: 4, visible: false, }); // text for debug function writeMessage(message) { text.text(message); } var text = new Konva.Text({ x: 10, y: 10, fontFamily: 'Calibri', fontSize: 24, text: '', fill: 'black', }); //---- Bind actions to elements option_01.on('mousedown', function () { writeMessage('on a1'); liveSend({'type':'data','choice':1}); option_01.listening(false); option_02.listening(false); next_round_button.show(); }); option_02.on('mousedown', function () { writeMessage('on a2'); liveSend({'type':'data','choice':2}); option_01.listening(false); option_02.listening(false); next_round_button.show(); }); next_round_button.on('mousedown',function(){ liveSend({'type':'control','msg':'trial_finished'}); is_finished = true; next_round_button.hide(); }) // add the shape to the layer layer.add(option_01); layer.add(option_02); layer.add(next_round_button); layer.add(text); // add the layer to the stage stage.add(layer); // ---- Define lvieRecv function for processing the data get from server var current_actor = 0; var my_id = 0; function liveRecv(data) { switch(data.msg_type){ case 'control': switch(data.msg){ case 'initialization': my_id = data.player_id; //writeMessage('my id is'.concat(my_id.toString())); case 'all_players_finished': current_actor = data.next_actor; if(current_actor === my_id){ writeMessage('You are the actor, please choose'); option_01.listening(true) option_02.listening(true) }else{ writeMessage('You are the receiver, please wait'); } break; case 'task_ended': document.getElementById("form").submit(); break; } break; case 'data': switch(data.stage){ case 'send': writeMessage('The actor chose '.concat(data.chosen_player.toString()).concat('. Please press the continue button to go to next round.')) next_round_button.show(); option_01.listening(false); option_02.listening(false); break; } break; } } // ---- Run game_ready = 'Ready!'; window.addEventListener('DOMContentLoaded', (event) => { liveSend({'type':'control','msg':'page_loaded'}); });