{"id":43220,"date":"2019-01-27T03:01:24","date_gmt":"2019-01-26T17:01:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43220"},"modified":"2019-01-27T13:16:54","modified_gmt":"2019-01-27T03:16:54","slug":"textarea-emoji-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/textarea-emoji-game-primer-tutorial\/","title":{"rendered":"Textarea Emoji Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_emoji_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Textarea Emoji Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_emoji_game.jpg\" title=\"Textarea Emoji Game Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Textarea Emoji Game Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s web application works involves a very simple premise for a game, but we hope some of the methods needed, some new to us, will be of interest to you too.<\/p>\n<p>The game, for up to seven players, has a very simple premise, that being the user clicks in a split second when they see an emoji of choosing in a band of interest on the screen (actually a band of emojis in an HTML textarea element).   It is a test of nerve (because you lose points for &#8220;playing wolf&#8221;) and reflexes (though you can speed up the game, or slow it down, as required).<\/p>\n<p>We found lots of interesting issues coding <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_emoji_game.php\" title=\"Click picture\">this game<\/a>.<\/p>\n<ul>\n<li>First off, we took a list of emojis that we use to &#8220;decorate&#8221; the blog you are reading this post on.<\/li>\n<li>This gave us a way to slap on many emojis in a textarea &#8220;rectangle&#8221; all at once using HTML textarea cols=28 rows=28 via the use of classname CSS.  We suspected that would be fine for a non-dynamic scenario and that panned out to be true, but just because you (CSS) style some emojis via something like &#8230;<br \/>\n<code><br \/>\n  .player1:before { content:'\\ud83c\\udf80'; }<br \/>\n<\/code><br \/>\n &#8230; does not mean that you can expect that element (with classname=id) Javascript later &#8230;<br \/>\n<code><br \/>\n  var player1cont=document.getElementById('player1').value;  \/\/ or .innerHTML for that matter<br \/>\n<\/code><br \/>\n &#8230; will yield a non-blank result &#8230; but had to check &#8230; so that meant &#8230;<\/li>\n<li>We had to find a way to convert emoji &#8230;<br \/>\n<code><br \/>\n\\xF0\\x9F\\x91\\xA0<br \/>\n<\/code><br \/>\n &#8230; syntax into our favourite Javascript <a target=_blank title='String.fromCodePoint() information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/fromCodePoint'>String.fromCodePoint<\/a> mode of thinking, all in PHP here (by the way), and came across this <a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/7106470\/utf-8-to-unicode-code-points'>very useful link<\/a>, thanks, that got me onto code such as &#8230;<br \/>\n<code><br \/>\n  $jscr.=\"\\n var jlfplayer\" . $i . \"=[String.fromCodePoint(0x\" . str_replace('\"','',str_replace(\"\\u\",\",0x\",substr(<a target=_blank title='PHP json_encode information' href='http:\/\/php.net\/manual\/en\/function.json-encode.php'>json_encode<\/a>($wsarray[$ws]),3))) . \")]; \\n var jlfplayer\" . $i . \"look=jlfplayer\" . $i . \"[0];  \\n\";<br \/>\n<\/code><br \/>\n &#8230; as a launching pad into any Javascript dynamic means of controlling the emoji &#8220;mass&#8221; at any given point in time.<\/li>\n<li>Then there was the thought of helping out the user &#8220;a little&#8221; with an overlay (set of HTML div elements) highlighting the textarea sliver of interest &#8230;<br \/>\n<code><br \/>\nfunction tdl() {<br \/>\n var i=0;<br \/>\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n i=0;<br \/>\n } else {<br \/>\n document.getElementById('ikey').focus();<br \/>\n }<br \/>\n document.getElementById('overlay').innerHTML=''; \/\/ empty div at end of document.body<br \/>\n var rect, tds=document.getElementsByTagName('td');<br \/>\n for (var itds=0; itds&lt;tds.length; itds++) {<br \/>\n  rect=tds[itds].getBoundingClientRect();<br \/>\n  document.getElementById('overlay').innerHTML+='&lt;div <b>onclick=document.getElementById(\"iplayer' + eval(1 + itds) + '\").click();<\/b> style=\"position:absolute;top:' + rect.top + 'px;left:' + rect.left + 'px;z-index:21;opacity:0.3;background-color:transparent;border:6px inset yellow;width:12px;height:' + rect.height + 'px;\"&gt;&lt;\/div&gt;';<br \/>\n }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>And this same Javascript function, it occurred to us, would be good to run at a window.onresize event, <b>so<\/b> &#8230;<br \/>\n<code><br \/>\n&lt;body onload=\"  <b>window.addEventListener('resize', tdl, true);<\/b> tdl(); document.getElementById('mysel').value='' + numplayers; setTimeout(preonlis,1000);\"&gt;<br \/>\n<\/code>\n<\/li>\n<li>Then there was the thought of helping out the user &#8220;a little more&#8221; allowing clicks on the &#8220;score&#8221; button natively to adjust the score, as well as to click on those div elements above or the textarea element or the table header cell&#8217;s emoji button as well, all via code like <b>onclick=document.getElementById(&#8220;iplayer&#8221; + eval(1 + itds)).click();<\/b> above.<\/li>\n<li>Then there was the thought about how to allow for feasibility of many players playing this game on the one device, and we came up with a <b>HotKey TextBox<\/b> arrangement &#8230;<br \/>\n<code><br \/>\n&lt;h3&gt;RJM Programming - January, 2019 ... keyboard clicks for Player <b>&lt;input id=ikey placeholder='' style=display:inline-block;width:20px; onkeyup=\"document.getElementById('otp').focus();\" onblur=\" if (this.value.toLowerCase().replace('a','1').replace('b','2').replace('c','3').replace('d','4').replace('e','5').replace('f','6').replace('g','7') &gt;= '1' && this.value.toLowerCase().replace('a','1').replace('b','2').replace('c','3').replace('d','4').replace('e','5').replace('f','6').replace('g','7') &lt;= ('' + numplayers)) { document.getElementById('iplayer' + eval(this.value.toLowerCase().replace('a','1').replace('b','2').replace('c','3').replace('d','4').replace('e','5').replace('f','6').replace('g','7'))).click(); this.placeholder=this.value.toLowerCase().replace('a','1').replace('b','2').replace('c','3').replace('d','4').replace('e','5').replace('f','6').replace('g','7'); } this.value=''; this.focus(); \" type=text title=\"Type in player number or letter starting at 'a' is '1'\" value=''&gt;&lt;\/input&gt;?&lt;\/h3&gt;<\/b><br \/>\n<\/code><br \/>\n &#8230; that leans on that &#8220;out of this wooooorld&#8221; textbox (HTML below) that is so good to have for tabbing out purposes on web applications with a single &#8220;really useful&#8221; textbox (such as our one today) &#8230;<br \/>\n<code><br \/>\n&lt;input id=otp type=text style='position:absolute;left:-200px;left:-200px;' value=''&gt;&lt;\/input&gt;<br \/>\n<\/code>\n<\/li>\n<li>And pretty run of the mill <b>user dropdown controls<\/b> (in HTML below) whose value changes cause a &#8230;<br \/>\n<code><br \/>\n&lt;h1&gt;Textarea Emoji Game for <b>&lt;select id=mysel onchange=\"location.href=document.URL.split('#')[0].split('?')[0] + '?numplayers=' + this.value + document.getElementById('delaysel').value.trim();\"&gt;&lt;option value=3&gt;3&lt;\/option&gt;&lt;option value=1&gt;1&lt;\/option&gt;&lt;option value=2&gt;2&lt;\/option&gt;&lt;option value=4&gt;4&lt;\/option&gt;&lt;option value=5&gt;5&lt;\/option&gt;&lt;option value=6&gt;6&lt;\/option&gt;&lt;option value=7&gt;7&lt;\/option&gt;&lt;\/select&gt;&nbsp;&lt;select id=delaysel onchange=\"location.href=document.URL.split('#')[0].split('?')[0] + '?numplayers=' + encodeURIComponent(document.getElementById('mysel').value + '.' + fivehundred) + this.value.trim();\"&gt;&lt;option value=''&gt;Speed Okay ... versus ...&lt;\/option&gt;&lt;option value='&delay=2\/'&gt;Speed 2x Faster&lt;\/option&gt;&lt;option value='&delay=2x'&gt;Speed 2x Slower&lt;\/option&gt;&lt;option value='&delay=3\/'&gt;Speed 3x Faster&lt;\/option&gt;&lt;option value='&delay=3x'&gt;Speed 3x Slower&lt;\/option&gt;&lt;option value=' '&gt;Speed Okay ... New Game&lt;\/option&gt;&lt;\/select&gt;<\/b>&lt;\/h1&gt;<br \/>\n<\/code><br \/>\n &#8230; renavigation, or refresh, of the game.\n<\/ul>\n<p>Here is the PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_emoji_game.php_GETME\" title=\"dropdown_emoji_game.php\">dropdown_emoji_game.php<\/a> code for you to peruse, as you wish.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d43220' onclick='var dv=document.getElementById(\"d43220\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43220' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s web application works involves a very simple premise for a game, but we hope some of the methods needed, some new to us, will be of interest to you too. The game, for up to seven players, has a &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/textarea-emoji-game-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,15,37],"tags":[174,281,367,385,448,476,477,573,576,2817,652,2092,894,932,997,1238,1262,1319,2816],"class_list":["post-43220","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-button","tag-css","tag-dropdown","tag-emoji","tag-focus","tag-game","tag-games-2","tag-hotkey","tag-html","tag-iconv","tag-javascript","tag-multiple","tag-overlay","tag-php","tag-programming","tag-table","tag-textarea","tag-tutorial","tag-users"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43220"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=43220"}],"version-history":[{"count":16,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43220\/revisions"}],"predecessor-version":[{"id":43242,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43220\/revisions\/43242"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=43220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=43220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=43220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}