JS in own file; Ported Decode writtenMorse engine; design fixes
This commit is contained in:
mmk2410
parent
90fdd71c88
commit
bac46e47ac
5 changed files with 318 additions and 47 deletions
68
index.html
68
index.html
|
|
@ -9,58 +9,36 @@
|
|||
<link rel="shortcut icon" href="./res/img/favicon.png" type="image/x-icon" />
|
||||
<link rel="image_src" href="./res/img/favicon.png" />
|
||||
|
||||
<script src="js/web/web.js"></script>
|
||||
<script src="js/engine/DecodeWrittenMorse.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<span class="actionbar">
|
||||
<img src="./res/img/menu.svg" class="menuicon" onclick="drawer()"/>
|
||||
Morse Converter
|
||||
</span>
|
||||
<div class="drawer">
|
||||
<img src="res/img/drawergraphic.png" class="drawerimg"/>
|
||||
<div class="draweritem">writtenMorse</div>
|
||||
<div class="draweritem">Normal Morse</div>
|
||||
<div class="drawerdivider"></div>
|
||||
<div class="draweritem">About</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="card">
|
||||
<textarea class="input" id="textarea">Enter your text.</textarea>
|
||||
<div class="carddivider"></div>
|
||||
<div class="cardbuttons">
|
||||
<span class="cardbutton" onclick="getText()">ENCODE</span>
|
||||
<span class="cardbutton">DECODE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" id="outputcard">
|
||||
<div class="cardtext">
|
||||
<span id="output"></span>
|
||||
</div>
|
||||
<div class="drawer">
|
||||
<img src="res/img/drawergraphic.png" class="drawerimg"/>
|
||||
<div class="draweritem" onclick="writtenMorse()">writtenMorse</div>
|
||||
<div class="draweritem" onclick="normalMorse()">Normal Morse</div>
|
||||
<div class="drawerdivider"></div>
|
||||
<div class="draweritem" onclick="about()">About</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="card">
|
||||
<textarea class="input" id="textarea">Enter your text.</textarea>
|
||||
<div class="carddivider"></div>
|
||||
<div class="cardbuttons">
|
||||
<span class="cardbutton" onclick="encode()">ENCODE</span>
|
||||
<span class="cardbutton" onclick="decode()">DECODE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" id="outputcard">
|
||||
<div class="cardtext">
|
||||
<span id="output"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
var dur = 150
|
||||
var drawerStatus = true
|
||||
function getText(){
|
||||
var input = $('#textarea').val()
|
||||
$('#output').text(input)
|
||||
$('#outputcard').fadeIn(dur)
|
||||
}
|
||||
function drawer(){
|
||||
if(window.innerWidth <= 1400){
|
||||
if(drawerStatus){
|
||||
$('.drawer').show('slide', {direction: 'left'}, dur)
|
||||
$('.actionbar').before("<div class='overlay' onclick='drawer()'></div>")
|
||||
$('.overlay').animate({"opacity":"0.4"}, dur)
|
||||
drawerStatus = false
|
||||
} else {
|
||||
$('.drawer').hide('slide', {direction: 'left'}, dur)
|
||||
$('.overlay').animate({"opacity":"0"}, dur, function callback (){
|
||||
$('.overlay').remove()
|
||||
})
|
||||
drawerStatus = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
217
js/engine/DecodeWrittenMorse.js
Normal file
217
js/engine/DecodeWrittenMorse.js
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
function decodeWrittenMorseManager(message) {
|
||||
if(message == ""){
|
||||
return "Please enter at least one character"
|
||||
} else {
|
||||
if (message.endsWith(" ")) {
|
||||
message = message.substring(0, message.length - 1)
|
||||
}
|
||||
// Variables
|
||||
var input = message.toUpperCase()
|
||||
var output = ""
|
||||
if (input == "LETTERSPACE") {
|
||||
output = "#"
|
||||
} else if (input == "END OF WORK") {
|
||||
output = "000101"
|
||||
} else if (input == "ERROR") {
|
||||
output = "00000000"
|
||||
} else if (input == "STARTING SIGNAL") {
|
||||
output = "10101"
|
||||
} else if (input == "ENDING SIGNAL") {
|
||||
output = "01010"
|
||||
} else if (input == "UNDERSTOOD") {
|
||||
output = "00010"
|
||||
} else if (input == "WAIT") {
|
||||
output = "01000"
|
||||
} else if (input == "SOS") {
|
||||
output = "000111000"
|
||||
} else if (input == "LETTER SPACE") {
|
||||
output = "##"
|
||||
} else if (input == "WORD SPACE") {
|
||||
output = "+"
|
||||
} else {
|
||||
for (var c = input.length; c > 0; c--) {
|
||||
if (input.startsWith(" ")) {
|
||||
if (output.endsWith("#")) {
|
||||
output = output.substring(0, output.length - 1)
|
||||
}
|
||||
output = output +"+"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("A")) {
|
||||
output = output + "01#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("B")) {
|
||||
output = output +"1000#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("C")) {
|
||||
output = output +"1010#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("D")) {
|
||||
output = output +"100#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("E")) {
|
||||
output = output +"0#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("F")) {
|
||||
output = output +"0010#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("G")) {
|
||||
output = output +"110#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("H")) {
|
||||
output = output +"0000#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("I")) {
|
||||
output = output +"00#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("J")) {
|
||||
output = output +"0111#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("K")) {
|
||||
output = output +"101#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("L")) {
|
||||
output = output +"0100#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("M")) {
|
||||
output = output +"11#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("N")) {
|
||||
output = output +"10#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("O")) {
|
||||
output = output +"111#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("P")) {
|
||||
output = output +"0110#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("Q")) {
|
||||
output = output +"1101#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("R")) {
|
||||
output = output +"010#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("S")) {
|
||||
output = output +"000#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("T")) {
|
||||
output = output +"1#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("U")) {
|
||||
output = output +"001#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("V")) {
|
||||
output = output +"0001#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("W")) {
|
||||
output = output +"011#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("X")) {
|
||||
output = output +"1001#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("Y")) {
|
||||
output = output +"1011#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("Z")) {
|
||||
output = output +"1100#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("0")) {
|
||||
output = output +"11111#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("1")) {
|
||||
output = output +"01111#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("2")) {
|
||||
output = output +"00111#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("3")) {
|
||||
output = output +"00011#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("4")) {
|
||||
output = output +"00001#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("5")) {
|
||||
output = output +"00000#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("6")) {
|
||||
output = output +"10000#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("7")) {
|
||||
output = output +"11000#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("8")) {
|
||||
output = output +"11100#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("9")) {
|
||||
output = output +"11110#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("Ä")) {
|
||||
output = output +"0101#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("Ö")) {
|
||||
output = output +"1110#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("Ü")) {
|
||||
output = output +"0011#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("ß")) {
|
||||
output = output +"00011000#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith(".")) {
|
||||
output = output +"010101#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith(",")) {
|
||||
output = output +"110011#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith(":")) {
|
||||
output = output +"111000#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith(";")) {
|
||||
output = output +"101010#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("?")) {
|
||||
output = output +"001100#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("!")) {
|
||||
output = output +"101011#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("-")) {
|
||||
output = output +"100001#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("_")) {
|
||||
output = output +"001101#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("(")) {
|
||||
output = output +"10110#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith(")")) {
|
||||
output = output +"101101#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("=")) {
|
||||
output = output +"10001#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("+")) {
|
||||
output = output +"01010#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("/")) {
|
||||
output = output +"10010#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("@")) {
|
||||
output = output +"011010#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("'")) {
|
||||
output = output +"011110#"
|
||||
input = input.substring(1, input.length)
|
||||
} else if (input.startsWith("$")) {
|
||||
output = output +"0001001#"
|
||||
input = input.substring(1, input.length)
|
||||
} else {
|
||||
output = "Code not listed or wrong."
|
||||
}
|
||||
}
|
||||
if (output.endsWith("#")) {
|
||||
output = output.substring(0, output.length - 1)
|
||||
}
|
||||
}
|
||||
return output
|
||||
}
|
||||
}
|
||||
57
js/web/web.js
Normal file
57
js/web/web.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
var dur = 150
|
||||
var drawerStatus = true
|
||||
var writtenMorse = true
|
||||
function drawer(){
|
||||
if(window.innerWidth <= 1400){
|
||||
if(drawerStatus){
|
||||
$('.drawer').show('slide', {direction: 'left'}, dur)
|
||||
$('.actionbar').before("<div class='overlay' onclick='drawer()'></div>")
|
||||
$('.overlay').animate({"opacity":"0.4"}, dur)
|
||||
drawerStatus = false
|
||||
} else {
|
||||
$('.drawer').hide('slide', {direction: 'left'}, dur)
|
||||
$('.overlay').animate({"opacity":"0"}, dur, function callback (){
|
||||
$('.overlay').remove()
|
||||
})
|
||||
drawerStatus = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function encode(){
|
||||
var input = $('#textarea').val()
|
||||
if(writtenMorse){
|
||||
$("#output").text("The normal morse engine is not ported jet.")
|
||||
} else {
|
||||
//TODO port the normal morse decode engine
|
||||
$("#output").text("The normal morse engine is not ported jet.")
|
||||
}
|
||||
$('#outputcard').fadeIn(dur)
|
||||
}
|
||||
|
||||
function decode(){
|
||||
var input = $('#textarea').val()
|
||||
if(writtenMorse){
|
||||
$('#output').text(decodeWrittenMorseManager(input))
|
||||
} else {
|
||||
//TODO port the normal morse decode engine
|
||||
$("#output").text("The normal morse engine is not ported jet.")
|
||||
}
|
||||
$('#outputcard').fadeIn(dur)
|
||||
}
|
||||
|
||||
function writtenMorse(){
|
||||
writtenMorse = true
|
||||
drawer()
|
||||
}
|
||||
|
||||
function normalMorse(){
|
||||
writtenMorse = false
|
||||
drawer()
|
||||
}
|
||||
|
||||
function about(){
|
||||
$("body").fadeOut(dur, function callback(){
|
||||
window.location = "http://marcel-kapfer.de/writtenmorse"
|
||||
})
|
||||
}
|
||||
|
|
@ -46,7 +46,8 @@ body {
|
|||
height: 72px;
|
||||
line-height: 72px;
|
||||
font-size: 18px;
|
||||
padding-left: 16px; }
|
||||
padding-left: 16px;
|
||||
cursor: pointer; }
|
||||
|
||||
.draweritem:hover {
|
||||
background: #e0e0e0; }
|
||||
|
|
@ -100,7 +101,8 @@ body {
|
|||
min-width: 64px;
|
||||
margin-left: 8px;
|
||||
padding: 5px;
|
||||
color: #03a9f4; }
|
||||
color: #03a9f4;
|
||||
cursor: pointer; }
|
||||
|
||||
.cardbutton:hover {
|
||||
background: #e0e0e0; }
|
||||
|
|
@ -115,6 +117,13 @@ body {
|
|||
height: 100%;
|
||||
z-index: 30; }
|
||||
|
||||
#output {
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
word-wrap: break-word; }
|
||||
|
||||
#outputcard {
|
||||
display: none; }
|
||||
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ body
|
|||
line-height: $drawer-item-height
|
||||
font-size: $drawer-item-font-size
|
||||
padding-left: 16px
|
||||
cursor: pointer
|
||||
|
||||
.draweritem:hover
|
||||
background: $hovered-element-color
|
||||
|
|
@ -117,6 +118,7 @@ body
|
|||
margin-left: 8px
|
||||
padding: 5px
|
||||
color: $primary-color
|
||||
cursor: pointer
|
||||
|
||||
.cardbutton:hover
|
||||
background: $hovered-element-color
|
||||
|
|
@ -131,6 +133,14 @@ body
|
|||
height: 100%
|
||||
z-index: 30
|
||||
|
||||
#output
|
||||
-moz-hyphens: auto
|
||||
-ms-hyphens: auto
|
||||
-webkit-hyphens: auto
|
||||
hyphens: auto
|
||||
word-wrap: break-word
|
||||
|
||||
|
||||
#outputcard
|
||||
display: none
|
||||
|
||||
|
|
|
|||
Reference in a new issue