chipmunkmc/prismarine-web-client
1
0
Fork 0
forked from chipmunkmc/prismarine-web-client-mirror
Code Issues Pull requests Projects Releases Packages Wiki Activity

put crosshair in webcomponent

Browse source
This commit is contained in:
Romain Beaumont 2021-03-14 20:48:01 +00:00
parent cc1a14ea4b
commit 19a2da8fa8
4 changed files with 31 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -6,7 +6,7 @@
<link rel="favicon" href="favicon.ico">
</head>
<body>
<img id="crosshair" src="extra-textures/icons.png" style="display: none;">
<cross-hair id="crosshair" style="display: none;"></cross-hair>
<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>

1
index.js
View file

@ -3,6 +3,7 @@ require('./lib/menu')
require('./lib/loading_screen')
require('./lib/hotbar')
require('./lib/chat')
require('./lib/crosshair')
const net = require('net')

29
lib/crosshair.js Normal file
View file

@ -0,0 +1,29 @@
const { LitElement, html, css } = require('lit-element')
class CrossHair extends LitElement {
static get styles () {
return css`
#crosshair {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: -o-crisp-edges;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
position: absolute;
top: 50%;
left: 50%;
height: calc(256px * 4);
width: calc(256px * 4);
transform: translate(calc(-50% + 120px * 4), calc(-50% + 120px * 4));
clip-path: inset(0px calc(240px * 4) calc(240px * 4) 0px);
z-index:10;
}
`
}
render () {
return html`<img id="crosshair" src="extra-textures/icons.png">`
}
}
window.customElements.define('cross-hair', CrossHair)

16
styles.css
View file

@ -32,19 +32,3 @@ canvas {
margin: 0;
padding: 0;
}
#crosshair {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: -o-crisp-edges;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
position: absolute;
top: 50%;
left: 50%;
height: calc(256px * 4);
width: calc(256px * 4);
transform: translate(calc(-50% + 120px * 4), calc(-50% + 120px * 4));
clip-path: inset(0px calc(240px * 4) calc(240px * 4) 0px);
}