From 0729d51953f53e2a086cc4c14feb33bf384cf73f Mon Sep 17 00:00:00 2001
From: anatoly techtonik <techtonik@gmail.com>
Date: Thu, 20 Oct 2016 05:58:52 +0300
Subject: [PATCH] Proof of concept with HTML5 Custom Elements

---
 hp/hp.css | 36 ++++++++++++++++++------------------
 hp/hp.js  | 20 ++++++++++++++++----
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/hp/hp.css b/hp/hp.css
index 2bba15d3..9bef7846 100644
--- a/hp/hp.css
+++ b/hp/hp.css
@@ -45,7 +45,7 @@ pre {
 	pre { font-size: 23px; }
 }
 
-pre span {
+pre * {
 	opacity: 0.5;
 }
 
@@ -59,33 +59,33 @@ a:hover {
 	background-color: #333;
 }
 
-.text {
+r-text {
 	color: #bbb;
 	opacity: 1;
 }
 
-.text:first-child {
+r-text:first-child {
 	color: #fff;
 	text-decoration: underline;
 }
 
-.wall { color: #666; }
-.corridor { color: #ccc; }
-.staircase { color: #aaa; }
-.door { color: #a60; }
-.trap { color: #f0f; }
-.scroll { color: #fff; }
-.water { color: #33f; }
-.potion { color: #3ff; }
+r-wall { color: #666; }
+r-corridor { color: #ccc; }
+r-staircase { color: #aaa; }
+r-door { color: #a60; }
+r-trap { color: #f0f; }
+r-scroll { color: #fff; }
+r-water { color: #33f; }
+r-potion { color: #3ff; }
 
-.money, .money a {
+r-money, r-money a {
 	color: #fe0;
 	opacity: 1;
 }
 
-.player { color:#f00; }
-.kobold { color:#3f3; }
-.orc { color:#3f3; }
-.goblin { color:#00f; }
-.ogre { color:#3a3; }
-.dragon { color:#f33; }
+r-player { color:#f00; }
+r-kobold { color:#3f3; }
+r-orc { color:#3f3; }
+r-goblin { color:#00f; }
+r-ogre { color:#3a3; }
+r-dragon { color:#f33; }
diff --git a/hp/hp.js b/hp/hp.js
index a65f0cf4..e0273e4b 100644
--- a/hp/hp.js
+++ b/hp/hp.js
@@ -1,15 +1,27 @@
+
 var pre = document.querySelector("pre");
+
 var re = /(&gt;)|([a-z-][a-z0-9 \.,:\(\)-]*[a-z0-9\.:])|(#+)|(\.+)|([+/])|(\$+)|(\^)|(\?)|(=+)|(!)/ig;
+var types = ["", "staircase", "text", "wall", "corridor", "door", "money", "trap", "scroll", "water", "potion"];
+
+/// create custom elements
+
+types.forEach(function (value, key) {
+	document.registerElement("r-" + value);
+});
+
 
 var str = pre.innerHTML;
 str = str.replace(re, function(match) {
-	var types = ["", "staircase", "text", "wall", "corridor", "door", "money", "trap", "scroll", "water", "potion"];
 	for (var i=1; i<arguments.length-1; i++) {
 		if (arguments[i]) { 
 			var type = types[i];
-			var str = "<span class='"+type+"' ";
-			if (type != "wall" && type != "corridor" && type != "text") { str += "title='"+type+"' "; }
-			str += ">" + match + "</span>"; 
+			var str = "";
+			if (type == "wall" || type == "corridor" || type == "text") {
+				str = "<r-" + type + ">" + match + "</r-" + type + ">";
+			} else {
+				str = "<r-" + type + " title='"+type+"'>" + match + "</r-" + type + ">";
+                        }
 			return str;
 		}
 	}