nanahira/taiko-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Change drum to match Switch, add fullscreen to songsel, fix tutorial

Browse Source
This commit is contained in:
LoveEevee 2018-10-06 16:24:23 +03:00
parent 57632a83e5
commit e1b8b45d88
14 changed files with 121 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@ -47,11 +47,12 @@
<script src="/src/js/viewassets.js"></script>
<script src="/src/js/gamerules.js"></script>
<script src="/src/js/canvasdraw.js"></script>
<script src="/src/js/loader.js"></script>
</head>
<body>
<div id="assets"></div>
<div id="screen"></div>
<script src="/src/js/loader.js"></script>
<script src="/src/js/main.js"></script>
</body>
</html>

31
public/src/css/game.css
View File

@ -51,50 +51,33 @@
pointer-events: none;
z-index: 1;
}
#touch-bg{
#touch-drum{
display: none;
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
background: url(/assets/img/touch_bg.png) center bottom;
background-size: cover;
overflow: hidden;
}
#touch-bg-blue{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(/assets/img/touch_bg_blue.png) center bottom;
background-size: cover;
opacity: 0;
}
#touch-drum{
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
margin: auto;
}
#touch-drum img{
#touch-drum-img{
width: 100%;
}
#touch-buttons{
display: none;
position: absolute;
top: 7vh;
top: 6.5vh;
right: 2vh;
opacity: 0.5;
z-index: 5;
}
#touch-buttons img{
width: 12vh;
width: 12.5vmin;
height: 12.5vmin;
}
.touch-visible #touch-bg,
.touch-visible #touch-drum,
.touch-visible #touch-buttons{
display: block;
}

12
public/src/css/main.css
View File

@ -137,8 +137,9 @@ body{
border: 5px black solid;
border-radius: 10px;
height: 65%;
width: 50%;
max-width: 800px;
padding: 20px;
margin: 8px;
font-size: 16pt;
position: relative;
}
@ -214,3 +215,12 @@ kbd{
left: 0;
margin: auto;
}
#song-select #touch-full-btn{
display: none;
position: absolute;
top: 0;
right: 0;
width: 12.5vmin;
height: 12.5vmin;
opacity: 0.5;
}

2
public/src/js/assets.js
View File

@ -40,8 +40,6 @@ var assets = {
"bg_score_p1.png",
"bg_score_p2.png",
"badge_auto.png",
"touch_bg.png",
"touch_bg_blue.png",
"touch_drum.png",
"touch_pause.png",
"touch_fullscreen.png"

2
public/src/js/controller.js
View File

@ -131,7 +131,7 @@ class Controller{
if(!fadeIn){
this.clean()
}
new SongSelect(false, fadeIn)
new SongSelect(false, fadeIn, this.touchEnabled)
}
restartSong(){
this.clean()

10
public/src/js/loader.js
View File

@ -1,5 +1,6 @@
class Loader{
constructor(){
constructor(callback){
this.callback = callback
this.loadedAssets = 0
this.assetsDiv = document.getElementById("assets")
this.ajax("src/views/loader.html").then(this.run.bind(this))
@ -83,7 +84,7 @@ class Loader{
Promise.all(this.promises).then(() => {
this.clean()
new Titlescreen()
this.callback()
}, this.errorMsg.bind(this))
}
loadSound(name, gain){
@ -132,8 +133,3 @@ class Loader{
delete this.promises
}
}
var pageEvents = new PageEvents()
var loader = new Loader()
var snd = {}
var p2

29
public/src/js/main.js Normal file
View File

@ -0,0 +1,29 @@
function toggleFullscreen(){
var root = document.documentElement
if("requestFullscreen" in root){
if(document.fullscreenElement){
document.exitFullscreen()
}else{
root.requestFullscreen()
}
}else if("webkitRequestFullscreen" in root){
if(document.webkitFullscreenElement){
document.webkitExitFullscreen()
}else{
root.webkitRequestFullscreen()
}
}else if("mozRequestFullScreen" in root){
if(document.mozFullScreenElement){
document.mozCancelFullScreen()
}else{
root.mozRequestFullScreen()
}
}
}
var pageEvents = new PageEvents()
var snd = {}
var p2
var loader = new Loader(() => {
new Titlescreen()
})

9
public/src/js/scoresheet.js
View File

@ -58,8 +58,11 @@ class Scoresheet{
event.preventDefault()
this.canvas.style.cursor = ""
this.state.pointerLocked = true
}else if(event.which !== 1){
return
}else{
this.state.pointerLocked = false
if(event.which !== 1){
return
}
}
this.toNext()
}
@ -600,7 +603,7 @@ class Scoresheet{
if(elapsed >= 1000){
this.clean()
this.controller.songSelection(true)
this.controller.songSelection(true, false, this.state.pointerLocked)
}
}

14
public/src/js/songselect.js
View File

@ -1,5 +1,7 @@
class SongSelect{
constructor(fromTutorial, fadeIn){
constructor(fromTutorial, fadeIn, touchEnabled){
this.touchEnabled = touchEnabled
loader.changePage("songselect")
this.canvas = document.getElementById("song-sel-canvas")
this.ctx = this.canvas.getContext("2d")
@ -198,6 +200,11 @@ class SongSelect{
pageEvents.add(this.canvas, "mousemove", this.mouseMove.bind(this))
pageEvents.add(this.canvas, "mousedown", this.mouseDown.bind(this))
pageEvents.add(this.canvas, "touchstart", this.mouseDown.bind(this))
if(touchEnabled){
this.touchFullBtn = document.getElementById("touch-full-btn")
this.touchFullBtn.style.display = "block"
pageEvents.add(this.touchFullBtn, "click", toggleFullscreen)
}
}
keyDown(event, code){
@ -1135,6 +1142,11 @@ class SongSelect{
pageEvents.keyRemove(this, "all")
pageEvents.remove(this.canvas, "mousemove")
pageEvents.remove(this.canvas, "mousedown")
pageEvents.remove(this.canvas, "touchstart")
if(this.touchEnabled){
pageEvents.remove(this.touchFullBtn, "click")
delete this.touchFullBtn
}
delete this.ctx
delete this.canvas
}

8
public/src/js/titlescreen.js
View File

@ -15,7 +15,11 @@ class Titlescreen{
}
})
}
onPressed(){
onPressed(event){
if(event && event.type === "touchstart"){
event.preventDefault()
this.touched = true
}
this.titleScreen.style.cursor = "auto"
this.clean()
assets.sounds["don"].play()
@ -25,7 +29,7 @@ class Titlescreen{
if(localStorage.getItem("tutorial") !== "true"){
new Tutorial()
}else{
new SongSelect()
new SongSelect(false, false, this.touched)
}
}
clean(){

14
public/src/js/tutorial.js
View File

@ -4,18 +4,26 @@ class Tutorial{
loader.changePage("tutorial")
assets.sounds["bgm_setsume"].playLoop(0.1, false, 0, 1.054, 16.054)
this.endButton = document.getElementById("tutorial-end-button")
pageEvents.once(this.endButton, "click").then(this.onEnd.bind(this))
pageEvents.once(this.endButton, "mousedown").then(this.onEnd.bind(this))
pageEvents.once(this.endButton, "touchstart").then(this.onEnd.bind(this))
pageEvents.keyOnce(this, 13, "down").then(this.onEnd.bind(this))
this.gamepad = new Gamepad({
"confirm": ["start", "b"]
}, this.onEnd.bind(this))
}
onEnd(){
onEnd(event){
var touched = false
if(event && event.type === "touchstart"){
event.preventDefault()
touched = true
}
this.clean()
assets.sounds["don"].play()
localStorage.setItem("tutorial", "true")
setTimeout(() => {
new SongSelect(this.fromSongSel)
new SongSelect(this.fromSongSel, false, touched)
}, 500)
}
clean(){

152
public/src/js/view.js
View File

@ -51,32 +51,19 @@ class View{
this.beatInterval = this.controller.getSongData().beatInfo.beatInterval
this.assets = new ViewAssets(this)
this.touch = {
don_l: -Infinity,
don_r: -Infinity,
don_c: -Infinity,
ka_l: -Infinity,
ka_r: -Infinity,
ka_c: -Infinity,
cursor: {
ms: -Infinity,
x: 0,
y: 0
}
}
this.touch = -Infinity
if(this.controller.touchEnabled){
this.touchEnabled = true
this.touchBgDiv = document.getElementById("touch-bg")
this.touchBgBlueDiv = document.getElementById("touch-bg-blue")
this.touchDrumDiv = document.getElementById("touch-drum")
this.touchDrumImg = document.getElementById("touch-drum-img")
this.gameDiv.classList.add("touch-visible")
pageEvents.add(this.canvas.canvas, "touchstart", this.ontouch.bind(this))
this.touchFullBtn = document.getElementById("touch-full-btn")
pageEvents.add(this.touchFullBtn, "click", this.toggleFullscreen)
pageEvents.add(this.touchFullBtn, "click", toggleFullscreen)
this.touchPauseBtn = document.getElementById("touch-pause-btn")
pageEvents.add(this.touchPauseBtn, "click", () => {
@ -189,13 +176,11 @@ class View{
}
})()
this.touchCircle = (() => {
var padTop = this.touchDrum.h * 0.062
var padLeft = this.touchDrum.h * 0.05
return {
x: this.winW / 2,
y: this.winH + padTop,
rx: this.touchDrum.w / 2 - padLeft * 2,
ry: this.touchDrum.h
y: this.winH + this.touchDrum.h * 0.1,
rx: this.touchDrum.w / 2 - this.touchDrum.h * 0.03,
ry: this.touchDrum.h * 1.07
}
})()
}
@ -880,13 +865,7 @@ class View{
drawTouch(){
if(this.touchEnabled){
var ms = this.controller.getElapsedTime()
this.ctx.save()
var bgHeight = (this.winH - (this.barY + this.barH + 5)) / this.canvas.scale
if(bgHeight !== this.touchBgHeight){
this.touchBgHeight = bgHeight
this.touchBgDiv.style.height = bgHeight + "px"
}
var drumWidth = this.touchDrum.w / this.canvas.scale
var drumHeight = this.touchDrum.h / this.canvas.scale
if(drumHeight !== this.touchDrumHeight || drumWidth !== this.touchDrumWidth){
@ -895,41 +874,15 @@ class View{
this.touchDrumDiv.style.width = drumWidth + "px"
this.touchDrumDiv.style.height = drumHeight + "px"
}
var lastKa = this.touch.ka_l > this.touch.ka_r ? this.touch.ka_l : this.touch.ka_r
if(ms < lastKa + 150){
if(!this.blueBgShown){
this.blueBgShown = true
this.touchBgBlueDiv.style.opacity = 0.5
if(this.touch > ms - 150){
if(!this.drumPadding){
this.drumPadding = true
this.touchDrumImg.style.paddingTop = "1%"
}
}else if(this.blueBgShown){
this.blueBgShown = false
this.touchBgBlueDiv.style.opacity = 0
}else if(this.drumPadding){
this.drumPadding = false
this.touchDrumImg.style.paddingTop = ""
}
var c = this.touchCircle
var pi = Math.PI
var lastDon = this.touch.don_l > this.touch.don_r ? this.touch.don_l : this.touch.don_r
if(lastDon > ms - 150){
this.ctx.fillStyle = "rgba(239, 86, 51, 0.5)"
this.ctx.beginPath()
this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, pi, 0)
this.ctx.fill()
}
if(this.touch.don_c > ms - 150){
this.ctx.beginPath()
this.ctx.ellipse(c.x, c.y, c.rx * 0.6, c.ry * 0.6, 0, pi, 0)
this.ctx.fill()
}
if(this.touch.ka_c > ms - 150){
this.ctx.fillStyle = "rgba(33, 191, 211, 0.5)"
this.ctx.beginPath()
this.ctx.ellipse(c.x, c.y, c.rx * 1.3, c.ry * 1.3, 0, pi, 0)
this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, 0, pi, true)
this.ctx.fill()
}
this.ctx.restore()
}
}
ontouch(event){
@ -939,43 +892,24 @@ class View{
var pageX = touch.pageX * scale
var pageY = touch.pageY * scale
this.touch.cursor = {
ms: this.controller.getElapsedTime(),
x: pageX,
y: pageY
}
var c = this.touchCircle
var pi = Math.PI
var inPath = () => this.ctx.isPointInPath(pageX, pageY)
this.ctx.beginPath()
this.ctx.ellipse(c.x, c.y, c.rx * 0.6, c.ry * 0.6, 0, pi, 0)
this.ctx.ellipse(c.x, c.y, c.rx, c.ry, 0, pi, 0)
if(inPath()){
this.touchNote("don_c")
}else{
this.ctx.beginPath()
this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, pi, 0)
if(inPath()){
if(pageX < this.winW / 2){
this.touchNote("don_l")
}else{
this.touchNote("don_r")
}
if(pageX < this.winW / 2){
this.touchNote("don_l")
}else{
this.ctx.beginPath()
this.ctx.ellipse(c.x, c.y, c.rx * 1.3, c.ry * 1.3, 0, pi, 0)
if(inPath()){
this.touchNote("ka_c")
}else if(pageX < this.winW / 2){
this.touchNote("ka_l")
}else{
this.touchNote("ka_r")
}
this.touchNote("don_r")
}
}else{
if(pageX < this.winW / 2){
this.touchNote("ka_l")
}else{
this.touchNote("ka_r")
}
}
}
@ -984,39 +918,9 @@ class View{
var keyboard = this.controller.keyboard
var kbd = keyboard.getBindings()
var ms = this.controller.game.getAccurateTime()
this.touch[note] = ms
if(note === "don_c"){
this.touchNote("don_l")
this.touchNote("don_r")
}else if(note === "ka_c"){
this.touchNote("ka_l")
this.touchNote("ka_r")
}else{
keyboard.setKey(kbd[note], false)
keyboard.setKey(kbd[note], true, ms)
}
}
toggleFullscreen(){
var root = document.documentElement
if("requestFullscreen" in root){
if(document.fullscreenElement){
document.exitFullscreen()
}else{
root.requestFullscreen()
}
}else if("webkitRequestFullscreen" in root){
if(document.webkitFullscreenElement){
document.webkitExitFullscreen()
}else{
root.webkitRequestFullscreen()
}
}else if("mozRequestFullScreen" in root){
if(document.mozFullScreenElement){
document.mozCancelFullScreen()
}else{
root.mozRequestFullScreen()
}
}
this.touch = ms
keyboard.setKey(kbd[note], false)
keyboard.setKey(kbd[note], true, ms)
}
onmousemove(event){
this.lastMousemove = this.controller.getElapsedTime()
@ -1049,10 +953,10 @@ class View{
pageEvents.remove(this.touchFullBtn, "click")
pageEvents.remove(this.touchPauseBtn, "click")
this.gameDiv.classList.remove("touch-visible")
delete this.touchBgDiv
delete this.touchDrumDiv
delete this.touchDrumImg
delete this.touchFullBtn
delete this.touchPauseBtn
delete this.touchBgBlueDiv
}
delete this.pauseMenu
delete this.cursor

7
public/src/views/game.html
View File

@ -1,10 +1,7 @@
<div id="game">
<h3 alt="" class="stroke-sub game-song"></h3>
<div id="touch-bg">
<div id="touch-bg-blue"></div>
<div id="touch-drum">
<img src="/assets/img/touch_drum.png">
</div>
<div id="touch-drum">
<img id="touch-drum-img" src="/assets/img/touch_drum.png">
</div>
<canvas id="canvas"></canvas>
<div id="pause-menu">

1
public/src/views/songselect.html
View File

@ -1,3 +1,4 @@
<div id="song-select">
<canvas id="song-sel-canvas"></canvas>
<img id="touch-full-btn" src="/assets/img/touch_fullscreen.png">
</div>