AnthonyDuan/taiko-web
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restructure

Browse Source
This commit is contained in:
Bui
2018-08-27 23:17:47 +01:00
parent 68e9379baf
commit 58d5e3d748
34 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
public/src/css/animations.css Normal file
View File

@@ -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}
}

43
public/src/css/game.css Normal file
View File

@@ -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;
}

28
public/src/css/loader.css Normal file
View File

@@ -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;
}

31
public/src/css/loadsong.css Normal file
View File

@@ -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;
}

119
public/src/css/main.css Normal file
View File

@@ -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;
}

170
public/src/css/scoresheet.css Normal file
View File

@@ -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;
}

129
public/src/css/songselect.css Normal file
View File

@@ -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;
}

51
public/src/css/titlescreen.css Normal file
View File

@@ -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;
}