Code Monkey home page Code Monkey logo

html-chat's Introduction

HTML-Chat

HTML5 implementation of Eterna's web-based IRC chat client to replace the legacy Flash-based implementation

Please note that a rewritten version using Vue.js is planned to improve the readability and extensibility of the codebase. More info will be forthcoming.

As a reference, the chat server currently uses txircd as the IRCd daemon and a custom python-based IRC bot to record recent history.

Setup

This code makes use of the webpack module bundler. In order to run the app, do the following:

  • Install NodeJS and npm
  • Open a command prompt/terminal, cd into HTML-Chat, and run npm install
  • To start a development server, run npm start
  • Open a browser and navigate to localhost:9000, then enter your username and password (or leave blank to use without logging in), then optionally a channel if you don't want to post in the main chat (ie if your testing could eb considered disruptive or cause other clients to break)

To create a one-off set of files with webpack, run npm run build:dev for the development build or npm run build:prod for the production configuration

Contributing

Feel free to fork this repository, make some changes, and create a pull request. Your changes will then be revewed, merged, and deployed once accepted. It is encouraged to use a channel other than #global (the default) for testing purposes if it could be disruptive.

Currently compatibility must be maintained between this chat and the legacy Flash chat, until it can be implemented into the game. At that point, more significant changes may be implemented to improve implementations based on IRCv3 functionality and and other functions that would otherwise "break" the Flash chat.


Design and implementation of initial release: @luxaritas (Eterna)

html-chat's People

Contributors

alexhalb avatar aminere avatar dependabot[bot] avatar guyguy2001 avatar luxaritas avatar omei avatar tkaragianes avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

html-chat's Issues

Handle disconnects/errors

While this probably shouldn't happen, it would be good to provision for (automatically reconnecting, or at least notifying the user/allowing for a reconnect to be manually triggered).

Improved login UI/UX on test page

I'm not entirely happy with how this functions right now, especially if it should act as a demo as in #36.

First off, I'd like to see a styled login modal, using Eterna's styling (I've fussed around with the Eterna stylesheets before, so I should be able to track down whatever is needed). It should use radio buttons to either use the demo channel (#test, I'd use this for the default for alignment with #36), the main Eterna channel (#global), or a specified channel (which would have an input box next to it). Of course, until history is properly implemented for all channels (ie #6 and the new channel history implemented for txircd, currently on the dev branch, in ElementalAlchemist/txircd@181ff2e), it needs to be made clear that history is always from #global, especially with #test being defaulted. There should also be radio buttons for whether or not the user has an account, probably defaulting to no (again, #36), where if yes is clicked, username/password input boxes would show (clicking no again would hide them). Failed login should show an error message next to the bad input(s), and turn those input(s) red.

Also, to make testing less of a pain, I'd like to see something saved to localstorage so that you don't have to re-enter the channel/login info each time (maybe for a limited amount of time, I'm open to discussion on the best approach here). This would mean some sort of log out/change channel button or something along those lines would need to be overlayed on the chat iframe, clearing that localstorage and then reloading the page.

Would be nice to see if we can implement the Facebook login since some people solely use that on Eterna, but I have no idea what that involves, and it may not be possible to tie it with Eterna accounts - it's not critical, but should look into it.

Autocomplete usernames

When you type @, autocomplete should start, using the users currently online (in the channel). Tab to cycle through names.

Private messages

Related to #6, this is for a matter of convenience (i.e. Not needing to keep an eye on notifications)

"You're about to leave this site" confirmation

Specifically, since markdown-it (7a40759) allows for link creation using custom visible text (ie [Click Here](http://example.com)), I'm thinking it would be good to let the user know if they're heading outside of Eterna, or at least warn the user if the visible text looks like a URL, but the link actually points to somewhere else. Open to discussion as far as how far this should go. I'm imagining a simple modal for this.

Unread messages in tab

Maybe only on /chat page? Otherwise, off by default, but able to be enabled? Need to look into how this would interact with the newsfeed notifications... Might be able to just add them?

Authentication/Services

Server-side issue (primarily) that should be taken care of sooner rather than later. This would prevent abuse, allow for easier integration with external clients post-Flash, better implementation, etc. Will probably write a Sopel bot to do it, that should be easiest (unless ElementalAlchemist/txircd/issues/150 turns out well).

Experience/Role Symbols

A suggestion on GetSat suggested doing this with name colors, but as we talked about on #14, symbols would probably work well for us.

Here's the current list I want to implement, feel free to suggest more, come up with image ideas, help figure out earning requirements, etc.

Done Icon Meaning How to earn
  [Eterna Logo] Eterna Team Member/Scientist Be on the dev team, scientist, etc
  [Star] Moderator Be a chat op
  [Puzzle Piece] Puzzle Solving Expert # of puzzles solved? Algorithm to figure out difficulty? Dev selected? Community selected?
  [Beaker] Lab Expert # of lab submissions? # synthesized? # of winners? Dev selected? Community selected?
  [Angle Brackets] Coding Expert # of scripts? # of script views? # open source commits? Dev selected? Community selected?

Render username once for consecutive messages

As an example:

Player1: Hello! [1:22]
Player1: How are you doing? [1:22]

As opposed to

Player1: Hello! [1:22]
How are you doing? [1:22]

Or

Player1: Hello! [1:22]
                How are you doing? [1:22]

or

Player1:
Hello! [1:22]
How are you doing? [1:22]

Could also remove the colon after the player name. Not sure if any of these really look ok, may need to come up with some other design ideas for how messages/names/times are displayed?

Ability for a player to (persistently) mute one or more others

I searched for "mute" in the issues but didn't find anything.

Although we haven't had any troubles recently that I am aware if, in the past there have been problems between players. Some of these involved spamming newbies and some were personality issues between experienced players. One of those experienced players dropped out of chat completely. But we have been having a conversation about that, and that player is willing to "come back home" if they have the ability to protect themself from perceived harassment.

Is user online?

This is a feature eyewire had in their chatbot- the ability to see if a user is online or not. I think it would be quite useful, as people (at least I) forget the the online list exists sometimes.

User Mini-profile

When hovering over a username (or maybe on clicking it on mobile), there could be a hovercard containing some basic info about the user. It could include the username, avatar, points, rank, # synths, achievements, special role/status symbols (per #21), the start of their bio, etc. Basically some basic info and stats.

Profanity Filter

Just a reminder for myself, I need to configure this on the server

Custom chat name coloring, or coloring based on experience/role?

Custom name coloring is something which is rather fun, and I hesitate to remove it, if not explicitly allow everyone to do so. However, the concept of colors based on experience or role has been around for quite a while, and seems to have good support (and I personally like the idea): https://getsatisfaction.com/eternagame/topics/colorize_players_names_in_chat_regarding_their_experience

Could also be up for debate as to whether we even want to make a differentiation like this, but I know it is done elsewhere, in Eyewire as an example. This could also create a readability reduction with many people posting in the same color, which is why many IRC clients have automatic colors assigned (granted, that can already more or less happen with the existing mechanism from the Flash chat, as many users can have very similar shades, which does happen pretty often). Again though, other implementations get away from it (Foldit it just straight white). Definitely open for discussion.

Text resizing

Would be good to have a setting to resize chat text for accessibility reasons and for personal preference

Upload server code

It would be good to version control and open source the CherryPy webserver we're using in production. Might just put that code on a new branch, as it works with multiple instances of the chat app.

Custom chat colors

Looking to implement as #14 was resolved. Just a fun feature, needs some sort of color picker and hex input, will save settings via localStorage as I've been doing.

Fix MODE/ban handling

In the code: https://github.com/EteRNAgame/HTML-Chat/blob/dev/src/js/chat.js#L525

MODE has never been handled correctly (my cousin took a look at the code at one point and mentioned that it doesn't account for multiple modes being set at once, both on the same target or for multiple different targets). Also, the usage of finding the ~q flag on the ban mask to determine if the user is not allowed to post is no longer valid since we're using txircd (it has a different syntax for extended bans - [action[:parameter];[neg][matching:]]mask, so that a mute looks like +b m;nick!user@host).

User ignore UI

From Eli Fisker via Slack:

I have one more concern. A younger player who feel intimidated by another player, may not feel safe typing their name directly into the chatbox, fearing it may go public. If one could instead of right click on someones name in the chat, and get the option of muting, it would feel safer.

Also it would spare the player who is set to being ignored, the potential embarrassment. (I mean the thing will go public if some of the signs gets wrong.)

Text formatting

  • Italics/emphasis
  • Bold/strong
  • Underline
  • Strikethrough
  • Links
  • Code/preformatted
  • Multiline Code/preformatted
  • Blockquotes
  • Lists? (Not sure how well this would work for the mini-chat)
  • Bullets? (Not sure how well this would work for the mini-chat)
  • Images? (Not sure how well this would work for the mini-chat)
  • Newlines? (IRCv3 spec in progress: ircv3/ircv3-specifications/issues/208)

Need to look into the correct IRCv3 spec to do this (if it exists), I know some clients use control characters (though not necessarily for all things listed here), may possibly be a post-flash item depending on how compatibility will work. Probably want to use markdown to write it before it goes over the wire at least, but there are a few flavors available.

Emoticons

Would be nice to have some basic emoticons, like thumbs up, thumbs down, basic smilies, etc. Open to suggestions for where we get the images. Somewhat related to #5

Chat channels

This may need some design work, to make sure that conversations are easily accessible (as opposed to being "hidden" and harder for people to get involved in), while being able to split up conversations, but without being too complex...

[CRITICAL] Escape angle brackets before posting to chat

This is a quick fix, but I can't get to it now so I'm putting it here to remind myself. Needs to get taken care of before the release.

This is to prevent the issue where Flash chat breaks when entering malformed HTML (or anything with angle brackets, which it attempts to interpret as html).

Bad username formatting with special characters

For example, logging in with a space at the end of your username winds up adding %20 to your username, even though it is accepted for a login. Really, the "correct" username should be gotten from the API.

Edit: Per #39 (comment), this is the full extent of how this issue needs to be solved

  • decodeURIComponent needs to be used when getting the username parameter from the URL of the iframe (f31a32a)
  • The webpack dev server needs to be updated to use the API, so that things like capitalization and adding extra spaces doesn't happen when logging in from the test page (e496d5a, ca358a1)
  • The server on irc.eternagame.org needs to be updated similarly
  • The test page needs to actually use the username which the server will return (e496d5a)

Autoscroll sometimes disables

Often when new messages are posted to the chat in quick succession, and occasionally when switching tabs, autoscroll gets turned off

Unit tests

Definitely something that should happen, in particular to stop regressions. QUnit would probably be a good choice, but I'm not dead set on that. Putting this on the rewrite milestone since we'll be making major codebase changes that would essentially invalidate most of the unit tests.

Make automatic links smarter

For example, URLs surrounded in parenthesis should not have the closing paren included in the link. This is probably the most common issue that would be run into, but should probably look into other possibilities. Should probably also not make a link for URLs that are not preceded by a space (except for any exclusions like parenthesis), so that something like awww... does not get turned into a link.

Truncate long usernames for nicks

The current max length for nicks on the server is 32 chars. Nicks should start with a truncated username, which is the first [27-UID length] characters, since currently we need to have __UID^# appended to it (and # could be two digits)

Bouncer for multiple connections

This could potentially simplify things, getting rid of "hacks" to allow for multiple connections (and possibly removing some/all of the restrictions on number of connections). Need to see if any currently support WebSockets, would work well for SSO with the website, have a low enough resource usage, etc.

Save settings to server?

I'm wondering if we want to save chat settings (ie ignored nicks, chat color, etc) to the server. This would require an additional API, not sure if we want to deal with that right now (@jnicol4, I think this is your area?)

Oper commands

Would be cool to have a nice GUI for it too...

  • Kick
  • Ban
  • Quiet/unquiet
  • Voice/devoice (if moderated channels ever winds up being used)

mcustomscrollbar breaks chat inside cross-domain iframe

We planned for www.eternagame.org to (temporarily) load the chat from irc.eternagame.org as an iframe. A bug in the custom scrollbar causes an error when this happens.

There is a patch for this at malihu/malihu-custom-scrollbar-plugin#451, but apparently, the repo is not maintained. Should we fork it and merge in the fix (@Omei, I think this would be up to you)? Or should we use a different library? This will be replaced once the rewrite happens anyhow (assuming we use Vue, we should ditch jQuery as a dependency).

Flood Limit

Again, just reminding myself that I need to update the server settings (well, it's set, but the server needs a restart)

Use Eterna favicon

Currently the favicon on irc.eternagame.org is the CherryPy one - should probably change that.

Report user

Brought up quite early on: https://getsatisfaction.com/eternagame/topics/ability_to_report_inappropriate_chat

Also has been discussed in topics made in response to spam popping up. I'd imagine this should ping a mod (via Eterna PM, IRC PM, popup box, etc - needs to be determined) and (possibly) send an email to someone for possible additional action/record keeping (would need to figure out where to send it). Ideally the offending chat history can somehow be tied back to the log (could eventually tie into a new chatbot, make use of IRCv3 history and message tagging where a user could even select the specific messages, etc).

Login text

The existing flash app has the "please log in to chat" text instead of just a disabled text box when the user is not logged in - this should be transferred over

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.