game_shoubo/public/js/mode/selectMode.js

 
function SelectMode () {
    let zodiac_animal_list = ["Rat", "Ox", "Tiger", "Rabbit", "Dragon", "Snake", "Horse", "Goat", "Monkey", "Rooster", "Dog", "Pig"];
    let that = {};
    let zodiac_id = 0;
    
    let ENUM_SELECT_STATE = {
        SELECT: 0,
        PREPARE_BEGIN: 1
    }

    let select_state = null;
    let begin_result_img;
    let select_zodiac = "rat";


    //responsive stuffs;
    let canvas;
    let ctx;
    let scale;  
    let baseWidth = 3840 * 0.5;
    let baseHeight = 2160 * 0.5;
    let baseRatio = baseWidth/baseHeight;

    let defaultTextSize = 95 * 0.5;
    let btnSize = 297 * 0.5;
    let dropdownSize = 280 * 0.5;
    let beginResImgSpecialScale = 3.0 * 0.5;

    let text_select_state_desc = "";

    that.resizeWindow = function() {
        canvas.width = window.innerWidth*devicescreenratio;
        canvas.height = window.innerHeight*devicescreenratio;

        canvas.style.width = window.innerWidth + "px";
        canvas.style.height = window.innerHeight + "px";
        
        ctx.setTransform(devicescreenratio, 0, 0, devicescreenratio, 0, 0);

        width = window.innerWidth;
        height = window.innerHeight;
        
        c = {x: width / 2.0, y: height / 2.0 };
        degree = -90;

        scale = width / height > baseRatio ?  height / baseHeight :  width / baseWidth;
    }

    that.setup = function () {
        that.createModalZodiac();
        that.setOnJqueryClickListener();
     
        select_state = ENUM_SELECT_STATE.SELECT;
        that.initZodiac();
        

        circle_mask = new Image();
        circle_mask.onload = function(){}
        circle_mask.src = "content/ui/circle_mask.png";

        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');  
        
    }  

    that.initZodiac = function() {
        zodiac_id = 11;
        select_zodiac = zodiac_animal_list[zodiac_id];
        let get_zodiac_name = zodiac_animal_list[zodiac_id].toLocaleLowerCase();
        let btn_path = 'content/ui/animal_button/' + get_zodiac_name + '_button.png'; 
        let date = new Date();
        let year = date.getFullYear().toString().slice(2);
        
        $("#date_text").html(year);  
        $("#select_zodiac").css({'background-image': 'url(' +btn_path+')'});
        that.setSelectorZodiac(zodiac_id);
    }

    that.update = function() {
        that.resizeWindow();       
    }

    that.draw = function() {
        if(select_state === ENUM_SELECT_STATE.SELECT) {
            that.drawBg();
            that.drawText();
            that.drawInput();              
        } else {
            ctx.save();            
            let briscale = beginResImgSpecialScale * scale;
            let y = c.y - circle_mask.height * 0.3* scale  - begin_result_img.height * 0.5 *briscale ;
            let x = c.x - begin_result_img.width * 0.5 * briscale; 
            that.drawBg();
            ctx.drawImage(  begin_result_img,x,y,begin_result_img.width * briscale,begin_result_img.height * briscale);
           

            let h = defaultTextSize * scale;
            let header_h = h * 1.2;
            let line_h = h*0.83;
			let instruction_h = h*0.73;
            
            ctx.translate(c.x, c.y);
            ctx.font = header_h  + "px " + $.i18n('fonts_primary');
            ctx.fillStyle ='rgb(160, 56, 57)';
            ctx.textAlign = "center";
            let str_zodiac_animal =  splitText($.i18n('copy_in_spotlight', zodiac_message_list[zodiac_id]), "|");
            let origin = -3.2;
            if(str_zodiac_animal) {
				ctx.font = header_h + "px " + $.i18n('fonts_primary');
                for(var i = 0;i < str_zodiac_animal.length; i++) {
                    ctx.fillText(str_zodiac_animal[i], 0 , line_h * origin);
                    origin += 1.0;
                }
            }

     		ctx.font = instruction_h + "px " + $.i18n('fonts_primary');
            let str_array_splited = splitText($.i18n('intro_begin'), "|");
            let origin_ = -1.2;

            if(str_array_splited) {
                for(var i = 0;i < str_array_splited.length; i++) {
                    ctx.fillText(str_array_splited[i], 0 , line_h * origin_);
                    origin_ += 1.0;
                }
            }         
      
            ctx.restore();
            that.drawBeginBtn();  
        }
    }


    that.drawBg = function() {       
        ctx.save();      
        ctx.drawImage(bg_img, 0, 0, width, height);
        ctx.drawImage(circle_mask, c.x - (circle_mask.width *0.5 * scale),  c.y - (circle_mask.height *0.5 * scale) ,circle_mask.width* scale,circle_mask.height* scale );
        ctx.restore();    
    }

    that.drawBeginBtn = function() {     
        let btnScaledSize = btnSize * scale;
        let y = c.y + circle_mask.height * 0.325 * scale  - btnScaledSize * 0.5;
        let x = c.x - btnScaledSize * 0.5; 
        $('#btn_begin').width(btnScaledSize);
        $('#btn_begin').height(btnScaledSize);
        $('#btn_begin').offset({top: y , left: x }); 
    
    }

    that.drawText = function() {       

        let h = defaultTextSize * scale * 0.85;
        ctx.save();
        ctx.translate(c.x, c.y);
        ctx.beginPath();
        ctx.font = h + "px " + $.i18n('fonts_primary');
        ctx.fillStyle ='rgb(172, 102, 82)';
   
        let line_h = h  * 1.3;
        let origin_ = -4;
        let str_select_desc = splitText($.i18n('select_your_chinese_zodiac_sign'), "|");


        if(str_select_desc) {
            for(var i = 0;i < str_select_desc.length; i++) {
                ctx.fillText(str_select_desc[i], -ctx.measureText(str_select_desc[i]).width / 2 , line_h * origin_);
                origin_ += 1.0;
            }
        }
        
        ctx.fill();    
        ctx.closePath();
        ctx.restore();
    }

    that.drawInput = function() {        
        //Start Button
        let btnScaledSize = btnSize * scale;
        let y = c.y + circle_mask.height * 0.325 * scale  - btnScaledSize * 0.5;
        let x = c.x - btnScaledSize * 0.5; 
       
        $('#btn_next').width(btnScaledSize);
        $('#btn_next').height(btnScaledSize);
        $('#btn_next').offset({top:y,left: x}); 
        
        $('#select_zodiac').height(btnScaledSize);
        $('#select_zodiac').width(btnScaledSize);
        $('#select_year').height(btnScaledSize );
        $('#select_year').width(btnScaledSize);              
    
        
        $('#btn_select_zodiac').width(btnScaledSize);
        $('#btn_select_zodiac').height(btnScaledSize);
    

        $('#select_year').css({top: c.y - btnScaledSize * 0.5, left: c.x - btnScaledSize * -0.5,position:'absolute'  });        
        $('#select_zodiac').css({top:  c.y - btnScaledSize *0.5 , left: c.x - btnScaledSize * 1.5  ,position:'absolute' });    
       
        let date_picker_w = $('.datepicker-dropdown').width();
        let date_picker_h = $('.datepicker-dropdown').height();

        $('.datepicker-dropdown').css({top: c.y - date_picker_h * 0.5, left: c.x - (date_picker_w * 0.5)});
        
         
        let h = defaultTextSize * scale;        
        ctx.font = h + "px " + $.i18n('fonts_primary');
        ctx.fillStyle = 'rgb(172, 102, 82)';
        let line_h = h  * 1.3;
        let text = $.i18n('or_text');
        ctx.translate(c.x, c.y);
        ctx.fillText(text, -ctx.measureText(text).width / 2, line_h * 0.3) ;
        ctx.fill(); 
        ctx.restore();
    
    }
    

    that.createModalZodiac = function () {
        let div = ""; 
        for(var i = 0; i  <  zodiac_animal_list.length; i++) {
            let animal_file = zodiac_animal_list[i].toLocaleLowerCase();
            let animal_name= zodiac_text_list[i].toLocaleLowerCase();
         
            if(i % 4 == 0){
                div += '</div>' ;
                div += '<div  class="row">' ;
            }
           
                div += '<div id="'+i +'"class="col-sm-3 btn-zodiac" >';
                div += '<p  id="zodiac_ic_name"  class="zodiac-ic-name center-message" style="font-family:' +$.i18n('fonts_primary')+'"> ' +animal_name+'</p>'
                div += '<img  width="50" src="content/ui/animal_silhouette/' +animal_file +'.png " style="	margin-left: auto; margin-right: auto;display: block;">'   ;           
                div += '</div>';                    
          
        }
    
        $("#modal_zodiac_body").append(div);

    };

    that.selectShowUI = function() {
        $('#select_zodiac').show();
        $('#select_year').show();
        $('#btn_next').show();
    }
    
    that.selectHideUI = function() {
        $('#select_zodiac').hide();
        $('#select_year').hide();
        $('#btn_next').hide();
    }

       
    that.beginShowUI = function() {
        $("#btn_begin").show();
    }

       
    that.beginHideUI = function() {
        $("#btn_begin").hide();
    }

    that.checkState = function() {
        return select_state;
    }

    that.setSelectorZodiac = function(id) {
        select_zodiac = zodiac_animal_list[id];    
        for(var i = 0; i < zodiac_animal_list.length; i++) {
            $("#" + i).find("img").attr('src','content/ui/animal_silhouette/' +zodiac_animal_list[i].toLocaleLowerCase() +'.png ');
            if(i == id) {
                $("#" + id).find("img").attr('src','content/zodiac_play/' +select_zodiac.toLocaleLowerCase() +'.png ');        
            }
        }                    
    }

    that.setOnJqueryClickListener = function() {
        $("#btn_next").on('click', function(){    
            that.selectHideUI();  
        
            begin_result_img = new Image();
            begin_result_img.onload = function(){
                select_state = ENUM_SELECT_STATE.PREPARE_BEGIN;
                $("#btn_begin").show();
                           
            }
            begin_result_img.src = "content/zodiac_black/"+select_zodiac.toLocaleLowerCase()+".png";         
   
        });

        $("#btn_begin").on('click', function() {
            that.selectHideUI();  
            playMode.resetState();
            playMode.initZodiac(zodiac_id);
            playMode.showUI();
            playMode.setup();           
            mode = ENUM_MODE.PLAY;
            that.beginHideUI();
        });



        $('.datepicker').datepicker({            
            minViewMode: 0,     
            startView:2,
            format: 'dd/mm/yyyy',       
            orientation: "center",
            autoclose: true,
            language: lang=='zh-cn'?'zh-CN':'en-us',
            defaultViewDate: {
                year: '1990'
            },
        });

        
        $('.datepicker').on('changeDate', function() {
            var date = $('.datepicker').datepicker('getDate');
            select_zodiac = getAnimalName(date.getFullYear(), date.getMonth()+1, date.getDate());
            for(var i = 0; i < zodiac_animal_list.length;i++) {
                let animal_str = zodiac_animal_list[i];
                if(select_zodiac === animal_str) {
                    zodiac_id = i;
                }
            }

            let get_zodiac_name = zodiac_animal_list[zodiac_id].toLocaleLowerCase();
            let btn_path = 'content/ui/animal_button/' + get_zodiac_name + '_button.png';
            $("#select_zodiac").css({'background-image': 'url(' +btn_path+')'})          
            $("#year_text").html( date.getFullYear().toString().slice(2));
            that.setSelectorZodiac(zodiac_id);

        });

        $("#select_zodiac").on('click', function(){
            $('#myModal').modal({show:true});
          
        });

        //create zodiac animal selection.
        for(var i = 0; i  <  zodiac_animal_list.length; i++) {
            $("#" + i).on('click', function() {              
                zodiac_id = parseInt($(this).attr('id'));      
                select_zodiac = zodiac_animal_list[zodiac_id];
                let get_zodiac_name = zodiac_animal_list[zodiac_id].toLocaleLowerCase();
                let btn_path = 'content/ui/animal_button/' + get_zodiac_name + '_button.png';
                $("#select_zodiac").css({'background-image': 'url(' +btn_path+')'})
                $("#date_text").html('');              
                $(this).find("img").attr('src','content/zodiac_play/' +select_zodiac.toLocaleLowerCase() +'.png ');
                that.setSelectorZodiac(zodiac_id);
            
            });
        }
        
    }


    return that;
}