Preparing release for version 1.1.0

.gitmodules

@@ -1,6 +1,6 @@
 [submodule "lib/require"]
 	path = lib/require
-	url = git://github.com/requirejs/requirejs.git
+	url = https://github.com/requirejs/requirejs.git
 [submodule "lib/webfont"]
 	path = lib/webfont
-	url = git://github.com/typekit/webfontloader.git
+	url = https://github.com/typekit/webfontloader.git

src/draw/Image.js

@@ -25,7 +25,8 @@ define(["react", "react-class"], function Image(React, ReactClass)
 						left: this.props.style.left,
 						top: this.props.style.top,
 						width: this.props.style.width,
-						height: this.props.style.height
+						height: this.props.style.height,
+						mixBlendMode: this.props.style.mixBlendMode
 					}
 				}
 			)
@@ -44,6 +45,8 @@ define(["react", "react-class"], function Image(React, ReactClass)
 			if (canvas !== null && this.state.image !== null)
 			{
 				var ctx = canvas.getContext("2d");
+				ctx.save();
+				ctx.globalCompositeOperation = this.props.style.mixBlendMode;
 				ctx.drawImage(
 					this.state.image, 
 					this.props.style.left, 
@@ -54,6 +57,7 @@ define(["react", "react-class"], function Image(React, ReactClass)
 					this.props.style.width || this.state.image.width, 
 					this.props.style.height || this.state.image.height
 				);
+				ctx.restore();
 			}
 		}
 	});
@@ -65,6 +69,7 @@ define(["react", "react-class"], function Image(React, ReactClass)
 			top: 0,
 			width: undefined, 
 			height: undefined, 
+			mixBlendMode: "normal"
 		},
 		canvas: null, 
 		repaint: function repaint(){/* Empty function.*/} 

src/draw/Text.js

@@ -265,6 +265,7 @@ define(["react", "react-class"], function Text(React, ReactClass)
 			var font;
 			ctx.font = font = [
 				style.fontStyle, // "normal", "italic" or "oblique".
+				style.fontVariant,
 				style.fontWeight, // "thin", "normal", "bold". Can also be a number.
 				style.fontSize + "px", // Size of the text in pixels.
 				style.fontFamily // Array in the order of which font should be tried.
@@ -283,6 +284,7 @@ define(["react", "react-class"], function Text(React, ReactClass)
 		style: { 
 			color: "black",
 			fontFamily: [ "serif" ], // Font to use if not specified.
+			fontVariant: "normal", // Could be small caps.
 			fontSize: 14, // Default font height (in pixels).
 			fontStyle: "normal", // Normal, straight text; could be italic or oblique.
 			fontWeight: 400, // Normal text weight, lower is thinner; higher thicker.

src/tcg/ygo/Card.js

@@ -1,8 +1,8 @@
-define(["react", "react-class", "draw/Canvas", "./layout/All", "./Attributes", "./Stars", "./Icons"], function App(React, ReactClass, Canvas, Layouts, Attributes, Stars, Icons)
+define(["react", "react-class", "draw/Canvas", "./layout/All", "./Attributes", "./Stars", "./Icons", "./Rarities"], function App(React, ReactClass, Canvas, Layouts, Attributes, Stars, Icons, Rarities)
 {
 	var Card = ReactClass({
 		render: function render()
-		{
+		{	
 			return React.createElement(
 				Canvas,
 				{
@@ -11,7 +11,7 @@ define(["react", "react-class", "draw/Canvas", "./layout/All", "./Attributes", "
 					className: "ygo card"
 				},
 				React.createElement(
-					Layouts[this.props.layout],
+					Layouts[this.props.layout].fn,
 					this.props
 				)
 			);
@@ -23,5 +23,6 @@ define(["react", "react-class", "draw/Canvas", "./layout/All", "./Attributes", "
 	Card.Attributes = Attributes;
 	Card.Stars = Stars;
 	Card.Icons = Icons;
+	Card.Rarities = Rarities;
 	return Card;
 });

src/tcg/ygo/CardMaker.js

@@ -1,7 +1,8 @@
 define(["react", "react-class", "./Card", "webfont"], function App(React, ReactClass, Card, WebFont)
 {
 	var emptyCard = {
-		version: "1.0.0",
+		version: "1.1.0",
+		rarity: "Common",
 		name: "",
 		level: 0,
 		type: "",
@@ -99,31 +100,31 @@ define(["react", "react-class", "./Card", "webfont"], function App(React, ReactC
 
 		render: function render()
 		{
-			var templates = [];
-			for (var key in Card.Layout)
+			function makeSelect(data)
 			{
-				if (Card.Layout.hasOwnProperty(key))
+				var options = [];
+				for (var key in data)
 				{
-					templates[templates.length] = React.createElement("option", { key: key }, key);
+					if (data.hasOwnProperty(key))
+					{
+						element = data[key] || {};
+						options[options.length] = React.createElement
+						(
+							"option", 
+							{ 
+								key: key, 
+								value: typeof element.value !== "undefined" ? element.value : key 
+							}, 
+							element.name || key);
+					}
 				}
+				return options;
 			}
-			var attributes = [];
 
-			for (var key in Card.Attributes)
-			{
-				if (Card.Attributes.hasOwnProperty(key))
-				{
-					attributes[attributes.length] = React.createElement("option", { key: key }, key);
-				}
-			}
-			var icons = [];
-			for(var key in Card.Icons)
-			{
-				if(Card.Icons.hasOwnProperty(key))
-				{
-					icons[icons.length] = React.createElement("option", { key: key }, key);
-				}
-			}
+			var templates = makeSelect(Card.Layout);
+			var attributes = makeSelect(Card.Attributes);
+			var icons = makeSelect(Card.Icons);
+			var rarities = makeSelect(Card.Rarities);
 
 			var e = React.createElement;
 			return e(
@@ -145,6 +146,7 @@ define(["react", "react-class", "./Card", "webfont"], function App(React, ReactC
 					e("button", { onClick: this.open }, "Open"),
 
 					e("label", null, "Name",  e("input", { onChange: this.updateField("card.name"), type: "text", value: this.state.card.name })),
+					e("label", null, "Rarity", e("select", { onChange: this.updateField("card.rarity"), value: this.state.card.rarity }, rarities)),
 					e("label", null, "Template", e("select",  { onChange: this.updateField("card.layout"), value: this.state.card.layout }, templates)),
 					e("label", null, "Attribute", e("select", { onChange: this.updateField("card.attribute"), value: this.state.card.attribute }, attributes)),
 					e("label", null, "Level", e("input", { onChange: this.updateField("card.level"), type: "number", value: this.state.card.level })),

src/tcg/ygo/Rarities.js

@@ -0,0 +1,9 @@
+define([], function()
+{
+	var path = ["res", "tcg", "ygo", "foil"].join("/");
+	return {
+		common:     { name: "Common", foil: undefined, color: undefined },
+		rare:       { name: "Rare", foil: undefined, color: "silver"},
+		secret: { name: "Secret rare", foil: [ path, "Secret.png" ].join("/"), color: "silver" }
+	};
+});

src/tcg/ygo/layout/All.js

@@ -5,24 +5,26 @@ define([
 	"./Fusion",
 	"./Synchro",
 	"./DarkSynchro",
+	"./Unity",
 	"./Xyz",
 	"./Link",
 	"./Token",
 	"./Spell",
 	"./Trap"
-], function ygo_template_all(Normal, Effect, Ritual, Fusion, Synchro, DarkSynchro, Xyz,  Link, Token, Spell, Trap)
+], function ygo_template_all(Normal, Effect, Ritual, Fusion, Synchro, DarkSynchro, Unity, Xyz,  Link, Token, Spell, Trap)
 {
 	return {
-		Normal: Normal,
-		Effect: Effect,
-		Ritual: Ritual,
-		Fusion: Fusion,
-		Synchro: Synchro, 
-		DarkSynchro: DarkSynchro,
-		Xyz: Xyz,
-		Link: Link,
-		Token: Token,
-		Spell: Spell,
-		Trap: Trap
+		Normal: { value: "Normal", fn: Normal },
+		Effect: { value: "Effect", fn: Effect },
+		Ritual: { value: "Ritual", fn: Ritual },
+		Fusion: { value: "Fusion", fn: Fusion },
+		Synchro: { value: "Synchro", fn:Synchro }, 
+		DarkSynchro: { value: "DarkSynchro", name: "Dark Synchro", fn: DarkSynchro },
+		Xyz: { value: "Xyz", fn: Xyz },
+		Unity: { value: "Unity", fn: Unity },
+		Link: { value: "Link", fn: Link },
+		Token: { value: "Token", fn: Token },
+		Spell: { value: "Spell", fn: Spell },
+		Trap: { value: "Trap", fn: Trap }
 	};
 });

src/tcg/ygo/layout/DarkSynchro.js

@@ -6,9 +6,9 @@ define(["react", "react-class", "draw/Group", "./component/All"], function DarkS
 			return React.createElement(
 				Group,
 				this.props,
-				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled }),
+				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled, rarity: this.props.rarity }),
 				React.createElement(C.Border, { value: "DarkSynchro", pendulum: this.props.pendulum.enabled }),
-				React.createElement(C.CardName, { value: this.props.name, color: "white" }),
+				React.createElement(C.CardName, { value: this.props.name, color: "white", rarity: this.props.rarity }),
 				React.createElement(C.Attribute, { value: this.props.attribute }),
 				React.createElement(C.Level, { value: -this.props.level, star: "Negative" }),
 

src/tcg/ygo/layout/Effect.js

@@ -6,9 +6,9 @@ define(["react", "react-class", "draw/Group", "./component/All"], function Effec
 			return React.createElement(
 				Group,
 				this.props,
-				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled }),
+				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled, rarity: this.props.rarity }),
 				React.createElement(C.Border, { value: "Effect", pendulum: this.props.pendulum.enabled }),
-				React.createElement(C.CardName, { value: this.props.name }),
+				React.createElement(C.CardName, { value: this.props.name, rarity: this.props.rarity }),
 				React.createElement(C.Attribute, { value: this.props.attribute }),
 				React.createElement(C.Level, { value: this.props.level, star: "Normal" }),
 

src/tcg/ygo/layout/Fusion.js

@@ -6,9 +6,9 @@ define(["react", "react-class", "draw/Group", "./component/All"], function Fusio
 			return React.createElement(
 				Group,
 				this.props,
-				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled }),
+				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled, rarity: this.props.rarity }),
 				React.createElement(C.Border, { value: "Fusion", pendulum: this.props.pendulum.enabled }),
-				React.createElement(C.CardName, { value: this.props.name }),
+				React.createElement(C.CardName, { value: this.props.name, rarity: this.props.rarity }),
 				React.createElement(C.Attribute, { value: this.props.attribute }),
 				React.createElement(C.Level, { value: this.props.level, star: "Normal" }),
 

src/tcg/ygo/layout/Link.js

@@ -6,9 +6,9 @@ define(["react", "react-class", "draw/Group", "./component/All"], function Link(
 			return React.createElement(
 				Group,
 				this.props,
-				React.createElement(C.Image, { value: this.props.image }),
+				React.createElement(C.Image, { value: this.props.image, rarity: this.props.rarity }),
 				React.createElement(C.Border, { value: "Link" }),
-				React.createElement(C.CardName, { value: this.props.name, color: "white" }),
+				React.createElement(C.CardName, { value: this.props.name, color: "white", rarity: this.props.rarity }),
 				React.createElement(C.Attribute, { value: this.props.attribute }),
 
 				React.createElement(C.LinkMarkers, this.props.link ),

src/tcg/ygo/layout/Normal.js

@@ -6,9 +6,9 @@ define(["react", "react-class", "draw/Group", "./component/All"], function Norma
 			return React.createElement(
 				Group,
 				this.props,
-				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled }),
+				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled, rarity: this.props.rarity }),
 				React.createElement(C.Border, { value: "Normal", pendulum: this.props.pendulum.enabled }),
-				React.createElement(C.CardName, { value: this.props.name }),
+				React.createElement(C.CardName, { value: this.props.name, rarity: this.props.rarity }),
 				React.createElement(C.Attribute, { value: this.props.attribute }),
 				React.createElement(C.Level, { value: this.props.level, star: "Normal" }),
 

src/tcg/ygo/layout/Ritual.js

@@ -6,9 +6,9 @@ define(["react", "react-class", "draw/Group", "./component/All"], function Ritua
 			return React.createElement(
 				Group,
 				this.props,
-				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled }),
+				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled, rarity: this.props.rarity }),
 				React.createElement(C.Border, { value: "Ritual", pendulum: this.props.pendulum.enabled }),
-				React.createElement(C.CardName, { value: this.props.name }),
+				React.createElement(C.CardName, { value: this.props.name, rarity: this.props.rarity }),
 				React.createElement(C.Attribute, { value: this.props.attribute }),
 				React.createElement(C.Level, { value: this.props.level, star: "Normal" }),
 

src/tcg/ygo/layout/Spell.js

@@ -6,9 +6,9 @@ define(["react", "react-class", "draw/Group", "./component/All"], function Spell
 			return React.createElement(
 				Group,
 				this.props,
-				React.createElement(C.Image, { value: this.props.image }),
+				React.createElement(C.Image, { value: this.props.image, rarity: this.props.rarity }),
 				React.createElement(C.Border, { value: "Spell" }),
-				React.createElement(C.CardName, { value: this.props.name, color: "white" }),
+				React.createElement(C.CardName, { value: this.props.name, color: "white", rarity: this.props.rarity }),
 				React.createElement(C.Attribute, { value: this.props.attribute }),
 
 				React.createElement(C.Type, { value: this.props.type, type: "Backrow", icon: this.props.icon }),

src/tcg/ygo/layout/Synchro.js

@@ -6,9 +6,9 @@ define(["react", "react-class", "draw/Group", "./component/All"], function Synch
 			return React.createElement(
 				Group,
 				this.props,
-				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled }),
+				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled, rarity: this.props.rarity }),
 				React.createElement(C.Border, { value: "Synchro", pendulum: this.props.pendulum.enabled }),
-				React.createElement(C.CardName, { value: this.props.name }),
+				React.createElement(C.CardName, { value: this.props.name, rarity: this.props.rarity }),
 				React.createElement(C.Attribute, { value: this.props.attribute }),
 				React.createElement(C.Level, { value: this.props.level, star: "Normal" }),
 

src/tcg/ygo/layout/Token.js

@@ -6,9 +6,9 @@ define(["react", "react-class", "draw/Group", "./component/All"], function Token
 			return React.createElement(
 				Group,
 				this.props,
-				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled }),
+				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled, rarity: this.props.rarity }),
 				React.createElement(C.Border, { value: "Token", pendulum: this.props.pendulum.enabled }),
-				React.createElement(C.CardName, { value: this.props.name }),
+				React.createElement(C.CardName, { value: this.props.name, rarity: this.props.rarity }),
 				React.createElement(C.Attribute, { value: this.props.attribute }),
 				React.createElement(C.Level, { value: this.props.level, star: "Normal" }),
 

src/tcg/ygo/layout/Trap.js

@@ -6,9 +6,9 @@ define(["react", "react-class", "draw/Group", "./component/All"], function Trap(
 			return React.createElement(
 				Group,
 				this.props,
-				React.createElement(C.Image, { value: this.props.image }),
+				React.createElement(C.Image, { value: this.props.image, rarity: this.props.rarity }),
 				React.createElement(C.Border, { value: "Trap" }),
-				React.createElement(C.CardName, { value: this.props.name, color: "white" }),
+				React.createElement(C.CardName, { value: this.props.name, color: "white", rarity: this.props.rarity }),
 				React.createElement(C.Attribute, { value: this.props.attribute }),
 
 				React.createElement(C.Type, { value: this.props.type, type: "Backrow", icon: this.props.icon }),

src/tcg/ygo/layout/Unity.js

@@ -0,0 +1,31 @@
+define(["react", "react-class", "draw/Group", "./component/All"], function Ritual(React, ReactClass, Group, C)
+{
+	var Unity = ReactClass({
+		render: function render()
+		{
+			return React.createElement(
+				Group,
+				this.props,
+				React.createElement(C.Image, { value: this.props.image, pendulum: true, rarity: this.props.rarity }),
+				React.createElement(C.Border, { value: "Unity", pendulum: true}),
+				React.createElement(C.CardName, { value: this.props.name, rarity: this.props.rarity }),
+				React.createElement(C.Attribute, { value: this.props.attribute }),
+				React.createElement(C.Level, { value: this.props.level, star: "Normal" }),
+
+				React.createElement(C.Pendulum, Object.assign({}, this.props.pendulum, { enabled: true })),
+
+				React.createElement(C.Type, { value: this.props.type }),
+				React.createElement(C.Effect, { value: this.props.effect }),
+				React.createElement(C.Atk, { value: this.props.atk }),
+				React.createElement(C.Def, { value: this.props.def }),
+
+				React.createElement(C.Serial, { value: this.props.serial }),
+				React.createElement(C.Copyright, { value: this.props.copyright })
+			);
+		}
+	});
+	Unity.displayName = "Unity";
+	Unity.defaultProps = {
+	};
+	return Unity;
+});

src/tcg/ygo/layout/Xyz.js

@@ -6,9 +6,9 @@ define(["react", "react-class", "draw/Group", "./component/All"], function Xyz(R
 			return React.createElement(
 				Group,
 				this.props,
-				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled }),
+				React.createElement(C.Image, { value: this.props.image, pendulum: this.props.pendulum.enabled, rarity: this.props.rarity }),
 				React.createElement(C.Border, { value: "Xyz", pendulum: this.props.pendulum.enabled }),
-				React.createElement(C.CardName, { value: this.props.name, color: "white" }),
+				React.createElement(C.CardName, { value: this.props.name, color: "white", rarity: this.props.rarity }),
 				React.createElement(C.Attribute, { value: this.props.attribute }),
 				React.createElement(C.Level, { value: -this.props.level, star: "Xyz" }),
 

src/tcg/ygo/layout/component/Border.js

@@ -1,9 +1,9 @@
-define(["react", "react-class", "draw/Image", "../../Borders"], function Border(React, ReactClass, Image, Borders)
+define(["react", "react-class", "draw/Image"], function Border(React, ReactClass, Image)
 {
 	var Border = ReactClass({
 		render: function render()
 		{
-			var border = Borders[this.props.value].url;
+			var border = "res/tcg/ygo/border/" + this.props.value + ".png";
 			if (this.props.pendulum)
 			{
 				border = border.replace(".png", ".pendulum.png");