aboutsummaryrefslogtreecommitdiff
path: root/games
diff options
context:
space:
mode:
Diffstat (limited to 'games')
-rw-r--r--games/battleship/batt1.gifbin0 -> 871 bytes
-rw-r--r--games/battleship/batt10.gifbin0 -> 871 bytes
-rw-r--r--games/battleship/batt100.gifbin0 -> 824 bytes
-rw-r--r--games/battleship/batt101.gifbin0 -> 866 bytes
-rw-r--r--games/battleship/batt102.gifbin0 -> 881 bytes
-rw-r--r--games/battleship/batt103.gifbin0 -> 899 bytes
-rw-r--r--games/battleship/batt2.gifbin0 -> 865 bytes
-rw-r--r--games/battleship/batt201.gifbin0 -> 851 bytes
-rw-r--r--games/battleship/batt202.gifbin0 -> 834 bytes
-rw-r--r--games/battleship/batt203.gifbin0 -> 848 bytes
-rw-r--r--games/battleship/batt204.gifbin0 -> 849 bytes
-rw-r--r--games/battleship/batt205.gifbin0 -> 849 bytes
-rw-r--r--games/battleship/batt206.gifbin0 -> 855 bytes
-rw-r--r--games/battleship/batt3.gifbin0 -> 866 bytes
-rw-r--r--games/battleship/batt4.gifbin0 -> 864 bytes
-rw-r--r--games/battleship/batt5.gifbin0 -> 869 bytes
-rw-r--r--games/battleship/batt6.gifbin0 -> 873 bytes
-rw-r--r--games/battleship/batt7.gifbin0 -> 882 bytes
-rw-r--r--games/battleship/batt8.gifbin0 -> 882 bytes
-rw-r--r--games/battleship/batt9.gifbin0 -> 883 bytes
-rw-r--r--games/battleship/common.css171
-rw-r--r--games/battleship/index.html401
-rw-r--r--games/battleship/splashscreen.pngbin0 -> 5627 bytes
-rw-r--r--games/pixelpaint/clear.gifbin0 -> 142 bytes
-rw-r--r--games/pixelpaint/clear.pngbin0 -> 3576 bytes
-rw-r--r--games/pixelpaint/code.js1
-rw-r--r--games/pixelpaint/css/charms.css167
-rw-r--r--games/pixelpaint/eraser.gifbin0 -> 131 bytes
-rw-r--r--games/pixelpaint/eraser.pngbin0 -> 3530 bytes
-rw-r--r--games/pixelpaint/fill.gifbin0 -> 135 bytes
-rw-r--r--games/pixelpaint/fill.pngbin0 -> 3403 bytes
-rw-r--r--games/pixelpaint/index.html99
-rw-r--r--games/pixelpaint/pen.gifbin0 -> 119 bytes
-rw-r--r--games/pixelpaint/pencil.pngbin0 -> 3449 bytes
-rw-r--r--games/pixelpaint/picker.gifbin0 -> 111 bytes
-rw-r--r--games/pixelpaint/picker.pngbin0 -> 3375 bytes
-rw-r--r--games/pixelpaint/splashscreen.pngbin0 -> 15857 bytes
-rw-r--r--games/pixelpaint/style.css37
-rw-r--r--games/pixelpaint/view.gifbin0 -> 121 bytes
-rw-r--r--games/pixelpaint/view.pngbin0 -> 3535 bytes
-rw-r--r--games/symbolistic/click.mp3bin0 -> 1252 bytes
-rw-r--r--games/symbolistic/css/charms.css166
-rw-r--r--games/symbolistic/index.html141
-rw-r--r--games/symbolistic/script.jsbin0 -> 7202 bytes
-rw-r--r--games/symbolistic/splashscreen.pngbin0 -> 10904 bytes
-rw-r--r--games/symbolistic/style.css1
46 files changed, 1184 insertions, 0 deletions
diff --git a/games/battleship/batt1.gif b/games/battleship/batt1.gif
new file mode 100644
index 0000000..eac0022
--- /dev/null
+++ b/games/battleship/batt1.gif
Binary files differ
diff --git a/games/battleship/batt10.gif b/games/battleship/batt10.gif
new file mode 100644
index 0000000..0629114
--- /dev/null
+++ b/games/battleship/batt10.gif
Binary files differ
diff --git a/games/battleship/batt100.gif b/games/battleship/batt100.gif
new file mode 100644
index 0000000..ccc7e60
--- /dev/null
+++ b/games/battleship/batt100.gif
Binary files differ
diff --git a/games/battleship/batt101.gif b/games/battleship/batt101.gif
new file mode 100644
index 0000000..9aed99e
--- /dev/null
+++ b/games/battleship/batt101.gif
Binary files differ
diff --git a/games/battleship/batt102.gif b/games/battleship/batt102.gif
new file mode 100644
index 0000000..791bda9
--- /dev/null
+++ b/games/battleship/batt102.gif
Binary files differ
diff --git a/games/battleship/batt103.gif b/games/battleship/batt103.gif
new file mode 100644
index 0000000..8dd900d
--- /dev/null
+++ b/games/battleship/batt103.gif
Binary files differ
diff --git a/games/battleship/batt2.gif b/games/battleship/batt2.gif
new file mode 100644
index 0000000..d825f39
--- /dev/null
+++ b/games/battleship/batt2.gif
Binary files differ
diff --git a/games/battleship/batt201.gif b/games/battleship/batt201.gif
new file mode 100644
index 0000000..65ae3a1
--- /dev/null
+++ b/games/battleship/batt201.gif
Binary files differ
diff --git a/games/battleship/batt202.gif b/games/battleship/batt202.gif
new file mode 100644
index 0000000..d44b498
--- /dev/null
+++ b/games/battleship/batt202.gif
Binary files differ
diff --git a/games/battleship/batt203.gif b/games/battleship/batt203.gif
new file mode 100644
index 0000000..9a61163
--- /dev/null
+++ b/games/battleship/batt203.gif
Binary files differ
diff --git a/games/battleship/batt204.gif b/games/battleship/batt204.gif
new file mode 100644
index 0000000..64e0fe7
--- /dev/null
+++ b/games/battleship/batt204.gif
Binary files differ
diff --git a/games/battleship/batt205.gif b/games/battleship/batt205.gif
new file mode 100644
index 0000000..c243903
--- /dev/null
+++ b/games/battleship/batt205.gif
Binary files differ
diff --git a/games/battleship/batt206.gif b/games/battleship/batt206.gif
new file mode 100644
index 0000000..bbbee53
--- /dev/null
+++ b/games/battleship/batt206.gif
Binary files differ
diff --git a/games/battleship/batt3.gif b/games/battleship/batt3.gif
new file mode 100644
index 0000000..28345e7
--- /dev/null
+++ b/games/battleship/batt3.gif
Binary files differ
diff --git a/games/battleship/batt4.gif b/games/battleship/batt4.gif
new file mode 100644
index 0000000..95aba94
--- /dev/null
+++ b/games/battleship/batt4.gif
Binary files differ
diff --git a/games/battleship/batt5.gif b/games/battleship/batt5.gif
new file mode 100644
index 0000000..1dc9b9f
--- /dev/null
+++ b/games/battleship/batt5.gif
Binary files differ
diff --git a/games/battleship/batt6.gif b/games/battleship/batt6.gif
new file mode 100644
index 0000000..21b951f
--- /dev/null
+++ b/games/battleship/batt6.gif
Binary files differ
diff --git a/games/battleship/batt7.gif b/games/battleship/batt7.gif
new file mode 100644
index 0000000..87d8d65
--- /dev/null
+++ b/games/battleship/batt7.gif
Binary files differ
diff --git a/games/battleship/batt8.gif b/games/battleship/batt8.gif
new file mode 100644
index 0000000..890c402
--- /dev/null
+++ b/games/battleship/batt8.gif
Binary files differ
diff --git a/games/battleship/batt9.gif b/games/battleship/batt9.gif
new file mode 100644
index 0000000..2060538
--- /dev/null
+++ b/games/battleship/batt9.gif
Binary files differ
diff --git a/games/battleship/common.css b/games/battleship/common.css
new file mode 100644
index 0000000..01fd8f5
--- /dev/null
+++ b/games/battleship/common.css
@@ -0,0 +1,171 @@
+body {
+ font-family:Segoe UI;
+ color:#FFFFFF;
+ 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:#336BCD;
+ 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;
+}
+#date {
+ margin-top:20px;
+ margin-right:20px;
+ float:right;
+ font-size:24pt;
+ font-family: Segoe UI;
+ color:#FFFFFF;
+}
+iframe {
+ position:relative;
+ border:none;
+} \ No newline at end of file
diff --git a/games/battleship/index.html b/games/battleship/index.html
new file mode 100644
index 0000000..46d32a8
--- /dev/null
+++ b/games/battleship/index.html
@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<html>
+<meta http-equiv="x-ua-compatible" content="IE=edge">
+<title>Battleship</title>
+ <link rel="stylesheet" href="common.css"/>
+ <style>
+body {
+ background-color:#2854A0;
+ font-family:Segoe UI;
+ color:#FFFFFF;
+}
+#title {
+ font : normal 48pt Segoe UI Light;
+ padding:20px;
+ display:inline;
+}
+#back {
+ display:inline;
+ margin: 0 30px;
+}
+.intro {
+ font-size:10pt;
+ font-style:italic;
+}
+.heading {
+ font-size:20pt;
+ font-family:Segoe UI Light;
+}
+.title {
+ font-size:18pt;
+ background-color:navy;
+ color:white;
+ text-align:center;
+ font-family:Segoe UI Light;
+}
+table {
+margin-top:60px;
+}
+td {
+padding: 30px 50px 0px 0px;
+}
+</style>
+ <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>
+
+<script>
+<!-- Begin
+/* Information used to draw the ships
+*/
+var ship = [[[1,5], [1,2,5], [1,2,3,5], [1,2,3,4,5]], [[6,10], [6,7,10], [6,7,8,10], [6,7,8,9,10]]];
+
+/* Information used to draw sunk ships
+*/
+var dead = [[[201,203], [201,202,203], [201,202,202,203], [201,202,202,202,203]], [[204,206], [204,205,206], [204,205,205,206], [204,205,205,205,206]]];
+
+/* Information used to describe ships
+*/
+var shiptypes = [["Minesweeper",2,4],["Frigate",3,4],[ "Cruiser",4,2],[ "Battleship",5,1]];
+
+var gridx = 16, gridy = 16;
+var player = [], computer = [], playersships = [], computersships = [];
+var playerlives = 0, computerlives = 0, playflag=true, statusmsg="";
+
+/* Function to preload all the images, to prevent delays during play
+*/
+var preloaded = [];
+function imagePreload() {
+var i,ids = [1,2,3,4,5,6,7,8,9,10,100,101,102,103,201,202,203,204,205,206];
+window.status = "Preloading images...please wait";
+for (i=0;i<ids.length;++i) {
+var img = new Image, name = "batt"+ids[i]+".gif";
+img.src = name;
+preloaded[i] = img;
+}
+window.status = "";
+}
+
+/* Function to place the ships in the grid
+*/
+function setupPlayer(ispc) {
+var y,x;
+grid = [];
+for (y=0;y<gridx;++y) {
+grid[y] = [];
+for (x=0;x<gridx;++x)
+grid[y][x] = [100,-1,0];
+}
+
+var shipno = 0;
+var s;
+for (s=shiptypes.length-1;s>=0;--s) {
+var i;
+for (i=0;i<shiptypes[s][2];++i) {
+var d = Math.floor(Math.random()*2);
+var len = shiptypes[s][1], lx=gridx, ly=gridy, dx=0, dy=0;
+if ( d==0) {
+lx = gridx-len;
+dx=1;
+}
+else {
+ly = gridy-len;
+dy=1;
+}
+var x,y,ok;
+do {
+y = Math.floor(Math.random()*ly);
+x = Math.floor(Math.random()*lx);
+var j,cx=x,cy=y;
+ok = true;
+for (j=0;j<len;++j) {
+if (grid[cy][cx][0] < 100) {
+ok=false;
+break;
+}
+cx+=dx;
+cy+=dy;
+}
+} while(!ok);
+var j,cx=x,cy=y;
+for (j=0;j<len;++j) {
+grid[cy][cx][0] = ship[d][s][j];
+grid[cy][cx][1] = shipno;
+grid[cy][cx][2] = dead[d][s][j];
+cx+=dx;
+cy+=dy;
+}
+if (ispc) {
+computersships[shipno] = [s,shiptypes[s][1]];
+computerlives++;
+}
+else {
+playersships[shipno] = [s,shiptypes[s][1]];
+playerlives++;
+}
+shipno++;
+}
+}
+return grid;
+}
+
+/* Function to change an image shown on a grid
+*/
+function setImage(y,x,id,ispc) {
+if ( ispc ) {
+computer[y][x][0] = id;
+document.images["pc"+y+"_"+x].src = "batt"+id+".gif";
+}
+else {
+player[y][x][0] = id;
+document.images["ply"+y+"_"+x].src = "batt"+id+".gif";
+}
+}
+
+/* Function to insert HTML source for a grid
+*/
+function showGrid(ispc) {
+var y,x;
+for (y=0;y<gridy;++y) {
+for (x=0;x<gridx;++x) {
+if ( ispc )
+document.write ('<a href="javascript:gridClick('+y+','+x+');"><img name="pc'+y+'_'+x+'" src="batt100.gif" width=16 height=16></a>');
+else
+document.write ('<a href="javascript:void(0);"><img name="ply'+y+'_'+x+'" src="batt'+player[y][x][0]+'.gif" width=16 height=16></a>');
+}
+document.write('<br>');
+}
+}
+
+/* Handler for clicking on the grid
+*/
+function gridClick(y,x) {
+if ( playflag ) {
+if (computer[y][x][0] < 100) {
+setImage(y,x,103,true);
+var shipno = computer[y][x][1];
+if ( --computersships[shipno][1] == 0 ) {
+sinkShip(computer,shipno,true);
+alert("You sank my "+shiptypes[computersships[shipno][0]][0]+"!");
+updateStatus();
+if ( --computerlives == 0 ) {
+alert("You win! Press the Refresh button on\n"+
+"your browser to play another game.");
+playflag = false;
+}
+}
+if ( playflag ) computerMove();
+}
+else if (computer[y][x][0] == 100) {
+setImage(y,x,102,true);
+computerMove();
+}
+}
+}
+
+/* Function to make the computers move. Note that the computer does not cheat, oh no!
+*/
+function computerMove() {
+var x,y,pass;
+var sx,sy;
+var selected = false;
+
+/* Make two passes during 'shoot to kill' mode
+*/
+for (pass=0;pass<2;++pass) {
+for (y=0;y<gridy && !selected;++y) {
+for (x=0;x<gridx && !selected;++x) {
+/* Explosion shown at this position
+*/
+if (player[y][x][0]==103) {
+sx=x; sy=y;
+var nup=(y>0 && player[y-1][x][0]<=100);
+var ndn=(y<gridy-1 && player[y+1][x][0]<=100);
+var nlt=(x>0 && player[y][x-1][0]<=100);
+var nrt=(x<gridx-1 && player[y][x+1][0]<=100);
+if ( pass == 0 ) {
+/* On first pass look for two explosions
+in a row - next shot will be inline
+*/
+var yup=(y>0 && player[y-1][x][0]==103);
+var ydn=(y<gridy-1 && player[y+1][x][0]==103);
+var ylt=(x>0 && player[y][x-1][0]==103);
+var yrt=(x<gridx-1 && player[y][x+1][0]==103);
+if ( nlt && yrt) { sx = x-1; selected=true; }
+else if ( nrt && ylt) { sx = x+1; selected=true; }
+else if ( nup && ydn) { sy = y-1; selected=true; }
+else if ( ndn && yup) { sy = y+1; selected=true; }
+}
+else {
+/* Second pass look for single explosion -
+fire shots all around it
+*/
+if ( nlt ) { sx=x-1; selected=true; }
+else if ( nrt ) { sx=x+1; selected=true; }
+else if ( nup ) { sy=y-1; selected=true; }
+else if ( ndn ) { sy=y+1; selected=true; }
+}
+}
+}
+}
+}
+if ( !selected ) {
+/* Nothing found in 'shoot to kill' mode, so we're just taking
+potshots. Random shots are in a chequerboard pattern for
+maximum efficiency, and never twice in the same place
+*/
+do{
+sy = Math.floor(Math.random() * gridy);
+sx = Math.floor(Math.random() * gridx/2)*2+sy%2;
+} while( player[sy][sx][0]>100 );
+}
+if (player[sy][sx][0] < 100) {
+/* Hit something
+*/
+setImage(sy,sx,103,false);
+var shipno = player[sy][sx][1];
+if ( --playersships[shipno][1] == 0 ) {
+sinkShip(player,shipno,false);
+alert("I sank your "+shiptypes[playersships[shipno][0]][0]+"!");
+if ( --playerlives == 0 ) {
+knowYourEnemy();
+alert("I win! Press the Refresh button on\n"+
+"your browser to play another game.");
+playflag = false;
+}
+}
+}
+else {
+/* Missed
+*/
+setImage(sy,sx,102,false);
+}
+}
+
+/* When whole ship is hit, show it using changed graphics
+*/
+function sinkShip(grid,shipno,ispc) {
+var y,x;
+for (y=0;y<gridx;++y) {
+for (x=0;x<gridx;++x) {
+if ( grid[y][x][1] == shipno )
+if (ispc) setImage(y,x,computer[y][x][2],true);
+else setImage(y,x,player[y][x][2],false);
+}
+}
+}
+
+/* Show location of all the computers ships - when player has lost
+*/
+function knowYourEnemy() {
+var y,x;
+for (y=0;y<gridx;++y) {
+for (x=0;x<gridx;++x) {
+if ( computer[y][x][0] == 103 )
+setImage(y,x,computer[y][x][2],true);
+else if ( computer[y][x][0] < 100 )
+setImage(y,x,computer[y][x][0],true);
+}
+}
+}
+
+/* Show how many ships computer has left
+*/
+function updateStatus() {
+var f=false,i,s = "Computer has ";
+for (i=0;i<computersships.length;++i) {
+if (computersships[i][1] > 0) {
+if (f) s=s+", "; else f=true;
+s = s + shiptypes[computersships[i][0]][0];
+}
+}
+if (!f) s = s + "nothing left, thanks to you!";
+statusmsg = s;
+window.status = statusmsg;
+}
+function setStatus() {
+window.status = statusmsg;
+}
+/* Start the game!
+*/
+imagePreload();
+player = setupPlayer(false);
+computer = setupPlayer(true);
+document.write("<div align='center'><table><tr><td align='center'><span class='heading'>COMPUTER'S FLEET</span></td>"+
+"<td align='center'><span class='heading'>PLAYER'S FLEET</span></td></tr><tr><td>");
+showGrid(true);
+document.write("</td><td>");
+showGrid(false);
+document.write("</td></tr></table></div>");
+updateStatus();
+setInterval("setStatus();", 500);
+// End -->
+</script>
+
+<div id="splashscreen"></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>
+</html> \ No newline at end of file
diff --git a/games/battleship/splashscreen.png b/games/battleship/splashscreen.png
new file mode 100644
index 0000000..6cd3608
--- /dev/null
+++ b/games/battleship/splashscreen.png
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
diff --git a/games/symbolistic/click.mp3 b/games/symbolistic/click.mp3
new file mode 100644
index 0000000..53949c0
--- /dev/null
+++ b/games/symbolistic/click.mp3
Binary files differ
diff --git a/games/symbolistic/css/charms.css b/games/symbolistic/css/charms.css
new file mode 100644
index 0000000..f73490b
--- /dev/null
+++ b/games/symbolistic/css/charms.css
@@ -0,0 +1,166 @@
+body {
+font-family:Segoe UI;
+margin:0px;
+padding:0px;
+}
+img, a {
+ outline:none;
+ border:none;
+}
+#splashscreen {
+margin:0;
+position:fixed;
+width:100%;
+height:100%;
+color:#FFFFFF;
+background-image:url('../splashscreen.png');
+background-position:center;
+background-color:#1E7FE8;
+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/symbolistic/index.html b/games/symbolistic/index.html
new file mode 100644
index 0000000..4b8882a
--- /dev/null
+++ b/games/symbolistic/index.html
@@ -0,0 +1,141 @@
+<!doctype html>
+<html manifest="manifest.appcache">
+<head>
+ <meta charset=utf-8>
+ <title>Symbolistic!</title>
+
+
+ <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
+ <meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+
+
+ <meta name=apple-mobile-web-app-capable content=yes />
+
+
+
+ <link rel=stylesheet href='style.css'>
+ <!--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';
+ document.getElementById('time').style.display='block';
+}
+function destroycharms() {
+ document.getElementById('charmsbar').style.display='none';
+ document.getElementById('datetime').style.display='none';
+ document.getElementById('time').style.display='none';
+}
+function start(){
+ document.getElementById('startbutton').style.display='block';
+}
+function destroystart() {
+ document.getElementById('startbutton').style.display='none';
+}
+ </script>
+
+</head>
+
+<body class=s-w>
+<div id="splashscreen"></div>
+ <div id=start class=modal>
+ <p class=sp></p>
+ <div>
+ <h1>Symbolistic!</h1>
+ <p>Match the shape by selecting correct symbols.<br/>
+ Each correct match gives you points and additional time, so be quick!</p>
+ <button id=bS>Click to Start</button>
+ </div>
+ </div>
+ <div id=gameover class=modal>
+ <p class=sp></p>
+ <div>
+
+ <h2>You symbolistic, you! \o/</h2>
+ <p>
+ In total, you got <strong><span id=goPoints></span> points</strong> and survived for <strong><span id=goSeconds></span> seconds</strong>!
+ <span id=goHigh><br/>Your highest score so far has been <span id=goHighPoints></span> points</span>
+ </p>
+ <button id=bA>Play again</button>
+ or <a id=twBrag href="" target=_blank>Twitter brag »</a>
+ </div>
+ </div>
+
+ <header>
+ <span>Look for</span><span id=answer>?</span>
+ <span>Time</span><span id=stopwatch>00:00:00</span>
+ <span>Points</span><span id=points>00</span>
+ </header>
+ <div id=tiles>
+ </div>
+
+ <footer>
+
+ </footer>
+
+
+
+ <audio id=sClick>
+ <source src="click.mp3">
+ </audio>
+
+ <!-- CHARMS BAR CODE -->
+<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>
+ <script defer src='script.js'></script>
+
+</body>
+</html> \ No newline at end of file
diff --git a/games/symbolistic/script.js b/games/symbolistic/script.js
new file mode 100644
index 0000000..c16a73f
--- /dev/null
+++ b/games/symbolistic/script.js
Binary files differ
diff --git a/games/symbolistic/splashscreen.png b/games/symbolistic/splashscreen.png
new file mode 100644
index 0000000..3766e0d
--- /dev/null
+++ b/games/symbolistic/splashscreen.png
Binary files differ
diff --git a/games/symbolistic/style.css b/games/symbolistic/style.css
new file mode 100644
index 0000000..3183633
--- /dev/null
+++ b/games/symbolistic/style.css
@@ -0,0 +1 @@
+html,body{margin:0;padding:0;height:100%}body{margin:0;font:20px "Segoe UI",Arial,sans-serif;font-weight:400;background:#fff;color:#212121}a,a:visited{color:#1e7fe8}a:hover{color:#196ec4}header,#tiles,h1,h2,h3{text-shadow:0 -1px 1px rgba(0,0,0,0.1)}.modal{display:block;visibility:hidden;position:fixed;top:0;left:0;width:100%;height:100%;min-height:100%;text-align:center;background-color:rgba(0,0,0,0.7);z-index:4}.modal .sp{height:50%;font-size:0}.modal div{padding:10px 0 30px 0;margin:0 auto;background:#fff;-moz-box-shadow:0 1px 20px rgba(0,0,0,0.7);-webkit-box-shadow:0 1px 20px rgba(0,0,0,0.7);box-shadow:0 1px 20px rgba(0,0,0,0.7)}.modal h3{margin:20px 0}.modal button{display:block;margin:20px auto}.s-w #start{visibility:visible;-webkit-animation-name:fadein;-webkit-animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;-moz-animation-name:fadein;-moz-animation-duration:.3s;-moz-animation-timing-function:ease-in-out}.s-p #start{-webkit-animation-name:fadeout;-webkit-animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;-moz-animation-name:fadeout;-moz-animation-duration:.3s;-moz-animation-timing-function:ease-in-out}@-webkit-keyframes fadeout{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}@-moz-keyframes fadeout{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}.s-go #gameover{visibility:visible;-webkit-animation-name:fadein;-webkit-animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;-moz-animation-name:fadein;-moz-animation-duration:.3s;-moz-animation-timing-function:ease-in-out}#gameover a{text-decoration:none;color:rgba(0,0,0,0.5)}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fadein{0%{opacity:0}100%{opacity:1}}#goHigh{display:none;color:rgba(0,0,0,0.5)}.localstorage #goHigh{display:inline!important}#notification{padding:10px 0;text-align:center;background:#ffc000;z-index:999}#notification span{font-weight:bold}header{text-align:center;font-size:70px}header span{position:relative;top:-30px;margin-right:10px;font-size:20px}#answer,#answer span,#stopwatch,#points{top:0;font-size:70px!important}#answer{display:inline-block;position:relative;top:-0.1em;width:1em;height:1em;margin-right:30px;margin-left:-5px}#answer span{position:absolute;text-align:center;width:inherit}#stopwatch{margin-right:30px;letter-spacing:-0.06em;-webkit-transition:color .5s ease-in-out;-moz-transition:color .5s ease-in-out;-o-transition:color .5s ease-in-out;-ms-transition:color .5s ease-in-out;transition:color .5s ease-in-out}#stopwatch.moar{color:#36bc09!important}#stopwatch.low,#stopwatch.gameover{color:#aa0d0d}.s-p #stopwatch.low{-webkit-animation-name:pulsate;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;-moz-animation-name:pulsate;-moz-animation-duration:1s;-moz-animation-timing-function:ease-in-out;-moz-animation-iteration-count:infinite}@-webkit-keyframes pulsate{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}@-moz-keyframes pulsate{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}#points{letter-spacing:-0.06em;text-shadow:0 -1px 1px rgba(0,0,0,0.1)}#tiles{margin:20px auto;font-size:70px;text-align:center;-webkit-text-size-adjust:none;-webkit-user-select:none;-webkit-touch-callout:none}#tiles:before,.tiles:after{content:"";display:table}#tiles:after{clear:both}#tiles.correct .selected{background:#53cc43}button{display:inline-block;width:150px;height:150px;padding:0;margin:5px;color:#fff;font:1em "Open Sans",Arial,sans-serif;text-align:center;line-height:150px;text-shadow:0 -1px 1px rgba(0,0,0,0.1);background:#1e7fe8;border:0;border:0 solid white;-webkit-transition:background .2s ease-in-out;-moz-transition:background .2s ease-in-out;-o-transition:background .2s ease-in-out;-ms-transition:background .2s ease-in-out;transition:background .2s ease-in-out;cursor:pointer}button:hover{background:#196ec4}button:active,button.selected{line-height:145px;font-size:90%;background:#6aaaf0;border:5px solid #fff;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}footer{margin:70px 10px 10px 10px;padding:10px;text-align:center;font-size:16px;color:rgba(0,0,0,0.4);text-shadow:0 1px 1px rgba(255,255,255,0.2);border-top:1px dashed rgba(0,0,0,0.1)} \ No newline at end of file