JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="ru">

    <head>

        <title>Угадай новость</title>

        <meta charset="utf-8">

        <meta name="description" content="">

        

    



       

    </head>

    <body>

        

        <div id="header">

            <h1>Угадай новость</h1>

            <p>Угадай заголовок новости по буквам, а затем прочти её!</p>

            <p>Для игры нужна только клавиатура</p>

        </div>

        

        

        <div id="wrapper">

            <div id="letters"></div>

            <div id="message">загрузка новости...</div>

            <div id="letters-used">

                <div>Используемые буквы:</div>

            </div>

            <div id="lives-left">

                <div class="desc">Жизни</div>

            </div>

        </div>

        

        <div id="footer">

        Written by <a href="http://felixchi.com">Felix Chi</a> for the <a href="http://10k.aneventapart.com/">10K Apart Contest</a>
        <br/>Русская локализация L.D.V.

        </div>

        

    </body>

</html>

CSS

body {
font-family:arial;
color:#fff;
font-size:12px;
background:#000;
}html {background:#000;}

#wrapper {
background:#333;
width:640px;
height:480px;
margin:50px auto 0;
overflow:hidden;
position:relative;
-webkit-border-radius:10px;-moz-border-radius:10px;
}#header {width:640px;margin:0 auto;}#footer {width:640px;margin:20px auto 0;color:#444;}#footer a {color:#444;}

#message {
text-align:center;
position:absolute;
top:200px;left:120px;width:340px;font-size:24px;font-weight:bold;padding:30px;color:#555;background:#222;background:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#222), to(#111));-webkit-border-radius:30px;background-image: -moz-linear-gradient(bottom, #222, #111);-moz-border-radius:30px;
}#message a {color:#fff;font-size:16px;}

#letters {
width:600px;
margin:20px auto 0;
position:relative;
}

#letters .letter {
padding:5px;
font-size:15px;
font-weight:bold;
border:1px solid #222;
width:15px;
height:25px;
text-align:center;
display:none;
position:absolute;
top:0;
left:0;background:#444;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#111));-webkit-border-radius:5px;background-image: -moz-linear-gradient(top, #444, #111);-moz-border-radius:5px;
}
.letter .is_letter {display:none;}
.noshow {opacity:0;}#letters-used {position:absolute;bottom:20px;left:20px;color:#888;width:500px;}#letters-used .letter {padding:5px 7px;float:left;background:#222;margin:10px 5px 0 0;}#lives-left {position:absolute;right:20px;bottom:20px;color:#888;}#lives-left .live {width:30px;height:30px;margin:0 0 10px;border:1px solid #111;background:#444;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#111));;-webkit-border-radius:15px;background-image: -moz-linear-gradient(top, #444, #111);-moz-border-radius:15px;}#lives-left .used {background:#111;}#lives-left .desc {margin:0 0 10px;}

JavaScript

function fixedFromCharCode (codePt) { 

  if (codePt > 0xFFFF) { 

    codePt -= 0x10000; 

    return String.fromCharCode(0xD800 + (codePt >> 10), 0xDC00 + (codePt & 0x3FF)); 

  } else { 

    return String.fromCharCode(codePt); 

  } 

}
        $(document).ready(function () {

        

            var titles = new Array();

            var links = new Array();

            var tile_counter = word_counter = y_pos = x_pos = cur_title = 0;

            var letters = new Array();

            var letters_used = new Array();

        

            $.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=9718eee200e82ca56aa01909b37cec49&_render=json&_callback=?', 

                function (data) {

                    console.log(data);

                    for (var i=0; i<data.value.items.length; i++) {

                        titles.push(data.value.items[i].title.toUpperCase().replace(/[()]/g,''));

                        links.push(data.value.items[i].link);

                    }

                    $('#message').delay(3000).fadeOut(250);

                    newGame();

                    

                }

            );

            

            function newGame() {

                tile_counter = word_counter = y_pos = x_pos = cur_title = 0;

                letters.length = 0;

                letters_used.length = 0;

                cur_title_index = Math.round(Math.random()*(titles.length-1))

                cur_title = (titles[cur_title_index]);

                console.log(cur_title);

                var words = cur_title.split(' ');

                words.pop();

                $('#letters').html('');

                $('#letters-used .letter').remove();

                

                total_lives = 5;

                refreshLives();

                

                for (var i=0; i<words.length; i++) {

                

                    if (words[i] && x_pos+words[i].length+1 > 20) {

                        x_pos = 0;

            ...