File size: 2,996 Bytes
248d96b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | const { LitElement, html, css } = require('lit')
const { openURL, displayScreen } = require('./components/common')
class PauseScreen extends LitElement {
static get styles () {
return css`
.bg {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.75);
width: 100%;
height: 100%;
}
.title {
position: absolute;
top: 40px;
left: 50%;
transform: translate(-50%);
font-size: 10px;
color: white;
text-shadow: 1px 1px #222;
}
main {
display: flex;
flex-direction: column;
gap: 4px 0;
position: absolute;
left: 50%;
width: 204px;
top: calc(25% + 48px - 16px);
transform: translate(-50%);
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
`
}
constructor () {
super()
this.inMenu = false
}
init (renderer) {
const chat = document.getElementById('hud').shadowRoot.querySelector('#chat')
const self = this
document.addEventListener('keydown', e => {
if (chat.inChat) return
e = e || window.event
if (e.keyCode === 27 || e.key === 'Escape' || e.key === 'Esc') {
if (self.inMenu) {
self.disableGameMenu(renderer)
} else {
self.enableGameMenu()
}
}
})
}
render () {
return html`
<div class="bg"></div>
<p class="title">Game Menu</p>
<main>
<pmui-button pmui-width="204px" pmui-label="Back to Game" @pmui-click=${this.onReturnPress}></pmui-button>
<div class="row">
<pmui-button pmui-width="98px" pmui-label="Github" @pmui-click=${() => openURL('https://github.com/PrismarineJS/prismarine-web-client')}></pmui-button>
<pmui-button pmui-width="98px" pmui-label="Discord" @pmui-click=${() => openURL('https://discord.gg/4Ucm684Fq3')}></pmui-button>
</div>
<pmui-button pmui-width="204px" pmui-label="Options" @pmui-click=${() => displayScreen(this, document.getElementById('options-screen'))}></pmui-button>
<pmui-button pmui-width="204px" pmui-label="Disconnect" @pmui-click=${() => window.location.reload()}></pmui-button>
</main>
`
}
disableGameMenu (renderer = false) {
this.inMenu = false
this.style.display = 'none'
if (renderer) {
renderer.domElement.requestPointerLock()
}
}
enableGameMenu () {
this.inMenu = true
document.exitPointerLock()
this.style.display = 'block'
this.focus()
}
onReturnPress (renderer = false) {
this.inMenu = false
this.style.display = 'none'
if (renderer) {
renderer.domElement.requestPointerLock()
}
}
}
window.customElements.define('pmui-pausescreen', PauseScreen)
|