Improve maze map view centering

rrrobo · Mar 10, 2024 · 8ddb7cf · 8ddb7cf
1 parent 372d3ba
commit 8ddb7cf
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rcj-scoring",
-  "version": "24.0.0-beta.6",
+  "version": "24.0.0-beta.7",
   "copyright": "2016-2024 RCJ-CMS Development Team",
   "private": true,
   "scripts": {

diff --git a/views/maze_judge.pug b/views/maze_judge.pug
@@ -191,7 +191,7 @@ html(ng-app="ddApp")
                   i.fas.fa-redo(aria-hidden='true')
             div(style='clear:both;')#mapTopLeft
             #wrapTile(style='margin-top:5px;')
-              table.map(ng-if='sRotate == 0')#mapTable
+              table.map.mx-auto(ng-if='sRotate == 0')#mapTable
                 tbody
                   tr(ng-repeat='r in range(2*length + 1)')
                     td.cell(ng-repeat='c in range(2*width + 1)', ng-class="{'tile': $odd && $parent.$odd, 'wall': cells[c+','+r+','+z].isWall, 'checkpoint': cells[c+','+r+','+z].tile.checkpoint, 'black': cells[c+','+r+','+z].tile.black, 'blue': cells[c+','+r+','+z].tile.blue, 'linear': cells[c+','+r+','+z].isLinear}", ng-click='cellClick(c, r, z, $odd != $parent.$odd, $odd && $parent.$odd)', ng-style="wallColor(c,r,z,0)")
@@ -229,7 +229,7 @@ html(ng-app="ddApp")
                         i.fas.fa-check.fa-fw.tile-image.tile-font(ng-show="tileStatus(c,r,z,$odd && $parent.$odd) == 'done'", style='padding-top:4px; color:#27ae60; opacity:0.9;')
                         i.fas.fa-play.fa-fw.fa-rotate-270.tile-image.tile-font(ng-show="tileStatus(c,r,z,$odd && $parent.$odd) == 'halfdone'", style='padding-top:4px; color:#f4d03f; opacity:0.9;')
                         i.fas.fa-times.fa-fw.tile-image.tile-font(ng-show="tileStatus(c,r,z,$odd && $parent.$odd) == 'undone'", style='padding-top:6px; color:#e74c3c; opacity:0.9;')
-              table.map(ng-if='sRotate == 90')#mapTable
+              table.map.mx-auto(ng-if='sRotate == 90')#mapTable
                 tbody
                   tr(ng-repeat='r in range(2*width + 1)')
                     td.cell(ng-repeat='c in range(2*length + 1)', ng-class="{'tile': $odd && $parent.$odd, 'wall': cells[r+','+(2*length - c)+','+z].isWall, 'checkpoint': cells[r+','+(2*length - c)+','+z].tile.checkpoint, 'black': cells[r+','+(2*length - c)+','+z].tile.black, 'blue': cells[r+','+(2*length - c)+','+z].tile.blue, 'linear': cells[r+','+(2*length - c)+','+z].isLinear}", ng-click='cellClick(r, (2*length - c), z, $odd != $parent.$odd, $odd && $parent.$odd)', ng-style="wallColor(r,2*length - c,z,90)")
@@ -267,7 +267,7 @@ html(ng-app="ddApp")
                         i.fas.fa-check.fa-fw.tile-image.tile-font(ng-show="tileStatus(r,(2*length - c),z,$odd && $parent.$odd) == 'done'", style='padding-top:4px; color:#27ae60; opacity:0.9;')
                         i.fas.fa-play.fa-fw.fa-rotate-270.tile-image.tile-font(ng-show="tileStatus(r,(2*length - c),z,$odd && $parent.$odd) == 'halfdone'", style='padding-top:4px; color:#f4d03f; opacity:0.9;')
                         i.fas.fa-times.fa-fw.tile-image.tile-font(ng-show="tileStatus(r,(2*length - c),z,$odd && $parent.$odd) == 'undone'", style='padding-top:6px; color:#e74c3c; opacity:0.9;')
-              table.map(ng-if='sRotate == 180')#mapTable
+              table.map.mx-auto(ng-if='sRotate == 180')#mapTable
                 tbody
                   tr(ng-repeat='r in range(2*length + 1)')
                     td.cell(ng-repeat='c in range(2*width + 1)', ng-class="{'tile': $odd && $parent.$odd, 'wall': cells[2*width - c+','+(2*length - r)+','+z].isWall, 'checkpoint': cells[2*width - c+','+(2*length - r)+','+z].tile.checkpoint, 'black': cells[2*width - c+','+(2*length - r)+','+z].tile.black, 'blue': cells[2*width - c+','+(2*length - r)+','+z].tile.blue, 'linear': cells[2*width - c+','+(2*length - r)+','+z].isLinear}", ng-click='cellClick(2*width - c, 2*length - r, z, $odd != $parent.$odd, $odd && $parent.$odd)', ng-style="wallColor(2*width - c, 2*length - r, z,180)")
@@ -305,7 +305,7 @@ html(ng-app="ddApp")
                         i.fas.fa-check.fa-fw.tile-image.tile-font(ng-show="tileStatus(2*width - c,2*length - r,z,$odd && $parent.$odd) == 'done'", style='padding-top:4px; color:#27ae60; opacity:0.9;')
                         i.fas.fa-play.fa-fw.fa-rotate-270.tile-image.tile-font(ng-show="tileStatus(2*width - c,2*length - r,z,$odd && $parent.$odd) == 'halfdone'", style='padding-top:4px; color:#f4d03f; opacity:0.9;')
                         i.fas.fa-times.fa-fw.tile-image.tile-font(ng-show="tileStatus(2*width - c,2*length - r,z,$odd && $parent.$odd) == 'undone'", style='padding-top:6px; color:#e74c3c; opacity:0.9;')
-              table.map(ng-if='sRotate == 270')#mapTable
+              table.map.mx-auto(ng-if='sRotate == 270')#mapTable
                 tbody
                   tr(ng-repeat='r in range(2*width + 1)')
                     td.cell(ng-repeat='c in range(2*length + 1)', ng-class="{'tile': $odd && $parent.$odd, 'wall': cells[2*width - r+','+c+','+z].isWall, 'checkpoint': cells[2*width - r+','+c+','+z].tile.checkpoint, 'black': cells[2*width - r+','+c+','+z].tile.black, 'blue': cells[2*width - r+','+c+','+z].tile.blue, 'linear': cells[2*width - r+','+c+','+z].isLinear}", ng-click='cellClick(2*width - r, c, z, $odd != $parent.$odd, $odd && $parent.$odd)', ng-style="wallColor(2*width - r, c, z,270)")

diff --git a/views/maze_view_common.pug b/views/maze_view_common.pug
@@ -64,7 +64,7 @@
     div(style='clear:both;')#mapTopLeft
     #wrapTile(style='margin-top:5px;transform-origin: top left;')
       h2(ng-show='!(length&&width)', style='text-align:center') {{'common.loading' | translate}}
-      table.map(ng-if='sRotate == 0')#mapTable
+      table.map.mx-auto(ng-if='sRotate == 0')#mapTable
         tbody
           tr(ng-repeat='r in range(2*length + 1)')
             td.cell(ng-repeat='c in range(2*width + 1)', ng-class="{'tile': $odd && $parent.$odd, 'wall': cells[c+','+r+','+z].isWall, 'checkpoint': cells[c+','+r+','+z].tile.checkpoint, 'black': cells[c+','+r+','+z].tile.black, 'blue': cells[c+','+r+','+z].tile.blue, 'linear': cells[c+','+r+','+z].isLinear}", ng-click='cellClick(c, r, z, $odd != $parent.$odd, $odd && $parent.$odd)', ng-style="wallColor(c,r,z,0)")
@@ -103,7 +103,7 @@
                 i.fas.fa-check.fa-fw.tile-image.tile-font(ng-show="tileStatus(c,r,z,$odd && $parent.$odd) == 'done'", style='padding-top:4px; color:#27ae60; opacity:0.9;')
                 i.fas.fa-play.fa-fw.fa-rotate-270.tile-image.tile-font(ng-show="tileStatus(c,r,z,$odd && $parent.$odd) == 'halfdone'", style='padding-top:4px; color:#f4d03f; opacity:0.9;')
                 i.fas.fa-times.fa-fw.tile-image.tile-font(ng-show="tileStatus(c,r,z,$odd && $parent.$odd) == 'undone'", style='padding-top:6px; color:#e74c3c; opacity:0.9;')
-      table.map(ng-if='sRotate == 90')#mapTable
+      table.map.mx-auto(ng-if='sRotate == 90')#mapTable
         tbody
           tr(ng-repeat='r in range(2*width + 1)')
             td.cell(ng-repeat='c in range(2*length + 1)', ng-class="{'tile': $odd && $parent.$odd, 'wall': cells[r+','+(2*length - c)+','+z].isWall, 'checkpoint': cells[r+','+(2*length - c)+','+z].tile.checkpoint, 'black': cells[r+','+(2*length - c)+','+z].tile.black, 'blue': cells[r+','+(2*length - c)+','+z].tile.blue, 'linear': cells[r+','+(2*length - c)+','+z].isLinear}", ng-click='cellClick(r, (2*length - c), z, $odd != $parent.$odd, $odd && $parent.$odd)', ng-style="wallColor(r,2*length - c,z,90)")
@@ -142,7 +142,7 @@
                 i.fas.fa-check.fa-fw.tile-image.tile-font(ng-show="tileStatus(r,(2*length - c),z,$odd && $parent.$odd) == 'done'", style='padding-top:4px; color:#27ae60; opacity:0.9;')
                 i.fas.fa-play.fa-fw.fa-rotate-270.tile-image.tile-font(ng-show="tileStatus(r,(2*length - c),z,$odd && $parent.$odd) == 'halfdone'", style='padding-top:4px; color:#f4d03f; opacity:0.9;')
                 i.fas.fa-times.fa-fw.tile-image.tile-font(ng-show="tileStatus(r,(2*length - c),z,$odd && $parent.$odd) == 'undone'", style='padding-top:6px; color:#e74c3c; opacity:0.9;')
-      table.map(ng-if='sRotate == 180')#mapTable
+      table.map.mx-auto(ng-if='sRotate == 180')#mapTable
         tbody
           tr(ng-repeat='r in range(2*length + 1)')
             td.cell(ng-repeat='c in range(2*width + 1)', ng-class="{'tile': $odd && $parent.$odd, 'wall': cells[2*width - c+','+(2*length - r)+','+z].isWall, 'checkpoint': cells[2*width - c+','+(2*length - r)+','+z].tile.checkpoint, 'black': cells[2*width - c+','+(2*length - r)+','+z].tile.black, 'blue': cells[2*width - c+','+(2*length - r)+','+z].tile.blue, 'linear': cells[2*width - c+','+(2*length - r)+','+z].isLinear}", ng-click='cellClick(2*width - c, 2*length - r, z, $odd != $parent.$odd, $odd && $parent.$odd)', ng-style="wallColor(2*width - c, 2*length - r, z,180)")
@@ -181,7 +181,7 @@
                 i.fas.fa-check.fa-fw.tile-image.tile-font(ng-show="tileStatus(2*width - c,2*length - r,z,$odd && $parent.$odd) == 'done'", style='padding-top:4px; color:#27ae60; opacity:0.9;')
                 i.fas.fa-play.fa-fw.fa-rotate-270.tile-image.tile-font(ng-show="tileStatus(2*width - c,2*length - r,z,$odd && $parent.$odd) == 'halfdone'", style='padding-top:4px; color:#f4d03f; opacity:0.9;')
                 i.fas.fa-times.fa-fw.tile-image.tile-font(ng-show="tileStatus(2*width - c,2*length - r,z,$odd && $parent.$odd) == 'undone'", style='padding-top:6px; color:#e74c3c; opacity:0.9;')
-      table.map(ng-if='sRotate == 270')#mapTable
+      table.map.mx-auto(ng-if='sRotate == 270')#mapTable
         tbody
           tr(ng-repeat='r in range(2*width + 1)')
             td.cell(ng-repeat='c in range(2*length + 1)', ng-class="{'tile': $odd && $parent.$odd, 'wall': cells[2*width - r+','+c+','+z].isWall, 'checkpoint': cells[2*width - r+','+c+','+z].tile.checkpoint, 'black': cells[2*width - r+','+c+','+z].tile.black, 'blue': cells[2*width - r+','+c+','+z].tile.blue, 'linear': cells[2*width - r+','+c+','+z].isLinear}", ng-click='cellClick(2*width - r, c, z, $odd != $parent.$odd, $odd && $parent.$odd)', ng-style="wallColor(2*width - r, c, z,270)")

diff --git a/views/maze_view_field.pug b/views/maze_view_field.pug
@@ -33,7 +33,7 @@ html(ng-app="ddApp")
         div(ng-repeat='z in range(height) track by $index', style='display: inline-block;width:100%;')
           div(style='clear:both;')#mapTopLeft
           #wrapTile(style='transform-origin: top left;')
-            table.map#mapTable
+            table.map.mx-auto#mapTable
               tbody
                 tr(ng-repeat='r in range(2*length + 1)')
                   td.cell(ng-repeat='c in range(2*width + 1)', ng-class="{'tile': $odd && $parent.$odd, 'wall': cells[c+','+r+','+z].isWall, 'checkpoint': cells[c+','+r+','+z].tile.checkpoint, 'black': cells[c+','+r+','+z].tile.black, 'blue': cells[c+','+r+','+z].tile.blue, 'linear': cells[c+','+r+','+z].isLinear}", ng-click='cellClick(c, r, z, $odd != $parent.$odd, $odd && $parent.$odd)', ng-style="wallColor(c,r,z,0)")