Repair and partially update old export to html option. (#152)

* Add old exporter from ancient times.

---------

Co-authored-by: cajun <12363371+CajunAvenger@users.noreply.github.com>

data/magic-spoiler.mse-export-template/desktop.ini

@@ -0,0 +1,2 @@
+[.ShellClassInfo]
+LocalizedResourceName=@magic-spoiler.mse-export-template,0

data/magic-spoiler.mse-export-template/export-template

@@ -0,0 +1,261 @@
+# Simple exporter for HTML files
+mse version: 2.0.0
+game:        magic
+short name:  Spoiler
+full name:   List of cards
+installer group: magic/Export/Spoiler (list of cards)
+icon: preview.png
+create directory: true
+version: 2014-06-19
+depends on: magic.mse-game 2008-05-18
+
+########################################################################################
+
+option field:
+	type: boolean
+	name: include set file
+	description: Should a link to the MSE set file be included in the spoiler?
+	initial: no
+option field:
+	type: choice
+	name: grouping
+	description: How should cards be grouped?
+	choice: no grouping
+	choice: group by color
+	initial: group by color
+option field:
+	type: choice
+	name: images
+	choice: no
+	choice: full card image, linked
+	choice: full card image, preview
+	choice: full card image only
+	initial: full card image, preview
+option field:
+	type: boolean
+	name: mana symbols
+	description: Should mana symbols be used, or should they be written as text?
+option field:
+	type: boolean
+	name: rarity symbols
+	description: Should rarity be shown using a symbol or as text?
+option field:
+	type: color
+	name: background color
+	initial: rgb(255,255,255)
+	choice:
+		name: white
+		color: rgb(255,255,255)
+	choice:
+		name: black
+		color: rgb(0,0,0)
+option field:
+	type: color
+	name: text color
+	initial: rgb(0,0,0)
+	choice:
+		name: white
+		color: rgb(255,255,255)
+	choice:
+		name: black
+		color: rgb(0,0,0)
+
+option style:
+	grouping:
+		render style: both
+		choice images:
+			no grouping:    { built_in_image("bool_no") }
+			group by color: /magic-spoiler.mse-export-template/card_color.png
+	images:
+		render style: both
+		choice images:
+			no:    { built_in_image("bool_no") }
+
+script:
+	if options.mana_symbols then (
+		symbol_font      := "magic-mana-small"
+		symbol_font_size := 12
+	) else (
+		symbols_to_html  := to_html
+	)
+	include file: workaround
+	write_card := {
+		if contains(options.images, match:"full card image") then
+			card_image_file := write_image_file(card, file:"card{position(of:card,in:set)}.jpg")
+		else
+			card_image_file := ""
+
+		if options.images == "full card image, preview" then
+			card_image_preview := write_image_file(card, file:"card-preview{position(of:card,in:set)}.jpg", height: 100)
+		else
+			card_image_preview := card_image_file
+
+		if options.images == "full card image only" then
+		  "<li class='fullcard'><img src='{card_image_file}' alt=''></li>"
+		else
+		  "<li class='card'>
+		     {if options.images == "full card image, preview" then
+		         "<a href='{card_image_file}'><img src='{card_image_preview}' alt='' class='card-image'></a>
+				  <div class='box'>
+		          <div><span class='name'    >{  to_html(card.name         ) }</span>"
+		      else if card_image_file != "" and contains(options.images, match:"linked") then
+				 "<div class='box'>
+		          <div><span class='name'    ><a href='{card_image_file}'>{  to_html(card.name) }</a></span>"
+		      else
+				 "<div class='box'>
+		          <div><span class='name'    >{  to_html(card.name         ) }</span>"
+		    }<span class='casting-cost' >{  symbols_to_html(card.casting_cost ) }</span></div>
+		     {if card_image_file != "" and contains(options.images, match:"inline") then
+		         "<img src='{card_image_preview}' alt='' class='image'>"
+		     }
+		     <div><span class='type'>{ to_html(card.type) }</span><span class='rarity'>{
+		       if options.rarity_symbols then
+		         "<img src='{ var := if card.rarity == "" then "common"
+		                             else if card.rarity == "basic land" then "common"
+		                             else card.rarity
+		                      write_image_file(
+		                          file:  "set-symbol-{var}.png",
+		                          width: 20,
+		                          symbol_variation(
+		                            symbol:    set.symbol,
+		                            variation: var
+		                          )
+		                    )}' alt='{card.rarity}' title='{card.rarity}'>"
+		       else if card.rarity == "" then "(Common)"
+			   else "(" + card.rarity + ")"
+		     }
+			 </span></div>
+		     <span class='rule-text'    >{  to_html(if card.special_text != "" then card.special_text else card.rule_text) }</span>
+		     <span class='flavor-text'  >{  to_html(remove_tag(tag: "<i-flavor>", card.flavor_text)) }</span>
+		     <span class='pt'           >{  card.pt + card.loyalty }</span>
+		     <span class='card-number'  >{  to_html(card.card_number) }</span>
+		  </div>
+		  </li>"
+	}
+	kind_of_card := { if contains(card.shape, match:"token") then ""
+		else if contains(card.shape, match:"rulestip") then ""
+		else if contains(card.shape, match:"counter") then ""
+		else if contains(card.shape, match:"emblem") then ""
+		else if contains(card.shape, match:"split") then write_card()
+		else if contains(card.shape, match:"double faced") then write_card()
+		else if card.name_2 != "" then write_card()
+		else if card.loyalty != "" then write_card()
+		else if contains(card.shape, match:"leveler") then write_card()
+		else write_card()
+		}
+	write_cards := {
+		"<ul class='cards'>{
+		  for each card in sort_list(cards, order_by: {input.card_number}) do
+		     kind_of_card()
+		}</ul>"
+	}
+	write_group := {
+		cards := filter_list(cards, filter:
+			{	
+				# The first character of the color_of_card code must be equal to 'code'
+				substring(color_of_card(card:input), begin:0, end:1) == code
+			}
+		)
+		count := number_of_items(in:cards)
+		if count > 0 then
+		   "<h2>{title} ({count} {if count == 1 then "card" else "cards"})</h2>" +
+		   write_cards()
+		else ""
+	}
+	# Used by print_cards() to format saga text, since those have unique boxes.
+	print_saga_text :=
+	{
+		"<span class='rule-text'    > {to_html(card.chapter_text)} </span>
+		 <span class='rule-text'    > {to_html(card.level_1_text)} </span>
+		 <span class='rule-text'    > {to_html(card.level_2_text)} </span>
+		 <span class='rule-text'    > {to_html(card.level_3_text)} </span>
+		 <span class='rule-text'    > {to_html(card.level_4_text)} </span>"
+	}
+	# Used by print_cards() to format planeswalker text, since those have unique boxes.
+	print_walker_text :=
+	{
+		"<span class='rule-text'    > {to_html(card.level_1_text)} </span>" +
+		"<span class='rule-text'    > {to_html(card.level_2_text)} </span>" +
+		"<span class='rule-text'    > {to_html(card.level_3_text)} </span>" +
+		"<span class='rule-text'    > {to_html(card.level_4_text)} </span>"
+	}
+
+	# Actual export-ey bit starts here.
+	file_path := replace(copy_file("blank.gif"), match:"blank.gif", replace:"")
+	write_image_file(
+		file:  "set-symbol.png",
+		width: 200,
+		symbol_variation(symbol: set.symbol, variation: "rare")
+	)
+	write_image_file(
+		file:  "set-icon.png",
+		width: 16,
+		heght: 16
+		symbol_variation(symbol: set.symbol, variation: "rare")
+	)
+	write_text_file(
+		script_string,
+		file: "script.js",
+	)
+	write_text_file(
+		css_string,
+		file: "style.css"
+	)
+
+	# Generate html largely by string interpolation.
+	html := "<!DOCTYPE HTML>
+	<html lang='en'>
+	 <head>
+	  <title>{set.title}</title>
+	  <link rel='stylesheet' type='text/css' href='{file_path}style.css'>
+	  <link rel='shortcut icon' type='image/png' href='set-icon.png'>
+	  <script type='text/javascript' src='{file_path}script.js'></script>
+	  <style type='text/css'>
+	   body \{
+		 # This is here vs the css so the user can control text colors.
+	     background:  {options.background_color};
+	     color:       {options.text_color};
+	     font-family: 'mplantin', serif;
+		 # Should match with Scryfall based on my terrible understanding.
+		 font-size:   15px;
+	   \}
+	  </style>
+	 </head>
+	 <body{if options.images == "full card image, preview" then " class='with-previews'"}>
+	  <img src='{ write_image_file(
+		            file:  "set-symbol.png",
+		            width: 200,
+		            symbol_variation(symbol: set.symbol, variation: "rare")
+		    )}' alt='' class='set-symbol'>
+	  <h1>{set.title}</h1>
+	  <div class='copyright'>{set.copyright}</div>
+	  <div class='description'>{set.description}</div>
+	  { if options.include_set_file then
+	      "<div class='set-file'><a href='{ write_set_file(file:"set.mse-set") }'>Download set in MSE format</a></div>"
+	  }
+	  { if options.grouping == "group by color" then
+	       # Codes as by sort_index
+		   # Can't find anything that goes in other letters so far.
+	       write_group(title: "Colorless"               code:"A") +
+	       write_group(title: "White",                  code:"B") +
+	       write_group(title: "Blue",                   code:"C") +
+	       write_group(title: "Black",                  code:"D") +
+	       write_group(title: "Red",                    code:"E") +
+	       write_group(title: "Green",                  code:"F") +
+	       write_group(title: "Multicolor",             code:"G") +
+	       write_group(title: "Hybrids",                code:"H") +
+	       write_group(title: "Multicolor split",       code:"I") +
+	       write_group(title: "Artifact",               code:"J") +
+	       write_group(title: "Non-basic lands",        code:"L") +
+	       write_group(title: "Basic lands",            code:"")
+	    else write_cards(cards: cards)
+	  }
+	  <script><!--
+	  init();
+	  --></script>
+	 </body>
+	</html>"
+
+	write_text_file(html, file:"index.html")
+	# make sure the urls are relative to the right directory
+	replace(html, match:"<[^<>]*(href|src)='", replace:"&{directory}/")

data/magic-spoiler.mse-export-template/script js

@@ -0,0 +1,74 @@
+var isIE = navigator.appVersion.indexOf("MSIE") != -1;
+
+var preview, preview_img;
+
+function show_preview(url) {
+	preview.style.display = "block";
+	preview_img.style.backgroundImage = "url("+this.href+")";
+	return false;
+}
+
+function hide_preview() {
+	preview.style.display = "none";
+}
+
+function fix_preview() {
+	var e = document.documentElement ? document.documentElement : document.body;
+	preview.style.top = e.scrollTop + "px";
+	preview.style.height = e.clientHeight;
+	preview.style.width  = e.clientWidth;
+}
+
+function nice_preview() {
+	// attach
+	var links = document.getElementsByTagName("A");
+	for (var i in links) {
+		if (/(.jpg|.png|.gif)$/.test(links[i])) {
+			links[i].onclick = show_preview;
+		}
+	}
+	// create divs
+	preview = document.createElement("div");
+	var bg  = document.createElement("div");
+	var img = document.createElement("div");
+	preview.id = "preview";
+	bg.id      = "preview-bg";
+	img.id     = "preview-img";
+	hide_preview();
+	preview.onclick = bg.onclick = img.onclick = hide_preview;
+	preview.appendChild(bg);
+	preview.appendChild(img);
+	document.body.appendChild(preview);
+	preview_img = img;
+	if (isIE) {
+		window.onscroll = fix_preview;
+		fix_preview();
+	}
+}
+
+var dir;
+function fix_img() {
+	if (this.currentStyle.width == 'auto' && this.currentStyle.height == 'auto') {
+		this.style.width  = this.offsetWidth  + 'px';
+		this.style.height = this.offsetHeight + 'px';
+	}
+	this.onload = null;
+	this.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+this.src+'",sizingMethod="scale")';
+	this.src = dir + "blank.gif";
+}
+function fix_png_alpha() {
+	if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent)) return; // only in ie 5.5 and 6
+	dir = document.getElementsByTagName("SCRIPT")[0].src.replace(/[^\/]*$/,''); // dir for blank image
+	var imgs = document.getElementsByTagName("IMG");
+	for (var i in imgs) {
+		var img = imgs[i];
+		if ((/\.png$/i).test(img.src)) {
+			img.onload = fix_img;
+		}
+	}
+}
+
+function init() {
+	fix_png_alpha();
+	nice_preview();
+}

data/magic-spoiler.mse-export-template/style css

@@ -0,0 +1,123 @@
+h1, h2 {
+	font-family:	"Beleren", serif;
+}
+
+.set-symbol {
+	float:			right;
+	margin-right:	.5em;
+}
+
+ul {
+	list-style:		none;
+	margin:			0;
+	padding:		0;
+}
+.card {
+	clear:			left;
+	margin-top:		1em;
+	display: block;
+}
+li .box {
+	/* I don't think this was avaliable when this template was originally made.*/
+	display: flex;
+	flex-direction: column;
+}
+
+.box {
+	border:			1px solid rgb(192,192,192);
+}
+.test {
+	float: left;
+}
+
+.card span {
+	display:		block;
+}
+
+.card .name {
+	font-weight:	bold;
+	display:		inline;
+	font-family:	"Beleren", serif;
+	font-size:		larger;
+}
+.card .casting-cost {
+	display:		inline;
+	font-family:	"Magic Symbols", "Magic Symbols 2004", sans-serif;
+	font-size:		larger;
+	margin-left:	.5em;
+	vertical-align:	middle;
+}
+
+.card .flavor-text {
+	font-style:		italic;
+}
+.card .card-number {
+	color:			rgb(128,128,128);
+	font-size:		smaller;
+}
+
+
+.with-previews .card {
+	margin-top:		1.1em;
+	min-height:		100px;
+	position:		relative;
+}
+.card .card-image {
+	height:			100px;
+	float: 			left;
+	top:			3px;
+	margin:			3px;
+	border:			none;
+}
+.card .image {
+	display:		block;
+	border:			none;
+}
+
+span.symbol {
+	display:		inline;
+	vertical-align:	middle;
+}
+
+.fullcard {
+	float:			left;
+}
+h2 {
+	clear:			both;
+}
+
+/* image preview */
+#preview-bg {
+	background-color: rgb(0,0,0);
+	width:			100%;
+	height:			100%;
+	cursor:			pointer;
+	position:		absolute;
+	opacity:		0.7;
+	-moz-opacity:	0.7;
+	filter:         alpha(opacity=70);
+}
+#preview-img {
+	background-position:	50% 50%;
+	background-repeat:		no-repeat;
+	width:			100%;
+	height:			100%;
+	cursor:			pointer;
+	position:		absolute;
+}
+#preview {
+	position:		fixed;
+	top:			0;
+	left:			0;
+	width:			100%;
+	height:			100%;
+}
+* html #preview {
+	position:		absolute;
+}
+
+@media print {
+	li {
+	  break-inside: avoid;
+	}
+}

data/magic-spoiler.mse-export-template/workaround

@@ -0,0 +1,10 @@
+# Various antiviruses freak out when there's a .js file or even a .css file
+
+# so they're converted to strings and only printed to those file types on the user end
+# replace " -> \"
+# replace { -> \{
+# replace linebreak -> \n
+
+script_string := "var isIE = navigator.appVersion.indexOf(\"MSIE\") != -1;\n\nvar preview, preview_img;\n\nfunction show_preview(url) \{\n	preview.style.display = \"block\";\n	preview_img.style.backgroundImage = \"url(\"+this.href+\")\";\n	return false;\n}\n\nfunction hide_preview() \{\n	preview.style.display = \"none\";\n}\n\nfunction fix_preview() \{\n	var e = document.documentElement ? document.documentElement : document.body;\n	preview.style.top = e.scrollTop + \"px\";\n	preview.style.height = e.clientHeight;\n	preview.style.width  = e.clientWidth;\n}\n\nfunction nice_preview() \{\n	// attach\n	var links = document.getElementsByTagName(\"A\");\n	for (var i in links) \{\n		if (/(.jpg|.png|.gif)$/.test(links[i])) \{\n			links[i].onclick = show_preview;\n		}\n	}\n	// create divs\n	preview = document.createElement(\"div\");\n	var bg  = document.createElement(\"div\");\n	var img = document.createElement(\"div\");\n	preview.id = \"preview\";\n	bg.id      = \"preview-bg\";\n	img.id     = \"preview-img\";\n	hide_preview();\n	preview.onclick = bg.onclick = img.onclick = hide_preview;\n	preview.appendChild(bg);\n	preview.appendChild(img);\n	document.body.appendChild(preview);\n	preview_img = img;\n	if (isIE) \{\n		window.onscroll = fix_preview;\n		fix_preview();\n	}\n}\n\nvar dir;\nfunction fix_img() \{\n	if (this.currentStyle.width == 'auto' && this.currentStyle.height == 'auto') \{\n		this.style.width  = this.offsetWidth  + 'px';\n		this.style.height = this.offsetHeight + 'px';\n	}\n	this.onload = null;\n	this.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\"'+this.src+'\",sizingMethod=\"scale\")';\n	this.src = dir + \"blank.gif\";\n}\nfunction fix_png_alpha() \{\n	if (!/MSIE (5\\.5|6\\.)/.test(navigator.userAgent)) return; // only in ie 5.5 and 6\n	dir = document.getElementsByTagName(\"SCRIPT\")[0].src.replace(/[^\\/]*$/,''); // dir for blank image\n	var imgs = document.getElementsByTagName(\"IMG\");\n	for (var i in imgs) \{\n		var img = imgs[i];\n		if ((/\\.png$/i).test(img.src)) \{\n			img.onload = fix_img;\n		}\n	}\n}\n\nfunction init() \{\n	fix_png_alpha();\n	nice_preview();\n}"
+
+css_string := "h1, h2 \{\n	font-family:	\"Beleren\", serif;\n}\n\n.set-symbol \{\n	float:			right;\n	margin-right:	.5em;\n}\n\nul \{\n	list-style:		none;\n	margin:			0;\n	padding:		0;\n}\n.card \{\n	clear:			left;\n	margin-top:		1em;\n	display: block;\n}\nli .box \{\n	/* I don't think this was avaliable when this template was originally made.*/\n	display: flex;\n	flex-direction: column;\n}\n\n.box \{\n	border:			1px solid rgb(192,192,192);\n}\n.test \{\n	float: left;\n}\n\n.card span \{\n	display:		block;\n}\n\n.card .name \{\n	font-weight:	bold;\n	display:		inline;\n	font-family:	\"Beleren\", serif;\n	font-size:		larger;\n}\n.card .casting-cost \{\n	display:		inline;\n	font-family:	\"Magic Symbols\", \"Magic Symbols 2004\", sans-serif;\n	font-size:		larger;\n	margin-left:	.5em;\n	vertical-align:	middle;\n}\n\n.card .flavor-text \{\n	font-style:		italic;\n}\n.card .card-number \{\n	color:			rgb(128,128,128);\n	font-size:		smaller;\n}\n\n\n.with-previews .card \{\n	margin-top:		1.1em;\n	min-height:		100px;\n	position:		relative;\n}\n.card .card-image \{\n	height:			100px;\n	float: 			left;\n	top:			3px;\n	margin:			3px;\n	border:			none;\n}\n.card .image \{\n	display:		block;\n	border:			none;\n}\n\nspan.symbol \{\n	display:		inline;\n	vertical-align:	middle;\n}\n\n.fullcard \{\n	float:			left;\n}\nh2 \{\n	clear:			both;\n}\n\n/* image preview */\n#preview-bg \{\n	background-color: rgb(0,0,0);\n	width:			100%;\n	height:			100%;\n	cursor:			pointer;\n	position:		absolute;\n	opacity:		0.7;\n	-moz-opacity:	0.7;\n	filter:         alpha(opacity=70);\n}\n#preview-img \{\n	background-position:	50% 50%;\n	background-repeat:		no-repeat;\n	width:			100%;\n	height:			100%;\n	cursor:			pointer;\n	position:		absolute;\n}\n#preview \{\n	position:		fixed;\n	top:			0;\n	left:			0;\n	width:			100%;\n	height:			100%;\n}\n* html #preview \{\n	position:		absolute;\n}\n\n@media print \{\n	li \{\n	  break-inside: avoid;\n	}\n}"