17 files changed, 304 insertions, 0 deletions
diff --git a/games/pixelpaint/clear.gif b/games/pixelpaint/clear.gif
new file mode 100644
index 0000000..6a7990b
--- /dev/null
+++ b/games/pixelpaint/clear.gif
diff --git a/games/pixelpaint/clear.png b/games/pixelpaint/clear.png
new file mode 100644
index 0000000..1d78e88
--- /dev/null
+++ b/games/pixelpaint/clear.png
diff --git a/games/pixelpaint/code.js b/games/pixelpaint/code.js
new file mode 100644
index 0000000..a54613d
--- /dev/null
+++ b/games/pixelpaint/code.js
@@ -0,0 +1 @@
+function cLum(a){for(var b=0;b<a.length;b++)a[b]<=0.03928?a[b]=a[b]/12.92:a[b]=Math.pow((a[b]+0.055)/1.055,2.4);return 0.2126*a[0]+0.7152*a[1]+0.0722*a[2]}function cCon(a,b){var c=cLum([a[0]/255,a[1]/255,a[2]/255]),d=cLum([b[0]/255,b[1]/255,b[2]/255]),e=c>=d?(c+0.05)/(d+0.05):(d+0.05)/(c+0.05);return Math.round(e*100)/100}function cStrNorm(a){var b;{if(a.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/))return a;if(b=a.match(/^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/)){b.shift();return"rgb("+$.map(b,function(a){return parseInt(a,16).toString()}).join(", ")+")"}if("getComputedStyle"in window){document.body.style.color=a;return cStrNorm(window.getComputedStyle(document.body,null).color)}if(document.body.currentStyle){document.body.style.color=a;return cStrNorm(document.body.currentStyle.color)}return a}}function cStrParse(a){var b=a.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);{if(b){b.shift();return $.map(b,function(a){return parseInt(a,10)})}return cStrParse(cStrNorm(a))}}$(document).ready(function(){var a=1,b=2,c=4,d=8,e=[c,d,a,b],f=a,g=16,h=32,i=32,j=h*g,k=i*g,l=new Array(i),m=$("#pixels"),n=$("#grid").get(0).getContext("2d"),o=$("#preview").get(0),p=o.getContext("2d"),q="localStorage"in window&&window.localStorage!==null,r="PixelPainter:",s="background-color",t=cStrParse("rgb(255,255,255)"),u=$("#color div"),v="rgb(0,0,0)";function w(a){v=cStrNorm(a);var b=cStrParse(v),c=cCon(b,t),d=$.map(b,function(a){var b=a.toString(16);return b.length==1?"0"+b:b});u.css(s,v);u.css("text-shadow",c<4||c>10?"none":"0 0 3px rgba(0, 0, 0, 0.7)");u.css("color",c>=4?"white":"black");u.text("#"+d.join("").toUpperCase())}function x(a,b){a.color=b;if(b===undefined){$(a).css(s,"");p.clearRect(a.i,a.j,1,1)}else{$(a).css(s,b);p.fillStyle=b;p.fillRect(a.i,a.j,1,1)}if(q){var c=r+a.i+":"+a.j;b===undefined?delete localStorage[c]:localStorage[c]=b}}function y(a,b,c,d){var e=[],f=l[b][a].get(0);e.push(f);while(e.length>0){f=e.shift();f.color===c&&x(f,d);var g=[[f.j-1,f.i],[f.j,f.i+1],[f.j+1,f.i],[f.j,f.i-1]];for(var h=0;h<4;h++){var f=(l[g[h][0]]||{})[g[h][1]];if(f!==undefined){f=f.get(0);if(f.color===c){x(f,d);e.push(f)}}}}}m.click(function(e){var g=e.target;f==a?x(g,v):f==b?y(g.i,g.j,g.color,v):f==c?x(g,undefined):f==d&&g.color!==undefined&&w(g.color)});for(var z=0;z<i;z++){l[z]=new Array(h);for(var A=0;A<h;A++){var B=document.createElement("div"),C=$(B).width(g).height(g).addClass("pixel");if(q){var D=localStorage[r+A.toString()+":"+z.toString()];if(typeof D=="string"){B.color=D;C.css(s,D);p.fillStyle=D;p.fillRect(A,z,1,1)}}l[z][A]=C;C.appendTo(m);B.i=A;B.j=z}}n.strokeStyle="rgba(100, 100, 100, 0.3)";for(var E=g;E<j;E+=g){n.beginPath();n.moveTo(E-0.5,0);n.lineTo(E-0.5,k);n.stroke();n.closePath()}for(var F=g;F<k;F+=g){n.beginPath();n.moveTo(0,F-0.5);n.lineTo(j,F-0.5);n.stroke();n.closePath()}$("#clear, #view_png, #tools li, #palette li").each(function(){var a=$(this);a.attr("title",a.text())});$("#clear").click(function(){$(".pixel").css("background","");p.clearRect(0,0,h,i);if(q)for(var a=0;a<i;a++)for(var b=0;b<h;b++){var c=r+b+":"+a;delete localStorage[c]}});$("#view_png").click(function(){document.location.href=o.toDataURL("image/png")});$("#tools").click(function(a){var b=$(a.target).closest("li");if(b.length>0){f=e[b.index()];$("#tools .selected").removeClass("selected");b.addClass("selected")}});$("#palette").click(function(a){var b=$(a.target).closest("li");b.length>0&&w(b.css(s))});$("#palette li").each(function(){var a=$(this);a.css("background",a.text())});$("#color").click(function(){var a=prompt("Please enter a color, e.g. red, #00FF00, rgb(0, 0, 255)",u.text());typeof a=="string"&&$.trim(a)!==""&&w(a)});w("HotPink")})
+\ No newline at end of file
diff --git a/games/pixelpaint/css/charms.css b/games/pixelpaint/css/charms.css
new file mode 100644
index 0000000..cbd7cbf
--- /dev/null
+++ b/games/pixelpaint/css/charms.css
@@ -0,0 +1,167 @@
+body {
+font-family:Segoe UI;
+margin:0px;
+padding:0px;
+}
+img, a {
+	outline:none;
+	border:none;
+}
+#splashscreen {
+margin:0;
+position:fixed;
+top:0;
+width:100%;
+height:100%;
+color:#FFFFFF;
+background-image:url('../splashscreen.png');
+background-position:center;
+background-color:#414141;
+background-repeat:no-repeat;
+animation:splash 4s;
+-ms-animation:splash 4s;
+-webkit-animation:splash 4s;
+-o-animation:splash 4s;
+opacity:0;
+z-index:-1;
+}
+@keyframes splash {
+from {
+z-index:999;
+opacity: 1;
+}
+66% {
+opacity: 1;
+}
+to {
+opacity:0;
+z-index:1;
+display:none;
+}
+}
+@-webkit-keyframes splash {
+from {
+z-index:999;
+opacity: 1;
+}
+66% {
+opacity: 1;
+}
+to {
+opacity:0;
+z-index:1;
+display:none;
+}
+}
+@-ms-keyframes splash {
+from {
+z-index:999;
+opacity: 1;
+}
+66% {
+opacity: 1;
+}
+to {
+opacity:0;
+z-index:1;
+display:none;
+}
+}
+@-o-keyframes splash {
+from {
+z-index:999;
+opacity: 1;
+}
+66% {
+opacity: 1;
+}
+to {
+opacity:0;
+z-index:1;
+display:none;
+}
+}
+#hoverarea {
+	position:fixed;
+	top:0px;
+	right:0px;
+	width:15px;
+	height:15px;
+}
+#bottomhoverarea {
+	position:fixed;
+	bottom:0px;
+	right:0px;
+	width:15px;
+	height:15px;
+}
+#starthoverarea {
+	position:fixed;
+	bottom:0px;
+	left:0px;
+	width:15px;
+	height:15px;
+}
+#charmsbar {
+	display:none;
+	background-color:#111111;
+	position:fixed;
+	padding:5% 0;
+	top:0px;
+	right:0px;
+	height:100%;
+	width: 86px;
+
+}
+#settingscharms {
+	padding : 40px;
+	display:none;
+	background-color:#3B66AD;
+	position:fixed;
+	top:0px;
+	right:0px;
+	height:100%;
+	width: 345px;
+
+}
+#startbutton {
+	display:none;
+	position:fixed;
+	left:0px;
+	bottom:0px;
+}
+#iconnetwork {
+	position:absolute;
+	top:35px;
+	left:25px;
+}
+#iconbattery {
+	position:absolute;
+	bottom:35px;
+	left:32px;
+}
+#datetime {
+	display:none;
+	position:fixed;
+	left:50px;
+	bottom:50px;
+	width:490px;
+	height:139px;
+	background-color: rgba(17,17,17,1);
+}
+#time {
+	position:absolute;
+	left:70px;
+	bottom:19px;
+	font-family: Segoe UI Light;
+	font-size: 64pt;
+	color:#FFFFFF;
+}
+#date {
+	margin-top:20px;
+	margin-right:20px;
+	float:right;
+	font-size:24pt;
+	font-family: Segoe UI;
+	color:#FFFFFF;
+}
diff --git a/games/pixelpaint/eraser.gif b/games/pixelpaint/eraser.gif
new file mode 100644
index 0000000..010432a
--- /dev/null
+++ b/games/pixelpaint/eraser.gif
diff --git a/games/pixelpaint/eraser.png b/games/pixelpaint/eraser.png
new file mode 100644
index 0000000..9e95b4a
--- /dev/null
+++ b/games/pixelpaint/eraser.png
diff --git a/games/pixelpaint/fill.gif b/games/pixelpaint/fill.gif
new file mode 100644
index 0000000..694c45a
--- /dev/null
+++ b/games/pixelpaint/fill.gif
diff --git a/games/pixelpaint/fill.png b/games/pixelpaint/fill.png
new file mode 100644
index 0000000..bb98e93
--- /dev/null
+++ b/games/pixelpaint/fill.png
diff --git a/games/pixelpaint/index.html b/games/pixelpaint/index.html
new file mode 100644
index 0000000..79976a5
--- /dev/null
+++ b/games/pixelpaint/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE>
+<html>
+<head>
+<title>Pixel Paint</title>
+<meta charset="utf-8">
+<meta http-equiv="x-ua-compatible" content="IE=edge">
+<link rel="stylesheet" href="style.css">
+<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
+<script src="code.js"></script>
+<!--[if IE 9]><style>#palette ul { height: 255px; }</style><![endif]-->
+    <!--Stylesheet that styles the charms bar and the startbutton -->
+    <link rel="stylesheet" href="css/charms.css"/>
+
+    <!--Script that powers the charms bar-->
+    <script>
+function charms(){
+	document.getElementById('charmsbar').style.display='block';
+	document.getElementById('datetime').style.display='block';
+}
+function destroycharms() {
+	document.getElementById('charmsbar').style.display='none';
+	document.getElementById('datetime').style.display='none';
+}
+function start(){
+	document.getElementById('startbutton').style.display='block';
+}
+function destroystart() {
+	document.getElementById('startbutton').style.display='none';
+}
+    </script>
+</head>
+<body>
+<div id="splashscreen"></div>
+<div id=container>
+<div id=canvas>
+<canvas id=grid width=512 height=512></canvas>
+<div id=pixels></div>
+</div>
+<div id=toolbar>
+<div id=toolbar_top><ul><li id=clear style="background-image: url(clear.png)"><span>Clear Canvas</span></li><li><canvas id=preview width=32 height=32 title=Preview></canvas></li><li id=view_png style="background-image: url(view.png)"><span>View PNG</span></li></ul></div>
+<div id=tools><ul><li style="background-image: url(eraser.png)"><span>Eraser</span></li><li style="background-image: url(picker.png)"><span>Color Picker</span></li><li class=selected style="background-image: url(pencil.png)"><span>Pen</span></li><li style="background-image: url(fill.png)"><span>Fill</span></li></ul></div>
+<div id=palette><ul><li>Black</li><li>White</li><li>Red</li><li>Green</li><li>Blue</li><li>Yellow</li><li>Grey</li><li>Purple</li></ul></div>
+</div>
+</div>
+</div>
+    <div id="hoverarea" onmouseover="charms()" class="hotcorner">
+</div>
+<div id="charmsbar" onmouseover="charms()" onmouseout="destroycharms()">
+<img src="../../common/img/charmsbar/search.png" onmouseover="this.src='../../common/img/charmsbar/search-hover.png'" onmouseout="this.src='../../common/img/charmsbar/search.png'"/><br/>
+<img src="../../common/img/charmsbar/share.png" onmouseover="this.src='../../common/img/charmsbar/share-hover.png'" onmouseout="this.src='../../common/img/charmsbar/share.png'"/><br/>
+<a href="../../start/index.html"><img src="../../common/img/charmsbar/start.png" onmouseover="this.src='../../common/img/charmsbar/start-hover.png'" onmouseout="this.src='../../common/img/charmsbar/start.png'"/></a><br/>
+<img src="../../common/img/charmsbar/devices.png" onmouseover="this.src='../../common/img/charmsbar/devices-hover.png'" onmouseout="this.src='../../common/img/charmsbar/devices.png'"/><br/>
+<img src="../../common/img/charmsbar/settings.png" onmouseover="this.src='../../common/img/charmsbar/settings-hover.png'" onmouseout="this.src='../../common/img/charmsbar/settings.png'" onclick="settingsc()"/><br/>
+</div>
+<div id="datetime">
+<img src="../../common/img/network.png" id="iconnetwork" height="24px" width="24px"/>
+<img src="../../common/img/battery.png" id="iconbattery"/>
+<span id="time"></span>
+<script language="javascript" type="text/javascript">
+<!-- Begin
+function clock() {
+var digital = new Date();
+var hours = digital.getHours();
+var minutes = digital.getMinutes();
+var seconds = digital.getSeconds();
+var amOrPm = "AM";
+if (hours > 11) amOrPm = "PM";
+if (hours > 12) hours = hours - 12;
+if (hours == 0) hours = 12;
+if (minutes <= 9) minutes = "0" + minutes;
+if (seconds <= 9) seconds = "0" + seconds;
+dispTime = hours + ":" + minutes ;
+document.getElementById('time').innerHTML = dispTime;
+setTimeout("clock()", 1000);
+}
+window.onload=clock;
+//  End -->
+</script>
+<div id="date"><script language="Javascript">
+
+ var dayName = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")
+
+ var monName = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
+
+ var now = new Date
+
+ document.write("" + dayName[now.getDay()] + "<br/>" +"<span id=month>" + monName[now.getMonth()] + " "+now.getDate() +"")
+ </script>
+</div>
+</div>
+<div id="bottomhoverarea" onmouseover="charms()" class="hotcorner">
+</div>
+<div id="starthoverarea" onmouseover="start()" class="hotcorner">
+</div>
+<div id="startbutton" onmouseout="destroystart()">
+<a href="../../start/index.html"><img src="../../common/img/start.png"/></a>
+</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/games/pixelpaint/pen.gif b/games/pixelpaint/pen.gif
new file mode 100644
index 0000000..1278ea2
--- /dev/null
+++ b/games/pixelpaint/pen.gif
diff --git a/games/pixelpaint/pencil.png b/games/pixelpaint/pencil.png
new file mode 100644
index 0000000..7f1f339
--- /dev/null
+++ b/games/pixelpaint/pencil.png
diff --git a/games/pixelpaint/picker.gif b/games/pixelpaint/picker.gif
new file mode 100644
index 0000000..14cf8d3
--- /dev/null
+++ b/games/pixelpaint/picker.gif
diff --git a/games/pixelpaint/picker.png b/games/pixelpaint/picker.png
new file mode 100644
index 0000000..5bb7c22
--- /dev/null
+++ b/games/pixelpaint/picker.png
diff --git a/games/pixelpaint/splashscreen.png b/games/pixelpaint/splashscreen.png
new file mode 100644
index 0000000..2fa2a9e
--- /dev/null
+++ b/games/pixelpaint/splashscreen.png
diff --git a/games/pixelpaint/style.css b/games/pixelpaint/style.css
new file mode 100644
index 0000000..37238c8
--- /dev/null
+++ b/games/pixelpaint/style.css
@@ -0,0 +1,37 @@
+body{margin:0;padding:0;font-family:Segoe UI;background:#404040}
+div,ul,li{margin:0;padding:0}
+#canvas,#pixels{width:512px;height:512px}
+#grid,#pixels{position:absolute;top:7px;left:7px}
+.pixel:hover,#palette li:hover,#tools li:hover,#palette li:hover,#clear:hover,#view_png:hover,#color:hover{cursor:pointer}
+#pixels,#toolbar{-webkit-box-shadow:0 0 5px black;-moz-box-shadow:0 0 5px black;box-shadow:0 0 5px black}
+#canvas,#toolbar_top,#tools,#palette,#color{border-left:solid 1px #DDD;border-right:solid 1px #999}
+#toolbar,#color{}
+#canvas,#toolbar_top,#tools,#palette,#color{background:#696969}
+#toolbar_top,#tools,#palette{padding:5px 5px 0}
+#tools *,#palette *{-webkit-user-select:none}
+#tools ul,#palette ul,#toolbar_top ul{width:120px;padding:5px 5px 0;background:#101010;list-style:none;}
+#tools li,#clear,#view_png{background-repeat:no-repeat;background-position:center center}
+#tools li span,#palette li,#clear span,#view_png span{overflow:hidden;text-indent:-9999px}
+#clear span,#view_png span{width:32px;height:32px;display:inline-block}
+#tools li span,#clear span,#view_png span{background-color:rgba(60,60,60,0.6);}
+#toolbar_top li,#tools li{}
+#toolbar_top,#color div{}
+#container{width:700px;margin:50px auto;position:relative}
+#canvas{padding:7px;position:absolute;top:0;left:0;border-top:solid 1px #DDD;border-bottom:solid 1px #999;}
+#grid{background:white}
+.pixel{display:inline-block;float:left}
+#toolbar{position:absolute;top:0;right:0}
+#toolbar_top{padding:5px 5px 0;border-top:solid 1px #DDD;}
+#toolbar_top ul{height:44px}
+#toolbar_top li{width:32px;height:32px;margin:4px;float:left}
+#preview{background:white!important}
+#tools{}
+#tools ul{height:125px}
+#tools li{width:50px;height:50px;margin:5px;display:inline-block}
+#tools span{width:50px;height:50px;display:inline-block}
+#tools .selected{background-color:#0000FF;}
+#palette{background:-webkit-gradient(linear,left top,left bottom,from(#666),to(#555));background:-moz-linear-gradient(top,#666,#555)}
+#palette ul{height:245px}
+#palette li{margin:5px;width:40px;height:40px;border:solid 5px white;display:inline-block;-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;-webkit-box-shadow:0 0 10px black,inset 0 0 5px rgba(0,0,0,0.7);-moz-box-shadow:0 0 10px black,inset 0 0 5px rgba(0,0,0,0.7);box-shadow:0 0 10px black,inset 0 0 5px rgba(0,0,0,0.7)}
+#color{padding:5px;border-bottom:solid 1px #999;background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#444));background:-moz-linear-gradient(top,#555,#444)}
+#color div{width:130px;padding:10px 0 12px;font-family:Segoe UI Light;font-size:14pt;text-transform:uppercase;text-align:center;color:white}
+\ No newline at end of file
diff --git a/games/pixelpaint/view.gif b/games/pixelpaint/view.gif
new file mode 100644
index 0000000..cd2950c
--- /dev/null
+++ b/games/pixelpaint/view.gif
diff --git a/games/pixelpaint/view.png b/games/pixelpaint/view.png
new file mode 100644
index 0000000..892a60b
--- /dev/null
+++ b/games/pixelpaint/view.png