Adding Game Menu (#179)
* Fixed Chat Glitch Fixed an annoying glitch where when you click you are locked out of chat. Makes chat smoother to use * Added Game Menu Added a game menu for when player presses escape. NOTE: Player must be out of mouse lock for this to register (so often requires double pressing of escape). * Block open chat when in game menu * Linted + removed alert * Linted
This commit is contained in:
PondWader
GitHub
parent
0a25c4daff
commit
edec62a20f
4 changed files with 140 additions and 1 deletions
|
|
@ -17,6 +17,7 @@
|
|||
<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
|
||||
</head>
|
||||
<body>
|
||||
<game-menu id="game-menu" style="display: none;"></game-menu>
|
||||
<debug-menu id="debugmenu" style="display: none;"></debug-menu>
|
||||
<player-list id="playerlist" style="display: none;"></player-list>
|
||||
<cross-hair id="crosshair" style="display: none;"></cross-hair>
|
||||
|
|
|
|||
8
index.js
8
index.js
|
|
@ -2,6 +2,7 @@
|
|||
require('./lib/menu')
|
||||
require('./lib/loading_screen')
|
||||
require('./lib/hotbar')
|
||||
require('./lib/gameMenu')
|
||||
require('./lib/chat')
|
||||
require('./lib/crosshair')
|
||||
require('./lib/playerlist')
|
||||
|
|
@ -135,6 +136,7 @@ async function connect (options) {
|
|||
const chat = document.getElementById('chatbox')
|
||||
const playerList = document.getElementById('playerlist')
|
||||
const debugMenu = document.getElementById('debugmenu')
|
||||
const gameMenu = document.getElementById('game-menu')
|
||||
|
||||
const viewDistance = 6
|
||||
const hostprompt = options.server
|
||||
|
|
@ -217,6 +219,7 @@ async function connect (options) {
|
|||
const worldView = new WorldView(bot.world, viewDistance, center)
|
||||
|
||||
chat.init(bot._client, renderer)
|
||||
gameMenu.init(renderer)
|
||||
playerList.init(bot)
|
||||
|
||||
viewer.setVersion(version)
|
||||
|
|
@ -306,7 +309,9 @@ async function connect (options) {
|
|||
renderer.domElement.mozRequestPointerLock ||
|
||||
renderer.domElement.webkitRequestPointerLock
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
renderer.domElement.requestPointerLock()
|
||||
if (!chat.inChat && !gameMenu.inMenu) {
|
||||
renderer.domElement.requestPointerLock()
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener('contextmenu', (e) => e.preventDefault(), false)
|
||||
|
|
@ -327,6 +332,7 @@ async function connect (options) {
|
|||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (chat.inChat) return
|
||||
if (gameMenu.inMenu) return
|
||||
console.log(e.code)
|
||||
if (e.code in codes) {
|
||||
bot.setControlState(codes[e.code], true)
|
||||
|
|
|
|||
|
|
@ -99,6 +99,7 @@ class ChatBox extends LitElement {
|
|||
init (client, renderer) {
|
||||
this.inChat = false
|
||||
const chat = this.shadowRoot.querySelector('#chat')
|
||||
const gameMenu = document.getElementById('game-menu')
|
||||
const chatInput = this.shadowRoot.querySelector('#chatinput')
|
||||
|
||||
const chatHistory = []
|
||||
|
|
@ -115,6 +116,7 @@ class ChatBox extends LitElement {
|
|||
|
||||
// Esc event - Doesnt work with onkeypress?!
|
||||
document.addEventListener('keydown', e => {
|
||||
if (gameMenu.inMenu) return
|
||||
if (!self.inChat) return
|
||||
e = e || window.event
|
||||
if (e.keyCode === 27 || e.key === 'Escape' || e.key === 'Esc') {
|
||||
|
|
@ -130,6 +132,7 @@ class ChatBox extends LitElement {
|
|||
|
||||
// Chat events
|
||||
document.addEventListener('keypress', e => {
|
||||
if (gameMenu.inMenu) return
|
||||
e = e || window.event
|
||||
if (self.inChat === false) {
|
||||
if (e.code === 'KeyT') {
|
||||
|
|
|
|||
129
lib/gameMenu.js
Normal file
129
lib/gameMenu.js
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
const { LitElement, html, css } = require('lit-element')
|
||||
require('./github_link')
|
||||
require('./components/button')
|
||||
require('./components/buttonlink')
|
||||
require('./components/textfield')
|
||||
|
||||
class GameMenu extends LitElement {
|
||||
constructor () {
|
||||
super()
|
||||
this.inMenu = false
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
|
||||
static get styles () {
|
||||
return css`
|
||||
:host {
|
||||
--guiScale: var(--guiScaleFactor, 3);
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family: sans-serif;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.menu-box {
|
||||
position: fixed;
|
||||
z-index: 11;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: calc(180px * var(--guiScale));
|
||||
padding: calc(10px * var(--guiScale));
|
||||
transform: translate(-50%, -50%);
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0.8)
|
||||
}
|
||||
|
||||
.link-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: calc(4px * var(--guiScale));
|
||||
}
|
||||
|
||||
.title, .subtitle {
|
||||
text-align: center;
|
||||
|
||||
font-family: mojangles, minecraft, monospace;
|
||||
font-size: calc(10px * var(--guiScale));
|
||||
font-weight: normal;
|
||||
|
||||
color: white;
|
||||
margin-top: 0;
|
||||
text-shadow: calc(1px * var(--guiScale)) calc(1px * var(--guiScale)) black;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: calc(7.5px * var(--guiScale));
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: calc(6px * var(--guiScale));
|
||||
}
|
||||
|
||||
.spacev {
|
||||
height: calc(6px * var(--guiScale));
|
||||
}
|
||||
|
||||
.field-spacev {
|
||||
height: calc(14px * var(--guiScale));
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
render () {
|
||||
return html`
|
||||
<github-link></github-link>
|
||||
<div class="menu-box">
|
||||
<h2 class="title">Game Menu</h2>
|
||||
<div class="spacev"></div>
|
||||
<legacy-button btn-width="100%" @click=${() => { this.disableGameMenu() }}>Back to Game</legacy-button>
|
||||
<div class="spacev"></div>
|
||||
<legacy-button btn-width="100%">Options</legacy-button>
|
||||
<div class="spacev"></div>
|
||||
<legacy-button btn-width="100%" onClick="window.location.reload();">Disconnect</legacy-button>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
init (renderer) {
|
||||
const chat = document.getElementById('chatbox')
|
||||
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()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('game-menu', GameMenu)
|
||||
Loading…
Reference in a new issue