From 240534529147fc750111ffbf1c55c76c2fccf40e Mon Sep 17 00:00:00 2001 From: Bui Date: Sun, 2 Sep 2018 17:11:09 +0100 Subject: [PATCH] add tutorial screen --- public/index.html | 1 + public/src/css/main.css | 92 ++++++++++++++++++++++++++++++++ public/src/js/assets.js | 4 +- public/src/js/songselect.js | 12 ++++- public/src/js/titlescreen.js | 6 ++- public/src/js/tutorial.js | 21 ++++++++ public/src/views/songselect.html | 1 + public/src/views/tutorial.html | 13 +++++ 8 files changed, 147 insertions(+), 3 deletions(-) create mode 100644 public/src/js/tutorial.js create mode 100644 public/src/views/tutorial.html diff --git a/public/index.html b/public/index.html index f39f3e2..622eccc 100644 --- a/public/index.html +++ b/public/index.html @@ -47,6 +47,7 @@ + diff --git a/public/src/css/main.css b/public/src/css/main.css index 3cf51da..60193e1 100644 --- a/public/src/css/main.css +++ b/public/src/css/main.css @@ -130,3 +130,95 @@ html, body{ transform: rotate(95deg); font-size: 90%; } + + +#tutorial-outer { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: absolute; + width: 100%; + height: 100%; +} + +#tutorial { + background: rgb(246, 234, 212); + color: black; + border: 5px black solid; + border-radius: 10px; + height: 65%; + width: 50%; + padding: 20px; + font-size: 16pt; + position: relative; +} + +#tutorial-title { + z-index: 1; + position: absolute; + color: white; + top: -25px; + font-size: 26pt; +} + +#tutorial-content { + padding: 15px 30px; +} + +kbd { + font-family: inherit; + padding: 0.1em 0.6em; + border: 1px solid #ccc; + font-size: 13px; + background-color: #f7f7f7; + color: #333; + -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset; + -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; + box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + display: inline-block; + text-shadow: 0 1px 0 #fff; + line-height: 1.4; + white-space: nowrap; +} + +.taibtn { + bottom: 15px; + margin: 0 auto; + position: absolute; + right: 15px; + padding: 10px 40px; + border-radius: 15px; + border: 3px rgba(218, 205, 178, 1) solid; + cursor: pointer; +} + +.taibtn:hover { + z-index: 1; + color: white; + background: rgb(255, 181, 71); + border-color: white; +} + +.taibtn:before { + padding: 0 40px; +} + +#tutorial-end-button { + font-size: 22pt; +} + +#songsel-help { + float: right; + background: rgba(255, 255, 255, 0.5); + color: black; + padding: 15px; + margin: 10px; + font-size: 18px; + border: 3px black solid; + border-radius: 50px; + cursor: pointer; +} \ No newline at end of file diff --git a/public/src/js/assets.js b/public/src/js/assets.js index 7aeeee6..ce0aa27 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -86,7 +86,9 @@ var assets = { 'bgm_songsel.ogg', 'bgm_songsel_loop.ogg', 'bgm_result.ogg', - 'bgm_result_loop.ogg' + 'bgm_result_loop.ogg', + 'bgm_setsume.ogg', + 'bgm_setsume_loop.ogg' ), songs: new Array(), diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index b7951ec..d5fa076 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -35,7 +35,9 @@ function SongSelect(){ this.endPreview = function() { clearTimeout(_preview_to); - _preview.pause(); + if (_preview) { + _preview.pause(); + }; }; this.run = function(){ @@ -46,6 +48,14 @@ function SongSelect(){ var menuLoop = setInterval(_this.refresh, 20); $("#song-container").show(); + + $('#songsel-help').click(function(){ + bgm.pause(); + _this.endPreview(); + assets.sounds['don'].playAsset(); + + new Tutorial(); + }); $(".difficulty").click(function(e){ _this.endPreview(); diff --git a/public/src/js/titlescreen.js b/public/src/js/titlescreen.js index ea5e353..64b3163 100644 --- a/public/src/js/titlescreen.js +++ b/public/src/js/titlescreen.js @@ -41,7 +41,11 @@ function Titlescreen(){ assets.sounds["title"].currentTime = 0; assets.sounds["don"].playAsset(); - new SongSelect(); + if (localStorage.getItem('tutorial') !== 'true') { + new Tutorial(); + } else { + new SongSelect(); + }; } $("#screen").load("/src/views/titlescreen.html", _this.run); diff --git a/public/src/js/tutorial.js b/public/src/js/tutorial.js new file mode 100644 index 0000000..7c8cce2 --- /dev/null +++ b/public/src/js/tutorial.js @@ -0,0 +1,21 @@ +function Tutorial() { + var _this = this; + + this.run = function() { + bgm = new BufferedLoop( + {url: '/assets/audio/bgm_setsume.ogg', duration: 1.054}, + {url: '/assets/audio/bgm_setsume_loop.ogg', duration: 15} + ); + bgm.play(); + + $('#tutorial-end-button').click(function(){ + bgm.pause(); + assets.sounds['don'].playAsset(); + + localStorage.setItem('tutorial', 'true'); + new SongSelect(); + }); + }; + + $('#screen').load('/src/views/tutorial.html', _this.run); +}; diff --git a/public/src/views/songselect.html b/public/src/views/songselect.html index 7b5b80e..0118dd3 100644 --- a/public/src/views/songselect.html +++ b/public/src/views/songselect.html @@ -1,4 +1,5 @@

曲をえらぶ

+
?
\ No newline at end of file diff --git a/public/src/views/tutorial.html b/public/src/views/tutorial.html new file mode 100644 index 0000000..c0e4599 --- /dev/null +++ b/public/src/views/tutorial.html @@ -0,0 +1,13 @@ +
+
+
How to Play
+
+

Hit the drum when the notes reach the taiko!

+

For red notes, hit the face of the drum (V or B)...

+

...and for blue notes, hit the rim! (C or N)

+

You can also press Q to pause, and hold SHIFT while selecting a difficulty to enter autoplay mode!

+
+ +
OK
+
+