Games-Sudoku-Html

 view release on metacpan or  search on metacpan

lib/Games/Sudoku/Html.pm  view on Meta::CPAN

        <th>Play it</th>
      </tr>
      <TMPL_LOOP puzzles><tr id="row-<TMPL_VAR __counter__>">
        <td><TMPL_VAR __counter__></td>
        <td class="gridstring"><TMPL_VAR strPuzzle></td>
        <td><TMPL_VAR properties ESCAPE="html"></td>
        <td><a href="#" onclick="play(event, 'row-<TMPL_VAR __counter__>')">open here</a>, <a href="https://www.sudokuexchange.com/play/?s=<TMPL_VAR paramBoard>" target="_blank">play online</a></td>
      </tr></TMPL_LOOP>
    </table>

    <div class="popup" id="popup1">
      <div id="popup1header" style="text-align:center;"><span id="timer" style="float:left;"></span><span id="puzzleid">Click here to move</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="continueOnline(event)">continue online</a><a href="#" onclic...

      <script type="text/javascript">
        /* partially based on Spreadsheet::HTML::Presets::Sudoku, Copyright 2017 Jeff Anderson */

        var MATRIX;
        var STEPS;
        var fillingivens = function(rowid, grid, playable) {
          var board = $(rowid).querySelector('.gridstring').textContent;
          var cells = grid.getElementsByTagName('td');
          if (playable) {

lib/Games/Sudoku/Html.pm  view on Meta::CPAN

        function puzzlecomplete() {
          for (var r = 0; r < 9; r++) {
            for (var c = 0; c < 9; c++) {
              if (! MATRIX[r][c]) return false;
            }
          }
          return true;
        }

        // reverse input stepwise if ESC gets pressed
        document.getElementById('popup1').addEventListener('keydown', function (event) {
          var key = event.key;
          if (key == 'Escape' || key == 'Backspace') {
            var target = STEPS.pop();
            if (! target) return 0;         

            var targetid = target.id;
            var result = targetid.match(/input-(\d)-(\d)/);

            target.value = '';
            MATRIX[result[1]][result[2]] = '';
          }
        });
        var play = function(e, rowid) {
          e = e || window.event;
          e.preventDefault();
          if (timerVar) clearInterval(timerVar);

          fillingivens(rowid, $('sudoku'), true);
          $('popup1').style.display ='block';

          var inputs = $('sudoku').getElementsByClassName('sudokuinput');
          for (var i=0; i<inputs.length; i++) {
            var input = inputs[i];

            input.addEventListener('keydown', function (event) {
              var matches = this.id.match( /(\d+)-(\d+)/ );
              var id_r = matches[1];
              var id_c = matches[2];

lib/Games/Sudoku/Html.pm  view on Meta::CPAN

          }

          min = '00';
          sec = 0;
          $('timer').style.color = '';
          $('timer').innerHTML = '00:00';
          timerVar = setInterval(myTimer, 1000);
        }

        /* draggable code from w3schools.com */
        dragElement(document.getElementById('popup1'));

        function dragElement(elmnt) {
          var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

          if (document.getElementById(elmnt.id + 'header')) {
            document.getElementById(elmnt.id + 'header').onmousedown = dragMouseDown;
          } else {
            elmnt.onmousedown = dragMouseDown;
          }

lib/Games/Sudoku/Html.pm  view on Meta::CPAN

            var row = new Array();
            for (var c = 0; c < 9; c++) {
              url = url + (MATRIX[r][c] || '0');
            }
          }
          window.open(url);
        }
      </script>

      <style>
        .popup {
          padding: 10px;
          background: #fff;
          z-index: 20;
        }

        #popup1 {
          -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
          box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
          display: none;
          position: fixed;
          left: 65%;
          top: 10%;
        }
        #popup1header {
          padding: 10px;
          cursor: move;
          z-index: 10;
          background-color: #aaa;
          color: #fff;
        }
        #popup1 table {
          border-collapse: collapse;
          font-family: arial, sans-serif;
          font-weight: bold;
          font-size: xx-large;
          text-align: center;
        }
        #popup1 colgroup {
          border: solid medium;
        }
        #popup1 tbody {
          border: solid medium;
        }
        #popup1 td {
          border: solid thin;
          width: 50px;
          height: 50px;
          color: #aaa;
        }
        #popup1 input {
          border: 0px;
          max-width: 35px;
          font-family: arial, sans-serif;
          font-weight: bold;
          font-size: xx-large;
          text-align: center;
        }
      </style>

      <table id="sudoku">
        <colgroup><col/><col/><col/></colgroup>
        <colgroup><col/><col/><col/></colgroup>
        <colgroup><col/><col/><col/></colgroup>
        <TMPL_LOOP grid><tbody>
          <TMPL_LOOP sudokuBand><tr><TMPL_LOOP sudokuRow><td/></TMPL_LOOP></tr>
        </TMPL_LOOP></tbody></TMPL_LOOP>
      </table>
    </div>  

    <div class="popup" id="popup2">
      <script type="text/javascript">
        const puzzlecells = document.querySelectorAll('.gridstring');
        puzzlecells.forEach(cell => {
          cell.addEventListener('mouseenter', function (e) {showgrid(e, cell.parentElement.id)});
          cell.addEventListener('mouseleave', function (e) {$('popup2').style.display = 'none';});
        });

        function showgrid(e, rowid) {
          e = e || window.event;
          if (e.target !== e.currentTarget) {
            return;
          }
          e.preventDefault();
          fillingivens(rowid, $('grid'), false);
          $('popup2').style.display = 'block';
        }
      </script>
      <style>
        #popup2 {
          padding: 3px;
          background: #fff;
          /* -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
          box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5); */
          display: none;
          position: fixed;
          left: 35%;
          top: 10%;
          z-index: 15;
        }
        #popup2 table {
          border-collapse: collapse;
          font-family: arial, sans-serif;
          font-weight: bold;
          font-size: large;
          text-align: center;
        }
        #popup2 colgroup {
          border: solid 2px;
        }
        #popup2 tbody {
          border: solid 2px;
        }
        #popup2 td {
          border: solid thin;
          width: 20px;
          height: 20px;
          color: #aaa;
        }
      </style>

      <table id="grid">
        <colgroup><col/><col/><col/></colgroup>
        <colgroup><col/><col/><col/></colgroup>