From 19a2da8fa8d1cd0f17dbeaf7b07693ef16791360 Mon Sep 17 00:00:00 2001 From: Romain Beaumont Date: Sun, 14 Mar 2021 20:48:01 +0000 Subject: [PATCH] put crosshair in webcomponent --- index.html | 2 +- index.js | 1 + lib/crosshair.js | 29 +++++++++++++++++++++++++++++ styles.css | 16 ---------------- 4 files changed, 31 insertions(+), 17 deletions(-) create mode 100644 lib/crosshair.js diff --git a/index.html b/index.html index 1058eb2f..82c91942 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - + diff --git a/index.js b/index.js index a60c59f6..c6cd9205 100644 --- a/index.js +++ b/index.js @@ -3,6 +3,7 @@ require('./lib/menu') require('./lib/loading_screen') require('./lib/hotbar') require('./lib/chat') +require('./lib/crosshair') const net = require('net') diff --git a/lib/crosshair.js b/lib/crosshair.js new file mode 100644 index 00000000..1ed54049 --- /dev/null +++ b/lib/crosshair.js @@ -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`` + } +} +window.customElements.define('cross-hair', CrossHair) diff --git a/styles.css b/styles.css index 3b19594f..0112caf1 100644 --- a/styles.css +++ b/styles.css @@ -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); -}