csfieldguide/templates/interactives/training-ground.html
{% extends interactive_mode_template %}
{% load i18n %}
{% load static %}
{% block interactive_html %}
<div class="my-3 container-fluid text-center">
<div id="ai-warning" class="row">
{% trans 'Sorry, this interactive is only available on screens wider than 490px, and optimised for those wider than 610px.' %}
</div>
<div id="interactive-training-ground" class="container start-screen">
<h1>{% trans 'trAIning ground' %}</h1>
<br>
<h5>{% blocktrans %}In this game, take turns with the AI (Nathaniel) picking 1, 2, or 3 sticks.
Whoever picks the last stick wins!<br>
Watch how Nathaniel's picks change as it plays more games.{% endblocktrans %}
</h5>
<div class="col-12 my-3">
<div class="row black-background">
<div id="game-area" class="col-7">
<div class="row">
<div class="col-4">{% trans 'Sticks remaining:' %} <span id="remaining-sticks"></span></div>
<div class="col-4">{% trans 'AI wins:' %} <span id="ai-wins"></span></div>
<div class="col-4">{% trans 'Games played:' %} <span id="games-played"></span></div>
</div>
<div id="sticks-area" class="row text-left"></div>
<div id="status-text" class="col-12 text-center"></div>
<button id="button_start" type="button" class="btn btn-success m-2">{% trans 'Start' %}</button>
<div id="game-buttons" class="col-12 text-center d-none">
<button id="button_1" type="button" class="btn btn-success m-2"> I </button>
<button id="button_2" type="button" class="btn btn-success m-2"> I I </button>
<button id="button_3" type="button" class="btn btn-success m-2"> I I I </button>
</div>
<div id="end-buttons" class="col-12 text-center d-none">
<button id="button_simulate" type="button" class="btn btn-primary m-2">{% trans 'Simulate' %}</button>
<button id="button_rematch" type="button" class="btn btn-primary m-2">{% trans 'Rematch' %}</button>
</div>
<div id="quit-buttons" class="col-12 text-right d-none">
<button id="button_quit" type="button" class="btn btn-danger m-2">{% trans 'Quit' %}</button>
</div>
<div id="splash-text-container">
<div id="splash-text" class="col-12 d-none"></div>
<button id="button_cancel" type="button" class="btn btn-danger btn-lg d-none">{% trans 'STOP' %}</button>
</div>
</div>
<table id="data-table" class="col-5 text-center"></table>
</div>
</div>
<!-- Button to trigger the upcoming modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#game-parameters-modal">{% trans 'Show game parameters' %}</button>
<!-- Avoid overcrowding by using a modal for game parameters -->
<!-- Based on https://getbootstrap.com/docs/4.1/components/modal/ -->
<div id="game-parameters-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="game-parameters-title" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 id="game-parameters-title" class="modal-title">{% trans 'Game parameters:' %}</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="game-parameters" class="row modal-body">
<div class="col-12 col-lg-6 col-xl-4 form-group text-center">
<label for="who-starts-select">{% trans 'Nathaniel starts (%):' %}</label>
<small id="who-starts-help" class="form-text text-muted">{% trans 'How likely is the AI to start each game?' %}</small>
<div id="who-starts-select" class="m-2"></div>
</div>
<div class="col-12 col-lg-6 col-xl-4 form-group text-center">
<label for="num-sticks-select">{% trans 'Number of sticks:' %}</label>
<small id="num-sticks-help" class="form-text text-muted">{% trans 'How many sticks in the pile?' %}</small>
<div id="num-sticks-select" class="m-2"></div>
</div>
<div class="col-12 col-lg-6 col-xl-4 form-group text-center">
<label for="sensitivity-select">{% trans 'AI sensitivity (%):' %}</label>
<small id="sensitivity-help" class="form-text text-muted">{% trans 'How much to change after each game.' %}</small>
<div id="sensitivity-select" class="m-2"></div>
</div>
<div class="col-12 col-lg-6 col-xl-4 form-group text-center">
<label for="num-simulations-select">{% trans 'Number of simulations:' %}</label>
<small id="num-sims-help" class="form-text text-muted">{% trans 'Nathaniel can practice before we start.' %}</small>
<div id="num-simulations-select" class="m-2"></div>
</div>
<div class="col-12 col-lg-6 col-xl-4 form-group text-center">
<label for="practice-opponent-select">{% trans 'Practice opponent:' %}</label>
<small id="practice-opponent-help" class="form-text text-muted">{% trans 'What is Nathaniel's opponent during simulations?' %}</small>
<div id="practice-opponent-select" class="btn-group btn-group-toggle mt-3" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="radio_smartbot" autocomplete="off" value="smart" checked>{% trans 'Smartbot' %}
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="radio_randobot" autocomplete="off" value="random">{% trans 'Randobot' %}
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="radio_nathaniel" autocomplete="off" value="itself">{% trans 'Nathaniel' %}
</label>
</div>
<div class="bot-description my-2">
<ul>
<li id="smartbot_description">
{% blocktrans %}The smartbot has a probability table that favours "correct" choices.
The fewer sticks that remain, the more likely it is to choose a number that prevents its opponent from winning.{% endblocktrans %}
</li>
<li id="randobot_description" class="d-none">
{% blocktrans %}The randobot has an equal probability of choosing any valid number of sticks.
It cannot choose more sticks than there are remaining.{% endblocktrans %}
</li>
<li id="nathaniel_description" class="d-none">
{% blocktrans %}Both AI will use the same probability table to face eachother.
Whether they win or lose, both will contribute to Nathaniel's neural network.{% endblocktrans %}
</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-4 form-group text-center">
<label for="quick-simulations-select">{% trans 'Quick simulations:' %}</label>
<small id="quick-sims-help" class="form-text text-muted">{% trans 'Simulations will be hidden but much faster.' %}</small>
<div id="quick-simulations-select" class="btn-group btn-group-toggle mt-3" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="quick-sim-options" id="radio_false" autocomplete="off" value="false" checked>{% trans 'False' %}
</label>
<label class="btn btn-secondary">
<input type="radio" name="quick-sim-options" id="radio_true" autocomplete="off" value="true">{% trans 'True' %}
</label>
</div>
</div>
</div>
<div class="modal-footer">
<button id="button_modal_cancel" type="button" class="btn btn-danger d-none">{% trans 'Stop simulating' %}</button>
<button id="button_modal_quit" type="button" class="btn btn-danger d-none">{% trans 'Quit current game to make changes' %}</button>
<button id="button_modal_start" type="button" class="btn btn-success" data-dismiss="modal">{% trans 'Start' %}</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">{% trans 'Hide game parameters' %}</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock interactive_html %}
{% block interactive_css %}
<link rel="stylesheet" href="{% static 'interactives/training-ground/css/training-ground.css' %}">
{% endblock interactive_css %}
{% block interactive_js %}
<script type="text/javascript">
var base = "{{ STATIC_URL }}";
</script>
<script type="text/javascript" src="{% static 'interactives/training-ground/js/training-ground.js' %}"></script>
{% endblock interactive_js %}