Last active
December 29, 2023 06:55
-
-
Save Johann150/fe92ff6463c98b5a21dfc12affffb0e8 to your computer and use it in GitHub Desktop.
https://www.reddit.com/r/neography/comments/a9yd0d/i_made_a_griddy_cipher_where_letters_smush/ (CC-BY-SA 4.0)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| #out{ | |
| display:flex; | |
| flex-flow: row no-wrap; | |
| justify-content:center; | |
| margin-bottom: 40px; | |
| } | |
| #out>samp{ | |
| font-family: 'Segoe UI Symbol',monospace; | |
| font-size: 40px; | |
| line-height: 30px; | |
| } | |
| #out>samp>p{ | |
| margin:0; | |
| } | |
| .toggle{ | |
| display:none; | |
| } | |
| #fold{ | |
| display:none; | |
| padding:5px; | |
| padding-left:20px; | |
| background-color:#f8f888; | |
| margin-bottom:10px; | |
| } | |
| #fold *{ | |
| vertical-align: top; | |
| } | |
| #fold input,#fold label{ | |
| float:right; | |
| } | |
| .toggle ~ label{ | |
| /*poisiton:absolute;*/ | |
| float:left; | |
| cursor:zoom-in; | |
| } | |
| .toggle ~ label:before{ | |
| content:'\25B6'; | |
| width:20px; | |
| display:inline-block; | |
| } | |
| .toggle:checked ~ #fold{ | |
| display:block; | |
| } | |
| .toggle:checked ~ label{ | |
| cursor:zoom-out; | |
| } | |
| .toggle:checked ~ label:before{ | |
| content: '\25BC'; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <input type="checkbox" checked="true" class="toggle" id="t"/> | |
| <label for="t"></label> | |
| <table id="fold"> | |
| <tr><td> | |
| <textarea id="in" cols="120" rows="5"> | |
| All hu-man be-ings are born free and e-qual in dig-ni-ty and rights. | |
| They are en-dowed with rea-son and con-science and should act to-wards one an-oth-er in a spir-it of broth-er-hood. | |
| </textarea><br> | |
| <input type="button" onclick="draw()" value="draw!"/> | |
| <label for="round">rounded</label><input type="checkbox" checked="true" id="round"/> | |
| </td><td> | |
| NOTES: | |
| <ul> | |
| <li>Use line breaks to separate columns.</li> | |
| <li>Use spaces to separate words.</li> | |
| <li>Use dashes to separate syllables.</li> | |
| <li>This version additionally supports a non-standard comma and full stop.</li> | |
| </ul> | |
| <a href="https://gist.github.com/Johann150/fe92ff6463c98b5a21dfc12affffb0e8">this file as a gist</a> | |
| <a href="https://www.reddit.com/r/neography/comments/a9yd0d/i_made_a_griddy_cipher_where_letters_smush/">from this reddit post</a> | |
| <p xmlns:dct="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#" class="license-text">This work is licensed under <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0</a>. 🅭🛊⭵</p> | |
| </td></tr> | |
| </table> | |
| <div id="out"></div><!-- will be filled by Javascript--> | |
| <script> | |
| var alpha={ | |
| /* | |
| 1: - | |
| 2: | | |
| 3: + | |
| */ | |
| "a":[2,1,1], | |
| "b":[1,2,3], | |
| "c":[2,3,2], | |
| "d":[1,3,1], | |
| "e":[1,1,1], | |
| "f":[3,2,1], | |
| "g":[1,3,3], | |
| "h":[2,2,1], | |
| "i":[1,1,2], | |
| "j":[2,3,3], | |
| "k":[3,1,3], | |
| "l":[1,1,3], | |
| "m":[2,2,3], | |
| "n":[1,2,2], | |
| "o":[1,2,1], | |
| "p":[3,1,2], | |
| "q":[3,3,1], | |
| "r":[3,1,1], | |
| "s":[2,1,2], | |
| "t":[2,2,2], | |
| "u":[3,2,2], | |
| "v":[2,3,1], | |
| "w":[1,3,2], | |
| "x":[3,2,3], | |
| "y":[2,1,3], | |
| "z":[3,3,2], | |
| ",":[2,3,3], | |
| ".":[3,3,3] | |
| }; | |
| function draw(){ | |
| text=document.getElementById('in').value.toLowerCase().split(""); | |
| /* | |
| in order to work, 1 unit is grid/2 | |
| the grid is planned out in a bitmap-like form | |
| cell data: | |
| 1 bit:right | |
| 2 bit:down | |
| 4 bit:left | |
| 8 bit:up | |
| => cells are divided in quarters again | |
| */ | |
| var table=[[]]; | |
| var group=0,x=1,y=1; | |
| text.forEach((l)=>{ | |
| if(l=='\n'){ | |
| table[++group]=[]; | |
| x=1; | |
| y=1; | |
| }else if(l=='-'){ | |
| x=1; | |
| table[group][y]=[16]; | |
| y++; | |
| }else if(l==' '){ | |
| x=1; | |
| y++; | |
| }else if(alpha.hasOwnProperty(l)){ | |
| var symbols=alpha[l]; | |
| while(table[group].length<=y){ | |
| // make sure that all required rows exist (not "undefined") | |
| table[group].push([]); | |
| } | |
| if(l=='.'||l==','){ | |
| table[group][y]=[16]; | |
| y++; | |
| // make up for incrementing y | |
| table[group].push([]); | |
| x=0; | |
| } | |
| for(var i=0;i<3;i++){ | |
| // always add one more box to the right | |
| while(table[group][y].length<=x+1){ | |
| table[group][y].push(0); | |
| } | |
| // symbol data can conveniently be converted to cell data by mulitplying with five! | |
| table[group][y][x]=symbols[i]*5; | |
| x+=2; | |
| } | |
| y++; | |
| x-=5; | |
| } | |
| }); | |
| for(group=0;group<table.length;group++){ | |
| for(y=0;y<table[group].length;y++){ | |
| for(x=0;x<table[group][y].length;x++){ | |
| /* | |
| this cell is part of the original code | |
| and can therefore not be modified | |
| */ | |
| if(table[group][y][x]!=0) continue; | |
| if(x>0&&(table[group][y][x-1]&1)){ | |
| // there is a cell on the left with a right line | |
| table[group][y][x]|=4;// set left line | |
| } | |
| if(x+1<table[group][y].length&&(table[group][y][x+1]&4)){ | |
| // there is a cell on the right with a left line | |
| table[group][y][x]|=1;// set right line | |
| } | |
| if(y>0&&x<table[group][y-1].length&&(table[group][y-1][x]&2)){ | |
| // there is a cell above with a down line | |
| table[group][y][x]|=8;// set up line | |
| } | |
| if(y+1<table[group].length&&x<table[group][y+1].length&&(table[group][y+1][x]&8)){ | |
| // there is a cell above with a up line | |
| table[group][y][x]|=2;// set down line | |
| } | |
| } | |
| } | |
| } | |
| var round=document.getElementById('round').checked; | |
| var txt=""; | |
| for(group=0;group<table.length;group++){ | |
| txt+="<samp><p>"; | |
| for(y=0;y<table[group].length;y++){ | |
| for(x=0;x<table[group][y].length;x++){ | |
| var c; | |
| switch(table[group][y][x]){ | |
| case 0:c=" ";break;// En-Space | |
| case 1:c="╶";break; | |
| case 2:c="╷";break; | |
| case 3:c=(round?"╭":"┌");break; | |
| case 4:c="╴";break; | |
| case 5:c="─";break; | |
| case 6:c=(round?"╮":"┐");break; | |
| case 7:c="┬";break; | |
| case 8:c="╵";break; | |
| case 9:c=(round?"╰":"└");break; | |
| case 10:c="│";break; | |
| case 11:c="├";break; | |
| case 12:c=(round?"╯":"┘");break; | |
| case 13:c="┴";break; | |
| case 14:c="┤";break; | |
| case 15:c="┼";break; | |
| case 16:c="</p><p>";break; | |
| } | |
| txt+=c; | |
| } | |
| txt+="<br>"; | |
| } | |
| txt+="</p></samp>"; | |
| } | |
| document.getElementById('out').innerHTML=txt.replace(/<p><br>/g,"<p>"); | |
| } | |
| draw();// default text | |
| </script> | |
| </body> | |
| </html> |
Yup, have fixed it @shaos
Great! But here it's still +++:
https://qwertqwefsday.eu/griddy.html
It's fixed now - thanks! :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, Johann
I think here for J it has to be 2,3,3 (pipe, plus, plus)