{{ extends "eden_experiment2/layout/layout.html" }} {{block styles}}
<style>
  .scene {
    /*
        background: #f0f0f0;
        */
    border: 1px dashed #997d4e;
    min-height: 400px;
  }

  #app {
    max-width: 840px;
    margin: auto;
  }

  .choice-btn {
    width: 300px;
    height: 240px;
    text-transform: initial;
    font-size: 1.5rem;
  }

  .text-feedback {
    font-size: 2.5rem;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s;
  }

  .fade-enter,
    .fade-leave-to

    /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }

  .slide-fade-enter-active {
    transition: all 0.5s ease;
  }

  .slide-fade-leave-active {
    transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .slide-fade-enter {
    transform: translateX(-200px);
    opacity: 0;
  }

  .slide-fade-leave-to {
    transform: translateX(200px);
    opacity: 0;
  }
</style>
{{endblock}} {{ block content }}
<div id="app">
  <div class="text-center caption my-2">
    <h5 class="d-inline display-4 text-white">Please make your choice</h5>
    <span class="badge badge-secondary badge-pill mx-3"
      >round: [[current_round]]</span
    >
  </div>
  <div class="text-yellow my-2 d-none">
    <i class="fa fa-star text-yellow mr-1"></i>
    Your total points:
    <span class="total-points-number text-yellow">[[current_points]]</span>
  </div>
  <div class="progress">
    <div
      class="progress-bar progress-bar-success progress-bar-striped"
      role="progressbar"
      :aria-valuenow="current_round"
      aria-valuemin="0"
      :aria-valuemax="200"
      :style="`width:${(current_round - 1) / 200 * 100}%`"
    ></div>
  </div>
  <div class="scene p-4">
    <transition name="slide-fade" mode="out-in">
      <div class="d-flex flex-column align-items-center" :key="current_round">
        <div
          :class="`my-3 d-flex ${buttons_order > 0.5 && 'flex-row-reverse'}`"
        >
          <button
            type="button"
            class="btn btn-default choice-btn mx-3"
            @click="buttonClicked(0)"
          >
            <transition name="fade" mode="out-in">
              <span
                :key="isFeedback"
                :class="isFeedback && `text-feedback ${choice==0 && 'text-info'}`"
              >
                <template v-if="!isFeedback">
                  [[ buttons_description[0] ]]
                </template>
                <template v-else> [[ payoff_choices[0] ]] </template>
              </span>
            </transition>
          </button>
          <button
            type="button"
            class="btn btn-default choice-btn mx-3"
            @click="buttonClicked(1)"
          >
            <transition name="fade" mode="out-in">
              <span
                :key="isFeedback"
                :class="isFeedback && `text-feedback ${choice==1 && 'text-info'}`"
              >
                <template v-if="!isFeedback">
                  [[ buttons_description[1] ]]
                </template>
                <template v-else> [[ payoff_choices[1] ]] </template>
              </span>
            </transition>
          </button>
        </div>
        <button
          type="button"
          v-if="isFeedback && showNextBtn"
          class="btn btn-outline-info my-3"
          @click="gotoNextRound()"
        >
          Next
        </button>
      </div>
    </transition>
  </div>
</div>
{{ endblock}} {{block scripts}}
<script src="https://unpkg.com/vue@2"></script>

<script>
  const app = new Vue({
    el: "#app",
    delimiters: ["[[", "]]"],
    data: {
      current_points: js_vars["current_points"],
      current_round: js_vars["current_round"],
      condition_id: js_vars["condition_id"], // 0 - 1
      buttons_order: js_vars["button_location"],
      buttons_description: js_vars["buttons_description"],
      isFeedback: false,
      payoff_choices: [0, 0],
      choice: 0,
      pending: false,
      startTime: new Date(),
      total_rounds: js_vars["total_rounds"],
      showNextBtn: false,
    },
    computed: {},
    methods: {
      buttonClicked(choice) {
        if (this.isFeedback || this.pending) {
          // this.gotoNextRound();
          return;
        }
        console.log("choice", choice);
        this.choice = choice;
        this.pending = true;
        liveSend({ choice, time: new Date() - this.startTime });
        //this.current_round++;
      },
      showFeedback(payoff, choices) {
        this.current_points += payoff;
        this.payoff_choices = choices;
        this.isFeedback = true;
        this.showNextBtn = false;
        setTimeout(() => {
          this.showNextBtn = true;
        }, 1000);
      },
      gotoNextRound() {
        if (this.current_round >= this.total_rounds) {
          gotoNextPage();
        }
        this.current_round++;

        //this.buttons_order = Math.random() < 0.5;
        this.isFeedback = false;
        this.startTime = new Date();
      },
    },
  });
  console.log("App Data", app);
</script>
<script>
  function liveRecv(data) {
    console.log("received a message!", data);

    const { payoff, choices } = data;
    console.log("payoff", payoff);
    setTimeout(() => {
      app.pending = false;

      app.showFeedback(payoff, choices);
    }, 200);
    // your code goes here
  }
  function feedBack(payoff) {}
  function initRound() {}

  if (app.current_round > app.total_rounds) {
    gotoNextPage();
  }
</script>
{{ endblock }}