{"id":52978,"date":"2021-08-11T03:01:29","date_gmt":"2021-08-10T17:01:29","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52978"},"modified":"2021-08-10T21:35:55","modified_gmt":"2021-08-10T11:35:55","slug":"short-code-personalized-emoji-in-sector-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/short-code-personalized-emoji-in-sector-game-tutorial\/","title":{"rendered":"Short Code Personalized Emoji in Sector Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Short Code Personalized Emoji in Sector Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/emoji_in_sector_personalized.jpg\" title=\"Short Code Personalized Emoji in Sector Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Short Code Personalized Emoji in Sector Game Tutorial<\/p><\/div>\n<p>If you are a programmer dealing with emojis all the time, and therefore visiting websites like &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Emojipedia' href='https:\/\/emojipedia.org\/'>Emojipedia<\/a><\/li>\n<li><a target=_blank title='FileFormat' href='https:\/\/www.fileformat.info\/'>FileFormat<\/a><\/li>\n<\/ul>\n<p> &#8230; on a regular basis you will probably have seen mention of Emoji &#8220;Short codes&#8221; of the form &#8220;<i>:[short_code]:<\/i>&#8221; (eg. <i>:e-mail:<\/i> or <i>:grinning_face:<\/i>) used by <a target=_blank href=\"https:\/\/github.com\">Github<\/a> and <a target=_blank href=\"https:\/\/slack.com\">Slack<\/a> (and, we think, <a target=_blank href=\"https:\/\/facebook.com\">Facebook<\/a>) which we want to get into today, as an idea for our players in our Emoji in Sector game be able to personalize their player names (using div <a target=_blank title=Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true) via &#8230;<\/p>\n<ul>\n<li>underscored word in the (optionally personalized) player name the user enters &#8230; or &#8230;<\/li>\n<li>round bracketed word in the (optionally personalized) player name the user enters &#8230; or &#8230;<\/li>\n<li>colon<font size=1>ed<\/font> word in the (optionally personalized) player name the user enters &#8230; or &#8230;<\/li>\n<li>if none of above, the last word in a multi-worded <font size=1>(or blank prefixed single word)<\/font> name will be checked (in case it represents a recognized Emoji Short Code)<\/li>\n<\/ul>\n<p> &#8230; using a new iframe element &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe style=display:none; id=isc onload='checksc(this);' src='..\/PHP\/short_codes.php'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; &#8220;onload&#8221; event Javascript function &#8230;<\/p>\n<p><code><br \/>\nfunction checksc(iois) {<br \/>\n  if (iois != null) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n    if (iois.src.indexOf('?') != -1) {<br \/>\n     if (aconto.document) { aconto = aconto.document; }<br \/>\n     if (aconto.body != null) {<br \/>\n     \/\/alert(aconto.body.innerHTML);<br \/>\n      if (aconto.body.innerHTML.indexOf('&lt;style&gt;') != -1) {<br \/>\n       \/\/alert(which);<br \/>\n       theclasses[which]=('' + eval(1 + eval('' + which))).replace('1','one').replace('2','two').replace('3','three').replace('4','four').replace('5','five').replace('0','');<br \/>\n       document.getElementById('estyle').innerHTML+='&lt;style&gt; .' + ('' + eval(1 + eval('' + which))).replace('1','one').replace('2','two').replace('3','three').replace('4','four').replace('5','five').replace('0','') + \"::after { content: \" + aconto.body.innerHTML.split(\"content:\")[1].split(';')[0] + \" !important; } &lt;\/style&gt;\";<br \/>\n       document.getElementById('spn' + which).className=('' + eval(1 + eval('' + which))).replace('1','one').replace('2','two').replace('3','three').replace('4','four').replace('5','five').replace('0','');<br \/>\n       document.getElementById('c' + eval(0 + eval('' + which))).innerHTML=document.getElementById('c' + eval(0 + eval('' + which))).innerHTML.replace(decodeURIComponent(iois.src.split('=')[1].split('&')[0].split('#')[0]), aconto.body.innerHTML.split('&lt;\/span&gt;')[0].split('&gt;')[eval(-1 + aconto.body.innerHTML.split('&lt;\/span&gt;')[0].split('&gt;').length)]);<br \/>\n      }<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; on top of yesterday&#8217;s <a title='Emoji in Sector Game Mobile Tutorial' href='#esgmt'>Emoji in Sector Game Mobile Tutorial<\/a> progress, resulting in a chance for you to (re-)try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html---GETME\" title=\"emoji_in_sector.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html---GETME\" title=\"emoji_in_sector.html\">emoji_in_sector.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/short-code-personalized-emoji-in-sector-game-tutorial\/'>Short Code Personalized Emoji in Sector Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='esgmt'>Previous relevant <a target=_blank title='Emoji in Sector Game Mobile Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-in-sector-game-mobile-tutorial\/'>Emoji in Sector Game Mobile Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji in Sector Game Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/emoji_in_sector_mobile.jpg\" title=\"Emoji in Sector Game Mobile Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji in Sector Game Mobile Tutorial<\/p><\/div>\n<p>We&#8217;ve bitten the bullet!  We admit, for mobile platforms, involving the keyboard in any programmatic way, is difficult to work.  And so, yesterday&#8217;s <a title='Emoji in Sector Game Resize Tutorial' href='#esgrt'>Emoji in Sector Game Resize Tutorial<\/a>&#8216;s web application has had two changes &#8230;<\/p>\n<ul>\n<li>for mobile platforms (or when there are more than 2 players), offer grid cell clicks as a new (additional) player modus operandi &#8230;<br \/>\n<code><br \/>\n  if (eval('' + numplayers) > 2 || navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    ocb=\" onclick=append(this); \";<br \/>\n    octb=\" onclick=append(this); \";<br \/>\n    via=' grid cell clicks below';<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<li>default game speed is that &#8220;Difficult&#8221; one we&#8217;ve started with but slow the emojis down in &#8220;Easier&#8221; and &#8220;Easy&#8221; new game modes of use<\/li>\n<li>two player game button options now allow for &#8220;onmouseover&#8221; usage (for your non-mobile players)<\/li>\n<\/ul>\n<p> &#8230; applied to it for today&#8217;s improvements.<\/p>\n<p>Yet again, feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html--GETME\" title=\"emoji_in_sector.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html--GETME\" title=\"emoji_in_sector.html\">emoji_in_sector.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-in-sector-game-mobile-tutorial\/'>Emoji in Sector Game Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='esgrt'>Previous relevant <a target=_blank title='Emoji in Sector Game Resize Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-in-sector-game-resize-tutorial\/'>Emoji in Sector Game Resize Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji in Sector Game Resize Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/emoji_in_sector_resize.jpg\" title=\"Emoji in Sector Game Resize Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji in Sector Game Resize Tutorial<\/p><\/div>\n<p>We find the &#8220;onresize&#8221; event one of the most interesting to code for with web applications.  It can be a minor tweak right through to scenarios where it is just too hard not to &#8230;<\/p>\n<p><code><br \/>\nlocation.href=document.URL;  \/\/ the onresize coward's way out<br \/>\n<\/code><\/p>\n<p>.  And so, onto yesterday&#8217;s <a title='Emoji in Sector Game Primer Tutorial' href='#esgpt'>Emoji in Sector Game Primer Tutorial<\/a> we have a reasonably complex scenario catering for this &#8220;web browser window size change via user means&#8221; event (logic) &#8230; HTML <font color=blue>change<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;body onload='wwt=window.innerHeight; onl();' onkeypress=\"vslast(event);\"<font color=blue> onresize=\"pretwf();\"<\/font>&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; using Javascript &#8220;onresize&#8221; event logic &#8230;<\/p>\n<p><code><br \/>\nfunction pretwf() {<br \/>\n  myt=null;<br \/>\n  myz=null;<br \/>\n  thetds=[];<br \/>\n  thetdareas=[];<br \/>\n  \/\/thetdids=[];<br \/>\n  \/\/theclasses=[];<br \/>\n  thels=[];<br \/>\n  thets=[];<br \/>\n  thegridtdareas=[];<br \/>\n  thegridtdihs=[];<br \/>\n  obr=true;<br \/>\n  document.getElementById('emj').innerHTML='';<br \/>\n  for (var iij=0; iij&lt;numplayers; iij++) {<br \/>\n  document.getElementById('t' + iij).style.height='calc(60vh ' + ('- ' + eval(wwt - window.innerHeight)).replace('- -','+ ') + 'px)';<br \/>\n  }<br \/>\n  setTimeout(twf, 700);<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Adding to our interest <font size=1>(and smug satisfaction, let&#8217;s face it)<\/font> is anytime we can involve CSS <a target=_blank title='CSS3 calc information' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html'>calc<\/a> and the height <a target=_blank title='CSS vh unit' href='https:\/\/www.google.com\/search?q=vh+unit+css&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=vh+unit+css&#038;aqs=chrome.0.0i512j0i22i30l2.4356j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>vh<\/a> unit.<\/p>\n<p>Again, feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html-GETME\" title=\"emoji_in_sector.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html-GETME\" title=\"emoji_in_sector.html\">emoji_in_sector.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-in-sector-game-resize-tutorial\/'>Emoji in Sector Game Resize Tutorial<\/a>.<\/p-->\n<hr>\n<p id='esgpt'>Previous relevant <a target=_blank title='Emoji in Sector Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-in-sector-game-primer-tutorial\/'>Emoji in Sector Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji in Sector Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/emoji_in_sector.jpg\" title=\"Emoji in Sector Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji in Sector Game Primer Tutorial<\/p><\/div>\n<p>We&#8217;re continuing on with the <i>&#8220;style=position:fixed&#8221;<\/i> theme of recent times.  We&#8217;ve got for you a first draft of a &#8220;reactions game&#8221; called &#8220;Emojis in Section&#8221; where up to 5 players are presented with &#8230;<\/p>\n<ul>\n<li>a 5&#215;5 grid of interest for each (up to five) player(s)<\/li>\n<li>overlayed by a fast moving fruit emoji <font siez=1>(as you would)<\/font> via <i>&#8220;style=position:fixed&#8221;<\/i> &#8230; and &#8230;<\/li>\n<li>the player scores by timing their nomination of a grid rectangle letter name with when the fruit emoji is within that grid rectangle, else use &#8220;z&#8221; for the slivers of area not within the grid rectangles<\/li>\n<\/ul>\n<p>Just the one computer or device, so how can two or more (we allow for up to five) play?   Well, on non-mobile we allow a button press versus keyboard paradigm for a two player game, else all keyboard accesses for users.  We&#8217;ll see about other scenarios as the days go on.<\/p>\n<p>Feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html_GETME\" title=\"emoji_in_sector.html\">emoji_in_sector.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html\" title=\"Click picture\">live run<\/a> link.<\/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='#d52953' onclick='var dv=document.getElementById(\"d52953\"); 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='d52953' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d52953' onclick='var dv=document.getElementById(\"d52953\"); 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='d52953' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d52969' onclick='var dv=document.getElementById(\"d52969\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52969' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d52978' onclick='var dv=document.getElementById(\"d52978\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/code\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52978' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you are a programmer dealing with emojis all the time, and therefore visiting websites like &#8230; Emojipedia FileFormat &#8230; on a regular basis you will probably have seen mention of Emoji &#8220;Short codes&#8221; of the form &#8220;:[short_code]:&#8221; (eg. :e-mail: &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/short-code-personalized-emoji-in-sector-game-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,37],"tags":[218,2442,3724,3023,3727,626,630,631,673,3726,795,871,885,919,3722,2766,3723,2013,1294,1319,3725],"class_list":["post-52978","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-code","tag-contenteditable","tag-emoji-short-code","tag-emojipedia","tag-fileformat","tag-ios","tag-ipad","tag-iphone","tag-keyboard","tag-keyboard-split","tag-mobile","tag-onmouseover","tag-operating-system-2","tag-personalization","tag-personalized","tag-setting","tag-short","tag-split","tag-touch","tag-tutorial","tag-underscore"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52978"}],"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=52978"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52978\/revisions"}],"predecessor-version":[{"id":52992,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52978\/revisions\/52992"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=52978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=52978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=52978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}