github.com/loomnetwork/gamechain@v0.0.0-20200406110549-36c47eb97a92/tools/gamechain-debugger/view/pages/gamechain_debugger.html (about)

     1  {{define "content"}}
     2  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
     3    <h1 class="h2">Gamechain State Debugger</h1>
     4  </div>
     5  <div class="row">
     6    <div class="col-md-2">
     7      <span class="form-control">Match-ID</span>
     8    </div>
     9    <div class="col-md-1">
    10      <input type="text" class="form-control" id="match_id" placeholder="" value="" required>
    11    </div>
    12    <div class="col-md-1">
    13      <button class="btn btn-primary btn-block" onclick="startUpdate()">Start</button>
    14    </div>
    15    <div class="col-md-1">
    16      <button class="btn btn-danger btn-block" onclick="stopUpdate()">Stop</button>
    17    </div>
    18    <div class="col-md-1">
    19      <button class="btn btn-success btn-block" onclick="saveState()">Save</button>
    20    </div>
    21  </div>
    22  <hr>
    23  <div class="row">
    24    <div class="col-md-12 mb-12" id="player1">
    25      <b>Current Action Index:</b> <span id="currentActionIndex"></span>
    26      <hr>
    27    </div>
    28    <pre class="col-md-6 mb-6" id="player1">
    29      <b>Player Id</b> <div id="p1_id"></div>
    30      <b>Status</b> <div id="p1_status"></div>
    31      <b>Cards In Hand:</b> <div id="p1_cards_in_hand"></div>
    32      <b>Cards In Play:</b> <div id="p1_cards_in_play"></div>
    33      <b>Cards In Graveyard:</b> <div id="p1_cards_in_graveyard"></div>
    34      <b>Cards In Deck:</b> <div id="p1_cards_in_deck"></div>
    35    </pre>
    36    <pre class="col-md-6 mb-6" id="player2">
    37      <b>Player Id</b> <div id="p2_id"></div>
    38      <b>Status</b> <div id="p2_status"></div>
    39      <b>Cards In Hand:</b><div id="p2_cards_in_hand"></div>
    40      <b>Cards In Play:</b><div id="p2_cards_in_play"></div>
    41      <b>Cards In Graveyard:</b> <div id="p2_cards_in_graveyard"></div>
    42      <b>Cards In Deck:</b><div id="p2_cards_in_deck"></div>
    43    </pre>
    44  </div>
    45  <script>
    46    function cardsToArray(cards) {
    47      var result = []
    48      if (cards == null) return result
    49      cards.forEach(element => {
    50        var str = element.prototype.name + ''
    51          + ' instance_id:' + element.instanceId.id
    52          + ' attack:' + element.instance.attack
    53          + ' defense:' + element.instance.defense;
    54        result.push(str)
    55      });
    56      return result
    57    }
    58    function getStatus(player) {
    59      return "Overlord defense: " + player.defense + " CurrentGoo: " + player.currentGoo + " GooVials: " + player.gooVials
    60    }
    61    var interval = null;
    62    function startUpdate() {
    63      var matchId = $("#match_id").val();
    64      clearInterval(interval);
    65      interval = setInterval(function () {
    66        getState(matchId)
    67      }, 1000);
    68    }
    69    function stopUpdate() {
    70      clearInterval(interval);
    71    }
    72    function saveState() {
    73      var matchId = $("#match_id").val();
    74      if (matchId == '') return;
    75      window.location = "./save_state/" + matchId;
    76    }
    77    function renderState(data) {
    78      var player1 = data.playerStates[0];
    79      var player2 = data.playerStates[1];
    80  
    81      var p1_cards_in_hand = cardsToArray(player1.cardsInHand);
    82      var p1_cards_in_deck = cardsToArray(player1.cardsInDeck);
    83      var p1_cards_in_play = cardsToArray(player1.cardsInPlay);
    84      var p1_cards_in_graveyard = cardsToArray(player1.cardsInGraveyard);
    85      var p1_status = getStatus(player1);
    86  
    87      var p2_cards_in_hand = cardsToArray(player2.cardsInHand);
    88      var p2_cards_in_deck = cardsToArray(player2.cardsInDeck);
    89      var p2_cards_in_play = cardsToArray(player2.cardsInPlay);
    90      var p2_cards_in_graveyard = cardsToArray(player2.cardsInGraveyard);
    91      var p2_status = getStatus(player2);
    92  
    93      $("#currentActionIndex").text(data.currentActionIndex);
    94  
    95      $("#p1_id").text(player1.id);
    96      $("#p1_status").text(p1_status);
    97      $("#p1_cards_in_hand").text(JSON.stringify(p1_cards_in_hand, null, 2));
    98      $("#p1_cards_in_deck").text(JSON.stringify(p1_cards_in_deck, null, 2));
    99      $("#p1_cards_in_play").text(JSON.stringify(p1_cards_in_play, null, 2));
   100      $("#p1_cards_in_graveyard").text(JSON.stringify(p1_cards_in_graveyard, null, 2));
   101  
   102  
   103      $("#p2_id").text(player2.id);
   104      $("#p2_status").text(p2_status);
   105      $("#p2_cards_in_hand").text(JSON.stringify(p2_cards_in_hand, null, 2));
   106      $("#p2_cards_in_deck").text(JSON.stringify(p2_cards_in_deck, null, 2));
   107      $("#p2_cards_in_play").text(JSON.stringify(p2_cards_in_play, null, 2));
   108      $("#p2_cards_in_graveyard").text(JSON.stringify(p2_cards_in_graveyard, null, 2));
   109    }
   110    
   111    function getState(matchId) {
   112      $.ajax({
   113        type: 'GET',
   114        url: 'http://localhost:3000/get_state/' + matchId,
   115        dataType: 'json',
   116        success: function(data) {
   117            renderState(data)
   118        },
   119      });
   120    }
   121  
   122  </script>
   123  {{end}}