load game data dynamically from files

diff --git a/engine.js b/engine.js
index c70679c9c0b842d7c2ba3753ed632827b70b3c2a..3bdf87bd7cc341bbc9db766d35f4bfc934bfefa7 100644 (file)
--- a/engine.js
+++ b/engine.js
@@ -1,16 +1,57 @@
+var gamedata = {};
+var gfx = {};
+
+function Textfile(txtfile) {
+  var lines, fetch = new XMLHttpRequest();
+  fetch.open("GET", txtfile, false);
+  fetch.send();
+
+  var line, key, value, ref = this, section;
+  for (line of fetch.responseText.split('\n')) switch(true) {
+    case /^\[.*\]$/.test(line):
+      section = line.split(/[\]\[]/)[1];
+      if                     (!this[section]) this[section] = {};
+      else if (!Array.isArray(this[section])) this[section] = [this[section],{}];
+      else if ( Array.isArray(this[section])) this[section].push({});
+      ref = this[section];
+      break;
+    case /^frame=[0-9]+,[0-7](,[0-9-]+){6}$/.test(line):
+      key = line.split(/[=,]/).slice(1,3);  value = line.split(/,/).slice(-6);
+      if (!ref.frame) ref.frame = [];
+      if (!ref.frame[key[0]]) ref.frame[key[0]] = [];
+      ref.frame[key[0]][key[1]] = value;
+      break;
+    case /^layer=[0-9]+,/.test(line):
+      key = line.split(/[=,]/)[1];  value = line.split(/,/).slice(1);
+      if (!ref.layer) ref.layer = [];
+      ref.layer[key] = value;
+      break;
+    case /^duration=[0-9]+ms$/.test(line):
+      ref["duration"] = parseInt(line.split(/=|ms$/)[1]);
+      break;
+    case /^duration=[0-9]+s$/.test(line):
+      ref["duration"] = parseInt(line.split(/=|s$/)[1]) * 1000;
+      break;
+    case /^[^#].*=.+$/.test(line):
+      key = line.split(/[=]/)[0];  value = line.split(/=/).slice(1).join("=");
+      if                     (!ref[key]) ref[key] = value;
+      else if (!Array.isArray(ref[key])) ref[key] = [ref[key],value];
+      else if ( Array.isArray(ref[key])) ref[key].push(value);
+      break;
+  }
+}
+
 function Mob(textdef) {
+  if (! gamedata[textdef]) gamedata[textdef] = new Textfile(textdef); 
+  this.info = gamedata[textdef];
   this.direction = 0;
   this.position = [0, 0];
-  this.info = gamedata[textdef];
   this.animation = "stance";
   this.previous_animation = "";
   this.frametime = performance.now();
-  this.image = document.querySelector("img[src='"+ this.info.image +"']");
-  if (!this.image) {
-    this.image = document.createElement("img");
-    this.image.setAttribute("src", this.info.image);
-    this.image.setAttribute("style", "display: none;");
-    document.querySelector("body").appendChild(this.image);
+  if (! gfx[this.info.image]) {
+    gfx[this.info.image] = document.createElement("img");
+    gfx[this.info.image].setAttribute("src", this.info.image);
   }
 
   this.place = function(x, y) { this.position = [x, y]; return this; }
@@ -24,14 +65,14 @@ function Mob(textdef) {
 
   this.draw = function(){
     var f, a = this.info[this.animation];
-    var frame = ( performance.now() - this.frametime ) * a.frames.length / a.duration | 0;
+    var frame = ( performance.now() - this.frametime ) * a.frames / a.duration | 0;
 
     switch(a.type){
       case "looped":
-        frame = frame % a.frames.length;
+        frame = frame % a.frames;
         break;
       case "play_once":
-        if ( frame >= a.frames.length ){
+        if ( frame >= a.frames ){
           this.animation = this.previous_animation;
           this.previous_animation = "";
           this.frametime = performance.now();
@@ -40,27 +81,27 @@ function Mob(textdef) {
         }
         break;
       case "back_forth":
-        frame = frame % (a.frames.length * 2 - 2);
-        if ( frame >= a.frames.length ){
-         frame = a.frames.length - frame % a.frames.length - 1;
+        frame = frame % (a.frames * 2 - 2);
+        if ( frame >= a.frames ){
+         frame = a.frames - frame % a.frames - 1;
         }
         break;
       default: break;
     }
-    f = a.frames[frame][this.direction];
+    f = a.frame[frame][this.direction];
 
-    canvas.drawImage(this.image, f[0], f[1], f[2], f[3],
+    canvas.drawImage(gfx[this.info.image], f[0], f[1], f[2], f[3],
                      this.position[0] - f[4], this.position[1] - f[5],
                      f[2], f[3]);
 
-  // var fetch = new XMLHttpRequest();
-  // fetch.open("GET", textdef, false); fetch.send();
-  // this.description = fetch.responseText.split('\n');
   }
 }
 
-function Player(gender = "female", hair = "short"){
-  this.x=0; this.y=0; this.direction=0;
+function Hero(gender = "female", hair = "short"){
+  this.position = [0,0]; this.direction = 0;
+
+  if (! gamedata["/engine/hero_layers.txt"])
+    gamedata["/engine/hero_layers.txt"] = new Textfile("/engine/hero_layers.txt"); 
   this.limbs = {
     head : (gender == "female")?new Mob("/animations/avatar/female/head_long.txt")
                                :new Mob("/animations/avatar/male/head_"+hair+".txt"),
@@ -73,7 +114,7 @@ function Player(gender = "female", hair = "short"){
   }
 
   this.place   = function(x,y) {
-    this.x = x; this.y = y;
+    this.position = [x,y];
     for (var limb in this.limbs) this.limbs[limb].place(x,y);
     return this;
   }
@@ -87,13 +128,12 @@ function Player(gender = "female", hair = "short"){
     return this;
   }
   this.draw    = function(){
-    gamedata["/engine/hero_layers.txt"].layers[this.direction].forEach(limb => this.limbs[limb].draw());
+    gamedata["/engine/hero_layers.txt"].layer[this.direction].forEach(limb => this.limbs[limb].draw());
     return this;
   }
 }
 
 canvas = document.getElementById("view").getContext("2d");
-// player = new Mob("/animations/avatar/male/clothes.txt");
-player = new Player().place(240, 160).direct(5);
+player = new Hero().place(240, 160).direct(5);
 
 setInterval( function() { canvas.clearRect(0,0, 480, 320); player.draw(); }, 50);

diff --git a/index.cgi b/index.cgi
index 0d13998378cd55543068a7a797f02701ca31a9e8..4a594e6295d913c37f01d4b5d996aca3bea5b758 100755 (executable)
--- a/index.cgi
+++ b/index.cgi
@@ -13,7 +13,6 @@ if [ "$_PATH" = / ]; then
          <title>FlareJS</title>
        </head><body>
          <canvas id="view" width=480 height=320 style="border: 1px solid red;"></canvas>
-         <script type="text/javascript" src="/data.js"></script>
          <script type="text/javascript" src="/engine.js"></script>
        </body></html>
        EOF