When offline, the user's native emoji font should be used instead.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Android Emoji"

It seems the "alt" text of the emoji images produced by the twemoji library can't be styled.
The library may need to detect if it is offline and fallback to native emojis.

Make sure to update the README.

Steps to reproduce

1. On the main menu, click Start new game
2. Select "2 players" and tick "Local server"

Actual behaviour

The chat has "loading" stuck in it and pressing T will open a non-closable chat window.

Console:

This should never happen - datapack file entry has no data! (addons/emojichat/lua/emojichat/cl_html.lua)
Couldn't include file 'emojichat\cl_html.lua' (File not found) (@addons/emojichat/lua/autorun/emoji-chat.lua (line 19))

[HTML] :1: Uncaught ReferenceError: emojiChat is not defined
[HTML] :1: Uncaught ReferenceError: emojiChat is not defined
[HTML] :1: Uncaught ReferenceError: emojiChat is not defined
[HTML] :1: Uncaught ReferenceError: emojiChat is not defined

[Badger|3|STEAM_0:0:30458122] Lua Error:
Couldn't include file 'emojichat\cl_html.lua' (File not found) (@addons/emojichat/lua/autorun/emoji-chat.lua (line 19))

Hovering over an emoji image should show a tooltip with it's name.

Trying to copy an emoji should copy the :emojicode:. Currently it copies "undefined"

• #33 - embed emoji images in addon (to avoid downloading at runtime)
• Simplify logic which runs every time the user types
  • Detecting if the player is typing an emoji/player name
  • Generating the list of emoji suggestions
• If not already done, emoji lists in #31 should be pre-cached

This is so I don't forget why I chose to do the chat part in HTML/JS and not lua.

Why HTML/JS and not Lua

HTML/CSS/JS is made for this sort of thing.

• It's easier to apply styling
  • With one line of css I can change text alignment, font, colour, size, weight
  • And this is easy to apply to individual parts of a text message. Just wrap that part in a span.
• It's easier to test
  • My tab in Firefox for the chatbox auto-refreshes when a change is detected and the code is re-transpiled.
  • Reloading the map takes a lot longer
  • Not reloading the map could have left the chat in a weird state, if it was done fully in lua
  • With the chat made in html/js, it auto-refreshes in-game when changes are made (thanks webpack-dev-server)
  • I can interact with Javascript globals in my web browser console.
• It's easier to spike out UI changes
  • I can make GUI changes on-the-fly in Firefox using the inspect element HTML editor
  • This is very useful when I'm not sure how large something should be, what colour to use, how something should be positioned
  • I can then copy my changes into the code
• There are plenty of JS libraries to replace emojis with images
  • I don't believe there is a Lua emoji library
• It's easier to create UI elements
  • Creating the HTML equivalent of a label/text entry/panel requires a lot less code
• I am more familiar with creating UIs through HTML than I am with GLua

Font Method

Not a reason to choose HTML/JS over lua. Just relevant information.
Garry's mod does support unicode in its fonts.

• Facepunch/garrysmod-requests#47
• http://wiki.garrysmod.com/page/surface/CreateFont
• http://wiki.garrysmod.com/page/Structures/FontData

However, in FontData, it states Unicode code points above 0xFFFF are not supported..

This means that native emoji rendering would never work.
You would have to go down the route of replacing emojis with image versions.

Using the up/down arrows, I would like to go through the previous messages I sent so I can re-send them
Make sure the user can't accidentally delete what they were typing

I set my name to :badger:

This makes it difficult for other players to know what my name is.

Emoji suggestions are really laggy?

1. Click on the emoji menu to load some of the images
2. Type in :whisp

It will lag

Short code = what the player has typed

Current logic:

• If the short code exactly matches the emoji code, show this option first
• Otherwise, if the emoji code or emoji tags contain the short code, add it to the list of suggestions

Ideal logic:

• Show exact matches first
• Then show emojis where the emoji code starts with the short code
• Then show emojis where the emoji code contains the short code
• Then show emojis where any tag contains the short code

Make sure to sort each individual result group alphabetically by emoji code.

(Once it's released)
https://github.com/emojione/emojione/releases

Should be early August:
joypixels/emojione#601

Maybe use the Twitter Emoji library
https://github.com/twitter/twemoji

This will also require the emojis.json and ordered.json searchable emoji lists to be updated.
muan/emojilib#163

This will probably be fixed by auto-completing emojis and replacing them with their actual representation.

:fox:fo results in suggestions for the emoji code "fo".

There shouldn't be any suggestions for this.

• Tags
• DarkRP stuff- adverts, OOC
• Does it correctly respond to chat hooks?

Фрай [ultra silver] on the addon page

I cant open this chat..

No errors in console.
peer-to-peer server. maybe.. I click "Start new game", I select the number of players, uncheck "Peering Network", and start the game.

The twitter emoji library contains images for the individual letters (e.g. 🇰).
These are used for constructing flags (e.g. 🇩 + 🇰 = 🇩🇰 (shows as denmark flag))

These should be accessible as individual characters as well.

https://steamcommunity.com/sharedfiles/filedetails/?id=1664429975

Reported by The Marxman in the addon page.

Ideally, if translations aren't provided by default, there should be some way for other people to easily translate the text.

Use minimal text and instead use symbols where possible.

When displaying keyboard keys, try to use some language agnostic display mechanism.

• Simple things
  • Bold
  • Underline
  • Italics
  • Strikethrough
  • Links
• Make sure not to process markdown in player names
• Server owners should be able to turn this feature off

As a chat user
I want to know that I can use @ to autocomplete player names
So that I can save time typing them out

As a chat user
I want to know that I can use : to get emoji suggestions
So that I know what name to type out

As a chat user
I want to know that I can use a TAB/enter to complete an emoji suggestion
So that I can save time typing them out

As a chat user
I want to know that I can use up/down arrow to change the selected emoji suggestion
So that I can pick what emoji I want to use

Players are unable to close the chat.
Unsure exactly what it looks like

This would help with #45 and other situations where the user can't close the chat.

• Players can type @ to trigger player name completion
  • Use a similar suggestion system to emojis
  • As a player types the name, suggestions are updated
  • TAB/Enter completes using selected name (arrow keys to change selection)
  • Ensure that this will not mess with ULX admin chat (messages starting with @)
• This will allow players to enter a name that has weird characters or a space in it
• On auto-completion, the @ symbol should be gone

• These should take priority over existing emojis
• They should be resized to the same size as the normal emojis

Problems

• Sever owners probably won't bother to resize images, which will add loading time to the emoji suggestions list

To avoid the slight delay when an emoji image is first loaded, the emoji images could be added to the addon.
The client would download the images when they connect to the server.

The twemoji lib would need to use a different base URL (the local file, somehow?).

Normally, when you start to type, your playermodel makes an animation where the hand raises up, this addon will prevent them from doing that animation.

Why am i saying this? Because im using this addon of Chat Bubbles: https://steamcommunity.com/sharedfiles/filedetails/?id=125976234 and because it doesn't do the animation or there must be something in this EmojiChat addon, it also prevents of showing the chat bubble from that addon.

Any URLs in text should automatically get converted into clickable links.

Validating URLs seems to be quite complicated and I don't want to turn non-URLs into links.
Just make sure the text starts with http:// or https:// and copy everything until a space or the end of the line.

Allow users to locally change chat settings

• Time until a message is hidden (use the hud_saytext_time config value)
• What messages show up (use cl_chatfilters)
• Chat position
• Chat height (this might require a reload of the HTML)
• Timestamps on/off
• Disable markdown

Maybe make this configurable.
The current font size makes some emojis slightly too small to see.

Steps to reproduce

1. Type :wav
2. Press one of the following keys: CTRL, ALT, SHIFT, CAPS LOCK, (any key that doesn't actually add to the input)

Expected behaviour

The suggestions for wav continue to show

Actual behaviour

The emoji suggestions disappear.
Continuing to type will bring them back.

The chat code could do with being tidied up

1. Overriding chat. functions is weird. Is this the best way to do it?

2. The PlayerBindPress hook may not needed if chat.Open is overriden.
   chat.Open should provide what text entry mode shoud be used. Fixed in d8cb270

3. The code should be split up some more. Some possible boundaries:

   • Chat overrides/Hooks
   • GUI initialisation
   • GUI events/callbacks
   • Web interface interaction functions (changes to these will require an update to the HTML component)

4. There could be some better logic to detect when a timestamp should be added (always & at the start?)

1. Open the chat box
2. Try to type '

Expected behaviour:
' is added to input box

Actual:
Console opens & ' is added to input box

Have some way for users to see the full list of emojis (like on phones/facebook/discord/...).
This is so they can browse the available emojis.

There will probably need to be some categories.
The load time of all the emoji images should be considered.

Ideally, neither the HTML or Lua would have to be changed in order to change the theme.
This could maybe be done through a lua config file, which is read by the Lua script and then fed into the HTML chat via Javascript.

High-level theme options (primary colour, secondary colour, etc.) along with specific settings (text input background, emoji suggestions background) would be nice.

Use the chat on a server with DarkRP.
Make sure to test things like OOC, admin commands, chat tags (if relevant), etc.

The default chatbox seems to show messages from your previous session.
I don't know if this carries over when the game is relaunched.

This could be modified to show messages on the server just before the player joined.

• Reduces network usage
• Allows offline usage of chat

TODO

• Embed all imports for the chatbox
• Find some way for the server to send the file to the client

Potential solutions

Use the file functions-

• Using file functions
  • http://wiki.garrysmod.com/page/Category:file
  • http://wiki.garrysmod.com/page/file/Write
    • Write to the data folder
• Using http://wiki.garrysmod.com/page/resource/AddFile
• http://wiki.garrysmod.com/page/Panel/OpenURL - html:OpenURL( "asset://garrysmod/html/loading.html" )
  • Or http://wiki.garrysmod.com/page/Panel/SetHTML
• Maybe try to prevent cache poisoning

This happens in eChat.CloseChat.

1. The user presses esc to close the chat
2. Esc triggers the menu to show
3. gui.HideGameUI() triggers the menu to hide

For a brief moment, the menu temporarily renders in a non-finished state.

The chat should keep a small list of recently used emojis.
Ideally, this should be stored against the client so the list is maintained across servers.
However, custom emojis may cause issues if the list is maintained across servers.

Undo c0745b3 to add the section to the emoji list.

• When typing out an emoji (: followed by text)
• Tab to auto-complete an emoji being typed (and replace it with the actual emoji)
• Multiple (up to 10?) emojis suggested based on what has been typed
• User should be able to select one of the suggestions for auto-completion
• Doesn't have to be at the end of the sentence
• Similar behaviour to discord

At smaller resolutions, the chat panel adjusts itself to a smaller size.
However, the number of suggestions is fixed at 8.
This means that some suggestions are hidden behind the top of the chatbox.

It should be relative to the height of the chatbox.

:uk: is recommended from the .json list, but :gb: is used in emojione for the replacement.

This can be fixed by using the .json list to replace emoji codes with the actual emojis before rendering the output.

The chat panel is rendering on top of the escape menu.

The menu is still usable, but the Quit button is partially covered.

Any JS issues or errors loading the page.

Errors should be logged to a file users can submit.

Ideally, if the chatbox fails to initialise for whatever reason, it should fallback to the default chat.

The logic which determines how many emoji/player suggestions to show does not seems to work properly on some devices.

This results in too many suggestions being shown.

The default ones don't seem to work.

hook.Add( "ChatText", "echat_joinleave", function( index, name, text, type )
	print("LOOK HERE IDIOT: [" .. type .. "]: " .. text)
end)

• Hook into player connect/initial spawn & disconnect.
• Make it so server owners can turn it off
• Maybe utilise cl_chatfilters

cl_chatfilters
ValveSoftware/Source-1-Games#2245

cl_chatfilters "63" // def. "63" Stores the chat filter settings 63 = 00111111 binary = all on.
(have it in here in case I forget that I turned off stuff)
// 00000001 = 1, Show Joins/leaves in chat
// 00000010 = 2, Show Name Changes in chat
// 00000100 = 4, Show Public Chat (disable for only team chat ?? )
// 00001000 = 8, Show Server Messages (if only this would work on messages from plugins...)
// 00010000 = 16, Show Team Changes
// 00100000 = 32, Show Achievement Announce
// 00011111 = 31, Show: Joins/Leaves, NameChanges, Public chat, team changes.