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-repeat: repeat-y;
background-position: 50% 0%;
z-index: -1;
transition: background-color 2s;
}
}
@ -86,6 +85,7 @@ html, body {
min-height: 100%;
padding: 1.2em 1.6em 0.7em;
font-size: 0.8em;
background-color: black;
}
#commandLine {
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">
<title>FHQWHGADS</title>
<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>
<body>
<form><label id="compy">
<div id="screen">
<div id="scanlines"></div>
<div id="scrollback">
<div id="history">i love u<br>-fhqwhgadshgnsdhjsdbkhsdabkfabkveybvf<br><br></div>
<input id="command" name="command" type="text" value="" />
<div id="commandLine"><span id="ps1">a&gt;</span><span id="typing"></span></div>
</div>
<div id="scanlines"></div>
</div>
<div id="case">
<div class="knob" id="knobdown"></div>
<div class="knob" id="knobup"></div>
</div>
</label></form>
<script type="application/javascript"><?php include('application.js'); ?></script>
<script type="application/javascript">
<?php include('application.js'); ?>
</script>
</body>
</html>

View file

@ -24,17 +24,17 @@
var alterBrightness = function (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) {
console.log(enabled);
if (enabled) {
commandInput.disabled = false;
commandInput.readOnly = false;
commandLine.style.display = 'block';
} else {
commandInput.disabled = true;
commandInput.readOnly = true;
commandInput.value = '';
typing.innerHTML = '';
commandLine.style.display = 'none';
@ -81,6 +81,8 @@
alterBrightness(-1.0/6);
};
document.forms[0].onsubmit = handleForm;
alterBrightness(-1);
};
document.addEventListener("DOMContentLoaded", init);