Make login menu more like minecraft (#166)
This commit is contained in:
Kalme
GitHub
parent
7dcffada09
commit
c54909390c
6 changed files with 359 additions and 215 deletions
19
index.js
19
index.js
|
|
@ -87,10 +87,29 @@ let animate = () => {
|
|||
}
|
||||
animate()
|
||||
|
||||
const calcGuiScale = (guiScaleIn) => {
|
||||
let i
|
||||
for (i = 1; i !== guiScaleIn && i < window.innerWidth && i < (window.innerHeight) && window.innerWidth / (i + 1) >= 320 && (window.innerHeight) / (i + 1) >= 240; ++i);
|
||||
return i
|
||||
}
|
||||
|
||||
const setScaleFactor = (value) => {
|
||||
const i = calcGuiScale(value)
|
||||
document.documentElement.style.setProperty('--guiScaleFactor', i)
|
||||
console.log(`Scale: ${i}`)
|
||||
}
|
||||
|
||||
window.setScaleFactor = (value) => {
|
||||
setScaleFactor(value)
|
||||
}
|
||||
|
||||
setScaleFactor(3)
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
viewer.camera.aspect = window.innerWidth / window.innerHeight
|
||||
viewer.camera.updateProjectionMatrix()
|
||||
renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
setScaleFactor(3)
|
||||
})
|
||||
|
||||
async function main () {
|
||||
|
|
|
|||
112
lib/components/button.js
Normal file
112
lib/components/button.js
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
const { LitElement, html, css } = require('lit-element')
|
||||
|
||||
export class LegacyButton extends LitElement {
|
||||
static get styles () {
|
||||
return css`
|
||||
:host {
|
||||
--guiScale: var(--guiScaleFactor, 3);
|
||||
}
|
||||
|
||||
.legacy-btn {
|
||||
--textColor: white;
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
text-decoration: none;
|
||||
|
||||
cursor: default;
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: calc(20px * var(--guiScale));
|
||||
|
||||
font-family: mojangles, minecraft, monospace;
|
||||
font-size: calc(10px * var(--guiScale));
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
color: var(--textColor);
|
||||
text-shadow: calc(1px * var(--guiScale)) calc(1px * var(--guiScale)) black;
|
||||
}
|
||||
|
||||
.legacy-btn:disabled {
|
||||
--textColor: rgb(160, 160, 160);
|
||||
}
|
||||
|
||||
.legacy-btn::after,
|
||||
.legacy-btn::before {
|
||||
--yPos: -66px;
|
||||
content: '';
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
|
||||
background-image: url('textures/1.16.4/gui/widgets.png');
|
||||
background-size: calc(256px * var(--guiScale));
|
||||
background-position-y: calc(var(--yPos) * var(--guiScale));
|
||||
}
|
||||
|
||||
.legacy-btn::after {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.legacy-btn::before {
|
||||
left: 50%;
|
||||
background-position-x: calc(-200px * var(--guiScale) + 100%);
|
||||
}
|
||||
|
||||
.legacy-btn:hover::after,
|
||||
.legacy-btn:hover::before,
|
||||
.legacy-btn:focus::after,
|
||||
.legacy-btn:focus::before {
|
||||
--yPos: -86px;
|
||||
}
|
||||
|
||||
.legacy-btn:disabled::after,
|
||||
.legacy-btn:disabled::before {
|
||||
--yPos: -46px;
|
||||
--textColor: rgb(160, 160, 160);
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
static get properties () {
|
||||
return {
|
||||
size: {
|
||||
type: String,
|
||||
attribute: 'btn-width'
|
||||
},
|
||||
scaleFactor: {
|
||||
type: Number,
|
||||
attribute: 'scale-factor'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
constructor () {
|
||||
super()
|
||||
this.scaleFactor = 3
|
||||
|
||||
this.size = '100%'
|
||||
this.offset = [0, 0]
|
||||
}
|
||||
|
||||
render () {
|
||||
return html`
|
||||
<button class="legacy-btn" style="width: calc(${this.size.endsWith('%') ? this.size : this.size + ' * var(--guiScale)'});"><slot></slot></button>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('legacy-button', LegacyButton)
|
||||
30
lib/components/buttonlink.js
Normal file
30
lib/components/buttonlink.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
const { html } = require('lit-element')
|
||||
const { LegacyButton } = require('./button')
|
||||
|
||||
class LegacyButtonLink extends LegacyButton {
|
||||
constructor () {
|
||||
super()
|
||||
this.href = ''
|
||||
}
|
||||
|
||||
static get properties () {
|
||||
return {
|
||||
size: {
|
||||
type: String,
|
||||
attribute: 'btn-width'
|
||||
},
|
||||
href: {
|
||||
type: String,
|
||||
attribute: 'go-to'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return html`
|
||||
<a class="legacy-btn" href=${this.href} target="_blank" style="width: calc(${this.size} * var(--guiScale));"><slot></slot></a>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('legacy-button-link', LegacyButtonLink)
|
||||
106
lib/components/textfield.js
Normal file
106
lib/components/textfield.js
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
const { LitElement, html, css } = require('lit-element')
|
||||
|
||||
class LegacyTextField extends LitElement {
|
||||
constructor () {
|
||||
super()
|
||||
this.size = '200px'
|
||||
this.id = ''
|
||||
this.value = ''
|
||||
this.label = ''
|
||||
}
|
||||
|
||||
static get properties () {
|
||||
return {
|
||||
size: {
|
||||
type: String,
|
||||
attribute: 'field-width'
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
attribute: 'field-label'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
attribute: 'field-id'
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
attribute: 'field-value'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static get styles () {
|
||||
return css`
|
||||
:host {
|
||||
--guiScale: var(--guiScaleFactor, 3);
|
||||
}
|
||||
|
||||
.text-field-div {
|
||||
--borderColor: grey;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
width: 100%;
|
||||
height: calc(22px * var(--guiScale));
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
background: black;
|
||||
border: calc(1px * var(--guiScale)) solid var(--borderColor);
|
||||
|
||||
padding: calc(4px * var(--guiScale));
|
||||
}
|
||||
|
||||
.text-field-div:focus-within {
|
||||
--borderColor: white;
|
||||
}
|
||||
|
||||
.text-field-div label {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
|
||||
bottom: calc(21px * var(--guiScale));
|
||||
left: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
font-family: mojangles, minecraft, monospace;
|
||||
font-size: calc(10px * var(--guiScale));
|
||||
|
||||
color: rgb(206, 206, 206);
|
||||
text-shadow: calc(1px * var(--guiScale)) calc(1px * var(--guiScale)) black;
|
||||
}
|
||||
|
||||
.legacy-text-field {
|
||||
outline: none;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
font-family: mojangles, minecraft, monospace;
|
||||
font-size: calc(8px * var(--guiScale));
|
||||
|
||||
color: white;
|
||||
text-shadow: calc(1px * var(--guiScale)) calc(1px * var(--guiScale)) black;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
render () {
|
||||
return html`
|
||||
<div class="text-field-div" style="width: calc(${this.size.endsWith('%') ? this.size : this.size + ' * var(--guiScale)'});">
|
||||
<label for="${this.id}">${this.label}</label>
|
||||
<input id="${this.id}" type="text" name="" spellcheck="false" required="" autocomplete="off" value="${this.value}" @input=${(e) => { this.value = e.target.value }} class="legacy-text-field">
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('legacy-text-field', LegacyTextField)
|
||||
303
lib/menu.js
303
lib/menu.js
|
|
@ -1,5 +1,9 @@
|
|||
const { LitElement, html, css } = require('lit-element')
|
||||
require('./github_link')
|
||||
require('./components/button')
|
||||
require('./components/buttonlink')
|
||||
require('./components/textfield')
|
||||
|
||||
/* global fetch */
|
||||
class PrismarineMenu extends LitElement {
|
||||
constructor () {
|
||||
|
|
@ -32,209 +36,93 @@ class PrismarineMenu extends LitElement {
|
|||
|
||||
static get styles () {
|
||||
return css`
|
||||
:host {
|
||||
--guiScale: var(--guiScaleFactor, 3);
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family: sans-serif;
|
||||
background: linear-gradient(#141e30, #243b55);
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 400px;
|
||||
padding: 40px;
|
||||
width: calc(180px * var(--guiScale));
|
||||
padding: calc(10px * var(--guiScale));
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(.1,.1,.2,.7);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 15px 25px rgba(0,0,0,.6);
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0.5)
|
||||
}
|
||||
|
||||
.login-box h2 {
|
||||
margin: 0 0 30px;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-box .user-box,
|
||||
.login-box .port-box,
|
||||
.login-box .ip-box{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-box .user-box input,
|
||||
.login-box .port-box input,
|
||||
.login-box .ip-box input{
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #fff;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.login-box .user-box input{
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.login-box .port-box input {
|
||||
width: 15%
|
||||
}
|
||||
|
||||
.login-box .user-box label,
|
||||
.login-box .port-box label,
|
||||
.login-box .ip-box label{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.login-box .user-box input:focus ~ label,
|
||||
.login-box .user-box input:valid ~ label,
|
||||
.login-box .port-box input:focus ~ label,
|
||||
.login-box .port-box input:valid ~ label,
|
||||
.login-box .ip-box input:focus ~ label,
|
||||
.login-box .ip-box input:valid ~ label{
|
||||
top: -20px;
|
||||
left: 0;
|
||||
color: #03e9f4;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.login-box form a#play {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: #03e9f4;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
transition: .5s;
|
||||
margin-top: 40px;
|
||||
letter-spacing: 4px
|
||||
}
|
||||
|
||||
.login-box a#play:hover {
|
||||
background: #03e9f4;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px #03e9f4,
|
||||
0 0 25px #03e9f4,
|
||||
0 0 50px #03e9f4,
|
||||
0 0 100px #03e9f4;
|
||||
}
|
||||
|
||||
.login-box a#play span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-box a#play span:nth-child(1) {
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #03e9f4);
|
||||
animation: btn-anim1 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes btn-anim1 {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
50%,100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-box a#play span:nth-child(2) {
|
||||
top: -100%;
|
||||
right: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, transparent, #03e9f4);
|
||||
animation: btn-anim2 1s linear infinite;
|
||||
animation-delay: .25s
|
||||
}
|
||||
|
||||
@keyframes btn-anim2 {
|
||||
0% {
|
||||
top: -100%;
|
||||
}
|
||||
50%,100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-box a#play span:nth-child(3) {
|
||||
bottom: 0;
|
||||
right: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(270deg, transparent, #03e9f4);
|
||||
animation: btn-anim3 1s linear infinite;
|
||||
animation-delay: .5s
|
||||
}
|
||||
|
||||
@keyframes btn-anim3 {
|
||||
0% {
|
||||
right: -100%;
|
||||
}
|
||||
50%,100% {
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-box a#play span:nth-child(4) {
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(360deg, transparent, #03e9f4);
|
||||
animation: btn-anim4 1s linear infinite;
|
||||
animation-delay: .75s
|
||||
}
|
||||
|
||||
@keyframes btn-anim4 {
|
||||
0% {
|
||||
bottom: -100%;
|
||||
}
|
||||
50%,100% {
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
flex-direction: column
|
||||
}
|
||||
.ip-with-port {
|
||||
|
||||
.bottom-links {
|
||||
margin-top: calc(6px * var(--guiScale));
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
a#play {
|
||||
width: max-content;
|
||||
}
|
||||
#port {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.bottom-links span {
|
||||
text-align: center;
|
||||
color: rgb(175, 175, 175);
|
||||
padding: calc(1px * var(--guiScale));
|
||||
font-family: mojangles, minecraft, monospace;
|
||||
font-size: calc(10px * var(--guiScale));
|
||||
text-shadow: calc(1px * var(--guiScale)) calc(1px * var(--guiScale)) black;
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
|
|
@ -254,46 +142,31 @@ class PrismarineMenu extends LitElement {
|
|||
return html`
|
||||
<github-link></github-link>
|
||||
<div class="login-box">
|
||||
<h2>Prismarine Web Client</h2>
|
||||
<h3 style="color:gray">A minecraft client in the browser!</h3>
|
||||
<p style="color:gray">Want to contribute?
|
||||
Look at our <a style="color:gray" target=”_blank” href="https://github.com/PrismarineJS/prismarine-web-client">github</a>
|
||||
and join our <a style="color:gray" target=”_blank” href="https://discord.gg/4Ucm684Fq3">discord</a><p><br>
|
||||
<h2 class="title">Prismarine Web Client</h2>
|
||||
<h3 class="subtitle" style="color: rgb(175, 175, 175)">A minecraft client in the browser!</h3>
|
||||
<form>
|
||||
<div class="ip-with-port">
|
||||
<div class="ip-box">
|
||||
<input id="serverip" type="text" name="" required="" value="${this.server}" @input=${e => { this.server = e.target.value }}>
|
||||
<label>Server</label>
|
||||
<div class="field-spacev"></div>
|
||||
<div class="wrapper">
|
||||
<legacy-text-field field-width="100%" field-label="Server IP" field-id="serverip" field-value="${this.server}" @input=${e => { this.server = e.target.value }}></legacy-text-field>
|
||||
<legacy-text-field field-width="100%" field-label="Server Port" field-id="port" field-value="${this.serverport}" @input=${e => { this.serverport = e.target.value }}></legacy-text-field>
|
||||
</div>
|
||||
<div class="port-box">
|
||||
<input id="port" type="text" name="" required="" value="${this.serverport}" @input=${e => { this.serverport = e.target.value }}>
|
||||
<label>Port</label>
|
||||
<div class="field-spacev"></div>
|
||||
<div class="wrapper">
|
||||
<legacy-text-field field-width="100%" field-label="Proxy" field-id="proxy" field-value="${this.proxy}" @input=${e => { this.proxy = e.target.value }}></legacy-text-field>
|
||||
<legacy-text-field field-width="100%" field-label="Port" field-id="port" field-value="${this.proxyport}" @input=${e => { this.proxyport = e.target.value }}></legacy-text-field>
|
||||
</div>
|
||||
</div>
|
||||
<form>
|
||||
<div class="ip-with-port">
|
||||
<div class="ip-box">
|
||||
<input id="proxy" type="text" name="" required="" value="${this.proxy}" @input=${e => { this.proxy = e.target.value }}>
|
||||
<label>Proxy</label>
|
||||
<div class="field-spacev"></div>
|
||||
<legacy-text-field field-width="100%" field-label="Username" field-id="username" field-value="${this.username}" @input=${e => { this.username = e.target.value }}></legacy-text-field>
|
||||
<div class="spacev"></div>
|
||||
<legacy-button btn-width="100%" @click=${() => { this.dispatchConnect() }}>Play</legacy-button>
|
||||
<div class="bottom-links">
|
||||
<span> Want to contribute?</span>
|
||||
<div class="link-buttons">
|
||||
<legacy-button-link btn-width="78px" go-to="https://github.com/PrismarineJS/prismarine-web-client">Github</legacy-button-link>
|
||||
<legacy-button-link btn-width="78px" go-to="https://discord.gg/4Ucm684Fq3">Discord</legacy-button-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="port-box">
|
||||
<input id="port" type="text" name="" required="" value="${this.proxyport}" @input=${e => { this.proxyport = e.target.value }}>
|
||||
<label>Port</label>
|
||||
</div>
|
||||
</div>
|
||||
<form>
|
||||
<div class="user-box">
|
||||
<input id="username" type="text" name="" required="" value="${this.username}" @input=${e => { this.username = e.target.value }}>
|
||||
<label>Username</label>
|
||||
</div>
|
||||
<a id="play" href="#" @click=${() => this.dispatchConnect()}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
Play
|
||||
</a>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
:root {
|
||||
--guiScaleFactor: 3;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
Loading…
Reference in a new issue