mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-22 08:17:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix 0 space gamer name

Browse Source
This commit is contained in:
Wessel T
2020-07-20 21:59:29 +02:00
parent 0e482a4947
commit 6b447e1c68
12 changed files with 57 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.jsx
View File

@@ -42,14 +42,10 @@ export default class App extends React.Component {
localStorage.setItem('offlineMode', false);
localStorage.setItem('webp', false);
localStorage.setItem('events', true);
localStorage.setItem('customBackgroundColour', '');
localStorage.setItem('customBackground', '');
localStorage.setItem('greetingName', '');
// Set theme depending on user preferred
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) localStorage.setItem('darkTheme', true);
else localStorage.setItem('darkTheme', false);
localStorage.setItem('darkTheme', false);
// Finally we set this to true so it doesn't run the function on every load
localStorage.setItem('firstRun', true);

2
src/components/Search.jsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
export default class Search extends React.Component {
render() {
const enabled = localStorage.getItem('searchBar');
const enabled = localStorage.getItem('searchbar');
if (enabled === 'false') return (<div></div>);
const searchEngine = localStorage.getItem('searchEngine');

58
src/components/Settings.jsx
View File

@@ -1,4 +1,3 @@
// eslint-disable
import React from 'react';
import ExpandMore from '@material-ui/icons/ExpandMore';
@@ -26,24 +25,31 @@ export default class Settings extends React.Component {
localStorage.setItem('blur', document.getElementById('blurRange').value); // this is better than inline onChange for performance
localStorage.setItem('greetingName', document.getElementById('greetingName').value);
localStorage.setItem('customBackground', document.getElementById('customBackground').value);
//if (!document.getElementById('customBackgroundColour').enabled === 'false') localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundColour').value);
if (!document.getElementById('customBackgroundColour').enabled === 'false') localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundColour').value);
window.location.reload();
}
resetItem(key) {
switch (key) {
case 'greetingName': document.getElementById('greetingName').value = ''; break;
case 'greetingName':
localStorage.setItem('greetingName', '');
document.getElementById('greetingName').value = '';
break;
case 'customBackgroundColour':
localStorage.setItem('customBackgroundColour', '');
document.getElementById('customBackgroundColour').enabled = 'false';
break;
case 'customBackground': document.getElementById('customBackground').value = ''; break;
case 'customBackground':
localStorage.setItem('customBackground', '');
document.getElementById('customBackground').value = '';
break;
case 'blur':
localStorage.setItem('blur', 0);
document.getElementById('blurRange').value = 0;
document.getElementById('blurAmount').innerText = '0';
break;
default: console.log('[ERROR] resetItem requires a key!');
default:
console.log('[ERROR] resetItem requires a key!');
}
this.showToast();
}
@@ -57,12 +63,6 @@ export default class Settings extends React.Component {
componentDidMount() {
document.getElementById('greetingName').value = localStorage.getItem('greetingName');
document.getElementById('customBackground').value = localStorage.getItem('customBackground');
/*const hex = localStorage.getItem('customBackgroundColour');
if (!hex === '') {
document.getElementById('customBackgroundColour').value = hex;
document.getElementById('customBackgroundHex').innerText = hex;
}*/
for (const key of Object.keys(localStorage)) {
let value = localStorage.getItem(key);
@@ -88,12 +88,6 @@ export default class Settings extends React.Component {
document.addEventListener('keyup', (event) => {
if (event.keyCode === 13) this.saveStuff();
});
const darkTheme = localStorage.getItem('darkTheme');
if (darkTheme === 'true') {
document.getElementById('customBackground').style.color = 'white';
document.getElementById('greetingName').style.color = 'white';
}
}
render() {
@@ -112,11 +106,11 @@ export default class Settings extends React.Component {
</label>
<li className="extraSettings">
<ul>
<input name="1" type="checkbox" onClick={()=> this.setItem('seconds')} id='secondsStatus' />
<input id="1" type="checkbox" onClick={()=> this.setItem('seconds')} id='secondsStatus' />
<label htmlFor="1">Seconds</label>
</ul>
<ul>
<input name="2" type="checkbox" onClick={()=> this.setItem('24hour')} id='24hourStatus' />
<input id="2" type="checkbox" onClick={()=> this.setItem('24hour')} id='24hourStatus' />
<label htmlFor="2">24 Hour</label>
</ul>
</li>
@@ -131,11 +125,11 @@ export default class Settings extends React.Component {
</label>
<li className="extraSettings">
<ul>
<input name="3" type="checkbox" onClick={()=> this.setItem('events')} id='eventsStatus' />
<input id="3" type="checkbox" onClick={()=> this.setItem('events')} id='eventsStatus' />
<label htmlFor="3">Events</label>
</ul>
<ul>
<p>Name for greeting <span className="modalLink" onClick={() => this.resetItem('greetingName')}>Reset</span></p>
<p>Name for greeting <a className="modalLink" onClick={() => this.resetItem('greetingName')}>Reset</a></p>
<input type='text' id='greetingName'></input>
</ul>
</li>
@@ -144,12 +138,12 @@ export default class Settings extends React.Component {
<h4>Quote</h4>
<ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} />
<label className="switch">
<input type="checkbox" onClick={()=> this.setItem('quote')} id='quoteStatus' />
<input id="quoteStatus" type="checkbox" onClick={()=> this.setItem('quote')} id='quoteStatus' />
<span className="slider"></span>
</label>
<li className="extraSettings">
<ul>
<input name="5" type="checkbox" onClick={()=> this.setItem('copyButton')} id='copyButtonStatus' />
<input id="5" type="checkbox" onClick={()=> this.setItem('copyButton')} id='copyButtonStatus' />
<label htmlFor="5">Copy Button</label>
</ul>
</li>
@@ -163,20 +157,19 @@ export default class Settings extends React.Component {
</label>
<li className="extraSettings">
<ul>
<p>Adjust Blur (<span id='blurAmount'></span>%) <span className="modalLink" onClick={() => this.resetItem('blur')}>Reset</span></p>
<p>Adjust Blur (<span id='blurAmount'></span>%) <a className="modalLink" onClick={() => this.resetItem('blur')}>Reset</a></p>
</ul>
<ul>
<input className="range" type="range" min="0" max="100" id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
</ul>
<ul>
<p>Custom Background URL <span className="modalLink" onClick={() => this.resetItem('customBackground')}>Reset</span></p>
<p>Custom Background URL <a className="modalLink" onClick={() => this.resetItem('customBackground')}>Reset</a></p>
<input type='text' id='customBackground'></input>
</ul>
{ /*<ul>
<p>Custom Background Colour <span className="modalLink" onClick={() => this.resetItem('customBackgroundColour')}>Reset</span></p>
<input name='colour' type='color' id='customBackgroundColour' onChange={() => document.getElementById('customBackgroundHex').innerText = document.getElementById('customBackgroundColour').value}></input>
<label for='colour' id='customBackgroundHex'>#00000</label>
</ul> */}
<ul>
<p>Custom Background Colour <a className="modalLink" onClick={() => this.resetItem('customBackgroundColour')}>Reset</a></p>
<input type='color' id='customBackgroundColour'></input>
</ul>
</li>
</div>
<div className='section'>
@@ -205,16 +198,15 @@ export default class Settings extends React.Component {
<span className="slider"></span>
</label>
</div>
<h3>Experimental</h3>
<div className='section'>
<h4>Enable WebP</h4>
<h4>Enable WebP (experimental)</h4>
<label className="switch">
<input type="checkbox" onClick={()=> this.setItem('webp')} id='webpStatus' />
<span className="slider"></span>
</label>
</div>
<div className='section'>
<h4>Dark Theme</h4>
<h4>Dark Theme (experimental)</h4>
<label className="switch">
<input type="checkbox" onClick={()=> this.setItem('darkTheme')} id='darkThemeStatus' />
<span className="slider"></span>

18
src/scss/modules/_modal.scss
View File

@@ -13,18 +13,24 @@
}
}
.modalLink {
a.modalLink {
color: #5352ed;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
.Overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.closeModal {
float: right;
font-size: 2em;
cursor: pointer;
&:hover {
color: grey;
}
@@ -40,13 +46,11 @@
overflow: hidden; /* prevents background page from scrolling when the modal is open */
}
.Overlay {
.ReactModal__Overlay {
position: fixed;
z-index: 999999;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 90vh;
display: flex;

2
src/scss/modules/_search.scss
View File

@@ -6,7 +6,7 @@
flex-direction: row;
display: block;
color: #ffff;
font-family: 'Lexend Deca', sans-serif;;
font-family: 'Lexend Deca';
input[type=text] {
font-size: calc(5px + 1.2vmin);

31
src/scss/modules/_settings.scss
View File

@@ -22,6 +22,8 @@ $gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
&:before {
@@ -100,7 +102,6 @@ h4, #engines {
box-shadow: 20px #000;
font-size: 1.3em;
position: relative;
font-family: 'Lexend Deca', sans-serif;
&:hover {
transform: translateY(-0.10em);
@@ -169,10 +170,6 @@ h4, #engines {
ul {
padding-left: 5px;
margin: 0;
> label {
vertical-align: middle;
}
}
li {
@@ -207,28 +204,4 @@ li {
background: $gradient;
cursor: pointer;
}
}
input[type=color] {
border-radius: 100%;
height: 30px;
width: 30px;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
border: none;
outline: none;
-webkit-appearance: none;
vertical-align: middle;
&::-webkit-color-swatch-wrapper {
padding: 0;
}
&::-webkit-color-swatch {
border: none;
border-radius: 100%;
}
}
input[type=checkbox] {
vertical-align: middle;
}