javascript - Darts game - checking problems in AngularJS -
there content of angularjs (javascript ) file:
// define new angular module var myapp = angular.module('myapp',[]); myapp.controller('myappcontroller',function($scope){ $scope.player = ''; $scope.players = []; $scope.totalpoints = []; $scope.flag = 1; $scope.mynumberregex = /[0-9]/; $scope.last = {}; $scope.score = {}; $scope.winner = 0; $scope.nextplayer = ''; $scope.nextround = false; var actualplayer = 0; var pointsvalue,round = 0; var internalroundcounter = 1; var shootsstring = ''; $scope.$watch('roundcount',function(value){ console.log('new value',value); }); $scope.add = function(){ $scope.players.push({name: $scope.player, totalpoints: 0, fields:[]}); $scope.player = ''; }; $scope.checkform = function() { var valid = true; if ($scope.players.length == 0) { alert('there no player added!'); valid = false; } if ($scope.roundcount < 3 || $scope.roundcount > 10) { alert('incorrect round count!'); valid = false; } if ($scope.players.length == 1) { console.log('tömb hossza: ', $scope.players.length); alert('one player not enough!'); valid = false; } if (valid) { $scope.flag = 2; var startingplayer = $scope.players[actualplayer].name; $scope.nextplayer = startingplayer; } }; function showresults(){ $scope.flag = 3; } // watching changed value $scope.$watch('last.id',function(newvalue){ console.log('last.id changed',newvalue); pointsvalue = 0; //----------------------------------------------------------- // checking target calculate earned points //----------------------------------------------------------- if (newvalue == "bull") { pointsvalue += 50; console.log(pointsvalue); } else if (newvalue == "outer") { pointsvalue += 25; console.log(pointsvalue); } else if (['s','d','t'].indexof(newvalue[0]) != -1) { var multiplier = 1; if (newvalue[0] == 'd') multiplier = 2; else if (newvalue[0] == 't') multiplier = 3; var tmp = newvalue.split("").splice(1,2).join(""); pointsvalue += (tmp * multiplier); } //----------------------------------------------------------- // while playing darts if (round < $scope.roundcount) { if (internalroundcounter < 4){ shootsstring += newvalue+' '; $scope.players[actualplayer].totalpoints += pointsvalue; internalroundcounter++; } else{ $scope.players[actualplayer].fields.push({fieldid : round+1, fieldname : shootsstring}); shootsstring = ''; internalroundcounter = 1; actualplayer++; if (actualplayer == $scope.players.length) { actualplayer = 0; round++; } $scope.nextplayer = $scope.players[actualplayer].name; } } // when game finished else{ showresults(); $scope.winner = $scope.players[0].name; // find winner in array (var i=1; i<$scope.players.length; i++){ if ($scope.players[i].totalpoints > $scope.players[i-1].totalpoints){ $scope.winner = $scope.players[i].name; } } console.log($scope.players); } }); }); myapp.directive('dartclicklistener', function() { return { restrict: 'a', scope: false, link: function(scope,element,attrs) { console.log(angular.element(element)); angular.element(element).find('g').children().bind('click',function(){ console.log(angular.element(this).attr('id')); scope.last.id = angular.element(this).attr('id'); scope.$apply(); }); } } });<!doctype html> <html ng-app="myapp" ng-init="roundcount=3"> <head lang="en"> <meta charset="utf-8"> <title>.:: darts ::.</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> <script src="myscript.js"></script> <link rel="stylesheet" href="style.css"> </head> <body ng-controller="myappcontroller"> <div id="start" ng-show="flag == 1"> <div> <h1 class="stdcell gametitle">darts</h1> </div> <div> <table> <tr> <td><label class="stdcell" for="playername">add player</label></td> <td><input type="text" id="playername" ng-model="player"></td> <td><input type="button" value="add" ng-click="add()" ng-disabled="!(!!player)"></td> </tr> <tr> <td><label class="stdcell" for="rounds">rounds (3-10) </label></td> <td colspan="2"><input type="text" id="rounds" ng-model="roundcount" ng-pattern="mynumberregex" ng-required="true"></td> </tr> </table> </div> <div> <button ng-disabled="!(!!roundcount)" ng-click="checkform()">start game</button> </div> </div> <div ng-show="flag == 2"> <div id="gamestate"> <div> <table> <tr><td class="stdcell borderedcell tableheader">player</td><td class="stdcell borderedcell tableheader">points</td></tr> <tr ng-repeat="player in players"><td class="stdcell borderedcell">{{player.name}}</td><td class="stdcell borderedcell">{{player.totalpoints}}</td></tr> </table> </div> <div> <h2 class="stdcell" ng-model="nextplayer">{{nextplayer}} next</h2> </div> </div> <div id="darts"> <svg id="dartboard" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="630px" height="630px" viewbox="0 0 787 774" enable-background="new 0 0 787 774" xml:space="preserve"> <g id="areas" dart-click-listener="last.id"> <!-- svg file content --> <div> <h3 ng-model="winner" ng-repeat="player in players | filter:winner" class="stdcell">the winner: {{winner}} @ points: {{player.totalpoints}}</h3> </div> <div> <table> <tr> <td class="stdcell borderedcell tableheader" rowspan="2">player</td> <td class="stdcell borderedcell tableheader" colspan="{{players[0].fields.length}}">round</td> <td class="stdcell borderedcell tableheader totalpointcell" rowspan="2">total points</td> </tr> <tr> <td class="stdcell borderedcell resultcell" ng-repeat="field in players[0].fields">{{field.fieldid}}</td> </tr> <tr ng-repeat="player in players"> <td class="stdcell borderedcell">{{player.name}}</td> <td class="stdcell borderedcell resultcell" ng-repeat="field in player.fields">{{field.fieldname}}</td> <td class="stdcell borderedcell resultcell">{{player.totalpoints}}</td> </tr> </table> </div> </div> </body> </html>everything darts game in angularjs, have 2 problems it:
1.) after every 3 shoots player changed. shooting checking in $scope.$watch('last.id' ...) section. problem before changing player, must click once more on darts table, because code running after clicking on either field of table. how can eliminate it?
2.) second problem is, have count shoots, not hit table. how can it?
the dartboard svg file, inserted html code, source from: link.
thank answers! :)
Comments
Post a Comment