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

{% block title %}
Phase 2: Task-Solving Stage
{% endblock %}
{% block content %}

<style>
* {
  box-sizing: border-box;
}

.otree-timer {
  position: absolute;
  top: 1%;
  z-index: 2;  
  width:60%;
  height:5%; 
  font-size: 18px; 
}

.img-container {
  float: left;
  width: 50%;
  padding: 5px;
}

.chat-container {
  float: right;
  width: 50%;
  padding: 5px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.modal1 {
  display: none; 
  position: absolute; 
  z-index: 1;  
  left: 0;
  top: 0;
  width: 100%; 
  height: 120%;
  min-height: 1000px; 
  min-width: 1500px; 
  overflow: auto;
  background-color: rgb(0,0,0); 
  background-color: grey; 
}

.modal2 {
  display: none; 
  position: absolute; 
  z-index: 2;  
  left: 0;
  top: 0;
  width: 100%; 
  height: 120%;
  min-height: 1000px; 
  min-width: 1500px; 
  overflow: auto;
  background-color: rgb(0,0,0); 
  background-color: white; 
}

canvas {
 position: absolute;
 top: 14%;
 left: 25%;
 width: 640px;
 height: 640px;
}
        
.closeButton {
  position: absolute;
  left: 25.25%;
  top: 9%;
  height: 16px;
  width: 633px;
  padding: 18px 20px;
  display: inline-block; 
  font-size: 20px;
  cursor: pointer;
  border: solid 4px #7788AA;
  line-height: 8px;
}

.timer {
  position: absolute;
  left: 25.25%;
  top: 5%;
  width: 633px;
  font-size: 17px;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  border: solid 4px #7788AA;
  background-color: #DDEEFF;  
}

.breakButton {
  cursor: pointer;  
  float: right;
  width: 50%;
}

.startGame {
  position: absolute;
  left: 5%;
  top: 25%;
  height: 40px;
  width: 150px;
  font-size: 20px;
  cursor: pointer;
  border: solid 5px #7788AA;
  background-color: #DDEEFF;
}

.stopGame {
  position: absolute;
  left: 5%;
  top: 30%;
  height: 40px;
  width: 150px;
  font-size: 20px;
  cursor: pointer;
  border: solid 5px #7788AA;
  background-color: #DDEEFF;  
}

.pauseGame {
  position: absolute;
  left: 5%;
  top: 35%;
  height: 40px;
  width: 150px;
  font-size: 20px;
  cursor: pointer;
  border: solid 5px #7788AA;
  background-color: #DDEEFF;  
}

.tetris_instructions {
  position: absolute;
  left: 70%;
  top: 25%;
  width: 23%;
  height: 40%;
}

.tetris_keys {
  position: absolute;
  left: 5%;
  width: 20%;
  height: 20%;
  top: 50%;
}

input[type="button"] {
  background-color:#DDEEFF;
  color: black;
  border: solid #7788AA 2px;
  width:100%;
  font-family: Arial, Helvetica, sans-serif;
}
  
input[type="text"] {
  background-color:white;
  border: solid #7788AA 2px;
  width:100%;
  font-family: Arial, Helvetica, sans-serif;
}

.calculator {
  float: right;
  width: 30%;
  padding: 150px;
}

.modal2Text {
  position: absolute;
  left:20%;
  top: 15%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
}

</style>

<p> 
    Your role: <b>{{ player.role }}</b><br>
    Calculate the number of 4s in the grid. You will need information from the other members in your team. 
    <br><br>
    <b>Task-solving Payment:</b> Everyone, including the two other members in your team and every member in the two other teams, each earn <b>20p</b> if your team enters the correct number of 4's in the grid. You lose <b>1p</b> for each question your team answers incorrectly.
    <br><br>
    <b>Game Screen Payment:</b>
    The computer has randomly decided <b>not</b> to reduce the per minutes earnings from spending time in the Game screen. Thus, the earnings from time spent in the Game screen are <b>18p</b> per minute.
</p>

<div class="clearfix">
  <div class="img-container">
    <img src="{% static image_path_1 %}" style="width:90%" />
  </div>
  <div class="chat-container">
    <div>Task number {{ player.round_number }} has begun:</div>
    {% chat nickname=player.role %}
  </div> 
    <button type="button" id="game" class="breakButton" onclick="game()" name="game">Game</button>
</div>

<table class="calculator" border="1">
         <tr>
            <td colspan="3"><input type="text" id="result"/></td>
            <td><input type="button" value="c" onclick="clr()"/> </td>
         </tr>
         <tr>
            <td><input type="button" value="1" onclick="dis('1')"/> </td>
            <td><input type="button" value="2" onclick="dis('2')"/> </td>
            <td><input type="button" value="3" onclick="dis('3')"/> </td>
            <td><input type="button" value="/" onclick="dis('/')"/> </td>
         </tr>
         <tr>
            <td><input type="button" value="4" onclick="dis('4')"/> </td>
            <td><input type="button" value="5" onclick="dis('5')"/> </td>
            <td><input type="button" value="6" onclick="dis('6')"/> </td>
            <td><input type="button" value="-" onclick="dis('-')"/> </td>
         </tr>
         <tr>
            <td><input type="button" value="7" onclick="dis('7')"/> </td>
            <td><input type="button" value="8" onclick="dis('8')"/> </td>
            <td><input type="button" value="9" onclick="dis('9')"/> </td>
            <td><input type="button" value="+" onclick="dis('+')"/> </td>
         </tr>
         <tr>
            <td><input type="button" value="." onclick="dis('.')"/> </td>
            <td><input type="button" value="0" onclick="dis('0')"/> </td>
            <td><input type="button" value="=" onclick="solve()"/> </td>
            <td><input type="button" value="*" onclick="dis('*')"/> </td>
         </tr>
      </table>

<!-- Game Page -->
<div id="myModal1" class="modal1">

    <div class="otree-timer"></div>

    <div class="timer">Seconds in Game screen: <span id="gameTime"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Amount earned in the Game screen: £<span id="points"></span></div>
  
    <canvas></canvas>

    <img src="{% static tetris_instructions %}" class="tetris_instructions"/>
    <img src="{% static tetris_keys %}" class="tetris_keys"/>

    <button type="button" id="startGame" onClick="startGame()" class="startGame">Start</button>
    <button type="button" id="stopGame" onClick="stopGame()" class="stopGame">Stop</button>
    <button type="button" id="pauseGame" onClick="pauseGame()" class="pauseGame">Pause/Play</button>
    
    <button type="button" id="close" onClick="close()" class="closeButton">Pause and Return to the Task Screen</button> 
    
</div>

{% formfield player.task_answers %}

<input type="hidden" name="timePlayed" id="timePlayed"/> 
<input type="hidden" name="games_played" id="games_played"/> 
<input type="hidden" name="f_open" id="f_open"/> 
<input type="hidden" name="timeSpent" id="timeSpent"/>

    {% next_button %}


<div id="myModal2" class="modal2">  
  <div class="modal2Text"><p>
    The timer has now reached 0. The Phase 2 task-solving stage is over.
    <br><br>
    Please wait while the next page loads (where the results and payment information is shown). This can sometimes take up to a minute.
    <br><br>
    Do not refresh your page at this time.
  </p></div>
</div>     

<button type="button" id="toggle_instructions" onClick="toggle_instructions()" class="instructionsButton">Instructions</button>

<iframe id="instructions" class="instructions" src="https://docs.google.com/presentation/d/e/2PACX-1vS1hp9tZF4RQILwd3PR7i-8chIKHQf1pgahEczPJ8QVe39ujML02dZiGoguBi158AU02-b70gjIutzZ/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>     

<script>

//calculator
function dis(val) {
  document.getElementById("result").value+=val
}
           
function solve() {
  let x = document.getElementById("result").value
  let y = eval(x)
  document.getElementById("result").value = y
}
           
function clr() {
  document.getElementById("result").value = ""
}  

//Page Timer
var pageTimeElapsed = 0;
var pageTimerID = -1;
var time_left = js_vars.time_left;

var modal2 = document.getElementById("myModal2");

function pageTick() {
  pageTimeElapsed++
  document.getElementById("timeSpent").value = pageTimeElapsed;

  if (pageTimeElapsed >= time_left) {
    document.getElementById("close").click();
    modal2.style.display = "block";
    if(pageTimerID != -1){
      clearInterval(pageTimerID);
      pageTimerID = -1;
    };
  };
};

window.onload = function() { 
  if(pageTimerID == -1){
    pageTimerID = setInterval(pageTick, 1000);
  } 
  document.getElementById("timePlayed").value = 0;
};  

//Timer
var timeElapsed = 0;
var timerID = -1;
var pointsNum = 0;
var gameTime = 0;

function tick() {
  timeElapsed++
  pointsNum = timeElapsed*(0.18/60);
  gameTime = timeElapsed;
  document.getElementById("timePlayed").value = timeElapsed;
  document.getElementById("gameTime").innerHTML = gameTime;
  document.getElementById("points").innerHTML = parseFloat(pointsNum).toFixed(2);
}

var open_clicked = 0;
var end_clicked = 0;
var t = 0;
var games_played = 0;

//Pages
var modal = document.getElementById("myModal1");

//Buttons
var game = document.getElementById("game");
var close = document.getElementById("close");

// Button Functions 
game.onclick = function() {
  modal.style.display = "block";
  if(open_clicked == 0) {
    t = event.timeStamp;
  }
  open_clicked++;
  document.getElementById('f_open').value = t;
  if(timerID == -1){
    timerID = setInterval(tick, 1000);
  }  
};

close.onclick = function() {
  modal.style.display = "none";   
  var m = event.timeStamp;
  end_clicked++;
  if(timerID != -1){
    clearInterval(timerID)
  timerID = -1
  }
  if(open_clicked==end_clicked){
  games_played++;
  }
  document.getElementById('games_played').value = games_played;
  scoreboard.setPause();
};


'use strict';
        var canvas = document.querySelector('canvas');
        canvas.width = 640;
        canvas.height = 640;
 
        var g = canvas.getContext('2d');
 
        var right = { x: 1, y: 0 };
        var down = { x: 0, y: 1 };
        var left = { x: -1, y: 0 };
 
        var EMPTY = -1;
        var BORDER = -2;
 
        var fallingShape;
        var nextShape;
        var dim = 640;
        var nRows = 18;
        var nCols = 12;
        var blockSize = 30;
        var topMargin = 50;
        var leftMargin = 20;
        var scoreX = 400;
        var scoreY = 330;
        var titleX = 130;
        var titleY = 160;
        var clickX = 120;
        var clickY = 400;
        var previewCenterX = 467;
        var previewCenterY = 97;
        var mainFont = 'bold 48px monospace';
        var smallFont = 'bold 18px monospace';
        var colors = ['green', 'red', 'blue', 'purple', 'orange', 'blueviolet', 'magenta'];
        var gridRect = { x: 46, y: 47, w: 308, h: 517 };
        var previewRect = { x: 387, y: 47, w: 200, h: 200 };
        var titleRect = { x: 100, y: 95, w: 252, h: 100 };
        var clickRect = { x: 50, y: 375, w: 252, h: 40 };
        var outerRect = { x: 5, y: 5, w: 625, h: 600 };
        var squareBorder = 'white';
        var titlebgColor = 'white';
        var textColor = 'black';
        var bgColor = '#DDEEFF';
        var gridColor = '#BECFEA';
        var gridBorderColor = '#7788AA';
        var largeStroke = 5;
        var smallStroke = 2;
 
        // position of falling shape
        var fallingShapeRow;
        var fallingShapeCol;
 
        var keyDown = false;
        var fastDown = false;
 
        var grid = [];
        var scoreboard = new Scoreboard();
 
        addEventListener('keydown', function (event) {
            if (!keyDown) {
                keyDown = true;
 
                if (scoreboard.isGameOver())
                    return;
                    
                if (scoreboard.isPaused())
                    return;    
 
                switch (event.key) {
 
                    case 'w':
                    case 'ArrowUp':
                        if (canRotate(fallingShape))
                            rotate(fallingShape);
                        break;
 
                    case 'a':
                    case 'ArrowLeft':
                        if (canMove(fallingShape, left))
                            move(left);
                        break;
 
                    case 'd':
                    case 'ArrowRight':
                        if (canMove(fallingShape, right))
                            move(right);
                        break;
 
                    case 's':
                    case 'ArrowDown':
                        if (!fastDown) {
                            fastDown = true;
                            while (canMove(fallingShape, down)) {
                                move(down);
                                draw();
                            }
                            shapeHasLanded();
                        }
                }
                draw();
            }
        });
 
 
        addEventListener('keyup', function () {
            keyDown = false;
            fastDown = false;
        });
 
        function canRotate(s) {
            if (s === Shapes.Square)
                return false;
 
            var pos = new Array(4);
            for (var i = 0; i < pos.length; i++) {
                pos[i] = s.pos[i].slice();
            }
 
            pos.forEach(function (row) {
                var tmp = row[0];
                row[0] = row[1];
                row[1] = -tmp;
            });
 
            return pos.every(function (p) {
                var newCol = fallingShapeCol + p[0];
                var newRow = fallingShapeRow + p[1];
                return grid[newRow][newCol] === EMPTY;
            });
        }
 
        function rotate(s) {
            if (s === Shapes.Square)
                return;
 
            s.pos.forEach(function (row) {
                var tmp = row[0];
                row[0] = row[1];
                row[1] = -tmp;
            });
        }
 
        function move(dir) {
            fallingShapeRow += dir.y;
            fallingShapeCol += dir.x;
        }
 
        function canMove(s, dir) {
            return s.pos.every(function (p) {
                var newCol = fallingShapeCol + dir.x + p[0];
                var newRow = fallingShapeRow + dir.y + p[1];
                return grid[newRow][newCol] === EMPTY;
            });
        }
 
        function shapeHasLanded() {
            addShape(fallingShape);
            if (fallingShapeRow < 2) {
                scoreboard.setGameOver();
                scoreboard.setTopscore();
            } else {
                scoreboard.addLines(removeLines());
            }
            selectShape();
        }
 
        function removeLines() {
            var count = 0;
            for (var r = 0; r < nRows - 1; r++) {
                for (var c = 1; c < nCols - 1; c++) {
                    if (grid[r][c] === EMPTY)
                        break;
                    if (c === nCols - 2) {
                        count++;
                        removeLine(r);
                    }
                }
            }
            return count;
        }
 
        function removeLine(line) {
            for (var c = 0; c < nCols; c++)
                grid[line][c] = EMPTY;
 
            for (var c = 0; c < nCols; c++) {
                for (var r = line; r > 0; r--)
                    grid[r][c] = grid[r - 1][c];
            }
        }
 
        function addShape(s) {
            s.pos.forEach(function (p) {
                grid[fallingShapeRow + p[1]][fallingShapeCol + p[0]] = s.ordinal;
            });
        }
 
        function Shape(shape, o) {
            this.shape = shape;
            this.pos = this.reset();
            this.ordinal = o;
        }
 
        var Shapes = {
            ZShape: [[0, -1], [0, 0], [-1, 0], [-1, 1]],
            SShape: [[0, -1], [0, 0], [1, 0], [1, 1]],
            IShape: [[0, -1], [0, 0], [0, 1], [0, 2]],
            TShape: [[-1, 0], [0, 0], [1, 0], [0, 1]],
            Square: [[0, 0], [1, 0], [0, 1], [1, 1]],
            LShape: [[-1, -1], [0, -1], [0, 0], [0, 1]],
            JShape: [[1, -1], [0, -1], [0, 0], [0, 1]]
        };
 
        function getRandomShape() {
            var keys = Object.keys(Shapes);
            var ord = Math.floor(Math.random() * keys.length);
            var shape = Shapes[keys[ord]];
            return new Shape(shape, ord);
        }
 
        Shape.prototype.reset = function () {
            this.pos = new Array(4);
            for (var i = 0; i < this.pos.length; i++) {
                this.pos[i] = this.shape[i].slice();
            }
            return this.pos;
        }
 
        function selectShape() {
            fallingShapeRow = 1;
            fallingShapeCol = 5;
            fallingShape = nextShape;
            nextShape = getRandomShape();
            if (fallingShape != null) {
                fallingShape.reset();
            }
        }
 
        function Scoreboard() {
            this.MAXLEVEL = 9;
 
            var level = 0;
            var lines = 0;
            var score = 0;
            var topscore = 0;
            var gameOver = true;
            var pause = true;
 
            this.reset = function () {
                this.setTopscore();
                level = lines = score = 0;
                gameOver = false;
                pause = false;
            }
            
            this.unPause = function () {
                pause = false;
            }    
 
            this.setGameOver = function () {
                gameOver = true;
            }
 
            this.isGameOver = function () {
                return gameOver;
            }
            
            this.setPause = function () {
                pause = true;
            }
 
            this.isPaused = function () {
                return pause;
            }
 
            this.setTopscore = function () {
                if (score > topscore) {
                    topscore = score;
                }
            }
 
            this.getTopscore = function () {
                return topscore;
            }
 
            this.getSpeed = function () {
 
                switch (level) {
                    case 0: return 700;
                    case 1: return 600;
                    case 2: return 500;
                    case 3: return 400;
                    case 4: return 350;
                    case 5: return 300;
                    case 6: return 250;
                    case 7: return 200;
                    case 8: return 150;
                    case 9: return 100;
                    default: return 100;
                }
            }
 
            this.addScore = function (sc) {
                score += sc;
            }
 
            this.addLines = function (line) {
 
                switch (line) {
                    case 1:
                        this.addScore(10);
                        break;
                    case 2:
                        this.addScore(20);
                        break;
                    case 3:
                        this.addScore(30);
                        break;
                    case 4:
                        this.addScore(40);
                        break;
                    default:
                        return;
                }
 
                lines += line;
                if (lines > 10) {
                    this.addLevel();
                }
            }
 
            this.addLevel = function () {
                lines %= 10;
                if (level < this.MAXLEVEL) {
                    level++;
                }
            }
 
            this.getLevel = function () {
                return level;
            }
 
            this.getLines = function () {
                return lines;
            }
 
            this.getScore = function () {
                return score;
            }
        }
 
        function draw() {
            g.clearRect(0, 0, canvas.width, canvas.height);
 
            drawUI();
 
            if (!scoreboard.isPaused()) {
            
              if (scoreboard.isGameOver()) {
                  drawStartScreen();
              } else {    
                  drawFallingShape();
              }
            }  
        }
 
        function drawStartScreen() {
            g.font = mainFont;
 
            fillRect(titleRect, titlebgColor);
            fillRect(clickRect, titlebgColor);
 
            g.fillStyle = textColor;
            g.fillText('Tetris', titleX, titleY);
 
            g.font = smallFont;
            g.fillText('click to start', clickX, clickY);
        }
               
 
        function fillRect(r, color) {
            g.fillStyle = color;
            g.fillRect(r.x, r.y, r.w, r.h);
        }
 
        function drawRect(r, color) {
            g.strokeStyle = color;
            g.strokeRect(r.x, r.y, r.w, r.h);
        }
 
        function drawSquare(colorIndex, r, c) {
            var bs = blockSize;
            g.fillStyle = colors[colorIndex];
            g.fillRect(leftMargin + c * bs, topMargin + r * bs, bs, bs);
 
            g.lineWidth = smallStroke;
            g.strokeStyle = squareBorder;
            g.strokeRect(leftMargin + c * bs, topMargin + r * bs, bs, bs);
        }
 
        function drawUI() {
 
            // background
            fillRect(outerRect, bgColor);
            fillRect(gridRect, gridColor);
 
            // the blocks dropped in the grid
            for (var r = 0; r < nRows; r++) {
                for (var c = 0; c < nCols; c++) {
                    var idx = grid[r][c];
                    if (idx > EMPTY)
                        drawSquare(idx, r, c);
                }
            }
 
            // the borders of grid and preview panel
            g.lineWidth = largeStroke;
            drawRect(gridRect, gridBorderColor);
            drawRect(previewRect, gridBorderColor);
            drawRect(outerRect, gridBorderColor);
 
            // scoreboard
            g.fillStyle = textColor;
            g.font = smallFont;
            g.fillText('hiscore    ' + scoreboard.getTopscore(), scoreX, scoreY);
            g.fillText('level      ' + scoreboard.getLevel(), scoreX, scoreY + 30);
            g.fillText('lines      ' + scoreboard.getLines(), scoreX, scoreY + 60);
            g.fillText('score      ' + scoreboard.getScore(), scoreX, scoreY + 90);
 
            // preview
            var minX = 5, minY = 5, maxX = 0, maxY = 0;
            nextShape.pos.forEach(function (p) {
                minX = Math.min(minX, p[0]);
                minY = Math.min(minY, p[1]);
                maxX = Math.max(maxX, p[0]);
                maxY = Math.max(maxY, p[1]);
            });
            var cx = previewCenterX - ((minX + maxX + 1) / 2.0 * blockSize);
            var cy = previewCenterY - ((minY + maxY + 1) / 2.0 * blockSize);
 
            g.translate(cx, cy);
            nextShape.shape.forEach(function (p) {
                drawSquare(nextShape.ordinal, p[1], p[0]);
            });
            g.translate(-cx, -cy);
        }
 
        function drawFallingShape() {
            var idx = fallingShape.ordinal;
            fallingShape.pos.forEach(function (p) {
                drawSquare(idx, fallingShapeRow + p[1], fallingShapeCol + p[0]);
            });
        }
 
       function animate(lastFrameTime) {
            var requestId = requestAnimationFrame(function () {
                animate(lastFrameTime);
            });
 
            var time = new Date().getTime();
            var delay = scoreboard.getSpeed();
 
            if (lastFrameTime + delay < time) {
 
                if (!scoreboard.isPaused()) {
                
                  if (!scoreboard.isGameOver()) {

                      if (canMove(fallingShape, down)) {
                          move(down);
                      } else {
                          shapeHasLanded();
                      }
                      draw();
                      lastFrameTime = time;

                  } else {
                      cancelAnimationFrame(requestId);
                  }
               }   
            }
        }
 
        function startNewGame() {
            initGrid();
            selectShape();
            scoreboard.reset();
            animate(-1);
        }
 
        function initGrid() {
            function fill(arr, value) {
                for (var i = 0; i < arr.length; i++) {
                    arr[i] = value;
                }
            }
            for (var r = 0; r < nRows; r++) {
                grid[r] = new Array(nCols);
                fill(grid[r], EMPTY);
                for (var c = 0; c < nCols; c++) {
                    if (c === 0 || c === nCols - 1 || r === nRows - 1)
                        grid[r][c] = BORDER;
                }
            }
        }
 
        function init() {
            initGrid();
            selectShape();
            draw();
        }

        init();
        
//Tetris buttons
var startGame = document.getElementById("startGame");
var stopGame = document.getElementById("stopGame");
var pauseGame = document.getElementById("pauseGame");

pauseGame.onclick = function() {
    if (!scoreboard.isPaused()) {
      scoreboard.setPause();
    } else {
      scoreboard.unPause();
    }
}; 

stopGame.onclick = function() {
    scoreboard.setGameOver();
    scoreboard.setTopscore();
    drawStartScreen();
};

startGame.onclick = function() {
  startNewGame();
};

    </script>

{% endblock %}