Added ability to import AIDungeon games from AIDCAT

static/application.js

@@ -10,6 +10,7 @@ var connect_status;
 var button_newgame;
 var button_save;
 var button_load;
+var button_import;
 var button_settings;
 var button_format;
 var button_send;
@@ -27,6 +28,11 @@ var anote_menu;
 var anote_input;
 var anote_labelcur;
 var anote_slider;
+var popup;
+var popup_title;
+var popup_content;
+var popup_accept;
+var popup_close;
 
 // Key states
 var shift_down   = false;
@@ -102,6 +108,23 @@ function addFormat(ob) {
 	}
 }
 
+function addImportLine(ob) {
+	popup_content.append("<div class=\"popuplistitem\" id=\"import"+ob.num+"\">\
+		<div>"+ob.title+"</div>\
+		<div>"+ob.acts+"</div>\
+		<div>"+ob.descr+"</div>\
+	</div>");
+	$("#import"+ob.num).on("click", function () {
+		socket.send({'cmd': 'importselect', 'data': $(this).attr('id')});
+		highlightImportLine($(this));
+	});
+}
+
+function highlightImportLine(ref) {
+	$("#popupcontent > div").removeClass("popuplistselected");
+	ref.addClass("popuplistselected");
+}
+
 function enableButtons(refs) {
 	for(i=0; i<refs.length; i++) {
 		refs[i].prop("disabled",false);
@@ -165,6 +188,16 @@ function show(refs) {
 	}
 }
 
+function popupShow(state) {
+	if(state) {
+		popup.removeClass("hidden");
+		popup.addClass("flex");
+	} else {
+		popup.removeClass("flex");
+		popup.addClass("hidden");
+	}
+}
+
 function enterEditMode() {
 	// Add class to each story chunk
 	showMessage("Please select a story chunk to edit above.");
@@ -240,6 +273,7 @@ $(document).ready(function(){
 	button_newgame  = $('#btn_newgame');
 	button_save     = $('#btn_save');
 	button_load     = $('#btn_load');
+	button_import   = $("#btn_import");
 	button_settings = $('#btn_settings');
 	button_format   = $('#btn_format');
 	button_send     = $('#btnsend');
@@ -257,6 +291,11 @@ $(document).ready(function(){
 	anote_input     = $('#anoteinput');
 	anote_labelcur  = $('#anotecur');
 	anote_slider    = $('#anotedepth');
+	popup           = $("#popupcontainer");
+	popup_title     = $("#popuptitletext");
+	popup_content   = $("#popupcontent");
+	popup_accept    = $("#btn_popupaccept");
+	popup_close     = $("#btn_popupclose");
 	
     // Connect to SocketIO server
     socket = io.connect('http://127.0.0.1:5000');
@@ -395,6 +434,15 @@ $(document).ready(function(){
 		} else if(msg.cmd == "allowtoggle") {
 			// Allow toggle change states to propagate
 			allowtoggle = msg.data;
+		} else if(msg.cmd == "popupshow") {
+			// Show/Hide Popup
+			popupShow(msg.data);
+		} else if(msg.cmd == "addimportline") {
+			// Add import popup entry
+			addImportLine(msg.data);
+		} else if(msg.cmd == "clearpopup") {
+			// Clear previous contents of popup
+			popup_content.html("");
 		}
     });	
 	
@@ -437,6 +485,10 @@ $(document).ready(function(){
 		socket.send({'cmd': 'load', 'data': ''});
 	});
 	
+	button_import.on("click", function(ev) {
+		socket.send({'cmd': 'import', 'data': ''});
+	});
+	
 	button_newgame.on("click", function(ev) {
 		socket.send({'cmd': 'newgame', 'data': ''});
 	});
@@ -449,10 +501,19 @@ $(document).ready(function(){
 		$('#formatmenu').slideToggle("slow");
 	});
 	
-	$("#btn_savesettings").on("click", function(ev) {
-		socket.send({'cmd': 'savesettings', 'data': ''});
+	popup_close.on("click", function(ev) {
+		socket.send({'cmd': 'importcancel', 'data': ''});
 	});
 	
+	popup_accept.on("click", function(ev) {
+		socket.send({'cmd': 'importaccept', 'data': ''});
+	});
+	
+	// I think this was removed?
+	//$("#btn_savesettings").on("click", function(ev) {
+	//	socket.send({'cmd': 'savesettings', 'data': ''});
+	//});
+	
 	// Bind Enter button to submit
 	input_text.keydown(function (ev) {
 		if (ev.which == 13 && !shift_down) {

static/custom.css

@@ -136,6 +136,69 @@ chunk {
 	grid-template-columns: 80% 20%;
 }
 
+#popupcontainer {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	z-index: 1;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0,0,0,0.5);
+	flex-direction: column;
+	align-items: center;
+}
+
+#popup {
+	width: 75%;
+	min-width: 500px;
+	max-width: 1000px;
+	background-color: #262626;
+	margin-top: 100px;
+}
+
+#popuptitlebar {
+	padding: 10px;
+	background-color: #337ab7;
+}
+
+#popuptitletext {
+	height: 100%;
+	display: flex;
+	align-items:center;
+	color: #ffffff;
+	font-size: 12pt;
+}
+
+#popuplistheader {
+	padding-left: 10px;
+	display: grid;
+	grid-template-columns: 28% 10% 60%;
+	color: #737373;
+}
+
+#popupcontent {
+	min-height: 300px;
+	overflow-y: scroll;
+}
+
+#popupfooter {
+	width: 100%;
+	padding: 10px;
+	display: flex;
+	justify-content: center;
+	background-color: #295071;
+}
+
+#popupfooter button {
+	width: 100px;
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+#popuptitleclose {
+	
+}
+
 .anotelabel {
 	font-size: 10pt;
 	color: #ffffff;
@@ -172,6 +235,10 @@ chunk {
 	color: #ff0000;	
 }
 
+.flex {
+	display: flex;
+}
+
 .formatcolumn {
 	width: 25%;
 	padding-left: 10px;
@@ -247,6 +314,26 @@ chunk {
 	text-align: right;
 }
 
+.popuplistitem {
+	padding: 5px 10px 5px 10px;
+	display: grid;
+	grid-template-columns: 30% 10% 60%;
+	color: #ffffff;
+	
+	-moz-transition: background-color 0.25s ease-in;
+    -o-transition: background-color 0.25s ease-in;
+    -webkit-transition: background-color 0.25s ease-in;
+}
+
+.popuplistitem:hover {
+	cursor: pointer;
+	background-color: #688f1f;
+}
+
+.popuplistselected {
+	background-color: #688f1f;
+}
+
 .settingitem {
 	width: 18%;
 	padding-left: 10px;