Add crosshairs (#15)

* Add crosshairs

Note: this PR requires that there is an icons.png file perfectly matching the one in minecraft-assets to show the crosshair, otherwise it just doesn't show anything.

* do it the rom way
This commit is contained in:
AwesomestCode 2021-02-28 21:31:30 -05:00 committed by GitHub
parent 0ed76653f4
commit c9b8bb7669
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 4 deletions

BIN
extra-textures/icons.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

View file

@ -17,7 +17,6 @@
html, body {
height: 100%;
margin: 0;
padding: 0;
}
@ -67,10 +66,21 @@
li {
display: block;
}
#crosshair {
image-rendering: pixelated;
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);
}
</style>
</head>
<body>
<div class="chat-wrapper chat-display-wrapper">
<body onclick="this.requestFullscreen()">
<img id="crosshair" src="textures/icons.png">
<div class="chat-wrapper chat-display-wrapper">
<div class="chat" id="chat">
<p>Welcome to prismarine-web-client! Chat appears here.</p>
</div>

View file

@ -63,7 +63,8 @@ const config = {
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/worker.js'), to: './' },
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/supportedVersions.json'), to: './' },
{ from: path.join(__dirname, 'assets/minecraftia.woff'), to: './' },
{ from: path.join(__dirname, 'assets/mojangles.ttf'), to: './' }
{ from: path.join(__dirname, 'assets/mojangles.ttf'), to: './' },
{ from: path.join(__dirname, 'extra-textures/'), to: './textures/' }
]
}),
new webpack.optimize.ModuleConcatenationPlugin(),