mirror of
https://github.com/PrismarineJS/prismarine-web-client.git
synced 2024-11-14 19:25:07 -05:00
move chat to web component (#91)
This commit is contained in:
Romain Beaumont
GitHub
parent
332d28e1c5
commit
cc1a14ea4b
5 changed files with 250 additions and 249 deletions
11
index.html
11
index.html
|
|
@ -7,16 +7,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<img id="crosshair" src="extra-textures/icons.png" style="display: none;">
|
||||
<div id="chat-wrapper" class="chat-wrapper chat-display-wrapper" style="display: none;">
|
||||
<div class="chat" id="chat">
|
||||
<p>Welcome to prismarine-web-client! Chat appears here.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chat-wrapper2" class="chat-wrapper chat-input-wrapper" style="display: none;">
|
||||
<div class="chat" id="chat-input">
|
||||
<input type="text" class="chat" id="chatinput"></input>
|
||||
</div>
|
||||
</div>
|
||||
<chat-box id="chatbox" style="display: none;"></chat-box>
|
||||
<hot-bar id="hotbar" style="display: none;"></hot-bar>
|
||||
<loading-screen id="loading-background" style="display: none;"></loading-screen>
|
||||
<prismarine-menu id="prismarine-menu"></prismarine-menu>
|
||||
|
|
|
|||
8
index.js
8
index.js
|
|
@ -2,6 +2,7 @@
|
|||
require('./lib/menu')
|
||||
require('./lib/loading_screen')
|
||||
require('./lib/hotbar')
|
||||
require('./lib/chat')
|
||||
|
||||
const net = require('net')
|
||||
|
||||
|
|
@ -13,7 +14,6 @@ const { WorldView, Viewer } = require('prismarine-viewer/viewer')
|
|||
const pathfinder = require('mineflayer-pathfinder')
|
||||
const { Vec3 } = require('vec3')
|
||||
global.THREE = require('three')
|
||||
const Chat = require('./lib/chat')
|
||||
|
||||
const maxPitch = 0.5 * Math.PI
|
||||
const minPitch = -0.5 * Math.PI
|
||||
|
|
@ -25,8 +25,7 @@ async function main () {
|
|||
menu.style = 'display: none;'
|
||||
document.getElementById('hotbar').style = 'display:block'
|
||||
document.getElementById('crosshair').style = 'display:block'
|
||||
document.getElementById('chat-wrapper').style = 'display:block'
|
||||
document.getElementById('chat-wrapper2').style = 'display:block'
|
||||
document.getElementById('chatbox').style = 'display:block'
|
||||
document.getElementById('loading-background').style = 'display:block'
|
||||
|
||||
connect(options)
|
||||
|
|
@ -36,6 +35,7 @@ async function main () {
|
|||
async function connect (options) {
|
||||
const loadingScreen = document.getElementById('loading-background')
|
||||
const hotbar = document.getElementById('hotbar')
|
||||
const chat = document.getElementById('chatbox')
|
||||
|
||||
const viewDistance = 6
|
||||
const hostprompt = options.server
|
||||
|
|
@ -119,7 +119,7 @@ async function connect (options) {
|
|||
renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
document.body.appendChild(renderer.domElement)
|
||||
|
||||
const chat = Chat.init(bot._client, renderer)
|
||||
chat.init(bot._client, renderer)
|
||||
|
||||
// Create viewer
|
||||
const viewer = new Viewer(renderer)
|
||||
|
|
|
|||
89
lib/chat.js
89
lib/chat.js
|
|
@ -1,3 +1,5 @@
|
|||
const { LitElement, html, css } = require('lit-element')
|
||||
|
||||
const styles = {
|
||||
black: 'color:#000000',
|
||||
dark_blue: 'color:#0000AA',
|
||||
|
|
@ -33,9 +35,71 @@ const dictionary = {
|
|||
'chat.type.text': '<%s> %s'
|
||||
}
|
||||
|
||||
export function init (client, renderer) {
|
||||
const chat = document.querySelector('#chat')
|
||||
const chatInput = document.querySelector('#chatinput')
|
||||
class ChatBox extends LitElement {
|
||||
static get styles () {
|
||||
return css`
|
||||
.chat-wrapper {
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
.chat-display-wrapper {
|
||||
bottom: calc(8px * 16);
|
||||
padding: 4px;
|
||||
max-height: calc(90px * 8);
|
||||
width: calc(320px * 4);
|
||||
}
|
||||
|
||||
.chat-input-wrapper {
|
||||
bottom: calc(2px * 16);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.chat {
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
margin: 0px;
|
||||
line-height: 100%;
|
||||
text-shadow: 2px 2px 0px #3f3f3f;
|
||||
font-family: mojangles, minecraft, monospace;
|
||||
width: 100%;
|
||||
max-height: calc(90px * 8)
|
||||
}
|
||||
|
||||
input[type=text], #chatinput {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
render () {
|
||||
return html`
|
||||
<div id="chat-wrapper" class="chat-wrapper chat-display-wrapper">
|
||||
<div class="chat" id="chat">
|
||||
<p>Welcome to prismarine-web-client! Chat appears here.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chat-wrapper2" class="chat-wrapper chat-input-wrapper">
|
||||
<div class="chat" id="chat-input">
|
||||
<input type="text" class="chat" id="chatinput"></input>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
init (client, renderer) {
|
||||
this.inChat = false
|
||||
const chat = this.shadowRoot.querySelector('#chat')
|
||||
const chatInput = this.shadowRoot.querySelector('#chatinput')
|
||||
|
||||
const chatHistory = []
|
||||
let chatHistoryPos = 0
|
||||
|
|
@ -47,13 +111,11 @@ export function init (client, renderer) {
|
|||
// Show chat
|
||||
chat.style.display = 'block'
|
||||
|
||||
const chatState = {
|
||||
inChat: false
|
||||
}
|
||||
const self = this
|
||||
|
||||
// Esc event - Doesnt work with onkeypress?!
|
||||
document.onkeydown = function (e) {
|
||||
if (!chatState.inChat) return
|
||||
if (!self.inChat) return
|
||||
e = e || window.event
|
||||
if (e.keyCode === 27 || e.key === 'Escape' || e.key === 'Esc') {
|
||||
disableChat()
|
||||
|
|
@ -69,7 +131,7 @@ export function init (client, renderer) {
|
|||
// Chat events
|
||||
document.onkeypress = function (e) {
|
||||
e = e || window.event
|
||||
if (chatState.inChat === false) {
|
||||
if (self.inChat === false) {
|
||||
if (e.code === 'KeyT') {
|
||||
enableChat(false)
|
||||
}
|
||||
|
|
@ -80,7 +142,7 @@ export function init (client, renderer) {
|
|||
return false
|
||||
}
|
||||
|
||||
if (!chatState.inChat) return
|
||||
if (!self.inChat) return
|
||||
e.stopPropagation()
|
||||
if (e.code === 'Enter') {
|
||||
chatHistory.push(chatInput.value)
|
||||
|
|
@ -102,7 +164,7 @@ export function init (client, renderer) {
|
|||
}); */
|
||||
function enableChat (isCommand) {
|
||||
// Set inChat value
|
||||
chatState.inChat = true
|
||||
self.inChat = true
|
||||
// Exit the pointer lock
|
||||
document.exitPointerLock()
|
||||
// Show chat input
|
||||
|
|
@ -120,7 +182,7 @@ export function init (client, renderer) {
|
|||
|
||||
function disableChat () {
|
||||
// Set inChat value
|
||||
chatState.inChat = false
|
||||
self.inChat = false
|
||||
|
||||
// Hide chat
|
||||
hideChat()
|
||||
|
|
@ -220,6 +282,7 @@ export function init (client, renderer) {
|
|||
})
|
||||
|
||||
hideChat()
|
||||
|
||||
return chatState
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('chat-box', ChatBox)
|
||||
|
|
|
|||
|
|
@ -34,16 +34,6 @@ class LoadingScreen extends LitElement {
|
|||
|
||||
static get styles () {
|
||||
return css`
|
||||
@font-face {
|
||||
font-family: minecraft;
|
||||
src: url(minecraftia.woff);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: mojangles;
|
||||
src: url(mojangles.ttf);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: mojangles, minecraft, monospace;
|
||||
}
|
||||
|
|
|
|||
65
styles.css
65
styles.css
|
|
@ -1,3 +1,8 @@
|
|||
html {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: minecraft;
|
||||
src: url(minecraftia.woff);
|
||||
|
|
@ -7,16 +12,17 @@
|
|||
font-family: mojangles;
|
||||
src: url(mojangles.ttf);
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family: sans-serif;
|
||||
background: linear-gradient(#141e30, #243b55);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
canvas {
|
||||
|
|
@ -27,46 +33,6 @@ canvas {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.chat-wrapper {
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.chat-display-wrapper {
|
||||
bottom: calc(8px * 16);
|
||||
padding: 4px;
|
||||
max-height: calc(90px * 8);
|
||||
width: calc(320px * 4);
|
||||
}
|
||||
|
||||
.chat-input-wrapper {
|
||||
bottom: calc(2px * 16);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.chat {
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
margin: 0px;
|
||||
line-height: 100%;
|
||||
text-shadow: 2px 2px 0px #3f3f3f;
|
||||
font-family: mojangles, minecraft, monospace;
|
||||
width: 100%;
|
||||
max-height: calc(90px * 8)
|
||||
}
|
||||
|
||||
input[type=text], #chatinput {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#crosshair {
|
||||
image-rendering: optimizeSpeed;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
|
|
@ -82,12 +48,3 @@ li {
|
|||
transform: translate(calc(-50% + 120px * 4), calc(-50% + 120px * 4));
|
||||
clip-path: inset(0px calc(240px * 4) calc(240px * 4) 0px);
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue