{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    第{{ subsession.round_number }}回合
{% endblock %}

{% block global_styles  %}
<style>
    body {
        text-align: center;
    }
    #speak-button {
        font-size: 30px;
        margin: 30px;
        display: none;
    }
    .hidden-area {
        display: none;
    }
    .speech-area {
        margin: auto;
        padding: 8px;
        text-align: center;
        border: 4px solid black;
        width: 280px;
        height: auto;
        font-size: 40px;
        display: none;
    }
    .show-after-speech-area {
        display: none;
    }
    .template-area {  /*「範例」會使用到的文字，預設不顯示*/
        display: none;
    }
    .formfields-area {
        margin: 20px;
    }
    .debug-info {
        display: none;
    }
</style>
{% endblock %}

{% block content %}

    <div class="template-area">
        <p>在進入正式的回合之前，我們先給您一個例子。</p>
    </div>

    <button type="button" id="speak-button"> 請點擊播放語音 </button>

    <div class="speech-area">
    	<div class="pronoun-area">
        	{{ player.treatment_pronoun }} <br>
    	</div>
        {{ player.waiting_period }} 週後  <br>
        得到 <br>
        {{ player.gained_amount }}元
    </div>

    <div class="show-after-speech-area">    

        <div class="template-area">
            <p></p>
            <p>註：這邊的金額和日期僅是範例，在真實的實驗中，每回合的金額和日期都會不同。</p>
        </div>
        
        <div class="formfields-area">
            {% formfield player.get_money_now_or_future %}
        </div>

        <div class="template-area">
            <p>如果您選擇今天的報酬，那代表您今天會得到100元。</p>
            <p>如果您選擇未來的報酬，那代表您會在2週後得到120元。</p>
        </div>

        <div class="nextbutton-area">
            {% next_button %}
        </div>
    </div>

    <div class="hidden-area">
        {% formfield player.waiting_period %}
        {% formfield player.gained_amount %}
        {% formfield player.treatment_pronoun %}
        {% formfield player.treatment_speech_speed %}

        {% formfield player.num_listen_times %}
        {% formfield player.decision_duration %}
    </div>

{% endblock %}


{% block global_scripts %}
<script>
    var num_listen_times = 0; // 點擊 播放音檔的次數
    var is_answered = false; // 是否點選選項了
    
    // 優先使用「Google 國語」 參考："speechSynthesis 強制使用 Chrome 中的 Google 小姐中文語音" https://gist.github.com/Eotones/d67be7262856a79a77abeeccef455ebf
    var voice;
    function setupVoice() {
        var voices = synth.getVoices();
        for(let index = 0; index < voices.length; index++) {
            var name = voices[index].name;
            if(name.startsWith("Google 國語")) {
                voice = voices[index];
                $('#speak-button').show(); // 當 voice ready 時才 show 播放按鈕。
                break;
            }
        }
    }
    // 參考："Speech synthesiser" https://mdn.github.io/web-speech-api/speak-easy-synthesis/
    var synth = window.speechSynthesis;
    setupVoice();
    if (speechSynthesis.onvoiceschanged !== undefined) {
        speechSynthesis.onvoiceschanged = setupVoice;
    }

    setTimeout(function () {
        $('#speak-button').show(); // 若 voice 抓不到 Google 語音引擎，那1秒後還是 show 播放按鈕，避免完全無法作答。
    }, 1000)

    // 按下播放按鈕
    $('#speak-button').click(function(){
        // 播放語音的次數
        num_listen_times++;
        $('#id_num_listen_times').val(num_listen_times)

        $speech_area = $('.speech-area');
        {% if shows_speech_area %}
            $speech_area.show(); // 抓到文字區
        {% endif %}

        var speech;
        {% if player.treatment_pronoun != '' %}
            $('.pronoun-area').show(); // 抓到「我」
            speech = $speech_area.text();
        {% else %}
            $('.pronoun-area').hide(); // 抓到「我」
            speech = $speech_area.clone().children().remove().end().text();
        {% endif %}

        speed = {{ player.treatment_speech_speed }}

        onend = function () {
            // 播放語音後選項顯示
            $('.show-after-speech-area').show();
        }
        speak(speech, voice, speed, onend);
        setTimeout(onend, 4500); // workaround: 有時候 speak 的 onend 不會進去不知道為什麼，先再加一個 timeout 確保選項會顯示

        // decision_duration
        if(num_listen_times == 1) {
            var duration = 0
            let interval = 0.1
            let timer = setInterval(()=>{ // 每隔 interval 秒執行一次
                if(num_listen_times >= 1){
                    duration += interval; // 按下播放後開始計時
                    $('#id_decision_duration').val(duration.toFixed(1)) // JavaScript toFixed() Method: Convert a number into a string, keeping only N decimals

                }
                if(is_answered) {
                    clearInterval(timer);
                }
            }, interval * 1000);

            // 按下 Next 按鈕
            $('.otree-btn-next').click(function(){
                radio_id_prefix = '#id_get_money_now_or_future_'
                is_answered = $(radio_id_prefix + '0').is(":checked") || $(radio_id_prefix + '1').is(":checked")
            })
        }
    })

    function speak(text, voice, speed, onend) {
        text = adjustTextForSpeech(text);
        var utterThis = new SpeechSynthesisUtterance(text);
        utterThis.onend = onend;
        utterThis.onerror = function(event) {
            console.error('SpeechSynthesisUtterance.onerror');
        }
        utterThis.pitch = 1;
        utterThis.rate = speed;
        if (voice) {
            utterThis.voice = voice;
        }

        window.speechSynthesis.speak(utterThis);
    }

    function adjustTextForSpeech(text) {
        // workaround: 當「受試者四周後...」連在一起時 Google 語音發音會很奇怪，好像忽男聲忽女聲。後來發現在者後面放一個逗號，就會恢復正常。 https://josieslab.slack.com/archives/G012NFPMMCG/p1589617504002100
        return text.replace('者', '者，')
    }

</script>

{% endblock %}