From bb350b07e9fe9d8215aee7db6b4fe18ff0e9e6a2 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Sun, 21 Dec 2014 16:18:42 -0500 Subject: [PATCH] added the tandy 400 and a table, adaptive sizing, and click-anywhere to focus --- build/application.js | 13 ++- build/assets/images/scanline.svg | 22 ++--- build/assets/images/screen.svg | 58 +++++++++++++ build/assets/images/table.svg | 5 ++ build/compiled-styles.css | 134 ++++++++++++++++++++----------- build/index.php | 4 +- src/assets/css/style.less | 109 ++++++++++++++++--------- src/assets/images/scanline.svg | 22 ++--- src/assets/images/screen.svg | 58 +++++++++++++ src/assets/images/table.svg | 5 ++ src/index.php | 4 +- src/scripts/index.js | 12 ++- 12 files changed, 332 insertions(+), 114 deletions(-) create mode 100644 build/assets/images/screen.svg create mode 100644 build/assets/images/table.svg create mode 100644 src/assets/images/screen.svg create mode 100644 src/assets/images/table.svg diff --git a/build/application.js b/build/application.js index b7e2cf9..1cb5db7 100644 --- a/build/application.js +++ b/build/application.js @@ -20,17 +20,22 @@ } var commandline = document.getElementById("command"); commandline.value = ""; - commandline.focus(); commandline.onkeydown = syncTyping; commandline.onkeyup = syncTyping; commandline.onselect = syncTyping; + commandline.onfocus = syncTyping; + commandline.focus(); + document.onmousedown = function() { + commandline.focus(); + return false; + }; function handleForm() { - var scrollback = document.getElementById("scrollback"); + var history = document.getElementById("history"); var val = this.command.value; this.command.value = ""; document.getElementById("typing").innerHTML = ""; - scrollback.innerHTML = scrollback.innerHTML + "a>" + escapeHTML(val) + "
Command not found.
"; + history.innerHTML = history.innerHTML + "a>" + escapeHTML(val) + "
Command not found.
"; return false; } document.forms[0].onsubmit = handleForm; -})(); \ No newline at end of file +})(); diff --git a/build/assets/images/scanline.svg b/build/assets/images/scanline.svg index 2c76745..7de66c9 100644 --- a/build/assets/images/scanline.svg +++ b/build/assets/images/scanline.svg @@ -1,11 +1,13 @@ - - + + + + + +image/svg+xml + + + + + + diff --git a/build/assets/images/screen.svg b/build/assets/images/screen.svg new file mode 100644 index 0000000..2a14a98 --- /dev/null +++ b/build/assets/images/screen.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + +contrast + + + + + + + + + + + + + diff --git a/build/assets/images/table.svg b/build/assets/images/table.svg new file mode 100644 index 0000000..799c737 --- /dev/null +++ b/build/assets/images/table.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/build/compiled-styles.css b/build/compiled-styles.css index b47c0d5..ca02ffe 100644 --- a/build/compiled-styles.css +++ b/build/compiled-styles.css @@ -8,38 +8,79 @@ body { margin: 0; padding: 0; height: 100%; - line-height: 1; + line-height: 1.2; box-sizing: border-box; + background-color: #254b72; + background-image: url('/assets/images/table.svg'); + background-size: 100% 100%; } -label, -label:before, -label:after { +#processor { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 132.6029165vh; + height: auto; + margin: auto auto 0; + font-family: computerfontregular, monospace; + color: #009900; + font-size: 6vh; +} +@media (max-width: 132.6029165vh) { + #processor { + height: 75.4131226vw; + width: 100%; + font-size: 4.524787356vw; + } +} +#processor:after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-image: url('/assets/images/screen.svg'); + background-size: 100% 100%; + pointer-events: none; +} +#processor > label { + position: absolute; + top: 1em; + bottom: 2.25em; + left: 1.5em; + right: 1.5em; + overflow: hidden; + word-break: break-all; + z-index: 0; +} +#processor > label:before, +#processor > label:after { position: absolute; left: 0; right: 0; + content: ''; } -label { - bottom: 0; - min-height: 100%; - padding: 1em; - font-family: computerfontregular, monospace; - color: #009900; - font-size: 4vmax; - overflow: hidden; - word-break: break-all; -} -label:before { - content: ""; +#processor > label:before { z-index: -1; - top: -8vmax; - bottom: -8vmax; - -webkit-animation: scroll 10s linear infinite; - animation: scroll 10s linear infinite; + top: -3em; + bottom: -3em; + -webkit-animation: scroll 2s linear infinite; + animation: scroll 2s linear infinite; background: url('/assets/images/scanline.svg') #000000; - background-size: 115vmax 15vmax; + background-size: 25em 4em; background-repeat: repeat-y; background-position: 50% 0%; } +#scrollback { + position: absolute; + bottom: 0; + width: 100%; + min-height: 100%; + padding: 1.2em 1.6em 0.5em; + font-size: 0.8em; +} #commandLine { white-space: pre-wrap; } @@ -51,11 +92,12 @@ label:before { #cursor { position: absolute; display: inline-block; - border-left: 0.1em solid; + border-bottom: 0.1em solid; margin-bottom: -0.2em; height: 1em; - -webkit-animation: blink 1s linear infinite; - animation: blink 1s linear infinite; + width: 0.5em; + -webkit-animation: blink 0.5s linear infinite; + animation: blink 0.5s linear infinite; } #selection { color: black; @@ -63,56 +105,56 @@ label:before { } @-webkit-keyframes blink { 0% { - opacity: 1; + border-bottom-width: 0.1em; } - 40% { - opacity: 1; + 49% { + border-bottom-width: 0.1em; } 50% { - opacity: 0; + border-bottom-width: 0.9em; } - 90% { - opacity: 0; + 99% { + border-bottom-width: 0.9em; } 100% { - opacity: 1; + border-bottom-width: 0.1em; } } @keyframes blink { 0% { - opacity: 1; + border-bottom-width: 0.1em; } - 40% { - opacity: 1; + 49% { + border-bottom-width: 0.1em; } 50% { - opacity: 0; + border-bottom-width: 0.9em; } - 90% { - opacity: 0; + 99% { + border-bottom-width: 0.9em; } 100% { - opacity: 1; + border-bottom-width: 0.1em; } } @-webkit-keyframes scroll { 0% { - -webkit-transform: translate3d(0, -7.5vmax, 0); - transform: translate3d(0, -7.5vmax, 0); + -webkit-transform: translate3d(0, 2em, 0); + transform: translate3d(0, 2em, 0); } 100% { - -webkit-transform: translate3d(0, 7.5vmax, 0); - transform: translate3d(0, 7.5vmax, 0); + -webkit-transform: translate3d(0, -2em, 0); + transform: translate3d(0, -2em, 0); } } @keyframes scroll { 0% { - -webkit-transform: translate3d(0, -7.5vmax, 0); - transform: translate3d(0, -7.5vmax, 0); + -webkit-transform: translate3d(0, 2em, 0); + transform: translate3d(0, 2em, 0); } 100% { - -webkit-transform: translate3d(0, 7.5vmax, 0); - transform: translate3d(0, 7.5vmax, 0); + -webkit-transform: translate3d(0, -2em, 0); + transform: translate3d(0, -2em, 0); } } @font-face { diff --git a/build/index.php b/build/index.php index eac0333..a3e81d9 100644 --- a/build/index.php +++ b/build/index.php @@ -11,9 +11,9 @@
- i love u
-fhqwhgadshgnsdhjsdbkhsdabkfabkveybvf

+
i love u
-fhqwhgadshgnsdhjsdbkhsdabkfabkveybvf

+
a>
-
a>
diff --git a/src/assets/css/style.less b/src/assets/css/style.less index b6b094c..32a4e71 100644 --- a/src/assets/css/style.less +++ b/src/assets/css/style.less @@ -7,41 +7,75 @@ html, body { margin: 0; padding: 0; height: 100%; - line-height: 1; + line-height: 1.2; box-sizing: border-box; + background-color: #254b72; // #624200 + background-image: url('/assets/images/table.svg'); + background-size: 100% 100%; } -label, label:before, label:after { +#processor { position: absolute; + top: 0; + bottom: 0; left: 0; right: 0; -} -label { - bottom: 0; - min-height: 100%; - padding: 1em; + width: 132.6029165vh; + height: auto; + @media (max-width: 132.6029165vh) { + height: 75.4131226vw; + width: 100%; + font-size: 4.524787356vw; + } + margin: auto auto 0; font-family: computerfontregular, monospace; color: @consoleColor; - font-size: 4vmax; - overflow: hidden; - word-break: break-all; + font-size: 6vh; + &:after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-image: url('/assets/images/screen.svg'); + background-size: 100% 100%; + pointer-events: none; + } + > label { + position: absolute; + top: 1em; + bottom: 2.25em; + left: 1.5em; + right: 1.5em; + overflow: hidden; + word-break: break-all; + z-index: 0; + &:before, &:after { + position: absolute; + left: 0; + right: 0; + content: ''; + } + &:before { + z-index: -1; + top: -3em; + bottom: -3em; + animation: scroll 2s linear infinite; + background: url('/assets/images/scanline.svg') black; + background-size: 25em 4em; + background-repeat: repeat-y; + background-position: 50% 0%; + } + } } -label:before { - content: ""; - z-index: -1; - top: -8vmax; - bottom: -8vmax; - animation: scroll 10s linear infinite; - background: url('/assets/images/scanline.svg') black; - background-size: 115vmax 15vmax; - background-repeat: repeat-y; - background-position: 50% 0%; +#scrollback { + position: absolute; + bottom: 0; + width: 100%; + min-height: 100%; + padding: 1.2em 1.6em 0.5em; + font-size: 0.8em; } -//label:after { -// content: ""; -// top: 0; -// bottom: 0; -// background-image: radial-gradient(20vw circle at 5vw 5vw, rgba(255,255,255,0.25) 5%, transparent); -//} #commandLine { white-space: pre-wrap; } @@ -53,10 +87,11 @@ label:before { #cursor { position: absolute; display: inline-block; - border-left: 0.1em solid; + border-bottom: 0.1em solid; margin-bottom: -0.2em; height: 1em; - animation: blink 1s linear infinite; + width: 0.5em; + animation: blink 0.5s linear infinite; } #selection { color: black; @@ -64,26 +99,26 @@ label:before { } @keyframes blink { 0% { - opacity: 1; + border-bottom-width: 0.1em; } - 40% { - opacity: 1; + 49% { + border-bottom-width: 0.1em; } 50% { - opacity: 0; + border-bottom-width: 0.9em; } - 90% { - opacity: 0; + 99% { + border-bottom-width: 0.9em; } 100% { - opacity: 1; + border-bottom-width: 0.1em; } } @keyframes scroll { 0% { - transform: translate3d(0,-7.5vmax,0); + transform: translate3d(0,2em,0); } 100% { - transform: translate3d(0,7.5vmax,0); + transform: translate3d(0,-2em,0); } } diff --git a/src/assets/images/scanline.svg b/src/assets/images/scanline.svg index 2c76745..7de66c9 100644 --- a/src/assets/images/scanline.svg +++ b/src/assets/images/scanline.svg @@ -1,11 +1,13 @@ - - + + + + + +image/svg+xml + + + + + + diff --git a/src/assets/images/screen.svg b/src/assets/images/screen.svg new file mode 100644 index 0000000..2a14a98 --- /dev/null +++ b/src/assets/images/screen.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + +contrast + + + + + + + + + + + + + diff --git a/src/assets/images/table.svg b/src/assets/images/table.svg new file mode 100644 index 0000000..799c737 --- /dev/null +++ b/src/assets/images/table.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/index.php b/src/index.php index eac0333..a3e81d9 100644 --- a/src/index.php +++ b/src/index.php @@ -11,9 +11,9 @@
- i love u
-fhqwhgadshgnsdhjsdbkhsdabkfabkveybvf

+
i love u
-fhqwhgadshgnsdhjsdbkhsdabkfabkveybvf

+
a>
-
a>
diff --git a/src/scripts/index.js b/src/scripts/index.js index 6f44a3d..fc2b802 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -21,17 +21,23 @@ } var commandline = document.getElementById("command"); commandline.value = ""; - commandline.focus(); commandline.onkeydown = syncTyping; commandline.onkeyup = syncTyping; commandline.onselect = syncTyping; + commandline.onfocus = syncTyping; + commandline.focus(); + document.onmousedown = function() { + commandline.focus(); + return false; + // a little heavy handed, but works for now + }; function handleForm() { - var scrollback = document.getElementById('scrollback'); + var history = document.getElementById('history'); var val = this.command.value; this.command.value = ''; document.getElementById("typing").innerHTML = ''; - scrollback.innerHTML = scrollback.innerHTML + 'a>' + escapeHTML(val) + '
Command not found.
'; + history.innerHTML = history.innerHTML + 'a>' + escapeHTML(val) + '
Command not found.
'; return false; } document.forms[0].onsubmit = handleForm;