github.com/loomnetwork/gamechain@v0.0.0-20200406110549-36c47eb97a92/tools/gamechain-debugger/view/pages/client_state_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">Client State Debugger</h1>
     4  </div>
     5  <div class="row">
     6      <div class="col-md-2">
     7          <span class="form-control">Client State File</span>
     8      </div>
     9      <div class="col-md-3">
    10          <input type="file" lass="form-control-file" onchange='openFile(event)' id="client_state" placeholder="" value=""
    11              required>
    12      </div>
    13  </div>
    14  <hr>
    15  <div class="row">
    16      <div class="col-md-12 mb-12" id="player1">
    17          <b>Current Action Index:</b> <span id="currentActionIndex"></span>
    18          <hr>
    19      </div>
    20      <pre class="col-md-6 mb-6" id="player1">
    21      <b>Player Id</b> <div id="p1_id"></div>
    22      <b>Status</b> <div id="p1_status"></div>
    23      <b>Cards In Hand:</b> <div id="p1_cards_in_hand"></div>
    24      <b>Cards In Play:</b> <div id="p1_cards_in_play"></div>
    25      <b>Cards In Graveyard:</b> <div id="p1_cards_in_graveyard"></div>
    26      <b>Cards In Deck:</b> <div id="p1_cards_in_deck"></div>
    27    </pre>
    28      <pre class="col-md-6 mb-6" id="player2">
    29      <b>Player Id</b> <div id="p2_id"></div>
    30      <b>Status</b> <div id="p2_status"></div>
    31      <b>Cards In Hand:</b><div id="p2_cards_in_hand"></div>
    32      <b>Cards In Play:</b><div id="p2_cards_in_play"></div>
    33      <b>Cards In Graveyard:</b> <div id="p2_cards_in_graveyard"></div>
    34      <b>Cards In Deck:</b><div id="p2_cards_in_deck"></div>
    35    </pre>
    36  </div>
    37  <script>
    38      function renderState(data) {
    39          console.log(data)
    40          var player1 = data.playerStates[0];
    41          var player2 = data.playerStates[1];
    42  
    43          var p1_cards_in_hand = cardsToArray(player1.cardsInHand);
    44          var p1_cards_in_deck = cardsToArray(player1.cardsInDeck);
    45          var p1_cards_in_play = cardsToArray(player1.cardsInPlay);
    46          var p1_cards_in_graveyard = cardsToArray(player1.cardsInGraveyard);
    47          var p1_status = getStatus(player1);
    48  
    49          var p2_cards_in_hand = cardsToArray(player2.cardsInHand);
    50          var p2_cards_in_deck = cardsToArray(player2.cardsInDeck);
    51          var p2_cards_in_play = cardsToArray(player2.cardsInPlay);
    52          var p2_cards_in_graveyard = cardsToArray(player2.cardsInGraveyard);
    53          var p2_status = getStatus(player2);
    54  
    55          $("#currentActionIndex").text(data.currentActionIndex);
    56  
    57          $("#p1_id").text(player1.id);
    58          $("#p1_status").text(p1_status);
    59          $("#p1_cards_in_hand").text(JSON.stringify(p1_cards_in_hand, null, 2));
    60          $("#p1_cards_in_deck").text(JSON.stringify(p1_cards_in_deck, null, 2));
    61          $("#p1_cards_in_play").text(JSON.stringify(p1_cards_in_play, null, 2));
    62          $("#p1_cards_in_graveyard").text(JSON.stringify(p1_cards_in_graveyard, null, 2));
    63  
    64  
    65          $("#p2_id").text(player2.id);
    66          $("#p2_status").text(p2_status);
    67          $("#p2_cards_in_hand").text(JSON.stringify(p2_cards_in_hand, null, 2));
    68          $("#p2_cards_in_deck").text(JSON.stringify(p2_cards_in_deck, null, 2));
    69          $("#p2_cards_in_play").text(JSON.stringify(p2_cards_in_play, null, 2));
    70          $("#p2_cards_in_graveyard").text(JSON.stringify(p2_cards_in_graveyard, null, 2));
    71      }
    72      var openFile = function (event) {
    73          var input = event.target;
    74  
    75          var reader = new FileReader();
    76          reader.onload = function () {
    77              var data = JSON.parse(reader.result);
    78              renderState(data)
    79          };
    80          reader.readAsText(input.files[0]);
    81      };
    82  
    83      function readFile() {
    84          const selectedFile = document.getElementById('client_state').files[0];
    85          console.log(selectedFile);
    86      }
    87  </script>
    88  {{end}}