restructure

2018-08-27 23:17:47 +01:00
parent 68e9379baf
commit 58d5e3d748
34 changed files with 1 additions and 1 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,54 @@
+<!----------------------------------------------------------------------->
+<!--                                                                   -->
+<!--                      TAIKO WEB TATSUJIN                           -->
+<!--                           2015-2018                               -->
+<!--           Created by Clemaister, maintained by Bui                -->
+<!--               https://github.com/bui/taiko-web                    -->
+<!--                                                                   -->
+<!----------------------------------------------------------------------->
+
+
+<!DOCTYPE html>
+<html>
+<meta charset="UTF-8">
+<head>
+    
+	<title>太鼓の達人ウェブ - Taiko no Tatsujin Web</title>
+	<link rel="stylesheet" href="/src/css/main.css"/>
+	<link rel="stylesheet" href="/src/css/loader.css">
+	<link rel="stylesheet" href="/src/css/titlescreen.css">
+	<link rel="stylesheet" href="/src/css/songselect.css">
+	<link rel="stylesheet" href="/src/css/scoresheet.css">
+	<link rel="stylesheet" href="/src/css/loadsong.css">
+	<link rel="stylesheet" href="/src/css/game.css">
+	<link rel="stylesheet" href="/src/css/animations.css">
+	
+	<link rel="icon" href="/assets/img/favicon.png" type="image/png"> 
+	<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/png">
+
+	<script type='application/javascript' src='/src/js/lib/jquery.js'></script>
+	<script type='application/javascript' src='/src/js/lib/jquery-ui.js'></script>
+	<script type='application/javascript' src='/src/js/lib/fontdetect.min.js'></script>
+    
+    <script type='application/javascript' src='/src/js/assets.js'></script>
+    <script type='application/javascript' src='/src/js/loader.js'></script>
+    <script type='application/javascript' src='/src/js/loadsong.js'></script>
+    <script type='application/javascript' src='/src/js/parsesong.js'></script>
+    <script type='application/javascript' src='/src/js/titlescreen.js'></script>
+    <script type='application/javascript' src='/src/js/scoresheet.js'></script>
+    <script type='application/javascript' src='/src/js/songselect.js'></script>
+    <script type='application/javascript' src='/src/js/soundsystem.js'></script>
+    <script type='application/javascript' src='/src/js/keyboard.js'></script>
+    <script type='application/javascript' src='/src/js/game.js'></script>
+    <script type='application/javascript' src='/src/js/controller.js'></script>
+    <script type='application/javascript' src='/src/js/circle.js'></script>
+	<script type='application/javascript' src='/src/js/main.js'></script>
+    <script type='application/javascript' src='/src/js/view.js'></script>
+    <script type='application/javascript' src='/src/js/bufferedloop.js'></script>
+    
+</head>
+<body>
+	<div id="assets"></div>
+	<div id="screen"></div>
+</body>
+</html>
--- a/public/src/css/animations.css
+++ b/public/src/css/animations.css
@@ -0,0 +1,58 @@
+@keyframes don-normal {
+0%{background-position-y:0px}
+6.35%{background-position-y:-184px}
+7.94%{background-position-y:-368px}
+9.52%{background-position-y:-552px}
+11.11%{background-position-y:-736px}
+12.7%{background-position-y:-920px}
+14.29%{background-position-y:-1104px}
+15.87%{background-position-y:-1104px}
+17.46%{background-position-y:-920px}
+19.05%{background-position-y:-736px}
+20.63%{background-position-y:-552px}
+22.22%{background-position-y:-368px}
+23.81%{background-position-y:-184px}
+25.4%{background-position-y:0px}
+31.75%{background-position-y:-184px}
+33.33%{background-position-y:-368px}
+34.92%{background-position-y:-552px}
+36.51%{background-position-y:-736px}
+38.1%{background-position-y:-920px}
+39.68%{background-position-y:-1104px}
+41.27%{background-position-y:-1104px}
+42.86%{background-position-y:-920px}
+44.44%{background-position-y:-736px}
+46.03%{background-position-y:-552px}
+47.62%{background-position-y:-368px}
+49.21%{background-position-y:-184px}
+50.79%{background-position-y:0px}
+57.14%{background-position-y:-184px}
+58.73%{background-position-y:-368px}
+60.32%{background-position-y:-552px}
+61.9%{background-position-y:-736px}
+63.49%{background-position-y:-920px}
+65.08%{background-position-y:-1104px}
+66.67%{background-position-y:-1104px}
+68.25%{background-position-y:-920px}
+69.84%{background-position-y:-1288px}
+71.43%{background-position-y:-1472px}
+73.02%{background-position-y:-1656px}
+74.6%{background-position-y:-1840px}
+76.19%{background-position-y:-2024px}
+77.78%{background-position-y:-2024px}
+79.37%{background-position-y:-2024px}
+80.95%{background-position-y:-2024px}
+82.54%{background-position-y:-1840px}
+84.13%{background-position-y:-1656px}
+85.71%{background-position-y:-1472px}
+87.3%{background-position-y:-1288px}
+88.89%{background-position-y:-2392px}
+90.48%{background-position-y:-2208px}
+92.06%{background-position-y:-2208px}
+93.65%{background-position-y:-2392px}
+95.24%{background-position-y:-2576px}
+96.83%{background-position-y:-2760px}
+98.41%{background-position-y:-2944px}
+100%{background-position-y:-3128px}
+}
+
--- a/public/src/css/game.css
+++ b/public/src/css/game.css
@@ -0,0 +1,43 @@
+#game{
+	width:100%;
+	height:100%;
+	overflow: hidden;
+}
+
+#canvas{
+	width:100%;
+	height:100%;
+}
+
+#pause-menu{
+    display:none;
+    width:100%;
+    height:100%;
+    position:absolute;
+    top:0;
+    left:0;
+    background:rgba(0,0,0,0.75);
+    z-index: 5;
+}
+
+#pause-menu button{
+	
+	width: 90%;
+	height: 25%;
+	display: block;
+	margin: auto auto 30px;
+	cursor: pointer;
+	border:5px solid #ae7a26;
+	background: rgb(255, 255, 255);
+	color: black;
+	font-family: TnT;
+	font-size: 5vmin;
+	border-radius: 10px;
+}
+
+#pause-menu button:hover{
+	border-color:#fa5d3a;
+    color:white;
+    background:#0c6577;
+}
+
--- a/public/src/css/loader.css
+++ b/public/src/css/loader.css
@@ -0,0 +1,28 @@
+#loader{
+	width:90%;
+	height:10%;
+	border:1px solid black;
+	position: fixed;
+	top:50%;
+	left:5%;
+	background: rgba(0,0,0,0.65);
+}
+
+#loader .progress{
+	width:0%;
+	height: 100%;
+	background: #b52a2a;
+	opacity: 0.90;
+}
+
+#loader .percentage{
+	margin:auto;
+	width:100%;
+	text-align: center;
+	font-size: 5vmin;
+	color: white;
+	position:fixed;
+	top:53%;
+	margin-left:-30px;
+	
+}
--- a/public/src/css/loadsong.css
+++ b/public/src/css/loadsong.css
@@ -0,0 +1,31 @@
+#load-song{
+	width: 100%;
+	height: 100%;
+	margin:0;
+	padding: 0%;
+}
+
+#loading-song{
+	width:20%;
+	height:30%;
+	position: absolute;
+	top:35%;
+	left:40%;
+	background: rgba(0,0,0,0.75);
+	border-radius: 5px;
+	border:3px solid white;
+}
+
+#loading-don{
+	position: relative;
+	width:50%;
+	height:65%;
+	top: 12%;
+	left: 30%;
+}
+
+#loading-song p{
+	position: absolute;
+	left:28%;
+	font-size: 3vmin;
+}
--- a/public/src/css/main.css
+++ b/public/src/css/main.css
@@ -0,0 +1,119 @@
+@font-face {
+    font-family: 'TnT';
+    src: url('../../assets/fonts/TnT.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Kozuka';
+    src: url('../../assets/fonts/KozGoPro-Bold.otf') format('truetype');
+}
+
+html, body{
+	padding: 0;
+	margin: 0;
+	width:100%;
+	height: 100%;
+	background: black;
+	color:white;
+    user-select: none;
+}
+
+#screen{
+	width:100%;
+	height:100%;
+	margin:0;
+	padding:0;
+	background: url('/assets/img/bg-pattern-1.png');
+}
+
+#assets{
+	display:none;
+}
+
+.window{
+    font-size: 14pt;
+    width: 30%;
+    height: 30%;
+    padding: 30px;
+    color: black;
+    background: rgba(255, 220, 47, 0.95);
+    border: 7px outset #f4ae00;
+    position:relative;
+    box-shadow: 2px 2px 10px black;
+    top: 35%;
+    left: 35%;
+    
+}
+
+.stroke-main {
+    font-weight: 300;
+}
+
+.result-title {
+    margin-top: 9px !important;
+    margin-left: 5px !important;
+    z-index: 1;
+}
+
+.result-song, .game-song {
+    position: absolute;
+    right: 0;
+    font-size: 5vmin;
+    margin: 30px 30px 0px 0px;
+    color: white;
+    float: right;
+    z-index: 1;
+    font-weight: 300;
+}
+
+.stroke-main:before {
+    content: attr(alt);
+    left: 0;
+    z-index: -1;
+    position: absolute;
+    -webkit-text-stroke: 0.3em #fb3c0c;
+}
+
+.stroke-main:after {
+    content: attr(alt);
+    left: 0;
+    z-index: -2;
+    position: absolute;
+    -webkit-text-stroke: 0.5em #000;
+}
+
+.stroke-sub:before {
+    content: attr(alt);
+    position: absolute;
+    -webkit-text-stroke: 0.25em #000;
+    left: 0;
+    z-index: -1;
+}
+
+.songsel-title {
+    position: absolute;
+    z-index: 1;
+    font-size: 7vmin;
+    margin: 20px;
+}
+
+.click-to-continue:before {
+    width: 100%;
+}
+
+
+.don {
+  background-position-y: 0;
+  position: absolute;
+  top: 0px;
+}
+
+.alpha-title .song-title-char {
+    transform: scale(1.3, 1);
+    font-size: 80%;
+    line-height: 22px;
+}
+
+.song-title-apos {
+    padding-left: 4px;
+}
--- a/public/src/css/scoresheet.css
+++ b/public/src/css/scoresheet.css
@@ -0,0 +1,170 @@
+#scoresheet{
+    width:100%;
+	height:100%;
+	background: #e84019;
+	color:black;
+	font-family: TnT;
+	background: url('/assets/img/bg-pattern-2.png');
+}
+
+#scoresheet h2{
+
+	position:absolute;
+	top:1%;
+	left:1%;
+	font-size: 7vmin;
+	margin:0;
+	color: white;
+	
+}
+
+#result-window{
+	width:70%;
+	margin:auto;
+}
+
+#scoresheet button{
+	
+	height: 15%;
+	width:20%;
+	position: absolute;
+	display: inline-block;
+	cursor: pointer;
+	border:5px solid #ae7a26;
+	background: rgb(255, 255, 255);
+	color: black;
+	font-family: TnT;
+	font-size: 5vmin;
+	border-radius: 10px;
+	outline: none;
+	top:10%;
+}
+
+#replay{
+	left:1%;
+}
+
+#song-select{
+	left:23%;
+}
+
+#scoresheet button:hover{
+	border-color:#fa5d3a;
+    color:white;
+    background:#0c6577;
+}
+
+#result-bar{
+	width: 100%;
+	height:40%;
+	position:absolute;
+	top:10%;
+	left:0;
+	border-bottom:10px inset #b6361d;
+	border-top:5px solid #b23111;
+	min-height: 200px;
+	
+}
+
+#score-cont{
+	position:absolute;
+	right:1%;
+	width:60%;
+	height:80%;
+	background:rgba(255,255,255,0.7);
+	border-radius:15px;
+}
+
+#score-hp-bar-bg{
+	position: absolute;
+	margin-top:2%;
+	margin-left:5%;
+	background: url("/assets/img/hp-bar-bg.png");
+	background-size: contain;
+	background-repeat: no-repeat;
+	
+}
+
+#score-hp-bar-colour{
+	position:absolute;
+	padding: 0;
+}
+
+#score-hp-bar-colour img{
+	position:absolute;
+	height: 100%;
+	width: 100%;
+	margin:0;
+	padding:0;
+}
+
+#score-points{
+	width:30%;
+	height:18%;
+	background:black;
+	border:5px solid #ae7a26;
+	border-radius: 10px;
+	position:absolute;
+	bottom:5%;
+	left:5%;
+	color: white;
+	font-size: 5vmin;
+	text-align: right;
+	padding-right:2%;
+}
+
+#score-details{
+	position: absolute;
+	right:5%;
+	width:50%;
+	height:50%;
+	color:white;
+	-webkit-text-stroke-width: 2px;
+   -webkit-text-stroke-color: black;
+	
+}
+
+#score-details td{
+	font-size: 3vmin;
+	text-align: right;
+}
+
+.floatLeft{
+	text-align: left !important;
+}
+
+.value{
+	width:25%;
+}
+
+#bottom-part{
+	width:100%;
+	position: absolute;
+	-webkit-box-shadow: inset 0px 10px 20px -5px #ee6d46;
+	-moz-box-shadow: inset 0px 10px 20px -5px #ee6d46;
+	box-shadow: inset 0px 10px 20px -5px #ee6d46;
+}
+
+#score-mark{
+	position: absolute;
+}
+
+.gradient-overlay{
+	position:absolute;
+	width:100%;
+	height:100%;
+	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(255,165,100,0.64) 62%, rgba(255,165,100,0.65) 63%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(62%,rgba(255,165,100,0.64)), color-stop(63%,rgba(255,165,100,0.65))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(255,165,100,0.64) 62%,rgba(255,165,100,0.65) 63%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(255,165,100,0.64) 62%,rgba(255,165,100,0.65) 63%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(255,165,100,0.64) 62%,rgba(255,165,100,0.65) 63%); /* IE10+ */
+	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(255,165,100,0.64) 62%,rgba(255,165,100,0.65) 63%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6ffa564',GradientType=0 ); /* IE6-9 */
+
+}
+
+#top-part{
+	width:100%;
+	height:10%;
+	background:#e84019;
+}
--- a/public/src/css/songselect.css
+++ b/public/src/css/songselect.css
@@ -0,0 +1,129 @@
+@-webkit-keyframes bgscroll {
+    from {background-position:0 0;}
+    to {background-position:-200px 0;}
+}
+
+@keyframes bgscroll {
+    from {background-position:0 0;}
+    to {background-position:-200px 0;}
+}
+
+#song-select{
+	width: 100%;
+	height:100%;
+	background: url('/assets/img/bg-pattern-1.png');
+	animation: bgscroll 3s infinite linear;
+	-webkit-animation: bgscroll 3s infinite linear;
+}
+
+#song-container{
+    width:98%;
+	height:80%;
+	padding: 5% 1% 1% 1%;
+    text-align: center;
+}
+
+ul li{
+    list-style:none;
+}
+
+.difficulties{
+    float:left;
+    display:inline-block;
+    width:70%;
+    height: 100%;
+}
+
+.song-title-char {
+    text-align: center;
+    width: 45px;
+    display: block;
+}
+
+.song-title-char:before {
+    content: attr(alt);
+    position: absolute;
+    -webkit-text-stroke: 0.25em #000;
+    z-index: -1;
+}
+
+.song-title{
+    float: right;
+    width: 45px;
+    padding: 10px 2px;
+    word-wrap: break-word;
+    font-size: 22pt;
+    color: white;
+    position: relative;
+    z-index: 1;
+    line-height: 28px;
+}
+
+.song-title-space {
+    line-height: 25px;
+}
+
+.song{
+    font-size: 14pt;
+    width: 50px;
+	margin-right:15px;
+	height:100%;
+    color: black;
+    display: inline-block;
+    background: rgba(255, 220, 47, 0.90);
+    border: 7px outset #f4ae00;
+    box-shadow: 2px 2px 10px black;
+    overflow: hidden;
+	cursor: pointer;
+}
+
+.opened{
+	width:375px;
+}
+
+.difficulty{
+	display:none;
+    cursor:pointer;
+    width: 35px;
+    height: 70%;
+    border-radius: 5px;
+    display: inline-block;
+    margin: 5px;
+    float: left;
+    background:white;
+    border:10px solid #ae7a26;
+    position:relative;
+}
+
+.difficulty .diffname{
+    word-wrap: break-word;
+    width: 20px;
+    display: block;
+    margin: auto;
+    margin-top:10px;
+    font-size: 20pt;
+    margin-left: 6px;
+}
+
+.difficulty .stars{
+    position:absolute;
+    color: #f12b69;
+    margin-left: -17px;
+    width:100%;
+    bottom:10px;
+}
+
+.difficulty:hover{
+    border-color:#fa5d3a;
+    color:white;
+    background:#0c6577;
+}
+
+.difficulty:hover .diffname{
+    -webkit-text-stroke-width: 1px;
+   -webkit-text-stroke-color: black;
+}
+
+.difficulty:hover .stars{
+    color:white;
+}
--- a/public/src/css/titlescreen.css
+++ b/public/src/css/titlescreen.css
@@ -0,0 +1,51 @@
+@keyframes toggleFade {
+    
+    0%{
+        opacity:1;
+    }
+    50% {
+        opacity: 0;
+    }
+}
+
+
+#title-screen{
+	position:absolute;
+	top:0;
+	left:0;
+    width:100%;
+    height:100%;
+	display: none;
+    margin:0px;
+    cursor: pointer;
+    background: url('/assets/img/title-screen.png');
+    -webkit-background-size: cover; /* pour Chrome et Safari */
+	-moz-background-size: cover; /* pour Firefox */
+	-o-background-size: cover; /* pour Opera */
+	background-size: cover; /* version standardis<69>e */
+}
+
+#logo-big-cont{
+	position:absolute;
+	max-width: 654px;
+	max-height: 300px;
+}
+
+#logo-big-cont img{
+	width:100%;
+	height:100%;
+}
+
+.click-to-continue{
+    
+    display:block;
+    font-size: 8vmin;
+    color:white;
+    text-align: center;
+    position:absolute;
+    bottom:2%;
+    width:100%;
+    animation: toggleFade 1s infinite ease-out;
+    z-index: 1;
+    
+}
--- a/public/src/js/assets.js
+++ b/public/src/js/assets.js
@@ -0,0 +1,82 @@
+var assets = {
+	
+	img: new Array(
+		'background.png',
+		'title-screen.png',
+		'logo-big.png',
+		'don-0.png',
+		'don-1.png',
+		'big-don-0.png',
+		'big-don-1.png',
+		'taiko.png',
+		'taiko-key-blue.png',
+		'taiko-key-red.png',
+		'hp-bar-bg.png',
+		'hp-bar-colour.png',
+		'score-0.png',
+		'score-0-b.png',
+		'score-230.png',
+		'score-450.png',
+		'dancing-don.gif',
+		'scoresheet.jpg',
+		'bg-pattern-1.png',
+		'bg-pattern-2.png',
+		'ranking-S.png',
+		'ranking-X.png',
+		'muzu_easy.png',
+		'muzu_normal.png',
+		'muzu_hard.png',
+		'muzu_oni.png',
+		'don_anim_normal.png'
+	),
+	
+	audio: new Array(
+		'start.wav',
+		'don.wav',
+		'ka.wav',
+		'combo-50.wav',
+		'combo-100.wav',
+		'combo-200.wav',
+		'combo-300.wav',
+		'combo-400.wav',
+		'combo-500.wav',
+		'combo-600.wav',
+		'combo-700.wav',
+		'combo-800.wav',
+		'combo-900.wav',
+		'combo-1000.wav',
+		'combo-1100.wav',
+		'combo-1200.wav',
+		'combo-1300.wav',
+		'combo-1400.wav',
+		'song-select.wav',
+		'title.ogg',
+		'pause.wav',
+		'cancel.wav',
+		'results.wav',
+		'diffsel.wav',
+		'fullcombo.wav',
+
+		'gamefullcombo.wav',
+		'gameclear.wav',
+		'gamefail.wav',
+
+		'note_don.ogg',
+		'note_ka.ogg',
+
+		'bgm_songsel.ogg',
+		'bgm_songsel_loop.ogg',
+		'bgm_result.ogg',
+		'bgm_result_loop.ogg'
+	),
+	
+	songs: new Array(),
+	
+	fonts: new Array(
+		'Kozuka',
+		'TnT'
+	),
+	
+	sounds: {}
+	
+};
--- a/public/src/js/bufferedloop.js
+++ b/public/src/js/bufferedloop.js
@@ -0,0 +1,90 @@
+// thx to @LoveEevee for this - https://github.com/LoveEevee
+
+class BufferedLoop{
+	constructor(bgm1,bgm2){
+		this.context=new AudioContext()
+		this.buffers=[]
+		this.sources=new Set()
+		this.loadCallback=[]
+		this.bufferedTime=0
+		this.bgm1=bgm1
+		this.bgm2=bgm2
+		this.loadSound(bgm1.url,0)
+		this.loadSound(bgm2.url,1)
+	}
+	loadSound(url,number){
+		var self=this
+		var request=new XMLHttpRequest()
+		request.open("GET",url)
+		request.responseType="arraybuffer"
+		request.onload=function(){
+			self.context.decodeAudioData(request.response,function(buffer){
+				self.buffers[number]=buffer
+				self.setLoaded()
+			})
+		}
+		request.send()
+	}
+	setLoaded(){
+		if(this.buffers[0]&&this.buffers[1]){
+			this.loaded=true
+			for(var i in this.loadCallback){
+				this.loadCallback[i]()
+			}
+		}
+	}
+	onLoad(callback){
+		this.loadCallback.push(callback)
+	}
+	playSound(buffer,time,duration){
+		var self=this
+		var source=this.context.createBufferSource()
+		source.buffer=buffer
+		source.connect(this.context.destination)
+		source.start(time)
+		this.bufferedTime=time+duration
+		var sourceObject={
+			source:source,
+			timeout:setTimeout(function(){
+				self.sources.delete(sourceObject)
+			},duration*1000)
+		}
+		this.sources.add(sourceObject)
+	}
+	addLoop(){
+		if(this.context.currentTime>this.bufferedTime-1){
+			this.playSound(
+				this.buffers[1],
+				this.start+this.bgm1.duration+this.bgm2.duration*this.iteration,
+				this.bgm2.duration
+			)
+			this.iteration++
+		}
+	}
+	play(){
+		var self=this
+		if(!this.loaded){
+			return this.onLoad(function(){
+				self.play()
+			})
+		}
+		this.start=this.context.currentTime+0.1
+		this.iteration=0
+		this.playSound(
+			this.buffers[0],
+			this.start,
+			this.bgm1.duration
+		)
+		self.addLoop()
+		self.interval=setInterval(function(){
+			self.addLoop()
+		},100)
+	}
+	pause(){
+		clearInterval(this.interval)
+		this.sources.forEach(function(sourceObject){
+			sourceObject.source.stop(0)
+			clearTimeout(sourceObject.timeout)
+		})
+	}
+}
--- a/public/src/js/circle.js
+++ b/public/src/js/circle.js
@@ -0,0 +1,104 @@
+function Circle(id, ms, type){
+    
+    var _id=id;
+    var _ms = ms;
+    var _type = type;
+    var _played = false;
+    var _pos={x:0, y:0};
+	var _animating = false;
+	var _animT = 0;
+	var _score=0;
+	var _lastFrame = ms+100;
+	var _animationEnded = false;
+    
+    var played=false; //if cirlce has been played
+    var _status=-1; //check if circle is playable
+    
+    // -1 : Not playable
+    // 0 : Playable, giving 0 points if played at current time (fail)
+    // 50 : Playable, giving 50 points if played at current time (pass)
+    // 100 : Playable, giving 100 points if played at current time (good)
+
+    this.getMS = function(){
+        return _ms;
+    }
+    
+    this.getType = function(){
+        return _type;
+    }
+	
+	this.getLastFrame = function(){
+		return _lastFrame;
+	}
+	
+	this.incFrame = function(){
+		_lastFrame+=20;
+	}
+	
+	this.animate = function(){
+		_animating=true;
+	}
+	
+	this.isAnimated = function(){
+		return _animating;
+	}
+    
+    this.setInitPos = function(initPos){
+        _pos.x = initPos.x;   
+		_pos.y = initPos.y
+    }
+    
+    this.move = function(pxPerFrame){
+        _pos.x -= pxPerFrame;
+    }
+	
+	this.getAnimT = function(){
+		return _animT;
+	}
+	
+	this.incAnimT = function(){
+		_animT+=0.05;	
+	}
+	
+	this.moveTo = function(x, y){
+		_pos.x=x;
+		_pos.y=y;
+	}
+    
+    this.getPos = function(){
+        return _pos;
+    }
+    
+    this.updateStatus = function(status){
+        _status=status;
+    }
+    
+    this.getStatus = function(){
+        return _status;
+    }
+    
+    this.getPlayed = function(){
+        return _played;
+    }
+	
+	this.isAnimationFinished = function(){
+		return _animationEnded;
+	}
+	
+	this.endAnimation = function(){
+		_animationEnded = true;
+	}
+    
+    this.played = function(score){
+		_score=score;
+        _played=true;
+    }
+	
+	this.getScore = function(){
+		return _score;
+	}
+    
+    this.getID = function(){
+        return _id;
+    }
+}
--- a/public/src/js/controller.js
+++ b/public/src/js/controller.js
@@ -0,0 +1,212 @@
+function Controller(selectedSong, songData){
+    
+    var _this = this;
+	var _backgroundURL = "/songs/"+selectedSong.folder+"/bg.png";
+	
+	var _songParser = new ParseSong(songData); //get file content
+	var _songData = _songParser.getData();
+	
+    var _game = new Game(this, selectedSong, _songData);
+    var _view = new View(this, _backgroundURL, selectedSong.title, selectedSong.difficulty);
+    var _keyboard = new Keyboard(this);
+    var _mainLoop;
+    var _pauseMenu = false;
+    
+    this.run = function(){
+		
+		_this.loadUIEvents();
+        _game.run();
+		_view.run();
+		_this.startMainLoop();
+    }
+	
+	this.loadUIEvents = function(){
+		$("#song-selection-butt").click(function(){
+            assets.sounds["don"].play();
+			_this.songSelection();
+		});
+		$("#restart-butt").click(function(){
+            assets.sounds["don"].play();
+			_this.restartSong();
+		});
+        $("#continue-butt").click(function(){
+            _this.togglePauseMenu();
+        });
+	}
+    
+    this.startMainLoop = function(){
+        
+        var started=false;
+        _mainLoop = setInterval(function(){
+            
+            var ms = _game.getEllapsedTime().ms;
+            if(ms<0){ //before starting game, offseting the circles
+                _game.updateTime();
+				_view.refresh();
+            }
+            else if(ms>=0 && !started){ //when music shall starts
+                setTimeout(function(){
+                    assets.sounds["main-music"].volume = 0.7;
+                    assets.sounds["main-music"].play();
+                }, _songData.generalInfo.audioWait);
+                started=true;
+            }
+            
+            if(started){ //Game start here
+                if(!_game.isPaused()){
+                    _game.update();
+					_view.refresh();
+                    _keyboard.checkGameKeys();
+                }
+                _keyboard.checkMenuKeys();
+            }
+            
+        }, 20);
+        
+    }
+	
+	this.getDistanceForCircle = function(){
+		return _view.getDistanceForCircle();
+	}
+    
+    this.togglePauseMenu = function(){
+        _this.togglePause();
+        _view.togglePauseMenu();
+    }
+    
+    this.displayResults = function(){
+        clearInterval(_mainLoop);
+
+
+        var score = _this.getGlobalScore();
+        
+        if (score.fail == 0) {
+            vp = 'fullcombo';
+            setTimeout(function(){
+                assets.sounds['fullcombo'].play();
+            }, 1350);
+        } else if (score.hp >= 50) {
+            vp = 'clear';
+        } else {
+            vp = 'fail';
+        }
+
+        assets.sounds['game' + vp].play();
+
+        setTimeout(function(){
+            var scoresheet = new Scoresheet(_this, _this.getGlobalScore());
+            scoresheet.run();
+        }, 7000);
+    }
+
+    this.displayScore = function(score, notPlayed){
+        _view.displayScore(score, notPlayed);
+    }
+    
+    this.fadeOutOver = function(){
+        _game.fadeOutOver();
+        _this.displayResults();
+    }
+    
+    this.getCurrentTimingPoint = function(){
+        return _game.getCurrentTimingPoint();
+    }
+    
+    this.songSelection = function(){
+		$("#main-music").remove();
+		$("#music-bg").remove();
+        clearInterval(_mainLoop);
+        new SongSelect();
+    }
+    
+    this.restartSong = function(){
+		assets.sounds["main-music"].pause();
+		assets.sounds["main-music"].currentTime=0;
+		clearInterval(_mainLoop);
+		$("#screen").load("/src/views/game.html", function(){
+			var taikoGame = new Controller(selectedSong, songData);
+			taikoGame.run();
+		});
+    }
+    
+    this.playSound = function(soundID){
+        _game.playSound(soundID);
+    }
+    
+    this.pauseSound = function(soundID, stop){
+        _game.pauseSound(soundID, stop);
+    }
+    
+    this.initTiming = function(){
+        _game.initTiming();
+    }
+    
+    this.setHitcircleSpeed = function(speed){
+        _view.setHitcircleSpeed(speed);
+    }
+    
+    this.getHitcircleSpeed = function(){
+        return _game.getHitcircleSpeed();
+    }
+    
+    this.toggleMainMusic = function(){
+        _game.toggleMainMusic();
+    }
+    
+    this.togglePause = function(){
+        _game.togglePause();
+    }
+    
+    this.isPaused = function(){
+        return _game.isPaused();
+    }
+    
+    this.getKeys = function(){
+        return _keyboard.getKeys();
+    }
+    
+    this.getSongData = function(){
+        return _game.getSongData();
+    }
+    
+    this.getEllapsedTime = function(){
+        return _game.getEllapsedTime();
+    }
+    
+    this.getCircles = function(){
+        return _game.getCircles();
+    }
+    
+    this.getCurrentCircle = function(){
+        return _game.getCurrentCircle();
+    }
+    
+    this.updateCurrentCircle = function(){
+        _game.updateCurrentCircle();
+    }
+    
+    this.isWaitingForKeyup = function(key, type){
+        return _keyboard.isWaitingForKeyup(key, type);
+    }
+    
+    this.waitForKeyup = function(key, type){
+        _keyboard.waitForKeyup(key, type);
+    }
+    
+    this.updateCombo = function(score){
+        _game.updateCombo(score);
+    }
+    
+    this.getCombo = function(){
+        return _game.getCombo();
+    }
+    
+    this.getGlobalScore = function(){
+        return _game.getGlobalScore();
+    }
+    
+    this.updateGlobalScore = function(score){
+        _game.updateGlobalScore(score);
+    }
+    
+}
--- a/public/src/js/game.js
+++ b/public/src/js/game.js
@@ -0,0 +1,435 @@
+function Game(controller, selectedSong, songData){
+    
+    var _this = this;
+    var _selectedSong = selectedSong;
+    var _ellapsedTime; //current time in ms from the beginning of the song
+    var _offsetDate; //date when the chrono is started (before the game begins)
+    var _startDate; //real start date (when the chrono will be 0)
+    var _currentDate; // refreshed date
+	var _soundSystem = new soundSystem(controller);
+    var _songData=songData;
+    var _currentCircle=0;
+    var _currentScore=0;
+    var _combo=0;
+    var _globalScore={points:0, great:0, good:0, fail:0, maxCombo:0, hp:0, song:selectedSong.title};
+    var _HPGain= 100/_songData.circles.length;
+    var _paused=false;
+    var _started=false;
+    var _mainMusicPlaying=true;
+    var _latestDate;
+    var _ellapsedTimeSincePause=0;
+    var _musicFadeOut=0;
+    var _fadeOutStarted=false;
+    var _currentTimingPoint=0;
+    var _offsetTime=0;
+	var _hitcircleSpeed=_songData.difficulty.sliderMultiplier*8;
+	var _timeForDistanceCircle;
+    
+    this.run = function(){
+		_timeForDistanceCircle=((20*controller.getDistanceForCircle())/_hitcircleSpeed);
+		_this.initTiming();
+    }
+    
+    this.initTiming = function(){
+        
+        _offsetDate = new Date();
+	        
+        _ellapsedTime = {
+            ms:-parseInt(_timeForDistanceCircle),
+            sec:0,
+            min:0,
+            hour:0
+        }
+        _offsetTime = parseInt(_timeForDistanceCircle);
+        _startDate = new Date();
+        _startDate.setMilliseconds(_startDate.getMilliseconds()+_offsetTime); //The real start for the game will start when chrono will reach 0
+        
+    }
+    
+    this.update = function(){
+        
+        /* Main operations */
+        _this.updateTime();
+        _this.checkTiming();
+        _this.updateCirclesStatus();
+        _this.checkPlays();
+        
+        /* Event operations */
+        _this.whenFadeoutMusic();
+        _this.whenLastCirclePlayed();
+      
+    }
+	
+	this.getCircles = function(){
+		return _songData.circles;
+	}
+    
+    this.updateCirclesStatus = function(){
+        
+        var circles = _songData.circles;
+        
+        circles.forEach(function(circle){
+            
+            if(!circle.getPlayed()){
+                
+                var currentTime = _ellapsedTime.ms;
+                var startingTime = circle.getMS()-_timeForDistanceCircle;
+                var finishTime = circle.getMS(); //at circle.getMS(), the cirlce fits the slot
+
+                if( currentTime >= startingTime && currentTime <= finishTime+200){
+
+					if(currentTime>= finishTime-50 && currentTime < finishTime-30){
+                        circle.updateStatus(0);
+                    }
+                    else if(currentTime>= finishTime-30 && currentTime < finishTime){
+                        circle.updateStatus(230);
+                    }
+                    else if(currentTime >= finishTime && currentTime < finishTime+200){
+                        circle.updateStatus(450);
+                    }
+
+                }
+                else if(currentTime>finishTime+200 && currentTime<=finishTime+300){
+
+                    circle.updateStatus(-1);
+					_currentScore=0;
+                    circle.played(_currentScore);
+                    controller.displayScore(_currentScore, true);
+                    _this.updateCurrentCircle();
+                    _this.updateCombo(_currentScore);
+                    _this.updateGlobalScore(_currentScore);
+
+                }
+  
+            }
+   
+        });
+        
+    }
+    
+    this.setHPGain = function(gain){
+        _HPGain=gain;
+    }
+    
+    this.checkPlays = function(){
+        
+        var circles = _songData.circles;	
+        var circle = circles[_currentCircle];
+
+        if(circle){
+
+            if(controller.getKeys()[86]){
+                if(!circle.getPlayed() && !controller.isWaitingForKeyup(86, "score") && circle.getStatus()!=-1){
+                    var score = _this.checkScore(circle);
+                    circle.played(score);
+                    _this.updateCurrentCircle();
+                    controller.waitForKeyup(86, "score");
+                }
+            }
+            if(controller.getKeys()[66]){
+                if(!circle.getPlayed() && !controller.isWaitingForKeyup(66, "score") && circle.getStatus()!=-1){
+                    var score = _this.checkScore(circle);
+                    circle.played(score);
+                    _this.updateCurrentCircle();
+                    controller.waitForKeyup(66, "score");
+                }
+            }
+            if(controller.getKeys()[67]){
+                if(!circle.getPlayed() && !controller.isWaitingForKeyup(67, "score") && circle.getStatus()!=-1){
+                    var score = _this.checkScore(circle);
+                    circle.played(score);
+                    _this.updateCurrentCircle();
+                    controller.waitForKeyup(67, "score");
+                }
+            }
+            if(controller.getKeys()[78]){
+                if(!circle.getPlayed() && !controller.isWaitingForKeyup(78, "score") && circle.getStatus()!=-1){
+                    var score = _this.checkScore(circle);
+                    circle.played(score);
+                    _this.updateCurrentCircle();
+                    controller.waitForKeyup(78, "score");
+                }
+            }
+           
+        }
+
+    }
+    
+    this.checkScore = function(circle){
+        
+        if(
+            ((controller.getKeys()[86] || controller.getKeys()[66]) && (circle.getType()=="don" || circle.getType()=="daiDon")) || 
+            ((controller.getKeys()[67] || controller.getKeys()[78]) && (circle.getType()=="ka" || circle.getType()=="daiKa"))
+        ){
+             
+            switch(circle.getStatus()){
+
+                case 230:
+                    _currentScore=230;
+                    break;
+
+                case 450:
+                    _currentScore=450;
+                    break;
+
+            }
+			controller.displayScore(_currentScore);
+
+        }
+        else{
+            _currentScore=0;
+			controller.displayScore(_currentScore, true);
+        }
+        
+        
+        _this.updateCombo(_currentScore);
+        _this.updateGlobalScore(_currentScore);
+		return _currentScore;
+    }
+        
+    this.whenLastCirclePlayed = function(){
+        var circles = _songData.circles;
+        var lastCircle = circles[_songData.circles.length-1];
+        if(_ellapsedTime.ms>=lastCircle.getMS()+2000){
+            _fadeOutStarted=true;
+        }
+    }
+
+    this.whenFadeoutMusic = function(){
+        if(_fadeOutStarted){
+            if(_musicFadeOut%8==0){
+                _soundSystem.fadeOutMusic();
+                _musicFadeOut++;
+            }
+            else{
+                _musicFadeOut++;
+            }
+        }
+    }
+    
+    this.checkTiming = function(){
+        
+        if(_songData.timingPoints[_currentTimingPoint+1]){
+            if(_this.getEllapsedTime().ms>=_songData.timingPoints[_currentTimingPoint+1].start){
+                _currentTimingPoint++;
+            }
+        }
+    }
+    
+    this.getCurrentTimingPoint = function(){
+        return _songData.timingPoints[_currentTimingPoint];
+    }
+    
+    this.toggleMainMusic = function(){
+        if(_mainMusicPlaying){
+            assets.sounds["main-music"].pause();
+            _mainMusicPlaying=false;
+        }
+        else{
+            assets.sounds["main-music"].play();
+            _mainMusicPlaying=true;
+        }
+    }
+
+    this.fadeOutOver = function(){
+        _fadeOutStarted=false;
+    }
+    
+    this.playSound = function(soundID){
+        _soundSystem.playSound(soundID);
+    }
+    
+    this.pauseSound = function(soundID, stop){
+        _soundSystem.pauseSound(soundID, stop);
+    }
+    
+    this.getHitcircleSpeed = function(){
+        return _hitcircleSpeed;
+    }
+    
+    this.togglePause = function(){
+        if(!_paused){
+            assets.sounds["pause"].play();
+            _paused=true;
+            _latestDate = new Date();
+            _this.toggleMainMusic();
+            
+        }
+        else{
+            assets.sounds["cancel"].play();
+           _paused=false;
+            var currentDate = new Date();
+            _ellapsedTimeSincePause = _ellapsedTimeSincePause + Math.abs(currentDate.getTime() - _latestDate.getTime());
+            _this.toggleMainMusic(); 
+        }
+    }
+
+    this.isPaused = function(){
+        return _paused;
+    }
+    
+    this.getEllapsedTime = function(){
+        return _ellapsedTime;
+    }
+    
+    this.updateTime = function(){
+ 
+        _currentDate = new Date();
+        
+        if(_ellapsedTime.ms<0){
+            _ellapsedTime.ms = _currentDate.getTime() - _startDate.getTime();
+        }
+        else if(_ellapsedTime.ms>=0 && !_started){
+            _startDate = new Date();
+            _ellapsedTime.ms = Math.abs(_startDate.getTime() -  _currentDate.getTime());
+            _started=true;
+        }
+        else if(_ellapsedTime.ms>=0 && _started){
+            _ellapsedTime.ms = Math.abs(_startDate.getTime() -  _currentDate.getTime()) - _ellapsedTimeSincePause;
+        }
+        
+        _ellapsedTime.sec = parseInt(_ellapsedTime.ms / 1000) % 60;
+        _ellapsedTime.min = parseInt(_ellapsedTime.ms / (1000 * 60)) % 60; 
+        _ellapsedTime.hour = parseInt(_ellapsedTime.ms / (1000 * 60 * 60)) % 60; 
+        
+    }
+    
+    this.getCircles = function(){
+        return _songData.circles;
+    }
+    
+    this.getSongData = function(){
+        return _songData;
+    }
+    
+    this.updateCurrentCircle = function(){
+        _currentCircle++; 
+    }
+    
+    this.getCurrentCircle = function(){
+        return _currentCircle;
+    }
+    
+    this.updateCombo = function(score){
+        
+        (score!=0) ? _combo++ : _combo=0;
+        
+        if(_combo>_globalScore.maxCombo) _globalScore.maxCombo = _combo;
+        
+        switch(_combo){
+            case 50:
+                controller.playSound("combo-50");
+                break;
+            case 100:
+                controller.playSound("combo-100");
+                break;
+            case 200:
+                controller.playSound("combo-200");
+                break;
+            case 300:
+                controller.playSound("combo-300");
+                break;
+            case 400:
+                controller.playSound("combo-400");
+                break;
+            case 500:
+                controller.playSound("combo-500");
+                break;
+            case 600:
+                controller.playSound("combo-600");
+                break;
+            case 700:
+                controller.playSound("combo-700");
+                break;
+            case 800:
+                controller.playSound("combo-800");
+                break;
+            case 900:
+                controller.playSound("combo-900");
+                break;
+            case 1000:
+                controller.playSound("combo-1000");
+                break;
+            case 1100:
+                controller.playSound("combo-1100");
+                break;
+            case 1200:
+                controller.playSound("combo-1200");
+                break;
+            case 1300:
+                controller.playSound("combo-1300");
+                break;
+            case 1400:
+                controller.playSound("combo-1400");
+                break;
+        }
+    }
+    
+    this.getCombo = function(){
+        return _combo;
+    }
+    
+    this.getGlobalScore = function(){
+        return _globalScore;
+    }
+    
+    this.updateGlobalScore = function(score){
+
+        /* Circle score */
+        switch(score){
+            case 450:
+                _globalScore.great++;
+                break;
+            case 230:
+                _globalScore.good++;
+                break;
+            case 0:
+                _globalScore.fail++;
+                break;
+        }
+        
+        /* HP Update */
+        if(score!=0){
+            _globalScore.hp+=_HPGain;
+        }
+        else{
+            if(_globalScore.hp-_HPGain>0)
+                 _globalScore.hp-=_HPGain;
+            else
+                _globalScore.hp=0;
+        }
+        
+        /* Points update */
+        if(_combo>=11 && _combo<=20){
+            score+=100;
+        }
+		else if(_combo>=21 && _combo<=30){
+			score+=200;
+		}
+		else if(_combo>=31 && _combo<=40){
+			score+=300;
+		}
+		else if(_combo>=41 && _combo<=50){
+			score+=400;
+		}
+		else if(_combo>=51 && _combo<=60){
+			score+=500;
+		}
+		else if(_combo>=61 && _combo<=70){
+			score+=500;
+		}
+		else if(_combo>=71 && _combo<=80){
+			score+=600;
+		}
+		else if(_combo>=81 && _combo<=90){
+			score+=700;
+		}
+		else if(_combo>=91 && _combo<=100){
+			score+=800;
+		}
+        
+		_globalScore.points+=score;
+        
+    }
+    
+}
--- a/public/src/js/keyboard.js
+++ b/public/src/js/keyboard.js
@@ -0,0 +1,78 @@
+function Keyboard(controller){
+ 
+    var _this = this;
+    var _keys = {};
+    var _waitKeyupScore = {};
+    var _waitKeyupSound = {};
+    var _waitKeyupMenu = {};
+    
+    $(document).keydown(function(e){
+        
+        if (e.which === 8 && !$(e.target).is("input, textarea"))//disable back navigation when pressing backspace
+            e.preventDefault();
+        
+        _keys[e.which]=true;
+    });
+        
+    $(document).keyup(function(e){
+        delete _keys[e.which];
+        delete _waitKeyupScore[e.which];
+        delete _waitKeyupSound[e.which];
+        delete _waitKeyupMenu[e.which];
+    });
+    
+    this.checkGameKeys = function(){
+
+        if(_keys[86] && !_this.isWaitingForKeyup(86, "sound")){//if press v, play 'don' sound
+            controller.playSound('note_don');
+            _this.waitForKeyup(86, "sound");
+        }
+        if(_keys[66] && !_this.isWaitingForKeyup(66, "sound")){//if press b, play 'don' sound
+            controller.playSound('note_don');
+            _this.waitForKeyup(66, "sound");
+        }
+        
+        if(_keys[67] && !_this.isWaitingForKeyup(67, "sound")){//if press c, play 'ka' sound
+            controller.playSound('note_ka');
+            _this.waitForKeyup(67, "sound");
+        }
+        if(_keys[78] && !_this.isWaitingForKeyup(78, "sound")){//if press n, play 'ka' sound
+            controller.playSound('note_ka');
+            _this.waitForKeyup(78, "sound");
+        }
+        
+    }
+    
+    this.checkMenuKeys = function(){
+        
+        if(_keys[8] && !_this.isWaitingForKeyup(8, "menu")){//If press return key, go back to song selection
+            _this.waitForKeyup(8, "menu");
+            controller.pauseSound("main-music", true);
+            controller.songSelection();
+        }
+        if(_keys[81]  && !_this.isWaitingForKeyup(81, "menu")){//if press p key, pause the game
+            _this.waitForKeyup(81, "menu");
+            controller.togglePauseMenu();
+        }
+        
+    }
+    
+    this.getKeys = function(){
+        return _keys;
+    }
+    
+    this.isWaitingForKeyup = function(key, type){
+        var isWaiting;
+        if(type == "score") isWaiting = _waitKeyupScore[key];
+        else if(type == "sound") isWaiting = _waitKeyupSound[key];
+        else if(type == "menu") isWaiting = _waitKeyupMenu[key];
+        return isWaiting;
+    }
+    
+    this.waitForKeyup = function(key, type){
+        if(type == "score") _waitKeyupScore[key] = true;
+        else if(type == "sound") _waitKeyupSound[key] = true;
+        else if(type == "menu") _waitKeyupMenu[key] = true;
+    }
+
+}
--- a/public/src/js/lib/fontdetect.min.js
+++ b/public/src/js/lib/fontdetect.min.js
@@ -0,0 +1 @@
+FontDetect=function(){function e(){if(!n){n=!0;var e=document.body,t=document.body.firstChild,i=document.createElement("div");i.id="fontdetectHelper",r=document.createElement("span"),r.innerText="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",i.appendChild(r),e.insertBefore(i,t),i.style.position="absolute",i.style.visibility="hidden",i.style.top="-200px",i.style.left="-100000px",i.style.width="100000px",i.style.height="200px",i.style.fontSize="100px"}}function t(e,t){return e instanceof Element?window.getComputedStyle(e).getPropertyValue(t):window.jQuery?$(e).css(t):""}var n=!1,i=["serif","sans-serif","monospace","cursive","fantasy"],r=null;return{onFontLoaded:function(t,i,r,o){if(t){var s=o&&o.msInterval?o.msInterval:100,a=o&&o.msTimeout?o.msTimeout:2e3;if(i||r){if(n||e(),this.isFontLoaded(t))return void(i&&i(t));var l=this,f=(new Date).getTime(),d=setInterval(function(){if(l.isFontLoaded(t))return clearInterval(d),void i(t);var e=(new Date).getTime();e-f>a&&(clearInterval(d),r&&r(t))},s)}}},isFontLoaded:function(t){var o=0,s=0;n||e();for(var a=0;a<i.length;++a){if(r.style.fontFamily='"'+t+'",'+i[a],o=r.offsetWidth,a>0&&o!=s)return!1;s=o}return!0},whichFont:function(e){for(var n=t(e,"font-family"),r=n.split(","),o=r.shift();o;){o=o.replace(/^\s*['"]?\s*([^'"]*)\s*['"]?\s*$/,"$1");for(var s=0;s<i.length;s++)if(o==i[s])return o;if(this.isFontLoaded(o))return o;o=r.shift()}return null}}}();
--- a/public/src/js/lib/jquery-ui.js
+++ b/public/src/js/lib/jquery-ui.js
--- a/public/src/js/lib/jquery.js
+++ b/public/src/js/lib/jquery.js
--- a/public/src/js/loader.js
+++ b/public/src/js/loader.js
@@ -0,0 +1,76 @@
+function Loader(){
+	
+	var _this=this;
+	var _loadedAssets=0;
+	var _percentage=0;
+	var _nbAssets=assets.audio.length+assets.img.length+assets.fonts.length+1; //+1 for song structures
+
+	this.run = function(){
+		
+		assets.fonts.forEach(function(name){
+			var font = $("<h1 style='font-family:"+name+"'>I am a font</h1>"); 
+			font.appendTo("#assets");
+			FontDetect.onFontLoaded (name, _this.assetLoaded, _this.fontFailed, {msTimeout: 90000});
+		});
+		
+		assets.img.forEach(function(name){
+			var id = name.substr(0, name.length-4);
+			var image = $("<img id='"+id+"' src='/assets/img/"+name+"' />");
+			image.appendTo("#assets");
+			image.load(function(){
+				_this.assetLoaded();
+			});
+		});
+		
+		assets.audio.forEach(function(name){
+			var id = name.substr(0, name.length-4);
+			var audio = new Audio();
+			audio.src = '/assets/audio/'+name;
+			audio.muted = true;
+			audio.load();
+			audio.onloadeddata = function(){
+				assets.sounds[id] = new Audio();
+				assets.sounds[id].src = audio.src;
+				assets.sounds[id].load();
+				_this.assetLoaded();
+			};
+		});
+		
+		$.ajax({
+            async:true,
+            type:"GET",
+            url:"/api/songs",
+            success:function(songs){
+				assets.songs = songs;
+				_this.assetLoaded();
+			},
+			error:function(){
+				alert("An error occured, please refresh");
+			}
+		});
+		
+	}
+	
+	this.fontFailed = function(){
+		alert("An error occured, please refresh");
+	}
+	
+	this.assetLoaded = function(){
+		_loadedAssets++;
+		_percentage=parseInt((_loadedAssets*100)/_nbAssets);
+		$("#loader .progress").css("width", _percentage+"%");
+		$("#loader .percentage").html(_percentage+"%");
+		_this.checkIfEverythingLoaded();
+	}
+	
+	this.checkIfEverythingLoaded = function(){
+		if(_percentage==100){
+			new Titlescreen();
+			//var globalScore={points:1000, great:100, good:60, fail:10, maxCombo:50, hp:90};
+			//new Scoresheet(null, globalScore);
+		}
+	}
+	
+	$("#screen").load("/src/views/loader.html", _this.run);
+	
+}
--- a/public/src/js/loadsong.js
+++ b/public/src/js/loadsong.js
@@ -0,0 +1,56 @@
+function loadSong(selectedSong){
+	
+	var _this = this;
+	var _selectedSong=selectedSong;
+	var _bgLoaded=false;
+	var _musicLoaded=false;
+	var _songDataLoaded=false;
+	var _songFilePath = '/songs/'+_selectedSong.folder+'/'+_selectedSong.difficulty;
+	var _songData;
+	
+	this.run = function(){
+		
+		assets.sounds["bgm_songsel"].pause();
+		assets.sounds["bgm_songsel"].currentTime = 0;
+
+		assets.sounds["start"].play();
+		$("#assets").append("<img id='music-bg' src='/songs/"+_selectedSong.folder+"/bg.png' />");
+		
+		var audio = new Audio();
+		audio.src = '/songs/'+_selectedSong.folder+'/main.mp3';
+		audio.load();
+		
+		$("#music-bg").load(function(){
+			_bgLoaded=true;
+			_this.checkIfEverythingLoaded();
+		});
+		
+		audio.onloadeddata = function(){
+			_musicLoaded=true;
+			assets.sounds["main-music"]=audio;
+			_this.checkIfEverythingLoaded();
+		};
+		
+		$.ajax({
+            url : _songFilePath,
+            dataType: "text",
+            success : function (data) {
+                _songData = data.split("\n");
+				_songDataLoaded=true;
+				_this.checkIfEverythingLoaded();
+            }
+        });
+		
+	}
+	
+	this.checkIfEverythingLoaded = function(){
+		if(_musicLoaded && _songDataLoaded && _bgLoaded){
+			$("#screen").load("/src/views/game.html", function(){
+				var taikoGame = new Controller(_selectedSong, _songData);
+				taikoGame.run();
+			});
+		}
+	}
+	
+	$("#screen").load("/src/views/loadsong.html", _this.run);
+ }
--- a/public/src/js/main.js
+++ b/public/src/js/main.js
@@ -0,0 +1,7 @@
+$(document).ready(function(){
+    
+    new Loader();
+	
+});
+
+
--- a/public/src/js/parsesong.js
+++ b/public/src/js/parsesong.js
@@ -0,0 +1,257 @@
+function ParseSong(fileContent){
+	
+	var _this = this;
+	var _data = fileContent;
+	var _generalInfo={audioFilename:"", audioWait:0};
+	var _metadata={title:'', artist:''};
+	var _difficulty={sliderMultiplier:0, sliderTickRate:0, approachRate:0};
+	var _beatInfo={beatInterval:0, bpm:0};
+	var _editor={distanceSpacing:0, beatDivisor:0, gridSize:0};
+	var _circleID=0;
+	var _circles=[];
+	var _timingPoints=[];
+	var _measures=[];
+	
+	this.getStartEndIndexes = function(type){
+
+        var indexes = {start:0, end:0};
+        
+        while(indexes.start<_data.length){
+            if(_data[indexes.start].match(type))
+                break;
+            else
+                indexes.start++;
+        }
+        indexes.start++;
+        
+        indexes.end = indexes.start;
+        while(indexes.end<_data.length){
+            if(_data[indexes.end].match(/^\s*$/))
+                break;
+            else
+                indexes.end++;
+        }
+        indexes.end--;
+        
+        return indexes;
+    }
+    
+    this.parseDifficulty = function(){
+        
+        var indexes = _this.getStartEndIndexes("Difficulty");
+
+        for(var i=indexes.start; i<= indexes.end; i++){
+    
+            var splitted = _data[i].split(":");
+            var item = splitted[0];
+            var key = splitted[1];
+            
+            switch(item){
+             
+                case 'SliderMultiplier':
+                    _difficulty.sliderMultiplier = key;
+                    break;
+                case 'SliderTickRate':
+                    _difficulty.sliderTickRate = key;
+                    break;
+                case 'ApproachRate':
+                    _difficulty.approachRate = key;
+                    break;
+            }
+        }
+            
+    }
+        
+    this.parseTiming = function(){
+        
+        var indexes = _this.getStartEndIndexes("TimingPoints");
+        var lastBeatInterval = parseInt(_data[indexes.start].split(",")[1]);
+
+        for(var i=indexes.start; i<= indexes.end; i++){
+    
+            var values = _data[i].split(",");
+            
+            var sliderMultiplier;
+            if(i==indexes.start){
+                _beatInfo.beatInterval=parseFloat(values[1]);
+                _beatInfo.bpm=parseInt((1000/_beatInfo.beatInterval)*60);
+                sliderMultiplier=1;
+            }
+            else{
+                sliderMultiplier=Math.abs(parseFloat(values[1]))/100;
+            }
+            
+            _timingPoints.push({
+                start:parseInt(values[0]),
+                sliderMultiplier:sliderMultiplier,
+                measure:parseInt(values[2]),
+            });
+            
+        }
+        
+        var measureNumber=0;
+        for(var i=0; i<_timingPoints.length; i++){
+            var limit = (_timingPoints[i+1]) ? _timingPoints[i+1].start : _circles[_circles.length-1].getMS();
+            for(var j=_timingPoints[i].start; j<=limit; j+=_beatInfo.beatInterval){
+                
+                _measures.push({ms:j, x:$(window).width(), nb:measureNumber});
+                measureNumber++;
+                if(measureNumber==_timingPoints[i].measure+1){
+                    measureNumber=0;
+                }
+                
+            }
+        }
+        
+    }
+	
+	this.parseGeneralInfo = function(){
+        
+        var indexes = _this.getStartEndIndexes("General");
+        
+        for(var i=indexes.start; i<= indexes.end; i++){
+    
+            var splitted = _data[i].split(":");
+            var item = splitted[0];
+            var key = splitted[1];
+            
+            switch(item){
+             
+                case 'SliderMultiple':
+                    _generalInfo.audioFilename = key;
+                    break;
+                case 'AudioWait':
+                    _generalInfo.audioWait = parseInt(key);
+                    break;
+            }
+        }
+
+    }
+    
+    this.parseMetadata = function(){
+        
+        var indexes = _this.getStartEndIndexes("Metadata");
+        
+        for(var i=indexes.start; i<= indexes.end; i++){
+    
+            var splitted = _data[i].split(":");
+            var item = splitted[0];
+            var key = splitted[1];
+            
+            switch(item){
+             
+                case 'TitleUnicode':
+                    _metadata.title = key;
+                    break;
+                    
+                case 'ArtistUnicode':
+                    _metadata.artist = key;
+                    break;
+            }
+        }
+    }
+    
+    this.parseEditor = function(){
+        
+        var indexes = _this.getStartEndIndexes("Editor");
+        
+        for(var i=indexes.start; i<= indexes.end; i++){
+    
+            var splitted = _data[i].split(":");
+            var item = splitted[0];
+            var key = splitted[1];
+            
+            switch(item){
+             
+                case 'DistanceSpacing':
+                    _editor.distanceSpacing = parseFloat(key);
+                    break;
+                    
+                case 'BeatDivisor':
+                    _editor.beatDivisor = parseInt(key);
+                    break;
+                    
+                case 'GridSize':
+                    _editor.gridSize = parseInt(key);
+                    break;
+            }
+        }
+        
+    }
+    
+    this.parseCircles = function(){
+        
+        var indexes = _this.getStartEndIndexes("HitObjects");
+
+        for(var i=indexes.start; i<= indexes.end; i++){
+					
+            _circleID++;
+            var values = _data[i].split(",");
+            
+            var type;
+            var txt;
+            var emptyValue=false;
+                
+            switch(parseInt(values[4])){
+                case 0:
+                    type="don";
+                    txt="ドン";
+                    break;
+                case 2:
+                    type="ka";
+                    txt="カッ";
+                    break;
+                case 4:
+                    type="daiDon";
+                    txt="ドン";
+                    break;
+                case 6:
+                    type="daiKa";
+                    txt="カッ";
+                    break;
+                case 8:
+                    type="ka";
+                    txt="カッ";
+                    break;
+                case 10:
+                    type="ka";
+                    txt="カッ";
+                    break;
+                case 12:
+                    type="daiKa";
+                    txt="カッ";
+                    break;
+                case 14:
+                    type="daiKa";
+                    txt="カッ";
+                    break;
+                default:
+                    console.log('[WARNING] Unknown note type found on line ' + i+1 + ': ' + _data[i]);
+                    emptyValue=true;
+                    break;
+				}
+				if(!emptyValue)
+				    _circles.push(new Circle(_circleID, parseInt(values[2]),type,txt));
+        }
+    }
+	
+	_this.parseGeneralInfo(); 
+	_this.parseMetadata();
+	_this.parseCircles();
+	_this.parseEditor();
+	_this.parseTiming();
+	_this.parseDifficulty();
+
+	this.getData = function(){
+		return {
+			generalInfo: _generalInfo,
+			metaData: _metadata,
+			editor: _editor,
+			beatInfo: _beatInfo,
+			difficulty: _difficulty,
+			timingPoints: _timingPoints,
+			circles: _circles,
+			measures: _measures
+		};
+	}
+}
--- a/public/src/js/scoresheet.js
+++ b/public/src/js/scoresheet.js
@@ -0,0 +1,111 @@
+
+function Scoresheet(controller, score){
+    
+    var _this = this;
+    var _score = score;
+    var _mark;
+	
+	this.setResults = function(){
+		
+		if (_score.fail == 0) {
+        	_mark = 'gold';
+    	} else if (_score.hp >= 50) {
+    		_mark = 'silver';
+    	};
+
+		var imgW = (_score.hp*$("#score-hp-bar-colour").width())/100;
+		$("#score-hp-bar-colour img").css("clip", "rect(0, "+imgW+"px, "+$("#score-hp-bar-colour").height()+"px, 0)");
+		
+		if (_mark == 'gold') {
+			$("#score-mark").attr("src", '/assets/img/ranking-X.png');
+		} else if (_mark == 'silver') {
+			$("#score-mark").attr("src", '/assets/img/ranking-S.png');
+		} else {
+			$("#score-mark").remove();
+		};
+
+		$("#score-points").html(_score.points+"点");
+		$("#nb-great").html(_score.great);
+		$("#nb-good").html(_score.good);
+		$("#nb-fail").html(_score.fail);
+		$("#max-combo").html(_score.maxCombo);
+
+		$('.result-song').attr('alt', _score.song).html(_score.song);
+		
+	}
+	
+	this.positionning = function(){
+		
+		$("#score-cont").css("top", $("#result-bar").height()/2 - ($("#score-cont").height()/2));
+		
+		var markSize = 0.1*$("#score-cont").width();
+		var markX = $("#score-cont").offset().left - markSize - (0.5*markSize);
+		var markY = $("#score-cont").offset().top;
+		
+		$("#score-mark").width(markSize);
+		$("#score-mark").height(markSize);
+		$("#score-mark").css("left", markX);
+		$("#score-mark").css("top", markY);
+		
+		var scoreBarW = 0.9*$("#score-cont").width();
+
+		$("#score-hp-bar-bg").width(scoreBarW);
+		$("#score-hp-bar-bg").height((51/703)*scoreBarW);
+		
+		var bgW = $("#score-hp-bar-bg").width();
+		var bgH = $("#score-hp-bar-bg").height();
+		var bgX = $("#score-hp-bar-bg").position().left;
+		var bgY = $("#score-hp-bar-bg").position().top;
+		
+		$("#score-hp-bar-colour").css("left", bgX+(0.008*bgW));
+		$("#score-hp-bar-colour").css("top", bgY+(0.15*bgH));
+		$("#score-hp-bar-colour").width(bgW-(0.08*bgW));
+		$("#score-hp-bar-colour").height(bgH-(0.25*bgH));
+		
+		$("#score-details").css("top", bgY+bgH+(bgH));
+
+		var barY = $("#result-bar").position().top;
+		var barH = $("#result-bar").height();
+		
+		var bottomY = barY+barH+15;
+		var bottomH = $(window).height()-bottomY;
+		
+		$("#bottom-part").css("top", bottomY);
+		$("#bottom-part").height(bottomH);
+		
+		
+	}
+	
+    this.run = function(){
+		_this.positionning();
+		_this.setResults();
+		
+        $("#song-select").click(function(){
+        	assets.sounds["don"].play();
+        	bgm.pause();
+            controller.songSelection();
+        });
+        
+        $("#replay").click(function(){
+        	assets.sounds["don"].play();
+        	bgm.pause();
+            controller.restartSong();
+        });
+		
+		$(window).resize(_this.positionning);
+		
+    }
+
+	    assets.sounds["results"].play();
+	
+		bgm = new BufferedLoop(
+			{url: '/assets/audio/bgm_result.ogg', duration: 0.847},
+			{url: '/assets/audio/bgm_result_loop.ogg', duration: 16.842}
+		);
+		bgm.play();
+
+
+
+	$("#screen").load("/src/views/scoresheet.html", _this.run);
+    
+}
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -0,0 +1,227 @@
+function SongSelect(){
+ 
+    var _this=this;
+    var _songs;
+	var _selectedSong = {title:'', folder:'', difficulty:''};
+	var _code="";
+	var _preview;
+	var _preview_to;
+
+	this.startPreview = function(id, prvtime, first_open=true) {
+		var start = Date.now();
+		setTimeout(function(){
+			bgm.pause();
+		}, 400);
+
+		_preview = new Audio('/songs/' + id + '/main.mp3');
+		_preview.onloadeddata = function() {
+			var end = Date.now();
+			var delay = end - start;
+			var no_delay = first_open ? 0 : 300;
+
+			_preview.currentTime = prvtime/1000;
+			_preview.volume = 0.5;
+
+			_preview.addEventListener('ended', function(){
+				this.currentTime = prvtime/1000;
+				this.play();
+			}, false);
+			
+			_preview_to = setTimeout(function(){
+				_preview.play();
+			}, delay <= 1000 && first_open ? 1000 : no_delay);
+		}
+	};
+
+	this.endPreview = function() {
+		clearTimeout(_preview_to);
+		_preview.pause();
+	};
+    
+    this.run = function(){
+            
+		_this.createCode();
+		_this.display();
+		$(window).resize(_this.display);
+		
+		var menuLoop = setInterval(_this.refresh, 20);
+		$("#song-container").show();
+		
+		$(".difficulty").click(function(e){
+			_this.endPreview();
+			assets.sounds["diffsel"].pause();
+			assets.sounds["diffsel"].currentTime = 0;
+			assets.sounds["don"].play();
+
+			clearInterval(menuLoop);
+			var difficultyElement = (e.target.className=="stars" || e.target.className=="diffname") ? e.target.parentElement : e.target;
+			_selectedSong.difficulty = difficultyElement.classList[1]+'.osu';
+			var parentID = $(this).parent().closest(".song").attr("id");
+			var songID = parseInt(parentID.substr(5, parentID.length-1));
+			_selectedSong.title = $(this).parent().closest('.song').data('title');
+			_selectedSong.folder = songID;
+            
+            bgm.pause();
+			new loadSong(_selectedSong);
+		});
+		
+		$(".song").hover(function(){
+			if(!$(this).hasClass("opened"))
+				$(this).css("background", "rgba(255, 233, 125, 0.90)");
+		},
+		function(){
+			if(!$(this).hasClass("opened"))
+				$(this).css("background", "rgba(255, 220, 47, 0.90)");
+		});
+		
+		$(".song").click(function(e){
+			if (!$(e.target).parents('.difficulties').length) {
+				if ($(".opened").length && $(".opened").attr('id') == $(this).attr('id')) {
+					_this.endPreview();
+					bgm.play();
+					assets.sounds["cancel"].play();
+					$(".difficulty").hide();
+					$(".opened").removeClass("opened", 300);
+
+					assets.sounds["diffsel"].pause();
+					assets.sounds["diffsel"].currentTime = 0;
+					setTimeout(function(){
+						assets.sounds["song-select"].play();
+					}, 300);
+
+					$('.songsel-title').fadeOut(200, function(){
+						$('.songsel-title').attr('alt', '曲をえらぶ').html('曲をえらぶ').css('left', -300);
+						$('.songsel-title').animate({left:0, opacity:"show"}, 400);
+					});
+
+					return;
+				}
+
+
+				if(!$('.opened').length) {
+					_this.startPreview($(this).data('song-id'), $(this).data('preview'));				
+					assets.sounds["don"].play();
+					assets.sounds["song-select"].pause();
+					assets.sounds["song-select"].currentTime = 0;
+					setTimeout(function(){
+						assets.sounds["diffsel"].play();
+					}, 300);
+
+					$('.songsel-title').fadeOut(200, function(){
+						$('.songsel-title').attr('alt', 'むずかしさをえらぶ').html('むずかしさをえらぶ').css('left', -300);
+						$('.songsel-title').animate({left:0, opacity:"show"}, 400);
+					});
+				} else {
+					_preview.pause();
+					_this.startPreview($(this).data('song-id'), $(this).data('preview'), false);				
+					assets.sounds["ka"].play();
+				}
+			};
+
+			$(".difficulty").hide();
+			$(".opened").removeClass("opened", 300);
+			$(this).addClass("opened", 300, "linear", function(){
+				$(this).find(".difficulty").show();
+				$(this).css("background", "rgba(255, 220, 47, 0.90)");
+			});
+		});
+
+	}
+
+	this.createCode = function(){
+		bgm = new BufferedLoop(
+			{url: '/assets/audio/bgm_songsel.ogg', duration: 1.442},
+			{url: '/assets/audio/bgm_songsel_loop.ogg', duration: 2.064}
+		);
+		bgm.play();
+
+		setTimeout(function(){
+			assets.sounds["song-select"].play();
+		}, 200);
+		for(var i=0; i<assets.songs.length; i++){
+
+			var song = assets.songs[i];
+			var songDir = '/songs/' + song.id;
+			var songDifficulties = song.stars;
+			var songID = song.id;
+			var songTitle = song.title;
+			var songTitleSpace = songTitle.replace(/ /g, '&nbsp;');
+			var songPreview = song.preview;
+			var skipChars = [];
+			
+			var cl = /^[\x00-\xFF]*$/.test(songTitle) ? 'song-title alpha-title' : 'song-title';
+			_code += "<div id='song-"+songID+"' class='song' data-title='"+songTitle+"' data-song-id='"+songID+"' data-preview='"+songPreview+"'><div class='"+cl+"'>";
+			for (var c=0; c<songTitle.length; c++) {
+				if (skipChars.indexOf(c) > -1) {
+					continue;
+				};
+
+				var ch = songTitle.charAt(c) == ' ' ? '&nbsp;' : songTitle.charAt(c);
+
+				var isApos = false;
+				if (songTitle.charAt(c+1) == '\'') {
+					ch = ch + '\'';
+					skipChars.push(c+1);
+					isApos = true;
+				};
+
+				var cl = ch == '&nbsp;' ? 'song-title-char song-title-space' : 'song-title-char';
+				cl = isApos ? cl + ' song-title-apos' : cl;
+
+				_code += '<span class="' + cl + '" alt="' + ch + '">' + ch + '</span>';
+			};
+			_code += "</div><ul class='difficulties'>";
+			
+			for(var diff in songDifficulties){
+				var diffName = diff;
+				var diffLevel = songDifficulties[diff];
+				if (!diffLevel) {
+					continue;
+				}
+				
+				var starsDisplay="";
+				for(var x=1; x<=diffLevel; x++){
+					starsDisplay+="&#9733;<br>";
+				}
+				
+				var diffTxt;
+				switch(diffName){
+					case 'easy':
+						diffTxt="かんたん";
+						break;
+					case 'normal':
+						diffTxt="ふつう";
+						break;
+					case 'hard':
+						diffTxt="むずかしい";
+						break;
+					case 'oni':
+						diffTxt="おに";
+						break;
+				}
+
+				_code += "<li class='difficulty "+diffName+"'>";
+					_code+= "<span class='diffname'>"+diffTxt+"</span>";
+					_code+= "<span class='stars'>"+starsDisplay+"</span>";
+				_code += "</li>";
+			
+			}
+			
+			_code += "</ul></div>";
+			
+		}
+		
+		$("#song-container").html(_code);
+		$('.difficulty').hide();
+	}
+    
+    this.display = function(){
+    }
+    
+    this.refresh = function(){
+        
+    }
+	
+	$("#screen").load("/src/views/songselect.html", _this.run);
+    
+}
--- a/public/src/js/soundsystem.js
+++ b/public/src/js/soundsystem.js
@@ -0,0 +1,44 @@
+function soundSystem(controller){
+    
+    var _this = this;
+    var _speed=0;
+    var _circles = [];
+    var _circleID = -1;
+    var _measures = [];
+    var _sounds = assets.sounds;
+	var _channels=[];
+	var _channelMAX=20;
+	
+	for (var i=0;i<_channelMAX;i++) {// prepare the channels
+		_channels[i] = {};
+		_channels[i]["end"] = -1; 
+		_channels[i]["audio"] = new Audio();
+	}
+
+	this.playSound = function(soundID){
+		
+		for(var i=0;i<_channelMAX;i++){ //play in different sounds in different channels
+			var now = new Date();
+			if (_channels[i]["end"] < now.getTime()) {// is this channel finished?
+				_channels[i]["end"] = now.getTime() + _sounds[soundID].duration*1000;
+				_channels[i]["audio"].src = _sounds[soundID].src;
+				_channels[i]["audio"].load();
+				_channels[i]["audio"].play();
+				break;
+			}
+		}
+		
+	}
+
+    this.fadeOutMusic = function(){
+        
+        if(_sounds["main-music"].volume.toFixed(1)!=0.0){
+            _sounds["main-music"].volume-=0.1;
+        }
+        else{
+            _sounds["main-music"].pause();
+            controller.fadeOutOver();
+        }
+    }
+    
+}
--- a/public/src/js/titlescreen.js
+++ b/public/src/js/titlescreen.js
@@ -0,0 +1,49 @@
+function Titlescreen(){
+    
+    var _this = this;
+	$("body").css("font-family", "TnT");
+	
+	this.positionning = function(){
+		
+		var width =  0.70*$(window).width();
+		var logoW = (width>=654) ? 654 : width;
+		var logoH = logoW/2.18;
+		
+		$("#logo-big-cont").width(logoW);
+		$("#logo-big-cont").height(logoH);
+		$("#logo-big-cont").css("left", $(window).width()/2-($("#logo-big-cont").width()/2));
+		$("#logo-big-cont").css("top", $(window).height()/2-($("#logo-big-cont").height()/2));
+		
+	}
+    
+    this.run = function(){
+        
+        $(document).keypress(function(e){
+            if(e.keyCode==13 && $("#screen").find("#title-screen").html())
+                _this.goNext();
+        });
+
+		$("#screen").find("#title-screen").click(function(){
+			_this.goNext();
+		});
+		
+		
+		_this.positionning();
+		$("#screen").find("#title-screen").show();
+		$(window).resize(_this.positionning);		
+
+		assets.sounds["title"].play();
+
+    }
+    
+    this.goNext = function(){
+    	assets.sounds["title"].pause();
+    	assets.sounds["title"].currentTime = 0;
+
+		assets.sounds["don"].play();
+        new SongSelect();
+    }
+    
+	$("#screen").load("/src/views/titlescreen.html", _this.run);
+	
+}
--- a/public/src/js/view.js
+++ b/public/src/js/view.js
@@ -0,0 +1,582 @@
+function View(controller, bg, title, diff){
+    
+    var _this = this;
+    var _canvas = document.getElementById('canvas');
+    var _ctx = _canvas.getContext('2d');
+    
+    var _winW = $(window).width();
+    var _winH = $(window).height();
+
+	/* Positionning and size variables */
+    var _barH;
+	var _barY;
+	var _lyricsBarH;
+    var _taikoW;
+	var _taikoH;
+	var _taikoX;
+	var _taikoY;
+    var _taikoSquareW = _winW/4;
+	var _slotX = _taikoSquareW+100;;
+	var _scoreSquareW;
+	var _scoreSquareH;
+	var _circleSize;
+	var _bigCircleSize;
+	var _circleY;
+	var _lyricsSize;
+	var _HPBarW;
+	var _HPBarH;
+	var _HPBarX;
+	var _HPBarY;
+	var _HPbarColX;
+	var _HPbarColY;
+	var _HPBarColMaxW;
+	var _HPBarColH;7
+	var _HPBarColWImage;
+	var _HPBarColWCanvas;
+	var _diffW;
+	var _diffH;
+	var _diffX;
+	var _diffY;
+	
+	var _circleAnimatorT;
+	var _animationStartPos;
+    
+    var _currentScore = 0;
+	var _special="";
+    var _scoreDispCount = -1;
+	var _scoreOpacity = 1.0;
+    
+    var _mainTextColor = "white";
+    var _mainFont = "normal 14pt TnT";
+    
+    var _lastMeasure = 0;
+    var _currentTimingPoint=0;
+    var _distanceForCircle=(_winW - _slotX); //Distance to be done by the circle
+    var _timeForDistanceCircle;
+	
+    var _currentCircleFace=0;
+	
+	var _currentDonFace=0;
+	var _currentBigDonFace=1;
+	
+	var _nextBeat=0;
+
+	var _songTitle = title;
+	var _songDifficulty = diff.split('.').slice(0, -1).join('.');
+    
+    this.run = function(){
+		_ctx.font = _mainFont;
+		_this.setBackground();
+
+		$('.game-song').attr('alt', _songTitle).html(_songTitle);
+
+        _this.refresh();
+    }
+	
+	this.setBackground = function(){
+		$("#game").css("background", "url('"+bg+"')");
+		$("#game").css("-webkit-background-size", "cover");
+		$("#game").css("-moz-background-size", "cover");
+		$("#game").css("-o-background-size", "cover");
+		$("#game").css("background-size", "cover");
+	}
+	
+	this.getDistanceForCircle = function(){
+		return _distanceForCircle;
+	}
+	
+	this.positionning = function(){
+		
+		_winW = $(window).width();
+        _winH = $(window).height();
+        _canvas.width = _winW;
+        _canvas.height = _winH;
+		_barY = 0.25*_winH;
+		_barH = 0.23*_winH;
+		_lyricsBarH = 0.2*_barH;
+		_taikoH = _barH;
+    	_taikoW = _taikoH/1.2;
+		_taikoX = _taikoSquareW-_taikoW-20;
+		_taikoY = _barY+5;
+    	_taikoSquareW = _winW/4;
+		_slotX = _taikoSquareW+100;
+		_scoreSquareW = 0.55*_taikoSquareW;
+		_scoreSquareH = 0.25*_barH;
+		_circleSize = 0.15*_barH;
+		_bigCircleSize = 0.25*_barH;
+		_circleY = (_barY+((_barH-_lyricsBarH)/2));
+		_lyricsSize = 0.6*_lyricsBarH;
+		_HPBarW = 2.475*_taikoSquareW;
+		_HPBarH = 0.35*_barH;
+		_HPBarX = _taikoSquareW+1.15*_taikoW;
+		_HPBarY = _barY-_HPBarH;
+		_HPbarColX = _HPBarX+0.008*_HPBarW;
+		_HPbarColY = _HPBarY+0.14*_HPBarH;
+		_HPBarColMaxW = _HPBarW-(0.075*_HPBarW);
+		_HPBarColH = _HPBarH-(0.2*_HPBarH);
+		_diffH = _winH * 0.16;
+		_diffW = _winW * 0.11;
+		_diffX = (_taikoX * 1.05)+15;
+		_diffY = _taikoY * 0.10;
+
+		var circles = controller.getCircles();
+		var currentCircle = controller.getCurrentCircle();
+		if(currentCircle==0){
+			_HPBarColWImage = (controller.getGlobalScore().hp*650)/100;
+       		_HPBarColWCanvas = (controller.getGlobalScore().hp*_HPBarColMaxW)/100;
+		}
+		else if(circles[currentCircle-1]){
+			if(circles[currentCircle-1].isAnimationFinished() || circles[currentCircle-1].getScore()==0){
+				_HPBarColWImage = (controller.getGlobalScore().hp*650)/100;
+       			_HPBarColWCanvas = (controller.getGlobalScore().hp*_HPBarColMaxW)/100;
+			}
+		}
+
+	}
+    
+    this.refresh = function(){
+        
+        _this.positionning();
+        _distanceForCircle=(_winW - _slotX);
+        _timeForDistanceCircle=((20*_distanceForCircle)/controller.getHitcircleSpeed());
+        
+        /* Draw */
+        this.drawBar();
+        this.drawSlot();
+        this.drawMeasures();
+		this.drawHPBar();
+        this.drawCircles();
+        this.drawTaikoSquare();
+        this.drawScore();
+        this.drawPressedKeys();
+        this.drawCombo();
+        this.drawGlobalScore();
+        this.drawTime();
+        this.drawDifficulty();
+		
+		this.updateDonFaces();//animate circle face when combo superior to 50
+ 
+    }
+
+	this.updateDonFaces = function(){
+		
+		if(controller.getEllapsedTime().ms>=_nextBeat){
+			_nextBeat+=controller.getSongData().beatInfo.beatInterval;
+			if(controller.getCombo()>=50){
+				_currentBigDonFace=(_currentBigDonFace+1)%2;
+				_currentDonFace=(_currentDonFace+1)%2;
+			}
+			else{
+				_currentBigDonFace=1;
+				_currentDonFace=0;
+			}
+		}
+		
+	}
+    
+    this.drawHPBar = function(){
+     
+		var bottomSquareX = _taikoSquareW;
+		var borderSize = 0.2*_HPBarH;
+		_ctx.fillStyle = "black";
+		_ctx.beginPath();
+		_ctx.fillRect(_HPBarX+_HPBarW-(0.2*_HPBarY), _HPBarY, 0.2*_HPBarW, _HPBarH);//right hand black square
+		_ctx.fillRect(bottomSquareX+borderSize, _HPBarY+0.435*_HPBarH, 0.5*_HPBarW, _HPBarH/2);
+		_ctx.fillRect(bottomSquareX, _HPBarY+0.68*_HPBarH, 0.8*_HPBarW, _HPBarH/4);
+		_ctx.arc(bottomSquareX+borderSize,_HPBarY+(0.435*_HPBarH)+borderSize,borderSize,0,Math.PI*2);
+		_ctx.fill();
+		_ctx.closePath();
+		
+        var barBG = document.getElementById('hp-bar-bg');
+        var barColour = document.getElementById('hp-bar-colour');
+
+        _ctx.drawImage(barBG, _HPBarX, _HPBarY, _HPBarW, _HPBarH);
+        _ctx.drawImage(barColour, 0, 0, Math.max(1, Math.floor(_HPBarColWImage)), 40, _HPbarColX, _HPbarColY, _HPBarColWCanvas, _HPBarColH);
+		
+    }
+    
+    this.drawMeasures = function(){
+        
+        var measures = controller.getSongData().measures;
+        var currentTime = controller.getEllapsedTime().ms;
+        
+        measures.forEach(function(measure, index){
+            if(currentTime>=measure.ms-_timeForDistanceCircle && currentTime<=measure.ms+350 && measure.nb==0){
+                _this.drawMeasure(measure);
+                measure.x-=controller.getHitcircleSpeed();
+            }
+            else{
+                measure.x=_winW; //set initial position to the extreme right of the screen
+            }
+        });
+        
+    }
+    
+    this.drawMeasure = function(measure){
+        _ctx.strokeStyle = "#bab8b8";
+        _ctx.lineWidth = "5.0";
+        _ctx.beginPath();
+        _ctx.moveTo(measure.x, _barY+5);
+        _ctx.lineTo(measure.x, _barY+_barH-_lyricsBarH-5);
+        _ctx.closePath();
+        _ctx.stroke();
+    }
+
+    this.drawCombo = function(){
+		if(controller.getCombo()>=10){
+			var comboY = _barY+(_barH/2);
+			var fontSize = (0.4)*_taikoH;
+			_ctx.font = "normal "+fontSize+"px TnT";
+			_ctx.textAlign = "center";
+			_ctx.strokeStyle = "black";
+			_ctx.strokeText(controller.getCombo(), _taikoSquareW-20-(_taikoW/2), comboY);
+			_ctx.fillStyle = "white";
+			_ctx.fillText(controller.getCombo(), _taikoSquareW-20-(_taikoW/2), comboY);
+			
+			var fontSize = (0.12)*_taikoH;
+			_ctx.font = "normal "+fontSize+"px TnT";
+			_ctx.textAlign = "center";
+			_ctx.strokeStyle = "black";
+			_ctx.strokeText("コンボ", _taikoSquareW-20-(_taikoW/2), comboY+1.5*fontSize);
+			_ctx.fillStyle = "white";
+			_ctx.fillText("コンボ", _taikoSquareW-20-(_taikoW/2), comboY+1.5*fontSize);
+			_scoreDispCount++;
+		}
+    }
+    
+    this.drawGlobalScore = function(){
+		
+		/* Draw score square */
+		_ctx.fillStyle="black";
+		_ctx.beginPath();
+		_ctx.fillRect(0,_barY,_scoreSquareW,_scoreSquareH-10);
+		_ctx.fillRect(0,_barY,_scoreSquareW-10,_scoreSquareH);
+		_ctx.arc(_scoreSquareW-10,_barY+(_scoreSquareH-10),10,0,Math.PI*2);
+		_ctx.fill();
+		_ctx.closePath();
+		
+		var fontSize = 0.7*_scoreSquareH;
+		/* Draw score text */
+		_ctx.font = "normal "+fontSize+"px TnT";
+        _ctx.fillStyle = "white";
+		_ctx.textAlign = "right";
+        _ctx.fillText(controller.getGlobalScore().points, _scoreSquareW-20, _barY+0.7*_scoreSquareH);
+    }
+    
+    this.drawPressedKeys = function(){
+
+		var keyRed = document.getElementById("taiko-key-red");
+		var keyBlue = document.getElementById("taiko-key-blue");
+ 
+		if(controller.getKeys()[67]){
+			var elemW = 0.45*_taikoW;
+			_ctx.drawImage(keyBlue, 0, 0, 68, 124, _taikoX+0.05*_taikoW, _taikoY+0.03*_taikoH, elemW, (124/68)*elemW);
+        }
+		
+        if(controller.getKeys()[86]){
+			var elemW = 0.35*_taikoW;
+            _ctx.drawImage(keyRed, 0, 0, 53, 100, _taikoX+0.15*_taikoW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW);
+        }
+    
+        if(controller.getKeys()[66]){
+			var elemW = 0.35*_taikoW;
+            _ctx.drawImage(keyRed, 53, 0, 53, 100, (_taikoX+0.15*_taikoW)+elemW, _taikoY+0.09*_taikoH, elemW, (100/53)*elemW);
+        }
+    
+        if(controller.getKeys()[78]){
+			var elemW = 0.45*_taikoW;
+            _ctx.drawImage(keyBlue, 68, 0, 68, 124, (_taikoX+0.05*_taikoW)+elemW, _taikoY+0.03*_taikoH, elemW, (124/68)*elemW);
+        }
+        
+    }
+    
+    this.displayScore = function(score, notPlayed){
+        _currentScore=score;
+		_special = (notPlayed) ? "-b" : "";
+        _scoreDispCount=0;
+		_scoreOpacity=1.0;
+    }
+    
+    this.drawScore = function(){
+
+		if(_scoreDispCount>=0 && _scoreDispCount<=20){
+			_ctx.globalAlpha = _scoreOpacity;
+			var scoreIMG = document.getElementById("score-"+_currentScore+_special);
+			_ctx.drawImage(scoreIMG, _slotX-(_barH/2), (_barY+((_barH-_lyricsBarH)/2))-(_barH/2), _barH, _barH);
+			_scoreDispCount++;
+			if(_scoreOpacity-0.1>=0 && _currentScore!=0) _scoreOpacity-=0.1;
+		}
+		else if(_scoreDispCount==21){
+			_scoreDispCount=-1;
+		}
+		_ctx.globalAlpha=1;
+	
+    }
+    
+    this.drawCircles = function(){
+        
+        var circles = controller.getCircles();
+        circles.forEach(function(circle){
+            
+			var currentTime = controller.getEllapsedTime().ms;
+            var startingTime = circle.getMS()-_timeForDistanceCircle;
+            var finishTime = circle.getMS()+100; //at circle.getMS(), the cirlce fits the slot
+			
+            if(!circle.getPlayed()){
+
+				if(currentTime <= startingTime){
+					var initPoint = {x:_winW, y:_circleY};
+					circle.setInitPos(initPoint); //set initial position to the extreme right of the screen
+				}
+                if(currentTime > startingTime && currentTime <= finishTime){
+                    _this.drawCircle(circle);
+                    circle.move(controller.getHitcircleSpeed());
+                }
+  
+            }
+			else{ //Animate circle to the HP bar
+				
+				var animationDuration=470; //ms
+				
+				if(currentTime>finishTime && !circle.isAnimated() && circle.getScore()!=0){
+					circle.animate();//start animation to HP bar
+					_animationStartPos=circle.getPos().x;
+					_this.drawCircle(circle);
+				}
+				else if(currentTime>finishTime && currentTime<=finishTime+animationDuration && circle.isAnimated()){
+					
+					var curveDistance = (_HPbarColX+_HPBarColWCanvas)-_animationStartPos;
+					var circleBezP0={
+						x:_animationStartPos,
+						y:_circleY
+					};
+
+					var circleBezP1={
+						x:_animationStartPos+(0.25*curveDistance),
+						y:0.5*_barH
+					};
+
+					var circleBezP2={
+						x:_animationStartPos+(0.75*curveDistance),
+						y:-_barH
+					};
+
+					var circleBezP3={
+						x:_animationStartPos+curveDistance,
+						y:_HPbarColY
+					};
+					var bezierPoint = _this.calcBezierPoint(circle.getAnimT(), circleBezP0, circleBezP1, circleBezP2, circleBezP3);
+					circle.moveTo(bezierPoint.x, bezierPoint.y);
+					_this.drawCircle(circle);
+					
+					if(currentTime>=circle.getLastFrame()){//update animation frame
+						circle.incAnimT();
+						circle.incFrame();
+					}
+				}
+				else if(currentTime>finishTime+animationDuration  && circle.isAnimated()){
+					circle.endAnimation();
+				}
+			}
+        });
+        
+    }
+	
+	this.calcBezierPoint = function(t, p0, p1, p2, p3){
+		
+		var data = [p0, p1, p2, p3];
+		var at = 1-t;
+		
+		for(var i=1; i<data.length; i++){
+			for(var k=0; k<data.length-i; k++){
+				data[k] = {
+					x: data[k].x * at + data[k+1].x *t,
+					y: data[k].y * at + data[k+1].y *t
+				};
+			}
+		}
+		
+		return data[0];
+	}
+    
+    this.drawCircle = function(circle){
+        
+        var size, color, txt;
+        var offsetBigY=0;
+        var suppBig=0;
+		var faceID;
+		
+        switch(circle.getType()){
+            
+            case 'don':
+                color = "#f54c25";
+                size = _circleSize;
+                txt = "ドン";
+				faceID = "don-"+_currentDonFace;
+                break;
+                
+            case 'ka':
+                color = "#75CEE9";
+                size = _circleSize;
+                txt="カッ";
+				faceID = "don-"+_currentDonFace;
+                break;
+                
+            case 'daiDon':
+                color = "#f54c25";
+                size = _bigCircleSize;
+                txt = "ドン(大）";
+                offsetBigY=5;
+                suppBig=10;
+				faceID = "big-don-"+_currentBigDonFace;
+                break;
+                
+            case 'daiKa':
+                color = "#75CEE9";
+                size = _bigCircleSize;
+                txt="カッ(大）";
+                offsetBigY=5;
+                suppBig=10;
+				faceID = "big-don-"+_currentBigDonFace;
+                break;
+                
+        }
+
+        //Main circle
+        _ctx.fillStyle = color;
+        _ctx.beginPath();
+        _ctx.arc(circle.getPos().x, circle.getPos().y, size, 0, 2*Math.PI);
+        _ctx.closePath();
+        _ctx.fill();
+
+        //Face on circle
+        var face = document.getElementById(faceID);
+        _ctx.drawImage(face, circle.getPos().x-size-2, circle.getPos().y-size-4, (size*2)+5, (size*2)+6);
+            
+		if(!circle.isAnimated()){
+			//text
+			_ctx.font = "normal bold "+_lyricsSize+"px Kozuka";
+			_ctx.textAlign = "center";
+			_ctx.strokeStyle = "black";
+			_ctx.strokeText(txt, circle.getPos().x+size/2, _barY+_barH-(0.3*_lyricsBarH));
+			_ctx.fillStyle = "white";
+			_ctx.fillText(txt, circle.getPos().x+size/2, _barY+_barH-(0.3*_lyricsBarH));
+		}
+        
+    }
+    
+    this.togglePauseMenu = function(){
+        $("#pause-menu").is(":visible") ? $("#pause-menu").hide() : $("#pause-menu").show();
+    }
+
+    this.drawDifficulty = function(){
+    	var muzu = document.getElementById('muzu_' + _songDifficulty);
+    	_ctx.drawImage(muzu, _diffY, _diffX, _diffW, _diffH);
+    };
+    
+    this.drawTime = function(){
+        
+        var time = controller.getEllapsedTime();
+        
+        _ctx.globalAlpha = 0.7;
+        _ctx.fillStyle = "black";
+        _ctx.fillRect(_winW-110, _winH-60, _winW, _winH);
+        
+        _ctx.globalAlpha = 1.0;
+        _ctx.fillStyle = "white";
+        
+        var formatedH = ('0' + time.hour).slice(-2);
+        var formatedM = ('0' + time.min).slice(-2);
+        var formatedS = ('0' + time.sec).slice(-2);
+        
+		_ctx.font = "normal "+_barH/12+"px Kozuka";
+        _ctx.fillText(formatedH+':'+formatedM+':'+formatedS, _winW-10, _winH-30);
+        _ctx.fillText(time.ms, _winW-10, _winH-10);
+        
+    }
+    
+    this.drawBar = function(){
+    
+        var grd;
+        if(controller.getKeys()[86] || controller.getKeys()[66]){ //keys v, b
+            grd = _ctx.createLinearGradient(0, _barY, _winW, _barH);
+            grd.addColorStop(0,"#f54c25");
+            grd.addColorStop(1,"#232323");
+        }
+        else if(controller.getKeys()[67] || controller.getKeys()[78]){ //keys c, n
+            grd = _ctx.createLinearGradient(0, _barY, _winW, _barH);
+            grd.addColorStop(0,"#75CEE9");
+            grd.addColorStop(1,"#232323");
+        }
+        else{
+            grd="#232323";
+        }
+    
+	   _ctx.strokeStyle = "black";
+	   _ctx.fillStyle = grd;
+	   _ctx.lineWidth = 10;
+	   _ctx.beginPath();
+	   _ctx.rect(0,_barY,_winW,_barH);
+	   _ctx.closePath();
+	   _ctx.fill();
+	   _ctx.stroke();
+	
+	   /* Lyrics bar */
+	   _ctx.fillStyle = "#888888";
+	   _ctx.beginPath();
+	   _ctx.rect(0,_barY+_barH-_lyricsBarH,_winW,_lyricsBarH);
+	   _ctx.closePath();
+	   _ctx.fill();
+	   _ctx.stroke();
+
+
+    }
+
+    this.drawSlot = function(){
+    
+        /* Main circle */
+        var normalSize = _circleSize-(0.2*_circleSize);
+        _ctx.fillStyle = "#6f6f6e";
+        _ctx.beginPath();
+        _ctx.arc(_slotX, _circleY, normalSize,0,2*Math.PI);
+        _ctx.closePath();
+        _ctx.fill();
+    
+        /* Big stroke circle */
+        var bigSize = _circleSize;
+        _ctx.strokeStyle = "#9e9f9f";
+        _ctx.lineWidth = 3;
+        _ctx.beginPath();
+        _ctx.arc(_slotX, _circleY, bigSize,0,2*Math.PI);
+        _ctx.closePath();
+        _ctx.stroke();
+		
+		/* Bigger stroke circle */
+        var bigSize = _bigCircleSize;
+        _ctx.strokeStyle = "#6f6f6e";
+        _ctx.lineWidth = 3;
+        _ctx.beginPath();
+        _ctx.arc(_slotX, _circleY, bigSize,0,2*Math.PI);
+        _ctx.closePath();
+        _ctx.stroke();
+    
+    }
+
+    this.drawTaikoSquare = function(){
+		
+        /* Taiko square */
+        _ctx.lineWidth = 7;
+	    _ctx.fillStyle = "#ff3c00";
+        _ctx.strokeStyle = "black";
+	    _ctx.beginPath();
+	    _ctx.rect(0,_barY, _taikoSquareW,_barH);
+	    _ctx.fill();
+	    _ctx.closePath();
+	    _ctx.stroke();
+		
+		var taiko = document.getElementById("taiko");
+		_ctx.drawImage(taiko, _taikoX, _taikoY, _taikoW, _taikoH);
+
+    }
+
+}
--- a/public/src/views/game.html
+++ b/public/src/views/game.html
@@ -0,0 +1,14 @@
+<div id='game'>
+	<h3 alt="" class="stroke-sub game-song"></h3>
+
+	<canvas id='canvas'></canvas>
+
+	<div id='pause-menu'>
+		<div class='window'>
+			<button type='button' id='continue-butt'>Continue</button>
+			<button type='button' id='restart-butt'>Restart</button>
+			<button type='button' id='song-selection-butt'>Song selection</button>
+		</div>
+	</div>
+	
+</div>
--- a/public/src/views/loader.html
+++ b/public/src/views/loader.html
@@ -0,0 +1,4 @@
+<div id="loader">
+	<div class='progress'></div>
+	<span class='percentage'>0%</span>
+</div>
--- a/public/src/views/loadsong.html
+++ b/public/src/views/loadsong.html
@@ -0,0 +1,6 @@
+<div id='load-song'>
+	<div id='loading-song'>
+		<img id='loading-don' src="/assets/img/dancing-don.gif" />
+		<p>Loading...</p>
+	</div>
+</div>
--- a/public/src/views/scoresheet.html
+++ b/public/src/views/scoresheet.html
@@ -0,0 +1,43 @@
+<div id='scoresheet'>
+	
+	<div id='top-part'>
+		<h2 alt="成績発表" class="stroke-main result-title">成績発表</h2>
+		<h3 alt="" class="stroke-sub result-song"></h3>
+	</div>
+	
+	<div id='result-bar'>
+		
+		<img id='score-mark' />
+		
+		<div id='score-cont'>
+			<div id='score-hp-bar-bg'>
+				<div id='score-hp-bar-colour'>
+					<img  src="/assets/img/hp-bar-colour.png" />
+				</div>
+			</div> 
+		
+			<div id='score-points'></div>
+			<table id='score-details'>
+				<tr>
+					<td class='floatLeft'>良</td><td class='value' id='nb-great'></td>
+					<td>最大コンボ数</td><td class='value' id='max-combo'></td>
+				</tr>
+				<tr>
+					<td class='floatLeft'>可</td><td class='value' id='nb-good'></td>
+					<!--<td>連打数</td><td id='nb-rendasu'></td>-->
+				</tr>
+				<tr>
+					<td class='floatLeft'>不可</td><td class='value' id='nb-fail'></td>
+					<td></td><td></td>
+				</tr>
+			</table>
+		</div>
+	</div>
+	
+	<div id='bottom-part'>
+		<div class='gradient-overlay'></div>
+		<button type='button' id='song-select'>Song select</button>
+		<button type='button' id='replay'>Replay</button>
+	</div>
+	
+</div>
--- a/public/src/views/songselect.html
+++ b/public/src/views/songselect.html
@@ -0,0 +1,4 @@
+<div id="song-select">
+	<h2 alt="曲をえらぶ" class="stroke-main songsel-title">曲をえらぶ</h2>
+	<div id='song-container'></div>
+</div>
--- a/public/src/views/titlescreen.html
+++ b/public/src/views/titlescreen.html
@@ -0,0 +1,4 @@
+<div id='title-screen'>
+	<div id='logo-big-cont'><img src="/assets/img/logo-big.png" alt="太鼓の達人ウェブ" /></div>
+	<h2 class='click-to-continue stroke-sub' alt="Click or press enter">Click or press enter</h2>
+</div>
				`@@ -0,0 +1 @@`
				FontDetect=function(){function e(){if(!n){n=!0;var e=document.body,t=document.body.firstChild,i=document.createElement("div");i.id="fontdetectHelper",r=document.createElement("span"),r.innerText="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",i.appendChild(r),e.insertBefore(i,t),i.style.position="absolute",i.style.visibility="hidden",i.style.top="-200px",i.style.left="-100000px",i.style.width="100000px",i.style.height="200px",i.style.fontSize="100px"}}function t(e,t){return e instanceof Element?window.getComputedStyle(e).getPropertyValue(t):window.jQuery?$(e).css(t):""}var n=!1,i=["serif","sans-serif","monospace","cursive","fantasy"],r=null;return{onFontLoaded:function(t,i,r,o){if(t){var s=o&&o.msInterval?o.msInterval:100,a=o&&o.msTimeout?o.msTimeout:2e3;if(i\|\|r){if(n\|\|e(),this.isFontLoaded(t))return void(i&&i(t));var l=this,f=(new Date).getTime(),d=setInterval(function(){if(l.isFontLoaded(t))return clearInterval(d),void i(t);var e=(new Date).getTime();e-f>a&&(clearInterval(d),r&&r(t))},s)}}},isFontLoaded:function(t){var o=0,s=0;n\|\|e();for(var a=0;a<i.length;++a){if(r.style.fontFamily='"'+t+'",'+i[a],o=r.offsetWidth,a>0&&o!=s)return!1;s=o}return!0},whichFont:function(e){for(var n=t(e,"font-family"),r=n.split(","),o=r.shift();o;){o=o.replace(/^\s['"]?\s([^'"])\s['"]?\s*$/,"$1");for(var s=0;s<i.length;s++)if(o==i[s])return o;if(this.isFontLoaded(o))return o;o=r.shift()}return null}}}();