moved scanlines layer above text -- slightly worse performance but much better look with selected text

This commit is contained in:
Joshua Seigler 2014-12-24 14:19:16 -05:00
parent 3a95096031
commit 3278f18d3f
3 changed files with 13 additions and 7 deletions

View file

@ -74,7 +74,6 @@ html, body {
background-size: 25em 4em; background-size: 25em 4em;
background-repeat: repeat-y; background-repeat: repeat-y;
background-position: 50% 0%; background-position: 50% 0%;
z-index: -1;
transition: background-color 2s; transition: background-color 2s;
} }
} }
@ -86,6 +85,7 @@ html, body {
min-height: 100%; min-height: 100%;
padding: 1.2em 1.6em 0.7em; padding: 1.2em 1.6em 0.7em;
font-size: 0.8em; font-size: 0.8em;
background-color: black;
} }
#commandLine { #commandLine {
white-space: pre-wrap; white-space: pre-wrap;

View file

@ -5,23 +5,27 @@
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>FHQWHGADS</title> <title>FHQWHGADS</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo="> <link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style><?php include('compiled-styles.css'); ?></style> <style type="text/css">
<?php include('compiled-styles.css'); ?>
</style>
</head> </head>
<body> <body>
<form><label id="compy"> <form><label id="compy">
<div id="screen"> <div id="screen">
<div id="scanlines"></div>
<div id="scrollback"> <div id="scrollback">
<div id="history">i love u<br>-fhqwhgadshgnsdhjsdbkhsdabkfabkveybvf<br><br></div> <div id="history">i love u<br>-fhqwhgadshgnsdhjsdbkhsdabkfabkveybvf<br><br></div>
<input id="command" name="command" type="text" value="" /> <input id="command" name="command" type="text" value="" />
<div id="commandLine"><span id="ps1">a&gt;</span><span id="typing"></span></div> <div id="commandLine"><span id="ps1">a&gt;</span><span id="typing"></span></div>
</div> </div>
<div id="scanlines"></div>
</div> </div>
<div id="case"> <div id="case">
<div class="knob" id="knobdown"></div> <div class="knob" id="knobdown"></div>
<div class="knob" id="knobup"></div> <div class="knob" id="knobup"></div>
</div> </div>
</label></form> </label></form>
<script type="application/javascript"><?php include('application.js'); ?></script> <script type="application/javascript">
<?php include('application.js'); ?>
</script>
</body> </body>
</html> </html>

View file

@ -24,17 +24,17 @@
var alterBrightness = function (delta) { var alterBrightness = function (delta) {
brightness = Math.max(0, Math.min(1, brightness + delta)); brightness = Math.max(0, Math.min(1, brightness + delta));
this.scanlines.style.backgroundColor = "hsl(120, 100%, " + (16 * brightness) + "%)"; this.scanlines.style.backgroundColor = "hsla(120, 100%, 32%, " + brightness * 0.6 + ")";
}; };
var setInputEnabled = function (enabled) { var setInputEnabled = function (enabled) {
console.log(enabled); console.log(enabled);
if (enabled) { if (enabled) {
commandInput.disabled = false; commandInput.readOnly = false;
commandLine.style.display = 'block'; commandLine.style.display = 'block';
} else { } else {
commandInput.disabled = true; commandInput.readOnly = true;
commandInput.value = ''; commandInput.value = '';
typing.innerHTML = ''; typing.innerHTML = '';
commandLine.style.display = 'none'; commandLine.style.display = 'none';
@ -81,6 +81,8 @@
alterBrightness(-1.0/6); alterBrightness(-1.0/6);
}; };
document.forms[0].onsubmit = handleForm; document.forms[0].onsubmit = handleForm;
alterBrightness(-1);
}; };
document.addEventListener("DOMContentLoaded", init); document.addEventListener("DOMContentLoaded", init);