// ---- The Main script of the task ----
// This script use the Konva library to 
// use the canvas of HTML5


// ---- Define all elements
var width = $("#form").innerWidth();
var height = $("#form").innerWidth();

// stage
var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height,
});

// ---- The Main script of the task ----
// This script use the Konva library to 
// use the canvas of HTML5


// ---- Define all elements
var width = $("#form").innerWidth();
var height = $("#form").innerWidth();

// stage
var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height,
});

var my_id = 1; // in practice, every player is player 1
// layer
var layer = new Konva.Layer();

var interface_center = [stage.width() / 2 - stage.width()/6, stage.height() / 4 *1.5];
// table plate
stage.add(layer);

function writeMessage(text,message) {
    text.text(message);
}
var self_table_text = new Konva.Text({
    x: interface_center[0],
    y: interface_center[1] - stage.width()/6/3,
    fontFamily: 'Calibri',
    fontSize: stage.width() / 30,
    text: "",
    fill: 'black',
});
const img_01 = new Image();

var player_seat = new Konva.Group({
    x: interface_center[0] + stage.width()/3 - stage.width()/6/6,
    y: interface_center[1] - stage.width()/6/2.5,
    name: "seat",
});
var example_rect =  new Konva.Image({
    x: 0,
    y: 0,
    image: img_01,
    width: stage.width()/6/3,
    height: stage.width()/6/3,
    fill:"white",
    opacity:1,
    visible: true,
    stroke: "black",
    strokeWidth: 0,
    fillAfterStrokeEnabled: true,
});
player_seat.add(example_rect);
layer.add(self_table_text);
layer.add(player_seat);

var other_table_text = self_table_text.clone()
    .setAttr('y',interface_center[1] + stage.width()/6/4);
layer.add(other_table_text);

var  next_round_button= new Konva.Label({
    x: interface_center[0],
    y: interface_center[1] + stage.width()/6/1.5,
    opacity: 0.75,
    visible: true,
});
layer.add(next_round_button);

next_round_button.add(new Konva.Tag({
    fill: 'black',
    lineJoin: 'round',
    cornerRadius: 5,
    shadowColor: 'black',
    shadowBlur: 0,
    shadowOffset: 0,
    shadowOpacity: 0.75
}));

next_round_button.add(new Konva.Text({
    text: '继续',
    fontFamily: 'Calibri',
    fontSize: stage.width()/30,
    padding: 5,
    fill: 'white'
}));

next_round_button.on('mouseout', function() {
    next_round_button.setAttr('opacity', 0.75);
})
next_round_button.on('mouseover', function() {
    next_round_button.setAttr('opacity', 1);
})
next_round_button.on('mousedown', function() {
    writeMessage(other_table_text,"等待其他玩家继续实验... ");
    liveSend({ 'type': 'control', 'msg': 'trial_finished' });
    is_finished = true;
    next_round_button.hide();
})


function recover_state(data){
    player_no_list = data.player_no_list;
    trial_finished_list  = data.trial_finished_list;

    self_idx = 0;
    for(let i = 0;i < 4;i++){
        if(player_no_list[i] == self_no){
            self_idx = i;
            break;
        }
    }
    self_trial_finished = trial_finished_list[self_idx];
    if(self_trial_finished == 0) return;

    writeMessage(other_table_text,"等待其他玩家继续实验... ");
    is_finished = true;
    next_round_button.hide();

    all_finished = 1;
    for(i = 0;i < 4;i++){
        if(trial_finished_list[i] == 0){
            all_finished = 0;
        }
        if(chosen_player_list[i] == 0||revealed_player_list[i] ==0){
            all_chosen = 0;
        }
    }
    if(all_finished == 0) return; //wait for others to choose.

}
var self_no = 1;
function liveRecv(data) {
    switch (data.msg_type) {
        case 'control':
            switch (data.msg) {
                case 'initialization':
                    my_id = data.player_id;
                    self_no = data.player_no;
                    condition = data.condition;
                    image_seq = [data.img_01,data.img_02,data.img_03,data.img_04];
                    self_img_no = image_seq[self_no-1];

                    if(condition == 1){
                    }else{
                    }
                    img_01.src = '/static/imgs/image_'+ self_img_no.toString().padStart(4,'0')+'.webp'
                    player_seat.find('Image')[0]
                        .setAttr('image',img_01);
                    writeMessage(self_table_text,'在这一任务块中你是');

                    if(condition == 1){
                        writeMessage(other_table_text,"这个任务块 有奖励");
                    }else{
                        writeMessage(other_table_text,'这个任务块 无奖励');
                    }
                    recover_state(data);
                    break;
                case 'all_players_finished':
                case 'task_ended':
                    document.getElementById("form").submit();
                    break;
            }
            break;
    }
}
layer.draw();
// ---- Run
game_ready = 'Ready!';
window.addEventListener('DOMContentLoaded', (event) => {
    liveSend({ 'type': 'control', 'msg': 'page_loaded' });
});