{% load otree static %}
{% load i18n %}

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<div class="card bg-light mb-3">
    <div class="card-body">
        {% if language == "fr" %}
        <p>
            Vous êtes dans le même groupe de {{ Constants.players_per_group }} que dans la partie 1.
        </p>
        <p>
            Le jeu comporte {{ Constants.num_rounds }} périodes. Chaque période, vous devez décider du nombre de jetons
            que vous extrayez d'une ressource commune à tout le groupe. Vous
            pouvez extraire n'importe quel nombre entier compris entre 0 et {{ Constants.max_extraction }} jetons.
        </p>
        <p>
            Le gain dépend de votre extraction et de l'extraction totale du groupe. Plus précisément, le gain
            est égal à \( ax - bx^2 - x (c + kX) \) <br>
            avec a={{ Constants.a }}, b = {{ Constants.b }}, c = {{ Constants.c }}, k = {{ Constants.k }},
            \(x\) est votre extraction et \(X\) est l'extraction totale du groupe (vous inclus).
        </p>
        <p>
            La première partie de l'équation, \( ax - bx^2\), correspond au bénéfice individuel issu de votre
            extraction, il ne dépend pas de l'extraction des autres membres de votre groupe. La figure ci-dessous
            représente cette fonction de bénéfice.
        </p>

        <figure id="graph_benef_fr" class="mt-3 mb-3 mx-auto" style="width: 70%"></figure>

        <p>
            La seconde partie de l'équation, \(x (c + kX) \), correspond au coût de l'extraction, il dépend de votre
            extraction et de l'extraction totale du groupe (\(X\)).
        </p>
        <p>
            <u>Exemple</u> : {{ instructions_example|linebreaks }}
        </p>
        <p>
            Le tableau ci-dessous vous montre votre gain en fonction de votre extraction et de l'extraction totale du
            groupe. Vous aurez également accès à un simulateur pour calculer votre gain en fonction de votre extraction
            et de votre estimation de l'extraction totale des autres membres de votre groupe.
        </p>
        {% include "relations_cpr_game/payoff_table.html" %}
        <p>
            Votre gain pour le jeu sera égal à votre gain cumulé sur les {{ Constants.num_rounds }} périodes. Il sera
            converti en euros avec le taux de conversion 1 ECU = {{ session.config.real_world_currency_per_point }} €.
        </p>

        {% if subsession.communication %}
        <p>
            Avant que le jeu commence vous allez pouvoir discuter pendant {{ communication_time }}
            avec les autres membres de votre groupe. Le sujet de discussion est libre, mais il est interdit de
            donner des informations permettant de vous identifier ou de vous localiser dans la salle, et de proférer
            des menaces ou insultes.
        </p>
        {% endif %}

        {% else %}
        <p>
            You will be in the same group of {{ Constants.players_per_group }} than in part 1.
            The composition of the groups will stay unchanged until the end of the game. You cannot identify the other
            members of your group, and they cannot identify yourself.
        </p>
        <p>
            The game consists of {{ Constants.num_rounds }} rounds. In each round you, as well as the other members of
            your group, will have to decide how many tokens you want to extract from a common resource of
            {{Constants.ressource}} tokens. Each group member can extract a maximum of {{ Constants.max_extraction }}
            tokens.
        </p>
        <p>
            Your payoff depends on your extraction and on the total extraction of your group.
            More precisely, the payoff is equal to \( ax - bx^2 - x (c + kX) \) <br>
            where a={{ Constants.a }}, b = {{ Constants.b }}, c = {{ Constants.c }}, k = {{ Constants.k }},
            x is your extraction and X the total extraction of your group (including yours).
        </p>
        <p>
            The first part of the equation \( ax - bx^2\) corresponds to your individual benefice from your extraction,
            it doesn't depend on the others' extraction. The figure below represents the benefice function.
        </p>

        <figure class="mt-3 mb-3 mx-auto" id="graph_benef_en" style="width: 70%"></figure>

        <p>
            The second part of the equation \(x (c + kX) \) corresponds to the cost of the extraction, it depends on
            your extraction as well as on the total extraction made by the group (\( X \)).
        </p>
        <p>
            <u>Example</u> : {{ instructions_example }}
        </p>
        <p>
            The table below shows your payoff depending on your extraction and the total extraction of your group.
            You will also have access to a simulator to calculate your payoff depending on your extraction and the total
            extraction of the other members of your group.
        </p>
        {% include "relations_cpr_game/payoff_table.html" %}
        <p>
            Your payoff for the game will be equal to your cumulative payoff over the {{ Constants.num_rounds }} rounds.
            It will be converted into Euros, with the conversion rate
            1 ECU = {{ session.config.real_world_currency_per_point }} Euros.
        </p>

        {% if subsession.communication %}
        <p>
            Before the game starts you will have the possibility to discuss with the other members of your group
            during {{ communication_time }} via a chat area.
            The subject of the discussion is free, but you must not give information that would identify
            you or locate you in the room. It is also forbidden to use insults or threats.
        </p>
        {% endif %}

        {% endif %}
    </div>
</div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
    function create_graph_benef() {
        let the_data = []
        for (let i=0; i<js_vars.max_extraction+1; i++)
            the_data.push([i, js_vars.a * i - js_vars.b * Math.pow(i, 2)]);
        return Highcharts.chart(js_vars.language === "fr" ? "graph_benef_fr" : "graph_benef_en", {
            credits: {enabled: false},
            exporting: {enabled: false},
            chart : {
                type: "line",
            },
            title: {text: js_vars.language === "fr" ? 'La fonction de bénéfice': "The benefice function"},
            yAxis: {
                title: {text: js_vars.language === "fr" ? "Bénéfice": "Benefice"},
                min: 0,
            },
            xAxis: {
                title: {text: js_vars.language === "fr" ? "Jetons extraits": "Extracted tokens"},
                min: 0,
                max: js_vars.max_extraction,
                // tooltip: {},
                tickPositions: [...Array(js_vars.max_extraction + 1).keys()]
            },
            series: [
                {
                    name: js_vars.language === "fr" ? "Bénéfice": "Benefice",
                    data: the_data,
                    color: "chocolate",
                }
            ],
            legend: {enabled: false},
            tooltip: {
                formatter: function() {
                    if (js_vars.language === "fr")
                        return `${this.x} jetons<br>Bénéfice : ${this.y.toFixed(2)} ECUs`;
                    else
                        return `${this.x} tokens<br>Benefice : ${this.y.toFixed(2)} ECUs`;
                }
            }
        })
    }

    create_graph_benef();
</script>