How does this excellent site work?

Yesterday I found a site that is simply awesome. Here's the url:

http://yourworldoftext.com/

WARNING: The site may be NSFW.

And it immediately became clear to me how this site was built. A look at the source of the page doesn’t say much, but if I look at it in Firebug, I see a lot of such tables:

<div class="tilecont" style="top: 994px; left: 1320px;"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td>A</td> <td>L</td> <td>L</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <tr> <tr> <td>Y</td> <td>O</td> <td>U</td> <td>R</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <tr> <tr> <td>B</td> <td>A</td> <td>S</td> <td>E</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <tr> </table> </div> 

tilecont DIV repeats and splits throughout the page, and the table inside occupies the entire width and height of this DIV. Then each <tr> inside the table is one row with 16 <td> inside that row to make up each character.

It's hard to explain if you have Firebug installed, you can simply drag it onto the page and see for yourself.

I thought it was damn clever, but I can’t work on how it will be stored in the database or something else? I tried looking at JS files, but to be honest, there were a lot of things that I either did not know or were not related to how they are stored, etc. I assume that it makes an AJAX request to the database on each keyUp event keyUp saving new data for this particular “cell”?

Does anyone have any data on how they think this is done?

+4
source share
1 answer

You are probably rudely loyal. The site knows where your viewport is and loads only the part that is visible in 16 char pieces. DB just saves the char strings with x and y coordinates. You can see its update in 1x16 blocks if you drag it quickly.

As for sending, if it were me, I would cache the text and send only one 16 char "piece" at a time. Each time a change occurs, check to see if it is in the same fragment as the last. If you don’t send the last fragment and start caching a new one.

To refresh the view, you can check it for changes in the viewport by sending an ajax request every couple of seconds using window.setInterval() . It can send multiple JSON or something only with pieces that have changes, possibly encoded with their location in the grid in the first few characters.

I just vouch here, I didn’t look at the code, but you're right. Its a fascinating site.

EDIT: More info ...

Check out the init() function (line 906 in yourworld.js). This is the best entry point if you want to learn the code. You can see how editing on line keydown works. The keydown script focuses on a hidden input element that catches text. It then uses the callback to setInterval to retrieve the first character from the input field every 10 ms, and then the empty field. If there is a char, then it becomes cached in the array and placed in the active cell in the grid. He says in a comment that this prevents pasting.

An array of changes is sent every two seconds (line 1017). Each input character is sent with a position and timestamp.

fetchUpdates() handles the receipt of updated cells from the server (line 383). It contains a jQuery.ajax request with a success callback to a function that makes the necessary changes and calls fetchUpdates() again after 1 second of setTimeout() .

+2
source

Source: https://habr.com/ru/post/1314212/


All Articles