rubics/index.html

   1 <html>
   2 <head>
   3     <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
   4     <style type="text/css">
   5         .ruleset {
   6             -moz-column-count: 2;
   7             float: left;
   8             margin-bottom: 1em;
   9             clear: both;
  10         }
  11
  12         .ruleset1
  13         {
  14             clear: both;
  15         }
  16
  17         hr { clear: both }
  18
  19         object {
  20             padding: .1em;
  21         }
  22
  23         .five sup { margin-left: -1em; }
  24         .five object { margin-right: 1em; }
  25
  26         .rule {
  27             padding-right: 2em;
  28         }
  29     </style>
  30 </head>
  31 <body>
  32 <script type="text/javascript">
  33     var path = 'files/';
  34     var twoMapping = {
  35         'rd': 'right-down'
  36         , 'ru': 'right-up'
  37         , 'bl': 'bottom-left'
  38         , 'br': 'bottom-right'
  39         , 'cw': 'front-cw'
  40         , 'cc': 'front-ccw'
  41         , 'tl': 'top-left'
  42         , 'tr': 'top-right'
  43         , 'dl': 'bottom-left'
  44         , 'dr': 'bottom-right'
  45     };
  46
  47     var threeMapping = {
  48         'rd': 'right-down-3x3'
  49         , 'ru': 'right-up-3x3'
  50         ,'ld': 'left-down-3x3'
  51         , 'lu': 'left-up-3x3'
  52         , 'bl': 'bottom-left-3x3'
  53         , 'br': 'bottom-right-3x3'
  54         , 'cw': 'front-cw-3x3'
  55         , 'cc': 'front-ccw-3x3'
  56         , 'tl': 'top-left-3x3'
  57         , 'tr': 'top-right-3x3'
  58         , 'ml': 'middle-left-3x3'
  59         , 'mr': 'middle-right-3x3'
  60     };
  61
  62     var size = 64, stepSize = 24, mapping = twoMapping;
  63
  64     function Rule(name, steps)
  65     {
  66         this.size = size;
  67         this.name = name;
  68         this.stepSize = stepSize;
  69         this.steps = steps.split(' ');
  70         this.mapping = mapping;
  71     }
  72
  73     Rule.prototype.toString = function()
  74     {
  75         var code = [];
  76         code.push('<table class="desc"><tr>');
  77         code.push('<td class="rule"><object data="');
  78         code.push(path);
  79         code.push(this.name);
  80         code.push('.svg" type="image/svg+xml" width="');
  81         code.push(this.name.match(/case-[ab]/) ? 290 : this.size);
  82         code.push('" height="');
  83         code.push(this.size);
  84         code.push('"></object></td><td class="steps">');
  85
  86         var missBreaks = 0;
  87         var breakIssued = false;
  88         for (var i in this.steps)
  89         {
  90             if(this.steps[i] == '2')
  91             {
  92                     ++missBreaks;
  93                     code.push('<sup>&times;2</sup>');
  94                     continue;
  95             }
  96             var step = this.mapping[this.steps[i]];
  97             code.push('<object data="');
  98             code.push(path);
  99             code.push(step);
 100             code.push('.svg" type="image/svg+xml" width="');
 101             code.push(this.stepSize);
 102             code.push('" height="');
 103             code.push(this.stepSize);
 104             code.push('"></object>');
 105             if (i >= this.steps.length / 2 - 1 - missBreaks && !breakIssued)
 106             {
 107                 breakIssued = true;
 108                 code.push('<br />');
 109             }
 110         }
 111         code.push('</td>');
 112         code.push('</tr></table>');
 113
 114         return code.join('');
 115     }
 116
 117     var twoRules = [
 118         new Rule('swap-adjacent', 'cw dr cc dl rd dl ru')
 119         , new Rule('swap-diagonal', 'cc rd dl ru dr cw dl')
 120     ];
 121
 122     var twoCases = [
 123         new Rule('case-a', 'rd cc ru cc rd cw cw ru cw cw')
 124         , new Rule('case-b', 'cw cw rd cw cw ru cw rd cw ru')
 125     ];
 126
 127     size = 84;
 128     stepSize = 32;
 129     mapping = threeMapping;
 130
 131     var threeRules = [
 132         new Rule('top-center-middle-left', 'tr cc tl cw tl ru tr rd')
 133         , new Rule('swap-edges', 'tl cw ru tl rd tr cc')
 134         , new Rule('shift-corners-cw', 'tr rd bl ru tl rd br ru')
 135         , new Rule('shift-corners-ccw', 'rd bl ru tr rd br ru tl')
 136
 137         , new Rule('top-center-middle-right', 'tl ru tr rd tr cc tl cw')
 138         , new Rule('mirror-edge', 'ru mr ru mr ru mr ru mr')
 139         , new Rule('rotate-corner-cw', 'ru bl rd br ru bl rd br')
 140         , new Rule('rotate-corner-ccw', 'bl ru br rd bl ru br rd')
 141     ];
 142
 143     mapping = {
 144             'tl': 'top-left-5x5',
 145             'cc': 'front-ccw-5x5',
 146             'ld': 'left-down-5x5',
 147             'tr': 'top-right-5x5',
 148             'dl': 'bottom-left-5x5',
 149             'dr': 'bottom-right-5x5'
 150     };
 151
 152     var fiveRules = [
 153         new Rule('swap-edges-5x5', 'tr cc 2 tr cc 2 ld 2 tr ld 2 dr cc 2 dl cc 2 tl 2')
 154     ];
 155
 156     var width = 90;
 157
 158     document.write('<div class="ruleset">' + twoRules.join('') + '</div>');
 159     document.write('<hr/>');
 160     document.write('<div class="ruleset1">' + twoCases.join('') + '</div>');
 161     document.write('<hr/>');
 162     document.write('<div class="ruleset">' + threeRules.join('') + '</div>');
 163     document.write('<hr/>');
 164     document.write('<div class="ruleset five">' + fiveRules.join('') + '</div>');
 165 </script>
 166
 167 </body>
 168 </html>