Sliding puzzle with hexagons - svg+angular

index.html

<div class="center">
  <div ng-app="myApp" ng-controller="MyCtrl" class="board">
    <svg width="568" height="400">
        <defs>
            <polygon id="hexagon" points="52,0 0,30 0,90 52,120 104,90 104,30" />
            <clipPath id="hexagonclip">
                <use x="0" y="0"  xlink:href="#hexagon"/>
            </clipPath>
            <image id="lorempixel" width="468" height="390" x="0" y="0"  xlink:href="http://lorempixel.com/468/390/people/"/>
        </defs>
       
        <g ng:repeat="piece in pieces">
            <g  transform="translate({{piece.x}} ,{{piece.y}})" style=" clip-path: url(#hexagonclip);" class="piece">
                <use  xlink:href="#lorempixel" x="{{piece.xMask}}" y="{{piece.yMask}}" style="stroke: none;" ng-click="move($index)" />
            </g>
        </g>
      <g transform="translate({{xVoid}},{{yVoid}})" >
        <use  xlink:href="#hexagon" x="0" y="0"  class="void"/>
      </g>

    </svg>
    <div class="buttons">
      <button ng-click="scramble()">scramble</button>
      <button  ng-click="solve()">solve</button>
      <span class="labels">Moves: {{moveCounter}}</span> <span class="labels" ng-if="complete">complete</span>
    </div>

  </div>
</div>

script.js

var app = angular.module("myApp", []);
app.controller("MyCtrl", function($scope) {
  $scope.acivePiece = 0;
  $scope.moveCounter = 0;
  $scope.complete=false;
  $scope.pieces = [];
  $scope.HEXDIAW = 52;
  $scope.HEXDIAH = 30;
  $scope.xVoid = 0;
  $scope.yVoid = 0;
  $scope.yShift = $scope.HEXDIAH * 3;
  $scope.xShift = $scope.HEXDIAW * 2;
  $scope.init = function() {
    for (var i = 1; i < 16; i++) {
      $scope.pieces.push({
        x: 0,
        y: 0,
        xMask: 0,
        yMask: 0,
        inPlace: true
      });
    }
    $scope.solve();
  };
  $scope.scramble = function() {
    for (var i = 1; i < 30; i++) {
      $scope.moveToVoid(Math.floor(Math.random() * 15));
    }
    $scope.moveCounter = 0;
    $scope.complete=false;
  };
  $scope.solve = function() {
    for (var i = 0; i < 15; i++) {
      var xlocation = (i % 4) * $scope.xShift;
      var ylocation = Math.floor(i / 4) * $scope.yShift;
      if (i % 8 > 3) {
        xlocation = xlocation + $scope.xShift * 0.5;
      }
      $scope.pieces[i].y = ylocation;
      $scope.pieces[i].x = xlocation;
      $scope.pieces[i].xMask = -xlocation;
      $scope.pieces[i].yMask = -ylocation;
      $scope.pieces[i].inPlace = true;
    }
    $scope.xVoid = $scope.HEXDIAW * 7;
    $scope.yVoid = $scope.HEXDIAH * 9;
  };
  $scope.move = function(pieceIndex) {
    var xTarget = $scope.pieces[pieceIndex].x;
    var yTarget = $scope.pieces[pieceIndex].y;

    if ($scope.legalMove($scope.xVoid, xTarget, $scope.yVoid, yTarget)) {
      $scope.moveToVoid(pieceIndex);
      $scope.moveCounter++;
      $scope.acivePiece = pieceIndex;
    }
  };
  $scope.legalMove = function(x1, x2, y1, y2) {
    if ($scope.yShift >= Math.abs(y1 - y2)) {
      if ($scope.xShift >= Math.abs(x1 - x2)) {
        return true;
      }
    }
    return false;
  };
  $scope.moveToVoid = function(pieceIndex) {
    var temp = $scope.xVoid;
    $scope.xVoid = $scope.pieces[pieceIndex].x;
    $scope.pieces[pieceIndex].x = temp;
    temp = $scope.yVoid;
    $scope.yVoid = $scope.pieces[pieceIndex].y;
    $scope.pieces[pieceIndex].y = temp;
    $scope.checkInPlace(pieceIndex);
    $scope.checkComplete();
  };
  $scope.checkComplete = function() {
    var _complete = true;
    for (var i = 1; i < 15; i++) {
      _complete = $scope.pieces[i].inPlace;
      if (!_complete) {
        i = 16;
      }
    }
    $scope.complete=_complete;
  };
  $scope.checkInPlace = function(pieceIndex) {
    if (
      $scope.pieces[pieceIndex].y == -$scope.pieces[pieceIndex].yMask &&
      $scope.pieces[pieceIndex].x == -$scope.pieces[pieceIndex].xMask
    ) {
      $scope.pieces[pieceIndex].inPlace = true;
    } else {
      $scope.pieces[pieceIndex].inPlace = false;
    }
  };
  $scope.init();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular.min.js"></script>

sliding-puzzle-with-hexagons-svg-angular.markdown

Sliding puzzle with hexagons - svg+angular

A sliding puzzle game.

reworked a game I originally wrote with jQuery.

A Pen by Dubi Kaufmann on CodePen.

License.

style.css

html 
{
  background: rgb(51,51,51);
}

.buttons{
	position:relative;
	
  font-size: 1em;
	padding: 10px 10px;
	font-family: helvetica, arial, sans-serif;
	text-transform:uppercase;
	margin:5px;
}
button{
   font-size: 1em;
	border-radius: 4px;
	background: rgb(68,68,68);
	color:  rgb(255,255,255);
	border-width:1px;
	}

.center
{
  width: 568px;
  margin: auto;
  margin-top: 5px;
  
}
.board
{
	width: 568px;
	height:390px;
	position:relative;
}
.piece
{
  
}

.piece:hover {
opacity:0.5;
} 
.void
{
  fill: #222;
}
.labels
{
  color:  rgb(255,255,255);
  font-size: 1em;
	padding: 10px 10px;
	font-family: helvetica, arial, sans-serif;
	text-transform:uppercase;
	margin:5px;
}