pzprjs/src-ui/rules.html at 1451bd234a853bc942ae11ad7f3b2590e9e3251a · robx/pzprjs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>pzpr rules</title>
<style>
html {
  font-family: sans-serif;
}
h1 {
  font-size: medium;
}
div + h1 {
  margin-top: 20px;
}
.testcase {
  background: #f0f0f0;
  margin: 10px;
}
.player {
  background: #f0f0f0;
  margin: 10px;
}
.canvas {
  display: inline-block;
  vertical-align: middle;
}
.error-label {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1em;
}
.error-msg {
  display: inline-block;
  vertical-align: middle;
}
.error-msg span {
  display: block;
}
</style>

<script type="text/javascript" src="./js/candle.js?<%= git.hash %>"></script>
<script type="text/javascript" src="./js/pzpr.js?<%= git.hash %>"></script>
<script>

function render(testcase, data, type_, ready){
  var canvas = document.createElement('div');
  canvas.className = 'canvas';
  canvas.style = "width:200px; height:200px;"
  testcase.appendChild(canvas);
  var puzzle = new pzpr.Puzzle(canvas, {type:type_});
  puzzle.setConfig('autocmp', false);
  puzzle.setConfig('forceallcell',true);
  puzzle.once("ready", function(){ready(puzzle);});
  puzzle.open(data);
}

function nopid(){
  var link = document.createElement('a');
  link.href = "list.html";
  link.text = "List of puzzle types / パズルの種類のリスト";
  document.getElementsByTagName('body')[0].appendChild(link);
}

pzpr.on("load", function(){
  var pid = window.location.search.substring(1);
  pid = pzpr.variety.toPID(pid);
  if(!pid) {
    nopid();
    return;
  }

  var failcheck, url;
  window.ui = {};
  window.ui.debug = {};
  window.ui.debug.addDebugData = function(pid, data){
    url = pid + "/" + data.url;
    failcheck = data.failcheck;
  };

  var datadir='./js/pzpr-samples';

  var _script = document.createElement('script');
  _script.type = 'text/javascript';
  _script.src = datadir+'/'+pid+'.js';
  _script.onload = function(){
    var body = document.getElementsByTagName('body')[0];

    var heading = document.createElement('h1');
    heading.textContent = "Example player";
    body.appendChild(heading);
    var player = document.createElement('div');
    player.className = 'player';
    body.appendChild(player);
    render(player, url, 'player', function(puzzle){});

    heading = document.createElement('h1');
    heading.textContent = "Example errors";
    body.appendChild(heading);
    failcheck.forEach(function(data){
      if(data.length>2&&data[2].skiprules){ return;}
      var testcase = document.createElement('div');
      testcase.className = 'testcase';
      body.appendChild(testcase);
      // blank puzzle
      //render(testcase, data[1], 'viewer', function(puzzle){
      //  puzzle.ansclear();
      //});
      // solution
      //render(testcase, data[1], 'viewer', function(puzzle){});
      // marked solution
      render(testcase, data[1], 'viewer', function(puzzle){
        var failcode = puzzle.check(true);
        var label = document.createElement('div');
        label.className = 'error-label';
        label.textContent = (failcode.complete?'OK':'NG') + ':';
        var error = document.createElement('div');
        error.className = 'error-msg';
        var langs = ['en', 'ja'];
        langs.forEach(function(lang){
          var span = document.createElement('span');
          span.setAttribute('lang', lang);
          span.textContent =  failcode.gettext(lang);
          error.appendChild(span);
        });
        testcase.appendChild(label);
        testcase.appendChild(error);
      });
    });
  };
  document.getElementsByTagName('head')[0].appendChild(_script);
});
</script>
</head>
<body>
</body>