diff --git a/src/components/ChannelDropDown.jsx b/src/components/ChannelDropDown.jsx
new file mode 100644
index 0000000..b92ba09
--- /dev/null
+++ b/src/components/ChannelDropDown.jsx
@@ -0,0 +1,94 @@
+/*
+ * Drop Down menu for Chat Channel selection
+ *
+ * @flow
+ */
+
+import React, {
+ useRef, useLayoutEffect, useState, useEffect,
+} from 'react';
+import { connect } from 'react-redux';
+
+import type { State } from '../reducers';
+import {
+ setChatChannel,
+} from '../actions';
+
+const ChannelDropDown = ({
+ channels,
+ chatChannel,
+ setChannel,
+}) => {
+ const [show, setShow] = useState(false);
+ const wrapperRef = useRef(null);
+
+ useEffect(() => {
+ function handleClickOutside(event) {
+ if (wrapperRef.current
+ && !wrapperRef.current.contains(event.target)
+ ) {
+ setShow(false);
+ }
+ }
+
+ document.addEventListener('mousedown', handleClickOutside);
+ document.addEventListener('touchstart', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ document.addEventListener('touchstart', handleClickOutside);
+ };
+ }, [wrapperRef]);
+
+ return (
+
+
setShow(true)}
+ className="channelbtn"
+ >
+ {chatChannel}
+
+
+ {
+ channels.map((ch) => (
+
+ {ch[1]}
+
+ ))
+ }
+
+
+ );
+};
+
+function mapStateToProps(state: State) {
+ const { chatChannel } = state.gui;
+ const { channels } = state.chat;
+ return {
+ channels,
+ chatChannel,
+ };
+}
+
+function mapDispatchToProps(dispatch) {
+ return {
+ setChannel(channelId) {
+ dispatch(setChatChannel(channelId));
+ },
+ };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChannelDropDown);
diff --git a/src/components/Chat.jsx b/src/components/Chat.jsx
index 995e9c0..16cf684 100644
--- a/src/components/Chat.jsx
+++ b/src/components/Chat.jsx
@@ -11,6 +11,7 @@ import { connect } from 'react-redux';
import type { State } from '../reducers';
import ChatMessage from './ChatMessage';
+import ChannelDropDown from './ChannelDropDown';
import { MAX_CHAT_MESSAGES } from '../core/constants';
import {
@@ -152,25 +153,7 @@ const Chat = ({
>
‣
-
+
) : (
diff --git a/src/styles/default.css b/src/styles/default.css
index 41ec52b..6f603c8 100644
--- a/src/styles/default.css
+++ b/src/styles/default.css
@@ -152,6 +152,23 @@ tr:nth-child(even) {
visibility: visible;
}
+.channelbtn {
+ background-color: #d0d0d0;
+ text-align: center;
+ border-style: solid;
+ border-width: thin;
+ border-radius: 4px;
+}
+
+.channelbtn:hover {
+ cursor: pointer;
+ background-color: white;
+}
+
+.channeldd {
+ background-color: rgba(226, 226, 226);
+}
+
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, #palettebox {
position: fixed;
background-color: rgba(226, 226, 226, 0.80);