master

分支 (1)

管理

管理

master

cumquat
/
index_en.html

<!DOCTYPE HTML>
<html>
<head>
  <style>
    #bkgnd {
      background:url("img/bkgnd.jpg") no-repeat;
      background-position: top center;
      background-size: 1536px 765px;;
    }
  </style>
  <script src="js/cumquat.js"></script>
</head>

<body id="bkgnd" onselectstart="return false">
  <title>Test CumquatGUI</title>

  <div style="text-align: center;">
    <h3>Test CumquatGUI</h3>
    <canvas id="mainCanvas" width="1126" height="600" style="border:1px solid #c3c3c3;">
      SORRY! Your browser does not support the canvas element.
    </canvas>
  </div>

  <!-- Set up a hidden node to store image resources, json_data and other content -->
  <div id='hidden' style="display:none">
  </div>

  <script type="text/javascript">

    // Load the required resources and mount them into the hidden node
    function LoadJsonData(json_uri, node_name, fn_callback){
      let node_id = "data_" + node_name
      let node = document.getElementById(node_id)
      if (node){
        document.body.removeChild(node)
      }
      let data_source = document.createElement('script')
      data_source.setAttribute("type", "text/javascript")
      data_source.setAttribute("id", node_id)
      data_source.src = json_uri
      data_source.onload = function(){
        fn_callback(json_data)
      }
      let hidden_div = document.getElementById("hidden")
      hidden.appendChild(data_source)
    }

    // Load the required pictures
    function LoadImage(img_uri, fn_callback){
      let img = new Image()
      img.onload = function(){
        fn_callback(img)
      }
      img.src = img_uri
      let hidden_div = document.getElementById("hidden")
      hidden.appendChild(img)
    }

    // Resources required by the graphical interface system
    var json_CQStyle = null
    var json_IsKandel = null
    var json_Topol_M = null
    var json_nations = null
    var img_IsKander = null
    var img_Topol_M = null
    var img_terrain = null

    // Initialize the graphical interface system
    function InitGUI(){

      // Initialize the CumquatGUI system
      let canvas = document.getElementById("mainCanvas")
      let cq = CQGUI.init(canvas)

      // Untie the following sentence and try another style of skin
      //cq.LoadStyle(json_CQStyle)

      // The main window is going to look like this
      // ___________________________________________________________
      // |btn：Our Situation|      info_text     |btn：Show Controls|  top_layout_btns
      // |￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣|￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣|
      // |                             |                           |
      // |                             |                           |
      // |                             |                           |
      // |        Our map              |            Enemy map      |   mid_layout_map
      // |                             |                           |
      // |                             |                           |
      // |                             |                           |
      // |_____________________________|___________________________|
      // |  Deploy   |  Deploy  |  Deploy   |  Deploy  |  Deploy   |
      // |           |          |           |          |           |
      // | img_label |img_label | img_label |img_label | img_label |   btm_layout_units
      // |    _______|  ________|   ________|   _______|    _______|
      // |   |Change |  |Change |   |Change |   |Change|   |Change |
      // ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
      // Root layout, ie desktop
      let root_layout = cq.GetRootLayout(LAYOUT_TYPE_VERT)
      // Top buttons bar
      let top_layout_btns = cq.AddLayout(root_layout, LAYOUT_TYPE_HZTL, LAYOUT_STG_KEEP_LEFT_OR_UP, "5%")
      // Bottom units bar
      let btm_layout_units = cq.AddLayout(root_layout, LAYOUT_TYPE_HZTL, LAYOUT_STG_KEEP_RIGHT_OR_DOWN, "30%")
      // Middle map bar
      let mid_layout_map = cq.AddLayout(root_layout, LAYOUT_TYPE_HZTL, LAYOUT_STG_FILL_EMPTY)
      // Our situation button
      let layout_btn_our_situ = cq.AddLayout(top_layout_btns, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
      // Show controls button
      let layout_btn_show_controls = cq.AddLayout(top_layout_btns, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_RIGHT_OR_DOWN, "20%")
      // Information label
      let layout_label_info = cq.AddLayout(top_layout_btns, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_FILL_EMPTY)
      // Our map area
      let layout_area_our_map = cq.AddLayout(mid_layout_map, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "50%")
      // Enemy map area
      let layout_area_emy_map = cq.AddLayout(mid_layout_map, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_FILL_EMPTY)
      // Unit-1 to Unit-5
      let layout_unit_1 = cq.AddLayout(btm_layout_units, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
      let layout_unit_2 = cq.AddLayout(btm_layout_units, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
      let layout_unit_3 = cq.AddLayout(btm_layout_units, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
      let layout_unit_4 = cq.AddLayout(btm_layout_units, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
      let layout_unit_5 = cq.AddLayout(btm_layout_units, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_FILL_EMPTY)

      // Add controls in the layout
      let btn_our_situ = cq.AddButton(layout_btn_our_situ, "Our Situation")
      let btn_show_controls = cq.AddButton(layout_btn_show_controls, "Show Controls")
      let lbl_info =  cq.AddTxtLabel(layout_label_info, "Deploy troops and go to war", LABEL_TXT_CENTER, 'rgb(0,0,0)')
      let wnd_our_map = cq.AddWindow(layout_area_our_map)
      let wnd_emy_map = cq.AddWindow(layout_area_emy_map)
      let box_unit1 = cq.AddBoxOnLayout(layout_unit_1, "Unit 1")
      let box_unit2 = cq.AddBoxOnLayout(layout_unit_2, "Unit 2")
      let box_unit3 = cq.AddBoxOnLayout(layout_unit_3, "Unit 3")
      let box_unit4 = cq.AddBoxOnLayout(layout_unit_4, "Unit 4")
      let box_unit5 = cq.AddBoxOnLayout(layout_unit_5, "Unit 5")

      // Define the team information panel and the corresponding processing function
      function InitUnitBox(box){
        let in_layout = box.GetInnerLayout()
        let layout_chk = box.AddLayout(in_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
        let layout_bottom = box.AddLayout(in_layout, LAYOUT_TYPE_HZTL, LAYOUT_STG_KEEP_RIGHT_OR_DOWN, "20%")
        let layout_img = box.AddLayout(in_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_FILL_EMPTY)
        let layout_label = box.AddLayout(layout_bottom, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "60%")
        let layout_btn = box.AddLayout(layout_bottom, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_FILL_EMPTY)

        let chk_deploy = box.AddCheck(layout_chk, "Deploy", false)
        let img_weapon = box.AddImgLabel(layout_img, img_IsKander, LABEL_IMG_STRETCHED, {w: 220, h: 100})
        let lbl_weapon = box.AddTxtLabel(layout_label, "IsKander", LABEL_TXT_CENTER, 'rgb(0,0,0)')
        let btn_change = box.AddButton(layout_btn, "Change")

        chk_deploy.OnClick = function(){
          chk_deploy.DoFlipCheck() // Flip selected state
        }

        btn_change.OnClick = function(){
          if (img_weapon.img == img_IsKander){
            img_weapon.img = img_Topol_M
            lbl_weapon.txt = "Topol_M"
          }
          else{
            img_weapon.img = img_IsKander
            lbl_weapon.txt = "IsKander"
          }
          cq.PushPaintTask(box)
        }

        img_weapon.OnClick = function(){
          // Weapon parameter dialog box pops up
          let rc = cq.GetCenterRect(600, 330, 0, -70)
          let box = cq.AddIndependentBox(rc, lbl_weapon.txt)
          let layout_img = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, 100)
          let layout_intro = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_FILL_EMPTY)

          let img_weapon = box.AddImgLabel(layout_img, this.img, LABEL_IMG_CENTERED, {w: 220, h: 100})
          let intro = (lbl_weapon.txt == "IsKander") ? json_IsKandel : json_Topol_M
          let lst_intro = box.AddList(layout_intro, LIST_ITEM_CLICK_MSG, intro)
        }
      }

      InitUnitBox(box_unit1)
      InitUnitBox(box_unit2)
      InitUnitBox(box_unit3)
      InitUnitBox(box_unit4)
      InitUnitBox(box_unit5)

      // Add event handlers to the control
      btn_our_situ.OnClick = function(){
        alert ("You pressed the 'Our Situation' button")
      }
      btn_show_controls.OnClick = function(){
        // Pop up the display control dialog
        let rc = cq.GetCenterRect(400, 320, -50, -70)
        let box = cq.AddIndependentBox(rc, "Show CumquatGUI Controls")
        let layout_btn2 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "12%")
        let layout_separater1 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "4%")
        let layout_spin = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
        let layout_separater2 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "4%")
        let layout_prgs = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "20%")
        let layout_separater3 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "4%")
        let layout_label = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "10%")
        let layout_combo1 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "12%")
        let layout_separater4 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "4%")
        let layout_combo2 = box.AddLayout(box.inner_layout, LAYOUT_TYPE_UNSPECIFIED, LAYOUT_STG_KEEP_LEFT_OR_UP, "12%")

        let btn_new_box = box.AddButton(layout_btn2, "Pop-up dialogue box")
        btn_new_box.OnClick = function(){
          let rc2 = cq.GetCenterRect(300, 260, 50, -70)
          cq.AddIndependentBox(rc2, "Another dialog")
        }
        let test_spin = box.AddSpin(layout_spin, 0.5, 1, 0.1)
        let test_prgs = box.AddPrgsBar(layout_prgs, "Progress |%", 50)
        test_spin.OnValueChange = function(val){
          test_prgs.DoSetPrgs(val * 100)
        }

        let desc_label = box.AddTxtLabel(layout_label, "Choose country, choose city:", LABEL_TXT_LEFT,)
        let test_combo1 = box.AddCombo(layout_combo1, json_nations[0], -1, 6)
        let test_combo2 = box.AddCombo(layout_combo2, json_nations[1], -1, 6)
        test_combo1.DoSelect(0)
        test_combo2.DoSelect(0)
        test_combo1.OnChange = function(index){
          test_combo2.SetContent(json_nations[index + 1])
          test_combo2.DoSelect(0)
        }
      }

      // Overlay the drawing function of the window
      wnd_our_map.DrawSelf = function(ctx){
        this.DrawFrame(ctx, 1, "black")
        this.DrawImage(ctx, 0, 0, this.rc.w, this.rc.h, img_terrain, 0, 0)
      }

      wnd_emy_map.DrawSelf = function(ctx){
        this.DrawFrame(ctx, 1, "black")
        this.DrawImage(ctx, 0, 0, this.rc.w, this.rc.h, img_terrain, 300, 0)
      }

      // This is the test code to check the location of each layout
      //root_layout.DrawLayout(cq.ctx)
      //box_unit1.inner_layout.DrawLayout(cq.ctx)
      //box_unit2.inner_layout.DrawLayout(cq.ctx)
      //box_unit3.inner_layout.DrawLayout(cq.ctx)
      //box_unit4.inner_layout.DrawLayout(cq.ctx)
      //box_unit5.inner_layout.DrawLayout(cq.ctx)

      // Refresh the interface display
      cq.DrawAll()
    }

    // Before starting the CumquatGUI system, load the required resources
    window.onload = function(){
      LoadJsonData("data/mono_style.json", "style", function(data_source){
        json_CQStyle = Object.create(data_source) // Deep copy
        LoadJsonData("data/intro_IsKander_en.json", "IsKander", function(data_source){
          json_IsKandel = Object.create(data_source) // Deep copy
          LoadJsonData("data/intro_Topol_M_en.json", "Topol_M", function(data_source){
            json_Topol_M = Object.create(data_source) // Deep copy
            LoadJsonData("data/nations_en.json", "nations", function(data_source){
              json_nations = Object.create(data_source) // Deep copy

              LoadImage("img/IsKander.png", function(img){
                img_IsKander = img
                LoadImage("img/Topol_M.png", function(img){
                  img_Topol_M = img
                  LoadImage("img/terrain.jpg", function(img){
                    img_terrain = img

                    // Initialize the graphical interface system
                    InitGUI()
                    // Start the CQGUI event processing system
                    CQGUI.instance.Start()
                  })
                })
              })
            })
          })
        })
      })
    }
  </script>
</body>
</html>