var square_width = 200;
var square_height = 80;
var canvas_width = 600;
var blue_light = "#7CD1E8";
var blue_border = "#5999AA";
var blue_text = "#2099BA";
var font_color = "#111";

var orange_light = "#FFBD84";
var orange_border = "#BC8A5F";
var orange_text = "#FF7A0D";

// Define a function to draw game tree 
// function drawTree() {
function formatNumber(number) {
    let sign = "";
    if (number > 0) {
        sign = "+";
    } else if (number < 0) {
        sign = "-";
    }
    return sign + Math.abs(number).toString();
}

function drawTree(p1_tails = "0", p2_tails = "-5", p1_left = "+5", p1_left_prob = "0.9", p1_left_otherwise = "-100", p2_left = "+5", p1_right = "-5", p2_right = "+10", canvasid="myCanvas") {
    // function drawTree(param_setting="rare_disaster") {
    // if(param_setting == "rare_disaster") {
    //     var p1_tails = "0";
    //     var p2_tails = "-5";
    //     var p1_left = "+5";
    //     var p1_left_prob = "0.9";
    //     var p1_left_otherwise = "-100";
    //     var p2_left = "+5";
    //     var p1_right = "-5";
    //     var p2_right = "+10";
    // } else if(param_setting == "rare_treasure") {
    //     var p1_tails = "0";
    //     var p2_tails = "-5";
    //     var p1_left = "-10";
    //     var p1_left_prob = "0.95";
    //     var p1_left_otherwise = "100";
    //     var p2_left = "+5";
    //     var p1_right = "-5";
    //     var p2_right = "+10";
    // } else{
    //     // Somethin went wrong
    //     console.log("Something went wrong, invalid parameter setting", param_setting);
    // }
    const canvas = document.getElementById(canvasid);
    const ctx = canvas.getContext("2d");
    // Draw the P2 square
    ctx.fillStyle = orange_light;
    ctx.roundRect(100, 200, square_width, square_height, 20);
    ctx.fill();
    ctx.strokeStyle = orange_border;
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.fillStyle = font_color;
    ctx.font = "bold 22px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("Player 2", 200, 240);


    // Draw the P1 square
    ctx.fillStyle = blue_light;
    ctx.roundRect(200, 25, square_width, square_height, 20);
    ctx.fill();
    ctx.strokeStyle = blue_border;
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.fillStyle = font_color;
    ctx.fillText("Player 1", 300, 65);

    // Draw line from square 1 to square 2
    ctx.beginPath();
    ctx.moveTo(300, 105);
    ctx.lineTo(200, 200);
    ctx.lineWidth = 3;
    ctx.strokeStyle = blue_border;
    ctx.stroke();

    // Draw the second line
    ctx.beginPath();
    ctx.moveTo(300, 105);
    ctx.lineTo(400, 200);
    ctx.lineWidth = 3;
    ctx.strokeStyle = blue_border;
    ctx.stroke();

    // Draw strategy names 
    ctx.fillStyle = blue_border;
    ctx.textBaseline = "right";
    ctx.textAlign = "right";
    ctx.fillText("HEADS", 240, 152);

    ctx.textBaseline = "left";
    ctx.textAlign = "left";
    ctx.fillText("TAILS", 360, 152);

    // Draw outcomes 
    ctx.fillStyle = blue_text;
    ctx.fillText(`${p1_tails} with certainty`, 340, 220);
    ctx.fillStyle = orange_text;
    ctx.fillText(`${p2_tails} with certainty`, 340, 250);




    // Draw p2 strategies
    ctx.beginPath();
    ctx.moveTo(200, 280);
    ctx.lineTo(100, 375);
    ctx.lineWidth = 3;
    ctx.strokeStyle = orange_border;
    ctx.stroke();

    ctx.moveTo(200, 280);
    ctx.lineTo(300, 375);
    ctx.lineWidth = 3;
    ctx.strokeStyle = orange_border;
    ctx.stroke();

    // Draw p2 strategy names
    ctx.fillStyle = orange_border;
    ctx.textBaseline = "right";
    ctx.textAlign = "right";
    ctx.fillText("LEFT", 140, 327.5);

    ctx.textBaseline = "left";
    ctx.textAlign = "left";
    ctx.fillText("RIGHT", 260, 327.5);

    // Draw p2 outcomes
    ctx.fillStyle = blue_text;
    ctx.fillText(`${p1_right} with certainty`, 280, 395);
    ctx.fillStyle = orange_text;
    ctx.fillText(`${p2_right} with certainty`, 280, 425);

    ctx.fillStyle = blue_text;
    ctx.fillText(`${p1_left} with probability ${p1_left_prob},`, 0, 395);
    ctx.fillText(`${p1_left_otherwise} otherwise`, 0, 425);
    ctx.fillStyle = orange_text;
    ctx.fillText(`${p2_left} with certainty`, 0, 455);
}

// Function to draw rounded rectangles
CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius) {
    this.beginPath();
    this.moveTo(x + radius, y);
    this.lineTo(x + width - radius, y);
    this.quadraticCurveTo(x + width, y, x + width, y + radius);
    this.lineTo(x + width, y + height - radius);
    this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    this.lineTo(x + radius, y + height);
    this.quadraticCurveTo(x, y + height, x, y + height - radius);
    this.lineTo(x, y + radius);
    this.quadraticCurveTo(x, y, x + radius, y);
    this.closePath();
    return this;
};  



const getDeviceType = () => {
    const ua = navigator.userAgent;
      console.log(ua);
    if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
      return "tablet";
    }
    if (
      /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
        ua
      )
    ) {
      return "mobile";
    }
    return "desktop";
  };