mirror of
https://github.com/jiojciojsioe3/a3cjroijsiojiorj.git
synced 2024-11-14 23:11:51 +08:00
P2: Add multiplayer session
This commit is contained in:
parent
b85f879ba0
commit
426bc160c6
@ -214,6 +214,7 @@ kbd{
|
||||
margin-bottom: 1em;
|
||||
background: #fff;
|
||||
border: 1px solid #a9a9a9;
|
||||
user-select: all;
|
||||
}
|
||||
.text-warn{
|
||||
color: #d00;
|
||||
@ -226,6 +227,21 @@ kbd{
|
||||
.nowrap{
|
||||
white-space: nowrap;
|
||||
}
|
||||
#session-invite{
|
||||
width: 100%;
|
||||
height: 1.9em;
|
||||
font-family: sans-serif;
|
||||
font-size: 2em;
|
||||
background: #fff;
|
||||
border: 1px solid #a9a9a9;
|
||||
padding: 0.3em;
|
||||
margin: 0.3em 0;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
user-select: all;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
}
|
||||
@keyframes bgscroll{
|
||||
from{
|
||||
background-position: 0 top;
|
||||
|
@ -117,7 +117,8 @@ var assets = {
|
||||
"titlescreen.html",
|
||||
"tutorial.html",
|
||||
"about.html",
|
||||
"debug.html"
|
||||
"debug.html",
|
||||
"session.html"
|
||||
],
|
||||
|
||||
"songs": [],
|
||||
|
@ -294,7 +294,9 @@ class Game{
|
||||
this.musicFadeOut++
|
||||
}else if(this.musicFadeOut === 1 && ms >= started + 1600){
|
||||
this.controller.gameEnded()
|
||||
p2.send("gameend")
|
||||
if(!p2.session){
|
||||
p2.send("gameend")
|
||||
}
|
||||
this.musicFadeOut++
|
||||
}else if(this.musicFadeOut === 2 && (ms >= started + 8600 && ms >= musicDuration + 250)){
|
||||
this.controller.displayResults()
|
||||
|
@ -4,7 +4,6 @@ class Loader{
|
||||
this.loadedAssets = 0
|
||||
this.assetsDiv = document.getElementById("assets")
|
||||
this.canvasTest = new CanvasTest()
|
||||
p2 = new P2Connection()
|
||||
this.startTime = +new Date
|
||||
|
||||
this.ajax("src/views/loader.html").then(this.run.bind(this))
|
||||
@ -97,6 +96,24 @@ class Loader{
|
||||
}
|
||||
}))
|
||||
|
||||
if(location.hash.length === 6){
|
||||
this.promises.push(new Promise(resolve => {
|
||||
p2.open()
|
||||
pageEvents.add(p2, "message", response => {
|
||||
if(response.type === "session"){
|
||||
resolve()
|
||||
}else if(response.type === "gameend"){
|
||||
p2.hash("")
|
||||
p2.hashLock = false
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
p2.send("invite", location.hash.slice(1).toLowerCase())
|
||||
}).then(() => {
|
||||
pageEvents.remove(p2, "message")
|
||||
}))
|
||||
}
|
||||
|
||||
this.promises.forEach(promise => {
|
||||
promise.then(this.assetLoaded.bind(this))
|
||||
})
|
||||
|
@ -92,6 +92,8 @@ class loadSong{
|
||||
}
|
||||
}else if(event.type === "gamestart"){
|
||||
this.clean()
|
||||
p2.clearMessage("scorenext")
|
||||
p2.clearMessage("songsel")
|
||||
loader.changePage("game")
|
||||
var taikoGame1 = new Controller(this.selectedSong, this.songData, false, 1, this.touchEnabled)
|
||||
var taikoGame2 = new Controller(this.selectedSong2, this.song2Data, true, 2, this.touchEnabled)
|
||||
|
@ -58,7 +58,7 @@ var fullScreenSupported = "requestFullscreen" in root || "webkitRequestFullscree
|
||||
|
||||
var pageEvents = new PageEvents()
|
||||
var snd = {}
|
||||
var p2
|
||||
var p2 = new P2Connection()
|
||||
var disableBlur = false
|
||||
var cancelTouch = true
|
||||
var lastHeight
|
||||
@ -98,6 +98,11 @@ pageEvents.keyAdd(debugObj, "all", "down", event => {
|
||||
debugObj.controller.restartSong()
|
||||
}
|
||||
})
|
||||
if(location.hash.length === 6){
|
||||
p2.hashLock = true
|
||||
}else{
|
||||
p2.hash("")
|
||||
}
|
||||
|
||||
var loader = new Loader(() => {
|
||||
new Titlescreen()
|
||||
|
@ -5,6 +5,8 @@ class P2Connection{
|
||||
this.otherConnected = false
|
||||
this.allEvents = new Map()
|
||||
this.addEventListener("message", this.message.bind(this))
|
||||
this.currentHash = ""
|
||||
pageEvents.add(window, "hashchange", this.onhashchange.bind(this))
|
||||
}
|
||||
addEventListener(type, callback){
|
||||
var addedType = this.allEvents.get(type)
|
||||
@ -24,8 +26,8 @@ class P2Connection{
|
||||
this.closed = false
|
||||
var wsProtocol = location.protocol == "https:" ? "wss:" : "ws:"
|
||||
this.socket = new WebSocket(wsProtocol + "//" + location.host + "/p2")
|
||||
pageEvents.race(this.socket, "open", "close", listener =>{
|
||||
if(listener === "open"){
|
||||
pageEvents.race(this.socket, "open", "close").then(response => {
|
||||
if(response.type === "open"){
|
||||
return this.openEvent()
|
||||
}
|
||||
return this.closeEvent()
|
||||
@ -76,17 +78,22 @@ class P2Connection{
|
||||
}catch(e){
|
||||
var response = {}
|
||||
}
|
||||
this.lastMessages[response.type] = response.value
|
||||
this.lastMessages[response.type] = response
|
||||
var addedType = this.allEvents.get("message")
|
||||
if(addedType){
|
||||
addedType.forEach(callback => callback(response))
|
||||
}
|
||||
}
|
||||
getMessage(type, callback){
|
||||
getMessage(type){
|
||||
if(type in this.lastMessages){
|
||||
return this.lastMessages[type]
|
||||
}
|
||||
}
|
||||
clearMessage(type){
|
||||
if(type in this.lastMessages){
|
||||
this.lastMessages[type] = null
|
||||
}
|
||||
}
|
||||
message(response){
|
||||
switch(response.type){
|
||||
case "gamestart":
|
||||
@ -98,6 +105,11 @@ class P2Connection{
|
||||
break
|
||||
case "gameend":
|
||||
this.otherConnected = false
|
||||
this.session = false
|
||||
if(this.hashLock){
|
||||
this.hash("")
|
||||
this.hashLock = false
|
||||
}
|
||||
break
|
||||
case "gameresults":
|
||||
this.results = {}
|
||||
@ -114,8 +126,24 @@ class P2Connection{
|
||||
case "drumroll":
|
||||
this.drumrollPace = response.value.pace
|
||||
break
|
||||
case "session":
|
||||
this.clearMessage("users")
|
||||
this.otherConnected = true
|
||||
this.session = true
|
||||
break
|
||||
}
|
||||
}
|
||||
onhashchange(){
|
||||
if(this.hashLock){
|
||||
this.hash(this.currentHash)
|
||||
}else{
|
||||
location.reload()
|
||||
}
|
||||
}
|
||||
hash(string){
|
||||
this.currentHash = string
|
||||
history.replaceState("", "", location.pathname + (string ? "#" + string : ""))
|
||||
}
|
||||
play(circle, mekadon){
|
||||
if(this.otherConnected || this.notes.length > 0){
|
||||
var type = circle.getType()
|
||||
|
@ -33,6 +33,23 @@ class Scoresheet{
|
||||
|
||||
assets.sounds["results"].play()
|
||||
assets.sounds["bgm_result"].playLoop(3, false, 0, 0.847, 17.689)
|
||||
|
||||
if(p2.session){
|
||||
if(p2.getMessage("scorenext")){
|
||||
this.toScorenext(true)
|
||||
}
|
||||
if(p2.getMessage("songsel")){
|
||||
this.toSongsel(true)
|
||||
}
|
||||
pageEvents.add(p2, "message", response => {
|
||||
if(response.type === "scorenext"){
|
||||
this.toScorenext(true)
|
||||
}else if(response.type === "songsel"){
|
||||
this.state.pointerLocked = true
|
||||
this.toSongsel(true)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
keyDown(event, code){
|
||||
if(!code){
|
||||
@ -68,16 +85,29 @@ class Scoresheet{
|
||||
this.toNext()
|
||||
}
|
||||
toNext(){
|
||||
var ms = this.getMS()
|
||||
var elapsed = ms - this.state.screenMS
|
||||
var elapsed = this.getMS() - this.state.screenMS
|
||||
if(this.state.screen === "fadeIn" && elapsed >= this.state.startDelay){
|
||||
this.state.screen = "scoresShown"
|
||||
this.state.screenMS = ms
|
||||
assets.sounds["note_don"].play()
|
||||
this.toScorenext()
|
||||
}else if(this.state.screen === "scoresShown" && elapsed >= 1000){
|
||||
this.toSongsel()
|
||||
}
|
||||
}
|
||||
toScorenext(fromP2){
|
||||
if(p2.session && !fromP2){
|
||||
p2.send("scorenext")
|
||||
}
|
||||
this.state.screen = "scoresShown"
|
||||
this.state.screenMS = this.getMS()
|
||||
assets.sounds["note_don"].play()
|
||||
}
|
||||
toSongsel(fromP2){
|
||||
if(p2.session && !fromP2){
|
||||
this.state.pointerLocked = true
|
||||
p2.send("songsel")
|
||||
}else{
|
||||
snd.musicGain.fadeOut(0.5)
|
||||
this.state.screen = "fadeOut"
|
||||
this.state.screenMS = ms
|
||||
this.state.screenMS = this.getMS()
|
||||
assets.sounds["note_don"].play()
|
||||
}
|
||||
}
|
||||
|
65
public/src/js/session.js
Normal file
65
public/src/js/session.js
Normal file
@ -0,0 +1,65 @@
|
||||
class Session{
|
||||
constructor(touchEnabled){
|
||||
this.touchEnabled = touchEnabled
|
||||
loader.changePage("session")
|
||||
this.endButton = document.getElementById("tutorial-end-button")
|
||||
if(touchEnabled){
|
||||
document.getElementById("tutorial-outer").classList.add("touch-enabled")
|
||||
}
|
||||
this.sessionInvite = document.getElementById("session-invite")
|
||||
|
||||
pageEvents.add(window, ["mousedown", "touchstart"], this.mouseDown.bind(this))
|
||||
pageEvents.keyOnce(this, 27, "down").then(this.onEnd.bind(this))
|
||||
|
||||
this.gamepad = new Gamepad({
|
||||
"confirm": ["start", "b", "ls", "rs"]
|
||||
}, this.onEnd.bind(this))
|
||||
|
||||
p2.hashLock = true
|
||||
pageEvents.add(p2, "message", response => {
|
||||
if(response.type === "invite"){
|
||||
this.sessionInvite.innerText = location.origin + location.pathname + "#" + response.value
|
||||
p2.hash(response.value)
|
||||
}else if(response.type === "songsel"){
|
||||
p2.clearMessage("users")
|
||||
this.onEnd(false, true)
|
||||
}
|
||||
})
|
||||
p2.send("invite")
|
||||
}
|
||||
mouseDown(event){
|
||||
if(event.target === this.sessionInvite){
|
||||
this.sessionInvite.focus()
|
||||
}else{
|
||||
getSelection().removeAllRanges()
|
||||
this.sessionInvite.blur()
|
||||
}
|
||||
if(event.target === this.endButton){
|
||||
this.onEnd()
|
||||
}
|
||||
}
|
||||
onEnd(event, fromP2){
|
||||
if(!p2.session){
|
||||
p2.send("leave")
|
||||
p2.hash("")
|
||||
p2.hashLock = false
|
||||
}else if(!fromP2){
|
||||
return p2.send("songsel")
|
||||
}
|
||||
if(event && event.type === "keydown"){
|
||||
event.preventDefault()
|
||||
}
|
||||
this.clean()
|
||||
assets.sounds["don"].play()
|
||||
setTimeout(() => {
|
||||
new SongSelect(false, false, this.touchEnabled)
|
||||
}, 500)
|
||||
}
|
||||
clean(){
|
||||
this.gamepad.clean()
|
||||
pageEvents.remove(window, ["mousedown", "touchstart"])
|
||||
pageEvents.keyRemove(this, 27)
|
||||
delete this.endButton
|
||||
delete this.sessionInvite
|
||||
}
|
||||
}
|
@ -176,10 +176,16 @@ class SongSelect{
|
||||
this.selectTextCache = new CanvasCache()
|
||||
this.categoryCache = new CanvasCache()
|
||||
this.difficultyCache = new CanvasCache()
|
||||
this.sessionCache = new CanvasCache()
|
||||
|
||||
this.difficulty = ["かんたん", "ふつう", "むずかしい", "おに"]
|
||||
this.difficultyId = ["easy", "normal", "hard", "oni", "ura"]
|
||||
|
||||
this.sessionText = {
|
||||
"sessionstart": "2人プレイのネットプレイセッションを開始する!",
|
||||
"sessionend": "ネットプレイを終了する"
|
||||
}
|
||||
|
||||
this.selectedSong = 0
|
||||
this.selectedDiff = 0
|
||||
assets.sounds["bgm_songsel"].playLoop(0.1, false, 0, 1.442, 3.506)
|
||||
@ -187,12 +193,15 @@ class SongSelect{
|
||||
if(!fromTutorial && !("selectedSong" in localStorage)){
|
||||
fromTutorial = touchEnabled ? "about" : "tutorial"
|
||||
}
|
||||
if(p2.session){
|
||||
fromTutorial = false
|
||||
}
|
||||
|
||||
if(fromTutorial){
|
||||
this.selectedSong = this.songs.findIndex(song => song.action === fromTutorial)
|
||||
this.playBgm(true)
|
||||
}else{
|
||||
if("selectedSong" in localStorage){
|
||||
if(!p2.session && "selectedSong" in localStorage){
|
||||
this.selectedSong = Math.min(Math.max(0, localStorage["selectedSong"] |0), this.songs.length)
|
||||
}
|
||||
assets.sounds["song-select"].play()
|
||||
@ -209,8 +218,9 @@ class SongSelect{
|
||||
this.songSelect.style.backgroundImage = "url('" + assets.image["bg_genre_" + sort].src + "')"
|
||||
|
||||
this.previewId = 0
|
||||
var skipStart = fromTutorial || p2.session
|
||||
this.state = {
|
||||
screen: fromTutorial ? "song" : (fadeIn ? "titleFadeIn" : "title"),
|
||||
screen: skipStart ? "song" : (fadeIn ? "titleFadeIn" : "title"),
|
||||
screenMS: this.getMS(),
|
||||
move: 0,
|
||||
moveMS: 0,
|
||||
@ -218,7 +228,8 @@ class SongSelect{
|
||||
moveHover: null,
|
||||
locked: true,
|
||||
hasPointer: false,
|
||||
options: 0
|
||||
options: 0,
|
||||
selLock: false
|
||||
}
|
||||
this.songSelecting = {
|
||||
speed: 800,
|
||||
@ -244,6 +255,9 @@ class SongSelect{
|
||||
|
||||
pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
|
||||
pageEvents.add(loader.screen, "mousemove", this.mouseMove.bind(this))
|
||||
pageEvents.add(loader.screen, "mouseleave", () => {
|
||||
this.state.moveHover = null
|
||||
})
|
||||
pageEvents.add(loader.screen, ["mousedown", "touchstart"], this.mouseDown.bind(this))
|
||||
if(touchEnabled && fullScreenSupported){
|
||||
this.touchFullBtn = document.getElementById("touch-full-btn")
|
||||
@ -350,11 +364,15 @@ class SongSelect{
|
||||
var touch = true
|
||||
}
|
||||
if(this.state.screen === "song"){
|
||||
var moveBy = this.songSelMouse(mouse.x, mouse.y)
|
||||
if(moveBy === 0){
|
||||
this.toSelectDifficulty()
|
||||
}else if(moveBy !== null){
|
||||
this.moveToSong(moveBy)
|
||||
if(mouse.x > 513 && mouse.y > 603){
|
||||
this.toSession()
|
||||
}else{
|
||||
var moveBy = this.songSelMouse(mouse.x, mouse.y)
|
||||
if(moveBy === 0){
|
||||
this.toSelectDifficulty()
|
||||
}else if(moveBy !== null){
|
||||
this.moveToSong(moveBy)
|
||||
}
|
||||
}
|
||||
}else if(this.state.screen === "difficulty"){
|
||||
var moveBy = this.diffSelMouse(mouse.x, mouse.y)
|
||||
@ -380,9 +398,13 @@ class SongSelect{
|
||||
var mouse = this.mouseOffset(event.offsetX, event.offsetY)
|
||||
var moveTo = null
|
||||
if(this.state.screen === "song"){
|
||||
var moveTo = this.songSelMouse(mouse.x, mouse.y)
|
||||
if(moveTo === null && this.state.moveHover === 0 && !this.songs[this.selectedSong].stars){
|
||||
this.state.moveMS = this.getMS() - this.songSelecting.speed
|
||||
if(mouse.x > 513 && mouse.y > 603){
|
||||
moveTo = "session"
|
||||
}else{
|
||||
var moveTo = this.songSelMouse(mouse.x, mouse.y)
|
||||
if(moveTo === null && this.state.moveHover === 0 && !this.songs[this.selectedSong].stars){
|
||||
this.state.moveMS = this.getMS() - this.songSelecting.speed
|
||||
}
|
||||
}
|
||||
this.state.moveHover = moveTo
|
||||
}else if(this.state.screen === "difficulty"){
|
||||
@ -446,10 +468,17 @@ class SongSelect{
|
||||
return null
|
||||
}
|
||||
|
||||
moveToSong(moveBy){
|
||||
if(this.state.locked !== 1){
|
||||
var ms = this.getMS()
|
||||
if(this.songs[this.selectedSong].stars && this.state.locked === 0){
|
||||
moveToSong(moveBy, fromP2){
|
||||
var ms = this.getMS()
|
||||
if(p2.session && !fromP2){
|
||||
if(!this.state.selLock && ms > this.state.moveMS + 800){
|
||||
this.state.selLock = true
|
||||
p2.send("songsel", {
|
||||
song: this.mod(this.songs.length, this.selectedSong + moveBy)
|
||||
})
|
||||
}
|
||||
}else if(this.state.locked !== 1 || fromP2){
|
||||
if(this.songs[this.selectedSong].stars && (this.state.locked === 0 || fromP2)){
|
||||
this.state.moveMS = ms
|
||||
}else{
|
||||
this.state.moveMS = ms - this.songSelecting.speed * this.songSelecting.resize
|
||||
@ -482,9 +511,19 @@ class SongSelect{
|
||||
assets.sounds["ka"].play()
|
||||
}
|
||||
}
|
||||
toSelectDifficulty(){
|
||||
if(this.state.locked === 0){
|
||||
var currentSong = this.songs[this.selectedSong]
|
||||
toSelectDifficulty(fromP2){
|
||||
var currentSong = this.songs[this.selectedSong]
|
||||
if(p2.session && !fromP2 && currentSong.action !== "random"){
|
||||
if(this.songs[this.selectedSong].stars){
|
||||
if(!this.state.selLock){
|
||||
this.state.selLock = true
|
||||
p2.send("songsel", {
|
||||
song: this.selectedSong,
|
||||
selected: true
|
||||
})
|
||||
}
|
||||
}
|
||||
}else if(this.state.locked === 0 || fromP2){
|
||||
if(currentSong.stars){
|
||||
this.state.screen = "difficulty"
|
||||
this.state.screenMS = this.getMS()
|
||||
@ -516,11 +555,18 @@ class SongSelect{
|
||||
}else if(currentSong.action === "about"){
|
||||
this.toAbout()
|
||||
}
|
||||
this.pointer(false)
|
||||
}
|
||||
this.pointer(false)
|
||||
}
|
||||
toSongSelect(){
|
||||
if(this.state.locked !== 1){
|
||||
toSongSelect(fromP2){
|
||||
if(p2.session && !fromP2){
|
||||
if(!this.state.selLock){
|
||||
this.state.selLock = true
|
||||
p2.send("songsel", {
|
||||
song: this.selectedSong
|
||||
})
|
||||
}
|
||||
}else if(fromP2 || this.state.locked !== 1){
|
||||
this.state.screen = "song"
|
||||
this.state.screenMS = this.getMS()
|
||||
this.state.locked = true
|
||||
@ -544,10 +590,10 @@ class SongSelect{
|
||||
}
|
||||
var autoplay = false
|
||||
var multiplayer = false
|
||||
if(this.state.options === 1){
|
||||
autoplay = true
|
||||
}else if(this.state.options === 2){
|
||||
if(p2.session || this.state.options === 2){
|
||||
multiplayer = true
|
||||
}else if(this.state.options === 1){
|
||||
autoplay = true
|
||||
}else if(shift){
|
||||
autoplay = shift
|
||||
}else{
|
||||
@ -564,16 +610,20 @@ class SongSelect{
|
||||
}, autoplay, multiplayer, touch)
|
||||
}
|
||||
toOptions(moveBy){
|
||||
assets.sounds["ka"].play()
|
||||
this.selectedDiff = 1
|
||||
this.state.options = this.mod(this.optionsList.length, this.state.options + moveBy)
|
||||
if(!p2.session){
|
||||
assets.sounds["ka"].play()
|
||||
this.selectedDiff = 1
|
||||
this.state.options = this.mod(this.optionsList.length, this.state.options + moveBy)
|
||||
}
|
||||
}
|
||||
toTitleScreen(){
|
||||
assets.sounds["cancel"].play()
|
||||
this.clean()
|
||||
setTimeout(() => {
|
||||
new Titlescreen()
|
||||
}, 500)
|
||||
if(!p2.session){
|
||||
assets.sounds["cancel"].play()
|
||||
this.clean()
|
||||
setTimeout(() => {
|
||||
new Titlescreen()
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
toTutorial(){
|
||||
assets.sounds["don"].play()
|
||||
@ -589,6 +639,17 @@ class SongSelect{
|
||||
new About(this.touchEnabled)
|
||||
}, 500)
|
||||
}
|
||||
toSession(){
|
||||
if(p2.session){
|
||||
p2.send("gameend")
|
||||
}else{
|
||||
assets.sounds["don"].play()
|
||||
this.clean()
|
||||
setTimeout(() => {
|
||||
new Session(this.touchEnabled)
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
|
||||
redraw(){
|
||||
if(!this.redrawRunning){
|
||||
@ -657,6 +718,28 @@ class SongSelect{
|
||||
|
||||
this.difficultyCache.resize((44 + 56 + 2) * 5, 135 + 10, ratio + 0.5)
|
||||
|
||||
var w = winW / ratio / 2
|
||||
this.sessionCache.resize(w, 39 * 2, ratio + 0.5)
|
||||
for(var id in this.sessionText){
|
||||
this.sessionCache.set({
|
||||
w: w,
|
||||
h: 38,
|
||||
id: id
|
||||
}, ctx => {
|
||||
var text = this.sessionText[id]
|
||||
ctx.font = "28px " + this.font
|
||||
ctx.textAlign = "center"
|
||||
ctx.textBaseline = "middle"
|
||||
ctx.strokeStyle = "#000"
|
||||
ctx.lineWidth = 8
|
||||
ctx.lineJoin = "round"
|
||||
ctx.miterLimit = 1
|
||||
ctx.strokeText(text, w / 2, 38 / 2)
|
||||
ctx.fillStyle = "#fff"
|
||||
ctx.fillText(text, w / 2, 38 / 2)
|
||||
})
|
||||
}
|
||||
|
||||
this.selectableText = ""
|
||||
}else if(!document.hasFocus()){
|
||||
this.pointer(false)
|
||||
@ -1273,6 +1356,98 @@ class SongSelect{
|
||||
})
|
||||
}
|
||||
|
||||
ctx.fillStyle = "#000"
|
||||
ctx.fillRect(0, frameTop + 595, 1280 + frameLeft * 2, 125 + frameTop)
|
||||
var x = 0
|
||||
var y = frameTop + 603
|
||||
var w = frameLeft + 638
|
||||
var h = 117 + frameTop
|
||||
this.draw.pattern({
|
||||
ctx: ctx,
|
||||
img: assets.image["bg_score_p1"],
|
||||
x: x,
|
||||
y: y,
|
||||
w: w,
|
||||
h: h,
|
||||
dx: frameLeft + 10,
|
||||
dy: frameTop + 15,
|
||||
scale: 1.55
|
||||
})
|
||||
ctx.fillStyle = "rgba(249, 163, 149, 0.5)"
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, y)
|
||||
ctx.lineTo(x + w, y)
|
||||
ctx.lineTo(x + w - 4, y + 4)
|
||||
ctx.lineTo(x, y + 4)
|
||||
ctx.fill()
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0.25)"
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x + w, y)
|
||||
ctx.lineTo(x + w, y + h)
|
||||
ctx.lineTo(x + w - 4, y + h)
|
||||
ctx.lineTo(x + w - 4, y + 4)
|
||||
ctx.fill()
|
||||
x = frameLeft + 642
|
||||
this.draw.pattern({
|
||||
ctx: ctx,
|
||||
img: assets.image["bg_score_p2"],
|
||||
x: x,
|
||||
y: y,
|
||||
w: w,
|
||||
h: h,
|
||||
dx: frameLeft + 15,
|
||||
dy: frameTop - 20,
|
||||
scale: 1.55
|
||||
})
|
||||
ctx.fillStyle = "rgba(138, 245, 247, 0.5)"
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, y + h)
|
||||
ctx.lineTo(x, y)
|
||||
ctx.lineTo(x + w, y)
|
||||
ctx.lineTo(x + w, y + 4)
|
||||
ctx.lineTo(x + 4, y + 4)
|
||||
ctx.lineTo(x + 4, y + h)
|
||||
ctx.fill()
|
||||
if(screen !== "difficulty"){
|
||||
var elapsed = (ms - this.state.screenMS) % 3100
|
||||
var fade = 1
|
||||
if(!p2.session && screen === "song"){
|
||||
if(elapsed > 2800){
|
||||
fade = (elapsed - 2800) / 300
|
||||
}else if(2000 < elapsed){
|
||||
if(elapsed < 2300){
|
||||
fade = 1 - (elapsed - 2000) / 300
|
||||
}else{
|
||||
fade = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
if(fade > 0){
|
||||
if(fade < 1){
|
||||
ctx.globalAlpha = this.draw.easeIn(fade)
|
||||
}
|
||||
this.sessionCache.get({
|
||||
ctx: ctx,
|
||||
x: winW / 2,
|
||||
y: y + (h - 32) / 2,
|
||||
w: winW / 2,
|
||||
h: 38,
|
||||
id: p2.session ? "sessionend" : "sessionstart"
|
||||
})
|
||||
ctx.globalAlpha = 1
|
||||
}
|
||||
if(this.state.moveHover === "session"){
|
||||
this.draw.highlight({
|
||||
ctx: ctx,
|
||||
x: x,
|
||||
y: y,
|
||||
w: w,
|
||||
h: h,
|
||||
opacity: 0.8
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if(screen === "titleFadeIn"){
|
||||
ctx.save()
|
||||
|
||||
@ -1408,8 +1583,8 @@ class SongSelect{
|
||||
this.songs.forEach(song => {
|
||||
song.p2Cursor = null
|
||||
})
|
||||
if(response){
|
||||
response.forEach(idDiff => {
|
||||
if(response && response.value){
|
||||
response.value.forEach(idDiff => {
|
||||
var id = idDiff.id |0
|
||||
var diff = idDiff.diff
|
||||
var diffId = this.difficultyId.indexOf(diff)
|
||||
@ -1417,17 +1592,72 @@ class SongSelect{
|
||||
diffId = 3
|
||||
}
|
||||
if(diffId >= 0){
|
||||
var currentSong = this.songs.find(song => song.id === id)
|
||||
var index = 0
|
||||
var currentSong = this.songs.find((song, i) => {
|
||||
index = i
|
||||
return song.id === id
|
||||
})
|
||||
currentSong.p2Cursor = diffId
|
||||
if(currentSong.stars){
|
||||
this.selectedSong = index
|
||||
this.state.move = 0
|
||||
if(this.state.screen !== "difficulty"){
|
||||
this.toSelectDifficulty(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
onsongsel(response){
|
||||
if(response && response.value){
|
||||
var selected = false
|
||||
if("selected" in response.value){
|
||||
selected = response.value.selected
|
||||
}
|
||||
if("song" in response.value){
|
||||
var song = +response.value.song
|
||||
if(song >= 0 && song < this.songs.length){
|
||||
if(!selected){
|
||||
this.state.locked = true
|
||||
if(this.state.screen === "difficulty"){
|
||||
this.toSongSelect(true)
|
||||
}
|
||||
var moveBy = song - this.selectedSong
|
||||
if(moveBy){
|
||||
if(this.selectedSong < song){
|
||||
var altMoveBy = -this.mod(this.songs.length, this.selectedSong - song)
|
||||
}else{
|
||||
var altMoveBy = this.mod(this.songs.length, moveBy)
|
||||
}
|
||||
if(Math.abs(altMoveBy) < Math.abs(moveBy)){
|
||||
moveBy = altMoveBy
|
||||
}
|
||||
this.moveToSong(moveBy, true)
|
||||
}
|
||||
}else if(this.songs[song].stars){
|
||||
this.selectedSong = song
|
||||
this.state.move = 0
|
||||
if(this.state.screen !== "difficulty"){
|
||||
this.toSelectDifficulty(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
startP2(){
|
||||
this.onusers(p2.getMessage("users"))
|
||||
if(p2.session){
|
||||
this.onsongsel(p2.getMessage("songsel"))
|
||||
}
|
||||
pageEvents.add(p2, "message", response => {
|
||||
if(response.type == "users"){
|
||||
this.onusers(response.value)
|
||||
this.onusers(response)
|
||||
}
|
||||
if(p2.session && response.type == "songsel"){
|
||||
this.onsongsel(response)
|
||||
this.state.selLock = false
|
||||
}
|
||||
})
|
||||
if(p2.closed){
|
||||
@ -1449,6 +1679,7 @@ class SongSelect{
|
||||
this.selectTextCache.clean()
|
||||
this.categoryCache.clean()
|
||||
this.difficultyCache.clean()
|
||||
this.sessionCache.clean()
|
||||
assets.sounds["bgm_songsel"].stop()
|
||||
if(!this.bgmEnabled){
|
||||
snd.musicGain.fadeIn()
|
||||
@ -1459,7 +1690,8 @@ class SongSelect{
|
||||
this.redrawRunning = false
|
||||
this.endPreview()
|
||||
pageEvents.keyRemove(this, "all")
|
||||
pageEvents.remove(loader.screen, ["mousemove", "mousedown", "touchstart"])
|
||||
pageEvents.remove(loader.screen, ["mousemove", "mouseleave", "mousedown", "touchstart"])
|
||||
pageEvents.remove(p2, "message")
|
||||
if(this.touchEnabled && fullScreenSupported){
|
||||
pageEvents.remove(this.touchFullBtn, "click")
|
||||
delete this.touchFullBtn
|
||||
|
@ -12,6 +12,13 @@ class Titlescreen{
|
||||
this.onPressed()
|
||||
}
|
||||
})
|
||||
if(p2.session){
|
||||
pageEvents.add(p2, "message", response => {
|
||||
if(response.type === "songsel"){
|
||||
this.goNext(true)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
keyDown(event, code){
|
||||
if(!code){
|
||||
@ -34,13 +41,20 @@ class Titlescreen{
|
||||
this.titleScreen.style.cursor = "auto"
|
||||
this.clean()
|
||||
assets.sounds["don"].play()
|
||||
setTimeout(this.goNext.bind(this), 500)
|
||||
this.goNext()
|
||||
}
|
||||
goNext(){
|
||||
if(this.touched || localStorage.getItem("tutorial") === "true"){
|
||||
new SongSelect(false, false, this.touched)
|
||||
goNext(fromP2){
|
||||
if(p2.session && !fromP2){
|
||||
p2.send("songsel")
|
||||
}else if(fromP2 || this.touched || localStorage.getItem("tutorial") === "true"){
|
||||
pageEvents.remove(p2, "message")
|
||||
setTimeout(() => {
|
||||
new SongSelect(false, false, this.touched)
|
||||
}, 500)
|
||||
}else{
|
||||
new Tutorial()
|
||||
setTimeout(() => {
|
||||
new Tutorial()
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
clean(){
|
||||
|
11
public/src/views/session.html
Normal file
11
public/src/views/session.html
Normal file
@ -0,0 +1,11 @@
|
||||
<div id="tutorial-outer">
|
||||
<div id="tutorial">
|
||||
<div id="tutorial-title" class="stroke-sub" alt="Multiplayer Session">Multiplayer Session</div>
|
||||
<div id="tutorial-content">
|
||||
Share this link with your friend to start playing together! Do not leave this screen while they join.
|
||||
<div id="session-invite"></div>
|
||||
</div>
|
||||
|
||||
<div id="tutorial-end-button" class="taibtn stroke-sub" alt="Cancel">Cancel</div>
|
||||
</div>
|
||||
</div>
|
160
server.py
160
server.py
@ -3,11 +3,14 @@
|
||||
import asyncio
|
||||
import websockets
|
||||
import json
|
||||
import random
|
||||
|
||||
server_status = {
|
||||
"waiting": {},
|
||||
"users": []
|
||||
"users": [],
|
||||
"invites": {}
|
||||
}
|
||||
consonants = "bcdfghjklmnpqrstvwxyz"
|
||||
|
||||
def msgobj(type, value=None):
|
||||
if value == None:
|
||||
@ -24,6 +27,9 @@ def status_event():
|
||||
})
|
||||
return msgobj("users", value)
|
||||
|
||||
def get_invite():
|
||||
return "".join([random.choice(consonants) for x in range(5)])
|
||||
|
||||
async def notify_status():
|
||||
ready_users = [user for user in server_status["users"] if "ws" in user and user["action"] == "ready"]
|
||||
if ready_users:
|
||||
@ -34,7 +40,8 @@ async def connection(ws, path):
|
||||
# User connected
|
||||
user = {
|
||||
"ws": ws,
|
||||
"action": "ready"
|
||||
"action": "ready",
|
||||
"session": False
|
||||
}
|
||||
server_status["users"].append(user)
|
||||
try:
|
||||
@ -66,6 +73,8 @@ async def connection(ws, path):
|
||||
if action == "ready":
|
||||
# Not playing or waiting
|
||||
if type == "join":
|
||||
if value == None:
|
||||
continue
|
||||
waiting = server_status["waiting"]
|
||||
id = value["id"] if "id" in value else None
|
||||
diff = value["diff"] if "diff" in value else None
|
||||
@ -95,6 +104,7 @@ async def connection(ws, path):
|
||||
])
|
||||
else:
|
||||
# Wait for another user
|
||||
del user["other_user"]
|
||||
user["action"] = "waiting"
|
||||
user["gameid"] = id
|
||||
waiting[id] = {
|
||||
@ -104,9 +114,37 @@ async def connection(ws, path):
|
||||
await ws.send(msgobj("waiting"))
|
||||
# Update others on waiting players
|
||||
await notify_status()
|
||||
elif type == "invite":
|
||||
if value == None:
|
||||
# Session invite link requested
|
||||
invite = get_invite()
|
||||
server_status["invites"][invite] = user
|
||||
user["action"] = "invite"
|
||||
user["session"] = invite
|
||||
await ws.send(msgobj("invite", invite))
|
||||
elif value in server_status["invites"]:
|
||||
# Join a session with the other user
|
||||
user["other_user"] = server_status["invites"][value]
|
||||
del server_status["invites"][value]
|
||||
if "ws" in user["other_user"]:
|
||||
user["other_user"]["other_user"] = user
|
||||
user["action"] = "invite"
|
||||
user["session"] = value
|
||||
sent_msg = msgobj("session")
|
||||
await asyncio.wait([
|
||||
ws.send(sent_msg),
|
||||
user["other_user"]["ws"].send(sent_msg)
|
||||
])
|
||||
await ws.send(msgobj("invite"))
|
||||
else:
|
||||
del user["other_user"]
|
||||
await ws.send(msgobj("gameend"))
|
||||
else:
|
||||
# Session code is invalid
|
||||
await ws.send(msgobj("gameend"))
|
||||
elif action == "waiting" or action == "loading" or action == "loaded":
|
||||
# Waiting for another user
|
||||
if type == "leave":
|
||||
if type == "leave" and not user["session"]:
|
||||
# Stop waiting
|
||||
del server_status["waiting"][user["gameid"]]
|
||||
del user["gameid"]
|
||||
@ -129,9 +167,23 @@ async def connection(ws, path):
|
||||
elif action == "playing":
|
||||
# Playing with another user
|
||||
if "other_user" in user and "ws" in user["other_user"]:
|
||||
if type == "note" or type == "drumroll" or type == "gameresults":
|
||||
if type == "note"\
|
||||
or type == "drumroll"\
|
||||
or type == "gameresults"\
|
||||
or type == "scorenext" and user["session"]:
|
||||
await user["other_user"]["ws"].send(msgobj(type, value))
|
||||
if type == "gameend":
|
||||
elif type == "songsel" and user["session"]:
|
||||
user["action"] = "songsel"
|
||||
user["other_user"]["action"] = "songsel"
|
||||
sent_msg1 = msgobj(type)
|
||||
sent_msg2 = msgobj("users", [])
|
||||
await asyncio.wait([
|
||||
ws.send(sent_msg1),
|
||||
ws.send(sent_msg2),
|
||||
user["other_user"]["ws"].send(sent_msg1),
|
||||
user["other_user"]["ws"].send(sent_msg2)
|
||||
])
|
||||
elif type == "gameend":
|
||||
# User wants to disconnect
|
||||
user["action"] = "ready"
|
||||
user["other_user"]["action"] = "ready"
|
||||
@ -147,6 +199,101 @@ async def connection(ws, path):
|
||||
else:
|
||||
# Other user disconnected
|
||||
user["action"] = "ready"
|
||||
user["session"] = False
|
||||
await asyncio.wait([
|
||||
ws.send(msgobj("gameend")),
|
||||
ws.send(status_event())
|
||||
])
|
||||
elif action == "invite":
|
||||
if type == "leave":
|
||||
# Cancel session invite
|
||||
if user["session"] in server_status["invites"]:
|
||||
del server_status["invites"][user["session"]]
|
||||
user["action"] = "ready"
|
||||
user["session"] = False
|
||||
if "other_user" in user and "ws" in user["other_user"]:
|
||||
user["other_user"]["action"] = "ready"
|
||||
user["other_user"]["session"] = False
|
||||
sent_msg = status_event()
|
||||
await asyncio.wait([
|
||||
ws.send(msgobj("left")),
|
||||
ws.send(sent_msg),
|
||||
user["other_user"]["ws"].send(msgobj("gameend")),
|
||||
user["other_user"]["ws"].send(sent_msg)
|
||||
])
|
||||
else:
|
||||
await asyncio.wait([
|
||||
ws.send(msgobj("left")),
|
||||
ws.send(status_event())
|
||||
])
|
||||
elif type == "songsel" and "other_user" in user:
|
||||
if "ws" in user["other_user"]:
|
||||
user["action"] = "songsel"
|
||||
user["other_user"]["action"] = "songsel"
|
||||
sent_msg = msgobj(type)
|
||||
await asyncio.wait([
|
||||
ws.send(sent_msg),
|
||||
user["other_user"]["ws"].send(sent_msg)
|
||||
])
|
||||
else:
|
||||
user["action"] = "ready"
|
||||
user["session"] = False
|
||||
await asyncio.wait([
|
||||
ws.send(msgobj("gameend")),
|
||||
ws.send(status_event())
|
||||
])
|
||||
elif action == "songsel":
|
||||
# Session song selection
|
||||
if "other_user" in user and "ws" in user["other_user"]:
|
||||
if type == "songsel":
|
||||
# Change song select position
|
||||
if user["other_user"]["action"] == "songsel":
|
||||
sent_msg = msgobj(type, value)
|
||||
await asyncio.wait([
|
||||
ws.send(sent_msg),
|
||||
user["other_user"]["ws"].send(sent_msg)
|
||||
])
|
||||
elif type == "join":
|
||||
# Start game
|
||||
if value == None:
|
||||
continue
|
||||
id = value["id"] if "id" in value else None
|
||||
diff = value["diff"] if "diff" in value else None
|
||||
if not id or not diff:
|
||||
continue
|
||||
if user["other_user"]["action"] == "waiting":
|
||||
user["action"] = "loading"
|
||||
user["other_user"]["action"] = "loading"
|
||||
await asyncio.wait([
|
||||
ws.send(msgobj("gameload", user["other_user"]["gamediff"])),
|
||||
user["other_user"]["ws"].send(msgobj("gameload", diff))
|
||||
])
|
||||
else:
|
||||
user["action"] = "waiting"
|
||||
user["gamediff"] = diff
|
||||
await user["other_user"]["ws"].send(msgobj("users", [{
|
||||
"id": id,
|
||||
"diff": diff
|
||||
}]))
|
||||
elif type == "gameend":
|
||||
# User wants to disconnect
|
||||
user["action"] = "ready"
|
||||
user["session"] = False
|
||||
user["other_user"]["action"] = "ready"
|
||||
user["other_user"]["session"] = False
|
||||
sent_msg1 = msgobj("gameend")
|
||||
sent_msg2 = status_event()
|
||||
await asyncio.wait([
|
||||
ws.send(sent_msg1),
|
||||
ws.send(sent_msg2),
|
||||
user["other_user"]["ws"].send(sent_msg1),
|
||||
user["other_user"]["ws"].send(sent_msg2)
|
||||
])
|
||||
del user["other_user"]
|
||||
else:
|
||||
# Other user disconnected
|
||||
user["action"] = "ready"
|
||||
user["session"] = False
|
||||
await asyncio.wait([
|
||||
ws.send(msgobj("gameend")),
|
||||
ws.send(status_event())
|
||||
@ -157,6 +304,7 @@ async def connection(ws, path):
|
||||
del server_status["users"][server_status["users"].index(user)]
|
||||
if "other_user" in user and "ws" in user["other_user"]:
|
||||
user["other_user"]["action"] = "ready"
|
||||
user["other_user"]["session"] = False
|
||||
await asyncio.wait([
|
||||
user["other_user"]["ws"].send(msgobj("gameend")),
|
||||
user["other_user"]["ws"].send(status_event())
|
||||
@ -164,6 +312,8 @@ async def connection(ws, path):
|
||||
if user["action"] == "waiting":
|
||||
del server_status["waiting"][user["gameid"]]
|
||||
await notify_status()
|
||||
elif user["action"] == "invite" and user["session"] in server_status["invites"]:
|
||||
del server_status["invites"][user["session"]]
|
||||
|
||||
asyncio.get_event_loop().run_until_complete(
|
||||
websockets.serve(connection, "localhost", 34802)
|
||||
|
@ -54,6 +54,7 @@
|
||||
<script src="/src/js/parsetja.js?{{version.commit_short}}"></script>
|
||||
<script src="/src/js/about.js?{{version.commit_short}}"></script>
|
||||
<script src="/src/js/debug.js?{{version.commit_short}}"></script>
|
||||
<script src="/src/js/session.js?{{version.commit_short}}"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
Loading…
Reference in New Issue
Block a user