From 682a1238faadff2dec1d2c979cb0a0b9f8da3cf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89loi=20Rivard?= <azmeuk@gmail.com>
Date: Wed, 24 Jul 2013 17:58:42 +0200
Subject: [PATCH] Use of a single emscripten HTML template file.

---
 AUTHORS                                       |  1 +
 cocos2dx/proj.emscripten/cocos2dx.mk          |  7 +-
 samples/Cpp/HelloCpp/proj.emscripten/Makefile | 11 ++-
 .../Cpp/HelloCpp/proj.emscripten/index.html   | 93 -------------------
 .../Cpp/SimpleGame/proj.emscripten/Makefile   |  5 +-
 .../Cpp/SimpleGame/proj.emscripten/index.html | 93 -------------------
 samples/Cpp/TestCpp/proj.emscripten/Makefile  |  5 +-
 .../emscripten-template}/index.html           |  6 +-
 8 files changed, 21 insertions(+), 200 deletions(-)
 delete mode 100644 samples/Cpp/HelloCpp/proj.emscripten/index.html
 delete mode 100644 samples/Cpp/SimpleGame/proj.emscripten/index.html
 rename {samples/Cpp/TestCpp/proj.emscripten => tools/emscripten-template}/index.html (95%)

diff --git a/AUTHORS b/AUTHORS
index dba42eb2d2..59204c5e69 100644
--- a/AUTHORS
+++ b/AUTHORS
@@ -414,6 +414,7 @@ Developers:
         Added some guards to prevent Eclipse to compile twice the same class.
         Linux Eclipse projects updates
         Refactored emscripten-build.sh, it's no longer need to be edited to make emscripten work.
+        Use of a single emscripten HTML template file.
 
     elmiro
         Correction of passed buffer size to readlink and verification of result return by readlink.
diff --git a/cocos2dx/proj.emscripten/cocos2dx.mk b/cocos2dx/proj.emscripten/cocos2dx.mk
index 348d635dfd..b6893beeea 100644
--- a/cocos2dx/proj.emscripten/cocos2dx.mk
+++ b/cocos2dx/proj.emscripten/cocos2dx.mk
@@ -97,9 +97,12 @@ STATICLIBS = \
 SHAREDLIBS += -L$(LIB_DIR) -Wl,-rpath,$(RPATH_REL)/$(LIB_DIR)
 LIBS = -lrt -lz
 
+HTMLTPL_DIR = $(COCOS_ROOT)/tools/emscripten-template
+HTMLTPL_FILE = index.html
+
 clean:
 	rm -rf $(OBJ_DIR)
-	rm -f $(TARGET).js $(TARGET).data $(TARGET).data.js $(BIN_DIR)/index.html core
+	rm -rf $(TARGET).js $(TARGET).data $(TARGET).data.js $(BIN_DIR) core
 
 .PHONY: all clean
 
@@ -108,7 +111,7 @@ clean:
 ifdef EXECUTABLE
 TARGET := $(BIN_DIR)/$(EXECUTABLE)
 
-all: $(TARGET).js $(TARGET).data $(BIN_DIR)/index.html
+all: $(TARGET).js $(TARGET).data $(BIN_DIR)/$(HTMLTPL_FILE)
 
 run: $(TARGET)
 	cd $(dir $^) && ./$(notdir $^)
diff --git a/samples/Cpp/HelloCpp/proj.emscripten/Makefile b/samples/Cpp/HelloCpp/proj.emscripten/Makefile
index 9e47a17ce9..56bb3d7df1 100644
--- a/samples/Cpp/HelloCpp/proj.emscripten/Makefile
+++ b/samples/Cpp/HelloCpp/proj.emscripten/Makefile
@@ -26,9 +26,9 @@ $(TARGET).js: $(OBJECTS) $(STATICLIBS) $(COCOS_LIBS) $(CORE_MAKEFILE_LIST)
 
 
 ifeq ($(shell uname -s),Darwin)
-ARIEL_TTF := /Library/Fonts/Arial.ttf
+ARIAL_TTF := /Library/Fonts/Arial.ttf
 else
-ARIEL_TTF := $(COCOS_ROOT)/samples/Cpp/TestCpp/Resources/fonts/arial.ttf
+ARIAL_TTF := $(COCOS_ROOT)/samples/Cpp/TestCpp/Resources/fonts/arial.ttf
 endif
 
 $(TARGET).data:
@@ -39,15 +39,16 @@ $(TARGET).data:
 	(cd $(RESOURCE_PATH) && cp -a $(RESOURCES) $(RESTMP))
 	(cd $(FONT_PATH) && cp -a * $(RESTMP)/fonts)
 	# NOTE: we copy the system arial.ttf so that there is always a fallback.
-	cp $(ARIEL_TTF) $(RESTMP)/fonts/arial.ttf
+	cp $(ARIAL_TTF) $(RESTMP)/fonts/arial.ttf
 	(cd $(RESTMP); python $(PACKAGER) $(EXECUTABLE).data $(patsubst %,--preload %,$(RESOURCES)) --preload fonts --pre-run > $(EXECUTABLE).data.js)
 	mv $(RESTMP)/$(EXECUTABLE).data $@
 	mv $(RESTMP)/$(EXECUTABLE).data.js $@.js
 	rm -rf $(RESTMP)
 
-$(BIN_DIR)/index.html: index.html
+$(BIN_DIR)/$(HTMLTPL_FILE): $(HTMLTPL_DIR)/$(HTMLTPL_FILE)
 	@mkdir -p $(@D)
-	cp index.html $(@D)
+	@cp -Rf $(HTMLTPL_DIR)/* $(BIN_DIR)
+	@sed -i -e "s/JS_APPLICATION/$(EXECUTABLE)/g" $(BIN_DIR)/$(HTMLTPL_FILE)
 
 $(OBJ_DIR)/%.o: %.cpp $(CORE_MAKEFILE_LIST)
 	@mkdir -p $(@D)
diff --git a/samples/Cpp/HelloCpp/proj.emscripten/index.html b/samples/Cpp/HelloCpp/proj.emscripten/index.html
deleted file mode 100644
index b8befe726a..0000000000
--- a/samples/Cpp/HelloCpp/proj.emscripten/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!doctype html>
-<html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>Emscripten-Generated Code</title>
-    <style>
-      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
-      textarea.emscripten { font-family: monospace; width: 80%; }
-      div.emscripten { text-align: center; }
-      div.emscripten_border { border: 1px solid black; }
-      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
-      canvas.emscripten { border: 0px none; }
-    </style>
-  </head>
-  <body>
-    <hr/>
-    <div class="emscripten" id="status">Downloading...</div>
-    <div class="emscripten">
-      <progress value="0" max="100" id="progress" hidden=1></progress>  
-    </div>
-    <div class="emscripten_border">
-      <canvas width="1024" height="768" class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
-    </div>
-    <hr/>
-    <div class="emscripten">
-      <input type="checkbox" id="resize">Resize canvas
-      <input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer
-      &nbsp;&nbsp;&nbsp;
-      <input type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, 
-                                                                                document.getElementById('resize').checked)">
-    </div>
-    
-    <hr/>
-    <textarea class="emscripten" id="output" rows="8"></textarea>
-    <hr>
-    <script type='text/javascript'>
-      // connect to canvas
-      var Module = {
-        preRun: [],
-        postRun: [],
-        print: (function() {
-          var element = document.getElementById('output');
-          element.value = ''; // clear browser cache
-          return function(text) {
-            text = Array.prototype.slice.call(arguments).join(' ');
-            // These replacements are necessary if you render to raw HTML
-            //text = text.replace(/&/g, "&amp;");
-            //text = text.replace(/</g, "&lt;");
-            //text = text.replace(/>/g, "&gt;");
-            //text = text.replace('\n', '<br>', 'g');
-            element.value += text + "\n";
-            element.scrollTop = 99999; // focus on bottom
-          };
-        })(),
-        printErr: function(text) {
-          text = Array.prototype.slice.call(arguments).join(' ');
-          if (0) { // XXX disabled for safety typeof dump == 'function') {
-            dump(text + '\n'); // fast, straight to the real console
-          } else {
-            console.log(text);
-          }
-        },
-        canvas: document.getElementById('canvas'),
-        setStatus: function(text) {
-          if (Module.setStatus.interval) clearInterval(Module.setStatus.interval);
-          var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
-          var statusElement = document.getElementById('status');
-          var progressElement = document.getElementById('progress');
-          if (m) {
-            text = m[1];
-            progressElement.value = parseInt(m[2])*100;
-            progressElement.max = parseInt(m[4])*100;
-            progressElement.hidden = false;
-          } else {
-            progressElement.value = null;
-            progressElement.max = null;
-            progressElement.hidden = true;
-          }
-          statusElement.innerHTML = text;
-        },
-        totalDependencies: 0,
-        monitorRunDependencies: function(left) {
-          this.totalDependencies = Math.max(this.totalDependencies, left);
-          Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
-        }
-      };
-      Module.setStatus('Downloading...');
-    </script>      
-    <script type="text/javascript" src="HelloCpp.data.js"></script>
-    <script type="text/javascript" src="HelloCpp.js"></script>
-  </body>
-</html>
diff --git a/samples/Cpp/SimpleGame/proj.emscripten/Makefile b/samples/Cpp/SimpleGame/proj.emscripten/Makefile
index 39559056f2..cc538b4d65 100644
--- a/samples/Cpp/SimpleGame/proj.emscripten/Makefile
+++ b/samples/Cpp/SimpleGame/proj.emscripten/Makefile
@@ -57,9 +57,10 @@ $(TARGET).data:
 	mv $(RESTMP)/$(EXECUTABLE).data.js $@.js
 	rm -rf $(RESTMP)
 
-$(BIN_DIR)/index.html: index.html
+$(BIN_DIR)/$(HTMLTPL_FILE): $(HTMLTPL_DIR)/$(HTMLTPL_FILE)
 	@mkdir -p $(@D)
-	cp index.html $(@D)
+	@cp -Rf $(HTMLTPL_DIR)/* $(BIN_DIR)
+	@sed -i -e "s/JS_APPLICATION/$(EXECUTABLE)/g" $(BIN_DIR)/$(HTMLTPL_FILE)
 
 $(OBJ_DIR)/%.o: %.cpp $(CORE_MAKEFILE_LIST)
 	@mkdir -p $(@D)
diff --git a/samples/Cpp/SimpleGame/proj.emscripten/index.html b/samples/Cpp/SimpleGame/proj.emscripten/index.html
deleted file mode 100644
index a78af31af6..0000000000
--- a/samples/Cpp/SimpleGame/proj.emscripten/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!doctype html>
-<html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>SimpleGame</title>
-    <style>
-      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
-      textarea.emscripten { font-family: monospace; width: 80%; }
-      div.emscripten { text-align: center; }
-      div.emscripten_border { border: 1px solid black; }
-      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
-      canvas.emscripten { border: 0px none; }
-    </style>
-  </head>
-  <body>
-    <hr/>
-    <div class="emscripten" id="status">Downloading...</div>
-    <div class="emscripten">
-      <progress value="0" max="100" id="progress" hidden=1></progress>  
-    </div>
-    <div class="emscripten_border">
-      <canvas width="1024" height="768" class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
-    </div>
-    <hr/>
-    <div class="emscripten">
-      <input type="checkbox" id="resize">Resize canvas
-      <input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer
-      &nbsp;&nbsp;&nbsp;
-      <input type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, 
-                                                                                document.getElementById('resize').checked)">
-    </div>
-    
-    <hr/>
-    <textarea class="emscripten" id="output" rows="8"></textarea>
-    <hr>
-    <script type='text/javascript'>
-      // connect to canvas
-      var Module = {
-        preRun: [],
-        postRun: [],
-        print: (function() {
-          var element = document.getElementById('output');
-          element.value = ''; // clear browser cache
-          return function(text) {
-            text = Array.prototype.slice.call(arguments).join(' ');
-            // These replacements are necessary if you render to raw HTML
-            //text = text.replace(/&/g, "&amp;");
-            //text = text.replace(/</g, "&lt;");
-            //text = text.replace(/>/g, "&gt;");
-            //text = text.replace('\n', '<br>', 'g');
-            element.value += text + "\n";
-            element.scrollTop = 99999; // focus on bottom
-          };
-        })(),
-        printErr: function(text) {
-          text = Array.prototype.slice.call(arguments).join(' ');
-          if (0) { // XXX disabled for safety typeof dump == 'function') {
-            dump(text + '\n'); // fast, straight to the real console
-          } else {
-            console.log(text);
-          }
-        },
-        canvas: document.getElementById('canvas'),
-        setStatus: function(text) {
-          if (Module.setStatus.interval) clearInterval(Module.setStatus.interval);
-          var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
-          var statusElement = document.getElementById('status');
-          var progressElement = document.getElementById('progress');
-          if (m) {
-            text = m[1];
-            progressElement.value = parseInt(m[2])*100;
-            progressElement.max = parseInt(m[4])*100;
-            progressElement.hidden = false;
-          } else {
-            progressElement.value = null;
-            progressElement.max = null;
-            progressElement.hidden = true;
-          }
-          statusElement.innerHTML = text;
-        },
-        totalDependencies: 0,
-        monitorRunDependencies: function(left) {
-          this.totalDependencies = Math.max(this.totalDependencies, left);
-          Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
-        }
-      };
-      Module.setStatus('Downloading...');
-    </script>      
-    <script type="text/javascript" src="SimpleGame.data.js"></script>
-    <script type="text/javascript" src="SimpleGame.js"></script>
-  </body>
-</html>
diff --git a/samples/Cpp/TestCpp/proj.emscripten/Makefile b/samples/Cpp/TestCpp/proj.emscripten/Makefile
index 6f069f65bd..7673cd7ee5 100644
--- a/samples/Cpp/TestCpp/proj.emscripten/Makefile
+++ b/samples/Cpp/TestCpp/proj.emscripten/Makefile
@@ -143,9 +143,10 @@ $(TARGET).data: $(CORE_MAKEFILE_LIST) $(patsubst %,$(RESOURCE_PATH)/%,$(RESOURCE
 	cp -av $(RESOURCE_PATH)/* $(shell dirname $@)
 	rm -rf $(RESTMP)
 
-$(BIN_DIR)/index.html: index.html $(CORE_MAKEFILE_LIST)
+$(BIN_DIR)/$(HTMLTPL_FILE): $(HTMLTPL_DIR)/$(HTMLTPL_FILE) $(CORE_MAKEFILE_LIST)
 	@mkdir -p $(@D)
-	cp index.html $(@D)
+	@cp -Rf $(HTMLTPL_DIR)/* $(BIN_DIR)
+	@sed -i -e "s/JS_APPLICATION/$(EXECUTABLE)/g" $(BIN_DIR)/$(HTMLTPL_FILE)
 
 ####### Compile
 $(OBJ_DIR)/%.o: ../%.cpp $(CORE_MAKEFILE_LIST)
diff --git a/samples/Cpp/TestCpp/proj.emscripten/index.html b/tools/emscripten-template/index.html
similarity index 95%
rename from samples/Cpp/TestCpp/proj.emscripten/index.html
rename to tools/emscripten-template/index.html
index d1c4c339e0..c8ddb500e0 100644
--- a/samples/Cpp/TestCpp/proj.emscripten/index.html
+++ b/tools/emscripten-template/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>TestCpp</title>
+    <title>JS_APPLICATION</title>
     <style>
       .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
       textarea.emscripten { font-family: monospace; width: 80%; }
@@ -101,7 +101,7 @@
       };
       Module.setStatus('Downloading...');
     </script>      
-    <script type="text/javascript" src="TestCpp.data.js"></script>
-    <script type="text/javascript" src="TestCpp.js"></script>
+    <script type="text/javascript" src="JS_APPLICATION.data.js"></script>
+    <script type="text/javascript" src="JS_APPLICATION.js"></script>
   </body>
 </html>