diff --git a/index.html b/index.html index e198c1c..8c83d13 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + BMPG diff --git a/index.ts b/index.ts index ae11845..3251610 100755 --- a/index.ts +++ b/index.ts @@ -14,14 +14,15 @@ export const PORT = parseInt(process.env.PORT || '8080'); export const BasicHeaders = { "Content-Type": "application/json", "Vary": "Origin", - "Access-Control-Allow-Methods": ["POST", "GET"], + "Access-Control-Allow-Methods": "POST, GET", + "Access-Control-Max-Age": "86400", "Access-Control-Allow-Credentials": "true" }; const rooms: {[ID: string]: Room} = {}; const players: {[username: string]: Player} = {}; -const assign_room_for = (playerUsername: string): Room | false => { +const assign_room_for = (playerUsername: string): Room => { if(Object.keys(rooms).length === 0) { // If ther's no room, create a new one; const new_room = new Room(createHash('sha256').update(Date.now().toString()).digest('hex')); players[playerUsername].setRoomID(new_room.ID); @@ -61,7 +62,7 @@ const get_headers = (origin: string) => { }else { return { ...BasicHeaders, - ...{"Access-Control-Allow-Origin": origin} + "Access-Control-Allow-Origin": origin }; } } @@ -77,27 +78,33 @@ app.use((req, res, next) => { app.use(express.text()); +app.options('*', (req, res) => { + res.set(get_headers(req.headers.origin!)); + res.end(); +}); + app.get('/', (req, res) => { - res.set(get_headers(req.headers.origin || '')); + res.set(get_headers(req.headers.origin!)); res.end('This is the BMGP server'); }); app.get('/login', (req, res) => { + const origin = req.headers.origin!; const player_email = req.query['player_email']+''; players[player_email] = new Player(player_email); const new_player_room = assign_room_for(player_email); const body = new Response(new_player_room); - res.set(get_headers(req.headers.origin || '')); + res.set(get_headers(origin)); res.status(OK).json(body); - console.log('New player: ', players[player_email], new_player_room); + console.log('New player: ', origin, players[player_email].username, new_player_room.ID); return; }); app.get('/room', (req, res) => { - const origin = req.headers.origin || ''; + const origin = req.headers.origin!; const player_email = req.query['player_email'] + ''; const response = new Response(); @@ -120,7 +127,7 @@ app.get('/room', (req, res) => { }); app.post('/player_update', (req, res) => { - const origin = req.headers.origin || ''; + const origin = req.headers.origin!; const player_email = req.query['player_email']+''; if(!players[player_email]) { @@ -152,7 +159,7 @@ app.post('/player_update', (req, res) => { }); app.get('/logout', (req, res) => { - const origin = req.headers.origin || ''; + const origin = req.headers.origin!; const player_email = req.query['player_email']+''; if(!players[player_email]) { diff --git a/src/index.ts b/src/index.ts index 3049f51..762e84a 100755 --- a/src/index.ts +++ b/src/index.ts @@ -53,18 +53,6 @@ class App { this.camera = new FreeCamera('mainCamera', new Vector3(0, 0, -20), this.scene); - window.addEventListener("keydown", (e) => { - if (e.key === 'F1') { - if (Inspector.IsVisible) { - Inspector.Hide(); - } else { - Inspector.Show(this.scene,{}); - } - } - }); - - window.addEventListener('resize', () => this.engine.resize()); - this.localPlayer = new Player('LocalPlayer', this.scene, true); this.localPlayer.setPosition(Vector3.Zero()); @@ -82,66 +70,79 @@ class App { server.ipAddress = e.target!['elements'][0].value; this.username = e.target!['elements'][1].value; - if (server.URL && this.username) { - fetch(`${server.URL}/login?player_email=${encodeURIComponent(this.username)}`).then(res => { - res.json().then(body => { - if (body?.status === 200) { - Object.keys(e.target!['elements']).forEach(elm => { - e.target!['elements'][elm].setAttribute('disabled', ''); - }); - - this.canvas.focus({ preventScroll: true }); - this.emailErrorField.classList.remove('active'); - - this.currentRoom = Object.assign((new Room(body.data.ID, 1000, 1000, this.scene)), structuredClone(body.data)); - - this.localPlayer.mesh.dispose(); - this.localPlayer = Object.assign(new Player(this.username, this.scene, true), structuredClone(this.currentRoom.players[this.username])); - this.parseRoomPlayers(body.data as Room); - - document.addEventListener('keydown', e => { - if (e.key === 'Escape') { // On press esc, stop game - Object.keys(this.loginForm.elements).forEach(elm => { - this.loginForm.elements[elm].removeAttribute('disabled', ''); - }); - - this.welcomeMessage.innerHTML = 'Insert the IP address and username to start'; - this.engine.stopRenderLoop(); - return; - } - } - ); + this.initGame(e); + }); + + + window.addEventListener("keydown", (e) => { + if (e.key === 'F1') { + Inspector.IsVisible ? Inspector.Hide() : Inspector.Show(this.scene,{}); + } + }); - window.addEventListener('beforeunload', () => { - fetch(this.getReqURL('logout')); + window.addEventListener('resize', () => this.engine.resize()); + this.engine.runRenderLoop(()=> this.update()); + } + initGame(e) { + if (server.URL && this.username) { + fetch(`${server.URL}/login?player_email=${encodeURIComponent(this.username)}`).then(res => { + res.json().then(body => { + if (body?.status === 200) { + Object.keys(e.target!['elements']).forEach(elm => { + e.target!['elements'][elm].setAttribute('disabled', ''); + }); + + this.canvas.focus({ preventScroll: true }); + this.emailErrorField.classList.remove('active'); + + this.currentRoom = Object.assign((new Room(body.data.ID, 1000, 1000, this.scene)), structuredClone(body.data)); + + this.localPlayer.mesh.dispose(); + this.localPlayer = Object.assign(new Player(this.username, this.scene, true), structuredClone(this.currentRoom.players[this.username])); + this.parseRoomPlayers(body.data as Room); + + document.addEventListener('keydown', e => { + if (e.key === 'Escape') { // On press esc, stop game + Object.keys(this.loginForm.elements).forEach(elm => { + this.loginForm.elements[elm].removeAttribute('disabled', ''); + }); + + this.welcomeMessage.innerHTML = 'Insert the IP address and username to start'; this.engine.stopRenderLoop(); return; - }); + } + } + ); - this.welcomeMessage.innerHTML = 'Welcome, ' + this.username; - this.loggedIn = true; - } else { - this.emailErrorField.innerHTML = 'Login failed, try again later'; - this.emailErrorField.classList.add('active'); + window.addEventListener('beforeunload', () => { + fetch(this.getReqURL('logout')); this.engine.stopRenderLoop(); - - console.error(body); - } - }) - }); - } else { - this.emailErrorField.innerHTML = 'Invalid IP address or Username'; - this.emailErrorField.classList.add('active'); - } - }); - - this.engine.runRenderLoop(()=> this.update()); + return; + }); + + this.welcomeMessage.innerHTML = 'Welcome, ' + this.username; + this.loggedIn = true; + } else { + this.emailErrorField.innerHTML = 'Login failed, try again later'; + this.emailErrorField.classList.add('active'); + + this.engine.stopRenderLoop(); + + console.error(body); + } + }) + }); + } else { + this.emailErrorField.innerHTML = 'Invalid IP address or Username'; + this.emailErrorField.classList.add('active'); + } } + getReqURL(path: string) { - return `${server.URL}/${path}?player_email=${this.localPlayer.username}&room_id=${this.localPlayer.currentRoomID}`; + return `${server.URL}/${path}?player_email=${this.localPlayer.username}`; } getRoomData() { diff --git a/src/style.scss b/src/style.scss index f07d690..0acf377 100644 --- a/src/style.scss +++ b/src/style.scss @@ -34,16 +34,23 @@ body { #loginForm { position: absolute; - left: calc(50% - 320px); + left: 0; bottom: 2%; - width: 640px; + width: 100%; display: grid; - grid-template-columns: 3fr 2fr 1fr; + grid-template-columns: 1fr; + grid-auto-flow: row; gap: 8px; padding: 32px 0; + @media (min-width: 680px) { + left: calc(50% - 320px); + width: 640px; + grid-template-columns: 3fr 2fr 1fr; + } + z-index: 2; .welcomeMessage {