        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          <title>Mazebase Game</title>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
          <style>
            
            h1 {
              text-align: center;
            }
            td {
              width: 100px;
              height: 100px;
            }
            table {
              margin: 5px auto;
            }
            .vert {
              border-left: 2px solid black;
              border-right: 2px solid black;
            }
            .hori {
              border-top: 2px solid black;
              border-bottom: 2px solid black;
            }

            .modal-mask {
              position: fixed;
              z-index: 9998;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0, 0, 0, .5);
              display: table;
              transition: opacity .3s ease;
            }

            .modal-wrapper {
              display: table-cell;
              vertical-align: middle;
            }

            .modal-container {
              width: 450px;
              margin: 0px auto;
              padding: 20px 30px;
              background-color: #fff;
              border-radius: 2px;
              box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
              transition: all .3s ease;
              font-family: Helvetica, Arial, sans-serif;
              font-size: 20px;
            }

            .modal-header h3 {
              margin-top: 0;
              color: #42b983;
              font-size: 10px;
            }

            .modal-body {
              margin: 10px 0;
              font-size: 15px;
            }

            .modal-default-button {
              float: right;
            }

            .modal-enter {
              opacity: 0;
            }

            .modal-leave-active {
              opacity: 0;
            }

            .modal-enter .modal-container,
            .modal-leave-active .modal-container {
              -webkit-transform: scale(1.1);
              transform: scale(1.1);
            }

          </style>
        </head>

        <body>

         <script type="text/x-template" id="modal-template">
              <transition name="modal">
                <div class="modal-mask">
                  <div class="modal-wrapper">
                    <div class="modal-container">

                      <div class="modal-body">
                        <slot name="header">
                          Your current position is denoted by the "AGENT" character on the screen. <br> Use UP, LEFT, DOWN, RIGHT (or arrow keys) to navigate character. <br> Note you cannot pass the brick walls or the door without first opening the door using the switch or key. <br> 

                           <img src="https://i.imgur.com/3mQkkwr.png" alt="Commercial Photography" style="width:400px;height:300px;">
                        </slot>
                      </div>

                      <div class="modal-footer">
                        <button class="modal-default-button" @click="$emit('close')">
                            Return to game
                      </button>
                      </div>

                      

                    </div>
                  </div>
                </div>
              </transition>
            </script>


         <div id="app" class="container-fluid">

         <div class="row">

         <div class="col-3 pl-2 m-auto">

         <div class="row border rounded h-15 w-75 m-auto" style="font-size: 3.6rem" ref="startbuttoncontrol">
              <button class="btn btn-primary btn-block" ref="startbutton" type="submit" @click.prevent="start_press">START GAME</button> 
            </div>

            
            <div class="invisible col" style="font-size: 0.9rem" ref="infoGroup">

                <!-- <p class="my-3"> 1. According to the goal and recipes, write the first step you would do to complete the task <br>(Keep it high level, rather than specific button presses).<br> 2. Use the control buttons to execute the instruction you wrote then press the DONE button<br> 3. Repeat from step 1 with the next step </p> -->



                <!-- <p class="my-3"> GOAL:</p> -->
                <h2 class="h5 mb-3 font-weight-normal ">GOAL:</h2>
                <p class="my-3"> {% raw %} {{ goal }} {% endraw %}</p>
                <!-- <p class="my-3"> RECIPES:</p> -->
                <h2 class="h5 mb-3 font-weight-normal ">RECIPES:</h2>
                <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:300px;height:360px;" ref="recipe">

                <button class="btn btn-primary btn-block" id="show-modal" @click="showModal = true">Helpful Hints!</button>
              <!-- use the modal component, pass in the prop -->
              <modal v-if="showModal" @close="showModal = false">
                <!--
                  you can use custom content here to overwrite
                  default content
                -->
                <!-- <h3 slot="header">custom header</h3> -->
              </modal>
              <!-- <button class="btn btn-primary btn-block" ref="restartbutton" type="submit" @click.prevent="restart_press"> Restart (Use once if you mess up)</button>  -->

              </div> 

              

        
          </div>


          
          <div class="col-5 align-self-center">

                
                <!-- <p class="my-3"> {% raw %} {{ goal }} {% endraw %}</p>
                <p class="my-3"> RECIPES:</p> -->

            <table id="myTable" ref="myTable">
              <tr>
                <td class="hori vert" data-id="1" ref="1">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg"  style="width:40px;height:60px;" ref="pic1">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg"  style="width:40px;height:60px;" ref="pic2">
                </td>
                <td class="hori vert" data-id="2" ref="2">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic3">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic4">
                </td>
                <td class="hori vert" data-id="3" ref="3">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic5">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic6">
                </td>
                <td class="hori vert" data-id="4" ref="4">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic7">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic8">
                </td>
                <td class="hori vert" data-id="5" ref="5">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic9">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic10">
                </td>
              </tr>
              <tr>
                <td class="hori vert" data-id="6" ref="6">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic11">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic12">
                </td>
                <td class="hori vert" data-id="7" ref="7">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic13">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic14">
                </td>
                <td class="hori vert" data-id="8" ref="8">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic15">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic16">
                </td>
                <td class="hori vert" data-id="9" ref="9">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic17">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic18">
                </td>
                <td class="hori vert" data-id="10" ref="10">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic19">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic20">
                </td>
              </tr>
               <tr>
                <td class="hori vert" data-id="11" ref="11">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic21">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic22">
                </td>
                <td class="hori vert" data-id="12" ref="12">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic23">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic24">
                </td>
                <td class="hori vert" data-id="13" ref="13">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic25">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic26">
                </td>
                <td class="hori vert" data-id="14" ref="14">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic27">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic28">
                </td>
                <td class="hori vert" data-id="15" ref="15">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic29">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic30">
                </td>
              </tr>
               <tr>
                <td class="hori vert" data-id="16" ref="16">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic31">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic32">
                </td>
                <td class="hori vert" data-id="17" ref="17">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic33">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic34">
                </td>
                <td class="hori vert" data-id="18" ref="18">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic35">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic36">
                </td>
                <td class="hori vert" data-id="19" ref="19">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic37">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic38">
                </td>
                <td class="hori vert" data-id="20" ref="20">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic39">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic40">
                </td>
              </tr>
              <tr>
                <td class="hori vert" data-id="21" ref="21">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic41">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic42">
                </td>
                <td class="hori vert" data-id="22" ref="22">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic43">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic44">
                </td>
                <td class="hori vert" data-id="23" ref="23">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic45">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic46">
                </td>
                <td class="hori vert" data-id="24" ref="24">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic47">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic48">
                </td>
                <td class="hori vert" data-id="25" ref="25">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic49">
                  <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="pic50">
                </td>
              </tr>
            </table>

            <div class="border h-15 w-75 m-auto" style="font-size: 0.9rem">
              <p class="my-3">   INVENTORY (capacity 10):</p>
              <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="item1">
              <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="item2">
              <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="item3">
              <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="item4">
              <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="item5">
              <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="item6">
              <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="item7">
              <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="item8">
              <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="item9">
              <img src="https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg" style="width:40px;height:60px;" ref="item10">
          </div> 



 </div>

 
          <div class="invisible col-4 align-self-center" ref="messageGroupAll">

          <h2 class="h5 mb-3 font-weight-normal "><br>1. EXPLAIN NEXT INSTRUCTION</h2>

          <p class="my-3"> <strong>Keep instructions high level, not specific button presses. But DO NOT write only 1 instruction.</strong> <br> Hit enter when done.</p>

          <!-- <p class="my-3" style="font-weight:bold"> Keep instructions high level, not specific button presses. </p>
          <p class="my-3"> Hit enter when done.</p> -->
          <div class="col h-25 text-center" style="background: rgb(114, 230, 147);" >
              <p class="my-3"> <br> {% raw %} {{ message }} {% endraw %} <br> </p>
            </div> 

          <div class="form-label-group" ref="messageGroup">
              <input type="name" id="inputUsername" ref="message" class="form-control" placeholder="" required="" maxlength="50" autocomplete="off"> 
              <!-- <button class="btn btn-lg btn-primary btn-block" ref="submitbutton" type="submit" @click.prevent="login">Submit</button>  -->

          </div>

          <div class="row invisible rounded h-50 w-20 m-auto" style="font-size: 0.9rem" ref="controls">
          <!-- <p class="my-3"> Use these control buttons or press key corresponding to arrow key or number in parentheses. Press DONE (enter button) to enable instruction writing again.</p> -->

          <h2 class="h5 mb-3 font-weight-normal"><br>2. EXECUTE USING BELOW BUTTONS</h2>
              
              <button class="btn btn-primary btn-block" ref="submitbutton1" type="submit" @click.prevent="up_press" style="width:55%;">Up</button> 
              <button class="btn btn-primary btn-block" ref="submitbutton2" type="submit" @click.prevent="down_press" style="width:55%;">Down</button> 
              <button class="btn btn-primary btn-block" ref="submitbutton3" type="submit" @click.prevent="left_press" style="width:55%;">Left</button> 
              <button class="btn btn-primary btn-block" ref="submitbutton4" type="submit" @click.prevent="right_press" style="width:55%;">Right</button> 
              <button class="btn btn-primary btn-block" ref="submitbutton5" type="submit" @click.prevent="grab_press" style="width:55%;">Grab (1) </button> 
              <button class="btn btn-primary btn-block" ref="submitbutton6" type="submit" @click.prevent="toggle_press" style="width:55%;">Open Door (2) </button> 
              <button class="btn btn-primary btn-block" ref="submitbutton7" type="submit" @click.prevent="mine_press" style="width:55%;">Mine (3) </button> 
              <button class="btn btn-primary btn-block" ref="submitbutton8" type="submit" @click.prevent="craft_press" style="width:55%;">Craft (4) </button>    

              <h2 class="h5 mb-3 font-weight-normal "><br>3. PRESS WHEN INSTRUCTION COMPLETE<br></h2>


              <button class="btn btn-danger btn-block" ref="submitbutton9" type="submit" @click.prevent="done_press" style="width:55%;">DONE (or enter key) </button>            

            </div>




          </div>

          

          </div>

            
          </div>

          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
          <script src="https://js.pusher.com/4.2/pusher.min.js"></script>
          <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

          <script>

            Vue.component('modal', {
              template: '#modal-template'
            })

            var app = new Vue({
              el: '#app',

              created () {

                let url = new URL(window.location.href);
                let name = url.searchParams.get("username");
                let entrance = url.searchParams.get("code");
                this.entrancecode = entrance
                this.username = name

              },

              data: {
                username: '',
                players: 0,
                connectedPlayers: [],
                available: 0, //added this
                status: '',
                message: '(placeholder)', // added this too
                inventory: 'placeholder message',
                goal: 'placeholder goal',
                recipe: 'placeholder recipe',
                firstPlayer: 0,
                showModal: false,
                enter_message: true,
                hasSwitch: false,
                entrancecode: 0,
                show: false,
                links: 0,
                turn: 0,
                boxes: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                temp_url: 'https://www.w3schools.com/images/w3schools_green.jpg'
              },

              methods: {

                login: function () {
                  var message_received = this.$refs.message.value

                  $.ajax({
                        type: 'POST',       
                        url: "/add_message",
                        data: JSON.stringify({"a": this.username, "b": this.entrancecode, "action": message_received}),
                        global: false,
                        async: false,
                        dataType: "json",
                        contentType: "application/json",
                    })

                  this.message = message_received
                  console.log(this.message)
                  this.$refs.message.value = "";

                  //this.$refs.submitbutton.disabled = true;
                  this.$refs.message.disabled = true;
                  this.$refs.submitbutton1.disabled = false;
                  this.$refs.submitbutton2.disabled = false;
                  this.$refs.submitbutton3.disabled = false;
                  this.$refs.submitbutton4.disabled = false;
                  this.$refs.submitbutton5.disabled = false;
                  this.$refs.submitbutton6.disabled = false;
                  this.$refs.submitbutton7.disabled = false;
                  this.$refs.submitbutton8.disabled = false;
                  this.$refs.submitbutton9.disabled = false;

                  //this.$refs.messageGroup.classList.add('disabled');
                  //this.$refs.controls.classList.remove('invisible');
                  this.enter_message = false;
                  this.$refs.message.disabled = true;

                },

                fill_grid: function(color, result){

                  for (i = 0; i < 25; i++) {     

                     //all other items...

                     //wall:
                     if(color[i] == "Grey"){
                      this.displayAgent(i, 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Brick_wall_close-up_view.jpg/2560px-Brick_wall_close-up_view.jpg')
                      this.displayObject(i, 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Brick_wall_close-up_view.jpg/2560px-Brick_wall_close-up_view.jpg')
                    }
                    

                    else if(result[i] == "NONE"){
                      this.displayObject(i, "https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg")
                      this.displayAgent(i, "https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg")

                    }

                    else if(result[i] == "key"){



                      this.displayObject(i, "https://i.imgur.com/3UxlTMF.png")
                      this.displayAgent(i, "https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg")

                    }


                    else if(result[i] == "switch:0"){

                      this.hasSwitch = true;

                      this.$refs.submitbutton6.innerHTML = "Toggle Switch (2)";


                      this.displayObject(i, "https://i.imgur.com/9iDwfGn.png")
                      this.displayAgent(i, "https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg")
                      
                    }

                    else if(result[i] == "switch:1"){

                      this.hasSwitch = true;

                      this.$refs.submitbutton6.innerHTML = "Toggle Switch (2)";


                      this.displayObject(i, "https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg")
                      this.displayAgent(i, "https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg")
                      
                    }

                    else if(result[i] == "X"){
                      this.displayObject(i, "https://i.imgur.com/7uB8RML.png")
                      this.displayAgent(i, "https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg")

                    }

                    else{

                      // console.log(this.links[result[i]])
                      this.displayObject(i, this.links[result[i]])
                      this.displayAgent(i, "https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg")

                    }

                  }



                },

                // takes in the action to do as input and updates game accordingly
                do_action: function(action){

                  if(action == "toggle_switch" && !this.hasSwitch){
                    action = "open_door";
                  }

                  var array = JSON.parse($.ajax({
                        type: 'POST',       
                        url: "/make_move",
                        data: JSON.stringify({"a": this.username, "action": action, "b":this.entrancecode}),
                        global: false,
                        async: false,
                        dataType: "json",
                        contentType: "application/json",
                        success: function(data) {
                            return data;
                        }
                    }).responseText);

                  this.fill_grid(array["color"], array["result"])
                  this.displayAgent(array["agent"], "https://i.imgur.com/Jhr2lVK.png")


                  //console.log("sending boxes")

                  count = 0;
                  var str = ''; 
                  for (let k of Object.keys(array["inventory"])) {
                      var v = array["inventory"][k];

                      for(i = 0; i < v; i ++){

                        console.log(k)


                        if(k == 'key'){
                          this.displayInventory(count, "https://i.imgur.com/3UxlTMF.png")
                        }

                        else{
                          this.displayInventory(count, this.links[k])
                        }

                        count = count + 1;

                      }
                      
                  }

                  console.log("----")

                  for(i = count; i < 10; i++){

                    this.displayInventory(i, "https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg")
                  }

                  this.inventory = str


                  this.$refs.message.value = "";
                  // this.$refs.message.focus()

                  if(array["complete"]){
                    console.log("heree")
                    let code = array["code"]
                    let entrance = this.entrancecode
                    let username = this.username

                    if(code == "NONE"){
                      window.location.replace(`/game_continue?username=${username}&entrancecode=${entrance}`);
                    }
                    else{
                      window.location.replace(`/game_over?exitcode=${code}&username=${username}&entrancecode=${entrance}`);
                    }

                  }


                },

                displayInventory: function (location, image_address){

                  if(location == 0){
                    this.$refs.item1.src = image_address;
                  }
                  if(location == 1){
                    this.$refs.item2.src = image_address;
                  }
                  if(location == 2){
                    this.$refs.item3.src = image_address;
                  }
                  if(location == 3){
                    this.$refs.item4.src = image_address;
                  }
                  if(location == 4){
                    this.$refs.item5.src = image_address;
                  }
                  if(location == 5){
                    this.$refs.item6.src = image_address;
                  }
                  if(location == 6){
                    this.$refs.item7.src = image_address;
                  }
                  if(location == 7){
                    this.$refs.item8.src = image_address;
                  }
                  if(location == 8){
                    this.$refs.item9.src = image_address;
                  }
                  if(location == 9){
                    this.$refs.item10.src = image_address;
                  }
                },


                up_press: function () {
                  this.do_action("up");
                },

                down_press: function () {
                  this.do_action("down");
                },

                left_press: function () {
                  this.do_action("left");
                },

                right_press: function () {
                  this.do_action("right");          
                },

                grab_press: function () {
                  this.do_action("grab");
                },

                toggle_press: function () {
                  this.do_action("toggle_switch"); 
                },

                mine_press: function () {
                  this.do_action("mine");
                },

                craft_press: function () {
                  this.do_action("craft");
                },

                done_press: function () {

                  // this.$refs.messageGroup.classList.remove('invisible');
                  // this.$refs.controls.classList.add('invisible');

                  //this.$refs.submitbutton.disabled = false;
                  this.$refs.message.disabled = false;
                  this.$refs.submitbutton1.disabled = true;
                  this.$refs.submitbutton2.disabled = true;
                  this.$refs.submitbutton3.disabled = true;
                  this.$refs.submitbutton4.disabled = true;
                  this.$refs.submitbutton5.disabled = true;
                  this.$refs.submitbutton6.disabled = true;
                  this.$refs.submitbutton7.disabled = true;
                  this.$refs.submitbutton8.disabled = true;
                  this.$refs.submitbutton9.disabled = true;

                  this.enter_message = true;

                  this.$refs.message.value = "";
                  this.$refs.message.focus()

                },

                displayAgent: function(location, image_address){

                  if(location == 0){
                    this.$refs.pic2.src = image_address;
                  }
                  if(location == 1){
                    this.$refs.pic4.src = image_address;
                  }
                  if(location == 2){
                    this.$refs.pic6.src = image_address;
                  }
                  if(location == 3){
                    this.$refs.pic8.src = image_address;
                  }
                  if(location == 4){
                    this.$refs.pic10.src = image_address;
                  }
                  if(location == 5){
                    this.$refs.pic12.src = image_address;
                  }
                  if(location == 6){
                    this.$refs.pic14.src = image_address;
                  }
                  if(location == 7){
                    this.$refs.pic16.src = image_address;
                  }
                  if(location == 8){
                    this.$refs.pic18.src = image_address;
                  }
                  if(location == 9){
                    this.$refs.pic20.src = image_address;
                  }
                  if(location == 10){
                    this.$refs.pic22.src = image_address;
                  }
                  if(location == 11){
                    this.$refs.pic24.src = image_address;
                  }
                  if(location == 12){
                    this.$refs.pic26.src = image_address;
                  }
                  if(location == 13){
                    this.$refs.pic28.src = image_address;
                  }
                  if(location == 14){
                    this.$refs.pic30.src = image_address;
                  }
                  if(location == 15){
                    this.$refs.pic32.src = image_address;
                  }
                  if(location == 16){
                    this.$refs.pic34.src = image_address;
                  }
                  if(location == 17){
                    this.$refs.pic36.src = image_address;
                  }
                  if(location == 18){
                    this.$refs.pic38.src = image_address;
                  }
                  if(location == 19){
                    this.$refs.pic40.src = image_address;
                  }
                  if(location == 20){
                    this.$refs.pic42.src = image_address;
                  }
                  if(location == 21){
                    this.$refs.pic44.src = image_address;
                  }
                  if(location == 22){
                    this.$refs.pic46.src = image_address;
                  }
                  if(location == 23){
                    this.$refs.pic48.src = image_address;
                  }
                  if(location == 24){
                    this.$refs.pic50.src = image_address;
                  }

                },

                displayObject: function(location, image_address){

                  if(location == 0){
                    this.$refs.pic1.src = image_address;
                  }
                  if(location == 1){
                    this.$refs.pic3.src = image_address;
                  }
                  if(location == 2){
                    this.$refs.pic5.src = image_address;
                  }
                  if(location == 3){
                    this.$refs.pic7.src = image_address;
                  }
                  if(location == 4){
                    this.$refs.pic9.src = image_address;
                  }
                  if(location == 5){
                    this.$refs.pic11.src = image_address;
                  }
                  if(location == 6){
                    this.$refs.pic13.src = image_address;
                  }
                  if(location == 7){
                    this.$refs.pic15.src = image_address;
                  }
                  if(location == 8){
                    this.$refs.pic17.src = image_address;
                  }
                  if(location == 9){
                    this.$refs.pic19.src = image_address;
                  }
                  if(location == 10){
                    this.$refs.pic21.src = image_address;
                  }
                  if(location == 11){
                    this.$refs.pic23.src = image_address;
                  }
                  if(location == 12){
                    this.$refs.pic25.src = image_address;
                  }
                  if(location == 13){
                    this.$refs.pic27.src = image_address;
                  }
                  if(location == 14){
                    this.$refs.pic29.src = image_address;
                  }
                  if(location == 15){
                    this.$refs.pic31.src = image_address;
                  }
                  if(location == 16){
                    this.$refs.pic33.src = image_address;
                  }
                  if(location == 17){
                    this.$refs.pic35.src = image_address;
                  }
                  if(location == 18){
                    this.$refs.pic37.src = image_address;
                  }
                  if(location == 19){
                    this.$refs.pic39.src = image_address;
                  }
                  if(location == 20){
                    this.$refs.pic41.src = image_address;
                  }
                  if(location == 21){
                    this.$refs.pic43.src = image_address;
                  }
                  if(location == 22){
                    this.$refs.pic45.src = image_address;
                  }
                  if(location == 23){
                    this.$refs.pic47.src = image_address;
                  }
                  if(location == 24){
                    this.$refs.pic49.src = image_address;
                  }

                },

                restart_press: function () {

                  // log this! send something to the database internally.. 

                  this.$refs.restartbutton.disabled = true;
                  this.$refs.message.disabled = false;
                  this.enter_message = true;
                  this.message = '';
                  this.start_press()


                },

                //THE START RETURNS 
                start_press: function () {

                  this.$refs.startbuttoncontrol.classList.add('invisible')
                  this.$refs.messageGroupAll.classList.remove('invisible');
                  this.$refs.controls.classList.remove('invisible');
                  this.$refs.infoGroup.classList.remove('invisible');


                  this.$refs.submitbutton1.disabled = true;
                  this.$refs.submitbutton2.disabled = true;
                  this.$refs.submitbutton3.disabled = true;
                  this.$refs.submitbutton4.disabled = true;
                  this.$refs.submitbutton5.disabled = true;
                  this.$refs.submitbutton6.disabled = true;
                  this.$refs.submitbutton7.disabled = true;
                  this.$refs.submitbutton8.disabled = true;
                  this.$refs.submitbutton9.disabled = true;


                  var array = JSON.parse($.ajax({
                        type: 'POST',       
                        url: "/start_game",
                        data: JSON.stringify({"a": this.username, "b":this.entrancecode}),
                        global: false,
                        async: false,
                        dataType: "json",
                        contentType: "application/json",
                        success: function(data) {
                            return data;
                        }
                    }).responseText);


                  if(array["already_complete"]){

                    window.location.replace(`/already_completed`);

                  }

                  count = 0;
                  var str = ''; 
                  for (let k of Object.keys(array["inventory"])) {
                      var v = array["inventory"][k];

                      for(i = 0; i < v; i ++){

                        console.log(k)


                        if(k == 'key'){
                          this.displayInventory(count, "https://i.imgur.com/3UxlTMF.png")
                        }

                        else{
                          this.displayInventory(count, this.links[k])
                        }

                        count = count + 1;

                      }
                      
                  }

                  console.log("----")

                  for(i = count; i < 10; i++){

                    this.displayInventory(i, "https://i.pinimg.com/originals/f5/05/24/f50524ee5f161f437400aaf215c9e12f.jpg")
                  }

                  this.inventory = str


                  this.links = array["links"]

                  this.fill_grid(array["color"], array["result"])

                  this.displayAgent(array["agent"], "https://i.imgur.com/Jhr2lVK.png")


                  this.goal = array["goal"]
                  //this.recipe = array["recipe"]
                  this.$refs.recipe.src = array["recipe"]
                  console.log(array["recipe"])

                  window.addEventListener('keydown', function(e){

                    if (e.which === 38) {
                      if (!app.enter_message){

                        app.do_action("up");
                      }
                    }

                    if (e.which === 40) {
                      if (!app.enter_message){

                        app.do_action("down");
                      }
                    }

                    if (e.which === 39) {
                      if (!app.enter_message){

                        app.do_action("right");
                      }
                    }

                    if (e.which === 37) {
                      if (!app.enter_message){

                        app.do_action("left");
                      }
                    }

                    if (e.which === 50) {
                      if (!app.enter_message){

                        app.do_action("toggle_switch");
                      }
                    }

                    if (e.which === 49) {
                      if (!app.enter_message){

                        app.do_action("grab");
                      }
                    }

                    if (e.which === 52) {
                      if (!app.enter_message){

                        app.do_action("craft");
                      }
                    }

                    if (e.which === 51) {
                      if (!app.enter_message){

                        app.do_action("mine");
                      }
                    }

                    if (e.which === 13) {

                      if (app.enter_message){
                        app.login();
                      }
                      else{
                        app.done_press();
                      }
                    }
                    
                  }.bind(this));

                  this.$refs.message.focus()

                  //console.log(array["links"])
                  

                },

              }
            })
          </script>

        </body>
        </html>
