added achievement system corpus

registration-system/view/signups/game1/index.php

@@ -20,7 +20,7 @@ class Game1SignupMethod extends SignupMethod {
 
     public function getJSDependencies() {
         return ['jslib/d3.min.js', 'jslib/priority-queue.min.js', 'jslib/checkLineIntersection.js',
-            'js/svgUtils.js', 'js/pathFinder.js', 'js/vector.js', 'js/character.js','js/camera.js',
+            'js/achievements.js', 'js/svgUtils.js', 'js/pathFinder.js', 'js/vector.js', 'js/character.js','js/camera.js',
             'js/game.js'];
     }
 
@@ -53,10 +53,7 @@ class Game1SignupMethod extends SignupMethod {
                         <div class="sidebar-section-head">Achievements</div>
                         <div class="status-bar" id="achievement-progress" style="margin-bottom: 0.5em"><span style="width:25%" class="status-bar-bar"></span> <div class="status-bar-text">5/43</div> </div>
                         <div class="sidebar-log"><div>
-                            <ul id="achievement-log">
-                                <li>Five clicks in 2 seconds!</li>
-                                <li>Took first step!</li>
-                            </ul>
+                            <ul id="achievement-log"></ul>
                         </div></div>
                     </div>
                 </div>

registration-system/view/signups/game1/js/achievements.js

+function Achievements() {
+    this.achievements = {
+        'started_game': {
+            message: "Bestes Anmeldesystem gestartet"
+        },
+        'first_step': {
+            message: "Erster Schritt getan"
+        }
+    };
+    this.achievedAchievements = [];
+
+    this.logElem        = null;
+    this.statusBarElem  = null;
+    this.statusTextElem = null;
+
+    this.triggerAchievement('started_game');
+}
+
+Achievements.prototype.getLogElem = function () {
+    if(!this.logElem)
+        this.logElem = document.getElementById('achievement-log');
+    return this.logElem;
+};
+
+Achievements.prototype.getStatusBarElem = function () {
+    if(!this.statusBarElem)
+        this.statusBarElem = document.getElementById('achievement-progress').getElementsByClassName('status-bar-bar')[0];
+    return this.statusBarElem;
+};
+
+Achievements.prototype.getStatusTextElem = function () {
+    if(!this.statusTextElem)
+        this.statusTextElem = document.getElementById('achievement-progress').getElementsByClassName('status-bar-text')[0];
+    return this.statusTextElem;
+};
+
+Achievements.prototype.updateStatusBar = function () {
+    var percent = Math.ceil((this.numCompletedAchievements() / this.numTotalAchievements())*100);
+    this.getStatusBarElem().style.width = percent + '%';
+};
+
+Achievements.prototype.updateStatusText = function () {
+    var text = this.numCompletedAchievements() + '/' + this.numTotalAchievements();
+    this.getStatusTextElem().innerText = text;
+};
+
+Achievements.prototype.numTotalAchievements = function() {
+    return Object.keys(this.achievements).length;
+};
+
+Achievements.prototype.numCompletedAchievements = function() {
+    return Object.keys(this.achievedAchievements).length;
+};
+
+/**
+ * returns status about a specific achievementId
+ * @param achievementId
+ * @returns {number} -1 = does not exist, 0 = achievable, 1 = already completed
+ */
+Achievements.prototype.achievementStatus = function(achievementId) {
+    if (!this.achievements[achievementId])
+        return -1;
+    if (!this.achievedAchievements.indexOf(achievementId) >= 0)
+        return 0;
+    return 1;
+};
+
+Achievements.prototype.logMessage = function (message) {
+    var list = this.getLogElem();
+
+    var newElem = document.createElement('li');
+    var newElemText = document.createTextNode(message);
+    newElem.appendChild(newElemText);
+
+    list.insertBefore(newElem, list.childNodes[0]);
+};
+
+Achievements.prototype.getAchievementMessage = function (achievementId) {
+    return this.achievements[achievementId].message;
+};
+
+Achievements.prototype.triggerAchievement = function (achievementId) {
+    var status = this.achievementStatus(achievementId);
+    if (status === 0) {
+        this.achievedAchievements.push(achievementId);
+        this.updateStatusBar();
+        this.updateStatusText();
+        this.logMessage(this.getAchievementMessage(achievementId));
+    }
+    else if (status === -1)
+        console.error("No such achievement: " + achievementId);
+    else
+        console.warn("Achievement already achieved: " + achievementId);
+};
\ No newline at end of file

registration-system/view/signups/game1/js/game.js

@@ -3,6 +3,8 @@ function Game(config) {
 	if (Game.instance) throw "'Game' already constructed";
 	Game.config = config;
 	Game.instance = this;
+
+	this.achievements = new Achievements();
 }
 Game.eventLayers = ['CLICKABLE', 'WALK', 'NOWALK', 'EVENT'];
 Game.prototype.run = function() {
@@ -50,4 +52,6 @@ Game.prototype.run = function() {
 			char.setMoveTarget(d3.event.pageX, d3.event.pageY);
 		});
 	});
-}
+
+
+};

registration-system/view/signups/game1/test.html

@@ -7,6 +7,7 @@
 <script src="jslib/priority-queue.min.js" type="text/javascript"></script>
 <script src="jslib/checkLineIntersection.js" type="text/javascript"></script>
 <script src="../../js/api.js" type="text/javascript"></script>
+<script src="js/achievements.js" type="text/javascript"></script>
 <script src="js/svgUtils.js" type="text/javascript"></script>
 <script src="js/pathFinder.js" type="text/javascript"></script>
 <script src="js/vector.js" type="text/javascript"></script>
@@ -34,10 +35,7 @@
 			<div class="sidebar-section-head">Achievements</div>
 			<div class="status-bar" id="achievement-progress" style="margin-bottom: 0.5em"><span style="width:25%" class="status-bar-bar"></span> <div class="status-bar-text">5/43</div> </div>
 			<div class="sidebar-log"><div>
-				<ul id="achievement-log">
-					<li>Five clicks in 2 seconds!</li>
-					<li>Took first step!</li>
-				</ul>
+				<ul id="achievement-log"></ul>
 			</div></div>
 		</div>
 	</div>