fixing bugs that got introduced in the past two commits

README.md

@@ -97,7 +97,7 @@ Configuration takes place in the environment variables that are defined in ecosy
 Notes:
 
 - to be able to use USE_PROXYCHECK, you have to have an account on proxycheck.io or getipintel or another checker setup and you might set some proxies in`proxies.json that get used for making proxycheck requests. Look into `src/isProxy.js` to see how things work, but keep in mind that this isn't neccessarily how pixelplanet.fun uses it.
-- Admins are users with 0cd and access to `./admintools` for image-upload and whatever
+- Admins are users with 0cd and access to `Admintools`in their User Menu for image-upload and whatever
 - You can find out the id of a user by looking into the logs (i.e. `info: {ip} / {id} wants to place 2 in (1701, -8315)`) when he places a pixel or by checking the MySql Users database
 - If you use gmail as mail transport, make sure that less-secure apps are allowed to access it in your settings [here](https://myaccount.google.com/lesssecureapps)
 

src/actions/index.js

@@ -486,7 +486,6 @@ export function receivePixelUpdate(
 export function loginUser(
   me: Object,
 ): Action {
-  console.log('login', me);
   return {
     type: 'LOGIN',
     ...me,
@@ -794,6 +793,20 @@ export function removeChatChannel(cid: number): Action {
   };
 }
 
+export function muteChatChannel(cid: number): Action {
+  return {
+    type: 'MUTE_CHAT_CHANNEL',
+    cid,
+  };
+}
+
+export function unmuteChatChannel(cid: number): Action {
+  return {
+    type: 'UNMUTE_CHAT_CHANNEL',
+    cid,
+  };
+}
+
 /*
  * query: Object with either userId: number or userName: string
  */

src/actions/types.js

@@ -72,6 +72,8 @@ export type Action =
   | { type: 'SET_CHAT_CHANNEL', cid: number }
   | { type: 'ADD_CHAT_CHANNEL', channel: Object }
   | { type: 'REMOVE_CHAT_CHANNEL', cid: number }
+  | { type: 'MUTE_CHAT_CHANNEL', cid: number }
+  | { type: 'UNMUTE_CHAT_CHANNEL', cid: number }
   | { type: 'SET_CHAT_FETCHING', fetching: boolean }
   | { type: 'SET_CHAT_INPUT_MSG', message: string }
   | { type: 'ADD_CHAT_INPUT_MSG', message: string }

src/components/App.jsx

@@ -19,7 +19,6 @@ import ChatBox from './ChatBox';
 import Menu from './Menu';
 import UI from './UI';
 import ExpandMenuButton from './ExpandMenuButton';
-import MinecraftTPButton from './MinecraftTPButton';
 import ModalRoot from './ModalRoot';
 
 const App = () => (
@@ -34,7 +33,6 @@ const App = () => (
       <OnlineBox />
       <CoordinatesBox />
       <ExpandMenuButton />
-      <MinecraftTPButton />
       <UI />
       <ModalRoot />
     </IconContext.Provider>

src/components/ChannelContextMenu.jsx

@@ -11,6 +11,8 @@ import { connect } from 'react-redux';
 import {
   hideContextMenu,
   setLeaveChannel,
+  muteChatChannel,
+  unmuteChatChannel,
 } from '../actions';
 import type { State } from '../reducers';
 
@@ -20,6 +22,9 @@ const UserContextMenu = ({
   cid,
   channels,
   leave,
+  muteArr,
+  mute,
+  unmute,
   close,
 }) => {
   const wrapperRef = useRef(null);
@@ -41,6 +46,8 @@ const UserContextMenu = ({
     };
   }, [wrapperRef]);
 
+  const isMuted = muteArr.includes(cid);
+
   return (
     <div
       ref={wrapperRef}
@@ -50,8 +57,19 @@ const UserContextMenu = ({
         top: yPos,
       }}
     >
-      <div>
+      <div
-        ✔✘ Mute
+        role="button"
+        onClick={() => {
+          if (isMuted) {
+            unmute(cid);
+          } else {
+            mute(cid);
+          }
+        }}
+        tabIndex={0}
+        style={{ borderTop: 'none' }}
+      >
+        {`${(isMuted) ? '✔' : '✘'} Mute`}
       </div>
       {(channels[cid][1] !== 0)
         && (
@@ -62,7 +80,6 @@ const UserContextMenu = ({
             close();
           }}
           tabIndex={0}
-          style={{ borderTop: 'thin solid' }}
         >
           Close
         </div>
@@ -83,11 +100,13 @@ function mapStateToProps(state: State) {
   const {
     cid,
   } = args;
+  const { mute: muteArr } = state.chatRead;
   return {
     xPos,
     yPos,
     cid,
     channels,
+    muteArr,
   };
 }
 
@@ -99,6 +118,12 @@ function mapDispatchToProps(dispatch) {
     leave(cid) {
       dispatch(setLeaveChannel(cid));
     },
+    mute(cid) {
+      dispatch(muteChatChannel(cid));
+    },
+    unmute(cid) {
+      dispatch(unmuteChatChannel(cid));
+    },
   };
 }
 

src/components/ChannelDropDown.jsx

@@ -19,7 +19,9 @@ import {
 const ChannelDropDown = ({
   channels,
   chatChannel,
-  chatRead,
+  unread,
+  chatNotify,
+  mute,
   setChannel,
 }) => {
   const [show, setShow] = useState(false);
@@ -27,7 +29,9 @@ const ChannelDropDown = ({
   // 1: DMs
   const [type, setType] = useState(0);
   const [offset, setOffset] = useState(0);
+  const [unreadAny, setUnreadAny] = useState(false);
   const [chatChannelName, setChatChannelName] = useState('...');
+  const [hasDm, setHasDm] = useState(false);
   const wrapperRef = useRef(null);
   const buttonRef = useRef(null);
 
@@ -44,6 +48,10 @@ const ChannelDropDown = ({
     }
   }, []);
 
+  const handleWindowResize = useCallback(() => {
+    setShow(false);
+  }, []);
+
   useLayoutEffect(() => {
     if (show) {
       if (channels[chatChannel]) {
@@ -52,12 +60,45 @@ const ChannelDropDown = ({
       }
       document.addEventListener('mousedown', handleClickOutside);
       document.addEventListener('touchstart', handleClickOutside);
+      window.addEventListener('resize', handleWindowResize);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('touchstart', handleClickOutside);
+      window.removeEventListener('resize', handleWindowResize);
     }
   }, [show]);
 
+  useEffect(() => {
+    const cids = Object.keys(channels);
+    let i = 0;
+    while (i < cids.length) {
+      const cid = cids[i];
+      if (
+        channels[cid][1] !== 0
+        && unread[cid]
+        && !mute.includes(cid)
+      ) {
+        setUnreadAny(true);
+        break;
+      }
+      i += 1;
+    }
+    if (i === cids.length) {
+      setUnreadAny(false);
+    }
+  }, [unread]);
+
+  useEffect(() => {
+    const cids = Object.keys(channels);
+    for (let i = 0; i < cids.length; i += 1) {
+      if (channels[cids[i]][1] === 1) {
+        setHasDm(true);
+        return;
+      }
+    }
+    setHasDm(false);
+  }, [channels]);
+
   useEffect(() => {
     if (channels[chatChannel]) {
       setChatChannelName(channels[chatChannel][0]);
@@ -70,12 +111,14 @@ const ChannelDropDown = ({
     >
       <div
         ref={buttonRef}
-        style={{
+        role="button"
-          width: 50,
+        tabIndex={-1}
-        }}
         onClick={() => setShow(!show)}
-        className="channelbtn"
+        className={`channelbtn${(show) ? ' selected' : ''}`}
       >
+        {(unreadAny && chatNotify && !show) && (
+          <div style={{ top: -4 }} className="chnunread">⦿</div>
+        )}
         {chatChannelName}
       </div>
       {(show)
@@ -84,23 +127,41 @@ const ChannelDropDown = ({
           ref={wrapperRef}
           style={{
             position: 'absolute',
-            bottom: offset + 5,
+            bottom: offset,
             right: 9,
           }}
           className="channeldd"
         >
-          <div>
+          <div
+            className="chntop"
+          >
             <span
+              style={{ borderLeft: 'none' }}
+              className={`chntype${(type === 0) ? ' selected' : ''}`}
               onClick={() => setType(0)}
+              role="button"
+              tabIndex={-1}
             >
               <MdChat />
             </span>
-            |
+            {(hasDm)
-            <span
+              && (
-              onClick={() => setType(1)}
+              <span
-            >
+                className={
-              <FaUserFriends />
+                  `chntype${
-            </span>
+                    (type === 1) ? ' selected' : ''
+                  }`
+                }
+                onClick={() => setType(1)}
+                role="button"
+                tabIndex={-1}
+              >
+                {(unreadAny && chatNotify && type !== 1) && (
+                  <div className="chnunread">⦿</div>
+                )}
+                <FaUserFriends />
+              </span>
+              )}
           </div>
           <div
             className="channeldds"
@@ -116,8 +177,7 @@ const ChannelDropDown = ({
                 }
                 return false;
               }).map((cid) => {
-                const [name,, lastTs] = channels[cid];
+                const [name] = channels[cid];
-                console.log(`name ${name} lastTC ${lastTs} compare to ${chatRead[cid]}`);
                 return (
                   <div
                     onClick={() => setChannel(cid)}
@@ -126,10 +186,12 @@ const ChannelDropDown = ({
                         (cid === chatChannel) ? ' selected' : ''
                       }`
                     }
+                    role="button"
+                    tabIndex={-1}
                   >
                     {
-                      (chatRead[cid] < lastTs) ? (
+                      (unread[cid] && chatNotify && !mute.includes(cid)) ? (
-                        <span className="chnunread">※</span>
+                        <div className="chnunread">⦿</div>
                       ) : null
                     }
                     {name}
@@ -145,15 +207,19 @@ const ChannelDropDown = ({
 };
 
 function mapStateToProps(state: State) {
+  const { channels } = state.chat;
   const {
     chatChannel,
-    chatRead,
+    unread,
-  } = state.gui;
+    mute,
-  const { channels } = state.chat;
+  } = state.chatRead;
+  const { chatNotify } = state.audio;
   return {
     channels,
     chatChannel,
-    chatRead,
+    unread,
+    mute,
+    chatNotify,
   };
 }
 

src/components/Chat.jsx

@@ -12,7 +12,6 @@ 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 {
   showUserAreaModal,
@@ -23,7 +22,6 @@ import {
   showContextMenu,
 } from '../actions';
 import ProtocolClient from '../socket/ProtocolClient';
-import { saveSelection, restoreSelection } from '../utils/storeSelection';
 import splitChatMessage from '../core/chatMessageFilter';
 
 function escapeRegExp(string) {
@@ -48,7 +46,6 @@ const Chat = ({
 }) => {
   const listRef = useRef();
   const targetRef = useRef();
-  const [selection, setSelection] = useState(null);
   const [nameRegExp, setNameRegExp] = useState(null);
   const [blockedIds, setBlockedIds] = useState([]);
   const [btnSize, setBtnSize] = useState(20);
@@ -59,7 +56,7 @@ const Chat = ({
   });
 
   const channelMessages = messages[chatChannel] || [];
-  if (!messages[chatChannel] && !fetching) {
+  if (channels[chatChannel] && !messages[chatChannel] && !fetching) {
     fetchMessages(chatChannel);
   }
 
@@ -67,16 +64,6 @@ const Chat = ({
     stayScrolled();
   }, [channelMessages.length]);
 
-  /*
-   * TODO this removes focus from chat box, fix this
-   *
-  useEffect(() => {
-    if (channelMessages.length === MAX_CHAT_MESSAGES) {
-      restoreSelection(selection);
-    }
-  }, [channelMessages]);
-  */
-
   useEffect(() => {
     const regExp = (ownName)
       ? new RegExp(`(^|\\s)(@${escapeRegExp(ownName)})(\\s|$)`, 'g')
@@ -168,7 +155,6 @@ const Chat = ({
         className="chatarea"
         ref={listRef}
         style={{ flexGrow: 1 }}
-        onMouseUp={() => { setSelection(saveSelection); }}
         role="presentation"
       >
         {
@@ -204,6 +190,7 @@ const Chat = ({
               style={{ flexGrow: 1, minWidth: 40 }}
               value={inputMessage}
               onChange={(e) => setInputMessage(e.target.value)}
+              autoComplete="off"
               id="chatmsginput"
               maxLength="200"
               type="text"
@@ -235,7 +222,7 @@ const Chat = ({
 
 function mapStateToProps(state: State) {
   const { name } = state.user;
-  const { chatChannel } = state.gui;
+  const { chatChannel } = state.chatRead;
   const {
     channels,
     messages,

src/components/ChatButton.jsx

@@ -3,24 +3,77 @@
  * @flow
  */
 
-import React from 'react';
+import React, {
+  useState, useEffect,
+} from 'react';
 import { connect } from 'react-redux';
 import { MdForum } from 'react-icons/md';
 
 import { showChatModal } from '../actions';
 
 
-const ChatButton = ({ open }) => (
+const ChatButton = ({
-  <div
+  chatOpen,
-    id="chatbutton"
+  modalOpen,
-    className="actionbuttons"
+  chatNotify,
-    onClick={open}
+  channels,
-    role="button"
+  unread,
-    tabIndex={0}
+  mute,
-  >
+  open,
-    <MdForum />
+}) => {
-  </div>: null
+  const [unreadAny, setUnreadAny] = useState(false);
-);
+
+  /*
+   * almost the same as in ChannelDropDown
+   * just cares about chatNotify too
+   */
+  useEffect(() => {
+    if (!chatNotify || modalOpen || chatOpen) {
+      setUnreadAny(false);
+      return;
+    }
+    const cids = Object.keys(channels);
+    let i = 0;
+    while (i < cids.length) {
+      const cid = cids[i];
+      if (
+        channels[cid][1] !== 0
+        && unread[cid]
+        && !mute.includes(cid)
+      ) {
+        setUnreadAny(true);
+        break;
+      }
+      i += 1;
+    }
+    if (i === cids.length) {
+      setUnreadAny(false);
+    }
+  });
+
+  return (
+    <div
+      id="chatbutton"
+      className="actionbuttons"
+      onClick={open}
+      role="button"
+      tabIndex={0}
+    >
+      {(unreadAny) && (
+        <div
+          style={{
+            position: 'fixed',
+            bottom: 27,
+            right: 62,
+            top: 'unset',
+          }}
+          className="chnunread"
+        >⦿</div>
+      )}
+      <MdForum />
+    </div>: null
+  );
+};
 
 function mapDispatchToProps(dispatch) {
   return {
@@ -30,4 +83,29 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(null, mapDispatchToProps)(ChatButton);
+function mapStateToProps(state) {
+  const {
+    chatOpen,
+    modalOpen,
+  } = state.modal;
+  const {
+    chatNotify,
+  } = state.audio;
+  const {
+    channels,
+  } = state.chat;
+  const {
+    unread,
+    mute,
+  } = state.chatRead;
+  return {
+    chatOpen,
+    modalOpen,
+    chatNotify,
+    channels,
+    unread,
+    mute,
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatButton);

src/components/Menu.jsx

@@ -11,7 +11,13 @@ import HelpButton from './HelpButton';
 import SettingsButton from './SettingsButton';
 import LogInButton from './LogInButton';
 import DownloadButton from './DownloadButton';
-import MinecraftButton from './MinecraftButton';
+/*
+ * removed MinecraftButton cause it didn't get used in over a year
+ * also CSS rule got removed
+ * and MinecraftModal from ModalRoot
+ * and MinecraftTPButton from App
+ * (support for it will be otherwise still kept)
+ */
 
 function Menu({
   menuOpen,
@@ -37,7 +43,6 @@ function Menu({
         <SettingsButton />
         <LogInButton />
         <DownloadButton />
-        <MinecraftButton />
         <HelpButton />
       </div>
     )

src/components/ModalRoot.jsx

@@ -21,7 +21,6 @@ import RegisterModal from './RegisterModal';
 import CanvasSelectModal from './CanvasSelectModal';
 import ChatModal from './ChatModal';
 import ForgotPasswordModal from './ForgotPasswordModal';
-import MinecraftModal from './MinecraftModal';
 
 
 const MODAL_COMPONENTS = {
@@ -32,7 +31,6 @@ const MODAL_COMPONENTS = {
   REGISTER: RegisterModal,
   FORGOT_PASSWORD: ForgotPasswordModal,
   CHAT: ChatModal,
-  MINECRAFT: MinecraftModal,
   CANVAS_SELECTION: CanvasSelectModal,
   /* other modals */
 };

src/components/SettingsModal.jsx

@@ -135,7 +135,7 @@ function SettingsModal({
       <SettingsItem
         title="Disable Game Sounds"
         // eslint-disable-next-line max-len
-        description="All sound effects except Chat Notification will be disabled."
+        description="All sound effects will be disabled."
         keyBind="M"
         value={isMuted}
         onToggle={onMute}

src/components/SocialSettings.jsx

@@ -70,7 +70,7 @@ const SocialSettings = ({
                 }
               }}
             >
-              {bl[1]}
+              {`⦸ ${bl[1]}`}
             </div>
           ))
         }

src/components/UserContextMenu.jsx

@@ -13,6 +13,7 @@ import {
   addToChatInputMessage,
   startDm,
   setUserBlock,
+  setChatChannel,
 } from '../actions';
 import type { State } from '../reducers';
 
@@ -24,6 +25,9 @@ const UserContextMenu = ({
   addToInput,
   dm,
   block,
+  channels,
+  fetching,
+  setChannel,
   close,
 }) => {
   const wrapperRef = useRef(null);
@@ -56,13 +60,13 @@ const UserContextMenu = ({
       }}
     >
       <div
-        style={{ borderBottom: 'thin solid' }}
         onClick={() => {
           block(uid, name);
           close();
         }}
         role="button"
         tabIndex={-1}
+        style={{ borderTop: 'none' }}
       >
         Block
       </div>
@@ -70,11 +74,24 @@ const UserContextMenu = ({
         role="button"
         tabIndex={0}
         onClick={() => {
-          dm(uid);
+          /*
-          // TODO if DM Channel with user already exist, just switch
+           * if dm channel already exists,
+           * just switch
+           */
+          const cids = Object.keys(channels);
+          for (let i = 0; i < cids.length; i += 1) {
+            const cid = cids[i];
+            if (channels[cid].length === 4 && channels[cid][3] === uid) {
+              setChannel(cid);
+              close();
+              return;
+            }
+          }
+          if (!fetching) {
+            dm(uid);
+          }
           close();
         }}
-        style={{ borderBottom: 'thin solid' }}
       >
         DM
       </div>
@@ -98,15 +115,23 @@ function mapStateToProps(state: State) {
     yPos,
     args,
   } = state.contextMenu;
+  const {
+    channels,
+  } = state.chat;
   const {
     name,
     uid,
   } = args;
+  const {
+    fetchingApi: fetching,
+  } = state.fetching;
   return {
     xPos,
     yPos,
+    channels,
     name,
     uid,
+    fetching,
   };
 }
 
@@ -129,6 +154,9 @@ function mapDispatchToProps(dispatch) {
     close() {
       dispatch(hideContextMenu());
     },
+    setChannel(channelId) {
+      dispatch(setChatChannel(channelId));
+    },
   };
 }
 

src/controls/PixelPainterControls.js

@@ -211,10 +211,7 @@ class PixelPlainterControls {
           this.store,
           this.viewport,
           this.renderer,
-          [
+          this.clickTapStartCoords,
-            this.clickTapStartCoords[0],
-            this.clickTapStartCoords[1],
-          ],
         );
       }, 800);
     }

src/core/ChatProvider.js

@@ -105,28 +105,22 @@ export class ChatProvider {
     userId,
     channelId,
     channelArray,
-    notify = true,
   ) {
-    /*
+    const [, created] = await UserChannel.findOrCreate({
-     * since UserId and ChannelId are primary keys,
+      where: {
-     * this will throw if already exists
+        UserId: userId,
-     */
+        ChannelId: channelId,
-    const relation = await UserChannel.create({
+      },
-      UserId: userId,
-      ChannelId: channelId,
-    }, {
       raw: true,
     });
 
-    console.log('HEREEEEE HHEEERRREEE');
+    if (created) {
-    console.log(relation);
+      webSockets.broadcastAddChatChannel(
-
+        userId,
-    webSockets.broadcastAddChatChannel(
+        channelId,
-      userId,
+        channelArray,
-      channelId,
+      );
-      channelArray,
+    }
-      notify,
-    );
   }
 
   userHasChannelAccess(user, cid, write = false) {
@@ -134,7 +128,7 @@ export class ChatProvider {
       if (!write || user.regUser) {
         return true;
       }
-    } else if (user.regUser && user.channelIds.includes(cid)) {
+    } else if (user.regUser && user.channels[cid]) {
       return true;
     }
     return false;
@@ -146,7 +140,7 @@ export class ChatProvider {
     }
     const channelArray = user.channels[cid];
     if (channelArray && channelArray.length === 4) {
-      return user.channels[cid][4];
+      return user.channels[cid][3];
     }
     return null;
   }

src/core/constants.js

@@ -87,6 +87,10 @@ export const CHAT_CHANNELS = [
     name: 'en',
   }, {
     name: 'int',
+  }, {
+    name: 'pol',
+  }, {
+    name: 'art',
   },
 ];
 

src/data/models/Message.js

@@ -30,11 +30,13 @@ const Message = Model.define('Message', {
 Message.belongsTo(Channel, {
   as: 'channel',
   foreignKey: 'cid',
+  onDelete: 'cascade',
 });
 
 Message.belongsTo(RegUser, {
   as: 'user',
   foreignKey: 'uid',
+  onDelete: 'cascade',
 });
 
 export default Message;

src/data/models/RegUser.js

@@ -64,10 +64,11 @@ const RegUser = Model.define('User', {
     defaultValue: false,
   },
 
-  blockDm: {
+  // currently just blockDm
-    type: DataType.BOOLEAN,
+  blocks: {
+    type: DataType.TINYINT,
     allowNull: false,
-    defaultValue: false,
+    defaultValue: 0,
   },
 
   discordid: {
@@ -120,6 +121,10 @@ const RegUser = Model.define('User', {
     mcVerified(): boolean {
       return this.verified & 0x02;
     },
+
+    blockDm(): boolean {
+      return this.blocks & 0x01;
+    },
   },
 
   setterMethods: {
@@ -133,6 +138,11 @@ const RegUser = Model.define('User', {
       this.setDataValue('verified', val);
     },
 
+    blockDm(num: boolean) {
+      const val = (num) ? (this.blocks | 0x01) : (this.blocks & ~0x01);
+      this.setDataValue('blocks', val);
+    },
+
     password(value: string) {
       if (value) this.setDataValue('password', generateHash(value));
     },

src/data/models/User.js

@@ -29,7 +29,6 @@ class User {
     this.id = id;
     this.ip = ip;
     this.channels = {};
-    this.channelIds = [];
     this.blocked = [];
     this.ipSub = getIPv6Subnet(ip);
     this.wait = null;
@@ -64,7 +63,6 @@ class User {
           dmu1,
           dmu2,
         } = reguser.channel[i];
-        this.channelIds.push(id);
         if (type === 1) {
           /* in DMs:
            * the name is the name of the other user
@@ -72,19 +70,19 @@ class User {
            */
           const name = (dmu1.id === this.id) ? dmu2.name : dmu1.name;
           const dmu = (dmu1.id === this.id) ? dmu2.id : dmu1.id;
-          this.channels[id] = [
+          this.addChannel(id, [
             name,
             type,
             lastTs,
             dmu,
-          ];
+          ]);
         } else {
           const { name } = reguser.channel[i];
-          this.channels[id] = [
+          this.addChannel(id, [
             name,
             type,
             lastTs,
-          ];
+          ]);
         }
       }
     }
@@ -99,6 +97,14 @@ class User {
     }
   }
 
+  addChannel(cid, channelArray) {
+    this.channels[cid] = channelArray;
+  }
+
+  removeChannel(cid) {
+    delete this.channels[cid];
+  }
+
   getName() {
     return (this.regUser) ? this.regUser.name : null;
   }

src/reducers/chat.js

@@ -54,7 +54,7 @@ export default function chat(
       const channels = { ...state.channels };
       const messages = { ...state.messages };
       const keys = Object.keys(channels);
-      for (let i = 0; i < messages.length; i += 1) {
+      for (let i = 0; i < keys.length; i += 1) {
         const cid = keys[i];
         if (channels[cid][1] === 0) {
           delete messages[cid];
@@ -81,7 +81,7 @@ export default function chat(
        */
       const channels = { ...state.channels };
       const chanKeys = Object.keys(channels);
-      for (let i = 0; i < chanKeys; i += 1) {
+      for (let i = 0; i < chanKeys.length; i += 1) {
         const cid = chanKeys[i];
         if (channels[cid][1] === 1 && channels[cid][3] === userId) {
           delete channels[cid];
@@ -109,7 +109,10 @@ export default function chat(
 
     case 'ADD_CHAT_CHANNEL': {
       const { channel } = action;
-      console.log('adding channel', channel);
+      const [cid] = Object.keys(channel);
+      if (state.channels[cid]) {
+        return state;
+      }
       return {
         ...state,
         channels: {
@@ -121,11 +124,17 @@ export default function chat(
 
     case 'REMOVE_CHAT_CHANNEL': {
       const { cid } = action;
+      if (!state.channels[cid]) {
+        return state;
+      }
       const channels = { ...state.channels };
+      const messages = { ...state.messages };
+      delete messages[cid];
       delete channels[cid];
       return {
         ...state,
         channels,
+        messages,
       };
     }
 

src/reducers/chatRead.js

@@ -0,0 +1,153 @@
+/*
+ * local save state for chat stuff
+ *
+ * @flow
+ */
+
+import type { Action } from '../actions/types';
+
+const TIME_DIFF_THREASHOLD = 15000;
+
+export type ChatReadState = {
+  // channels that are muted
+  // [cid, cid2, ...]
+  mute: Array,
+  // timestamps of last read
+  // {cid: lastTs, ...}
+  readTs: Object,
+  // booleans if channel is unread
+  // {cid: unread, ...}
+  unread: Object,
+  // selected chat channel
+  chatChannel: number,
+};
+
+const initialState: ChatReadState = {
+  mute: [],
+  readTs: {},
+  unread: {},
+  chatChannel: 1,
+};
+
+
+export default function chatRead(
+  state: ModalState = initialState,
+  action: Action,
+): ChatReadState {
+  switch (action.type) {
+    case 'RECEIVE_ME':
+    case 'LOGIN': {
+      const { channels } = action;
+      const cids = Object.keys(channels);
+      const readTs = {};
+      const unread = {};
+      for (let i = 0; i < cids.length; i += 1) {
+        const cid = cids[i];
+        if (!state.readTs[cid]) {
+          readTs[cid] = 0;
+        } else {
+          readTs[cid] = state.readTs[cid];
+        }
+        unread[cid] = (channels[cid][2] > readTs[cid]);
+      }
+      return {
+        ...state,
+        readTs,
+        unread,
+      };
+    }
+
+    case 'SET_CHAT_CHANNEL': {
+      const { cid } = action;
+      return {
+        ...state,
+        chatChannel: cid,
+        readTs: {
+          ...state.readTs,
+          [cid]: Date.now() + TIME_DIFF_THREASHOLD,
+        },
+        unread: {
+          ...state.unread,
+          [cid]: false,
+        },
+      };
+    }
+
+    case 'ADD_CHAT_CHANNEL': {
+      const [cid] = Object.keys(action.channel);
+      return {
+        ...state,
+        readTs: {
+          ...state.readTs,
+          [cid]: state.readTs[cid] || 0,
+        },
+        unread: {
+          ...state.unread,
+          [cid]: true,
+        },
+      };
+    }
+
+    case 'REMOVE_CHAT_CHANNEL': {
+      const { cid } = action;
+      if (!state.readTs[cid]) {
+        return state;
+      }
+      const readTs = { ...state.readTs };
+      delete readTs[cid];
+      const unread = { ...state.unread };
+      delete unread[cid];
+      return {
+        ...state,
+        readTs,
+        unread,
+      };
+    }
+
+    case 'RECEIVE_CHAT_MESSAGE': {
+      const { channel: cid } = action;
+      const { chatChannel } = state;
+      // eslint-disable-next-line eqeqeq
+      const readTs = (chatChannel == cid)
+        ? {
+          ...state.readTs,
+          // 15s treshold for desync
+          [cid]: Date.now() + TIME_DIFF_THREASHOLD,
+        } : state.readTs;
+      // eslint-disable-next-line eqeqeq
+      const unread = (chatChannel != cid)
+        ? {
+          ...state.unread,
+          [cid]: true,
+        } : state.unread;
+      return {
+        ...state,
+        readTs,
+        unread,
+      };
+    }
+
+    case 'MUTE_CHAT_CHANNEL': {
+      const { cid } = action;
+      return {
+        ...state,
+        mute: [
+          ...state.mute,
+          cid,
+        ],
+      };
+    }
+
+    case 'UNMUTE_CHAT_CHANNEL': {
+      const { cid } = action;
+      const mute = state.mute.filter((id) => (id !== cid));
+      return {
+        ...state,
+        mute,
+      };
+    }
+
+    default:
+      return state;
+  }
+}

src/reducers/gui.js

@@ -15,10 +15,6 @@ export type GUIState = {
   compactPalette: boolean,
   paletteOpen: boolean,
   menuOpen: boolean,
-  chatChannel: number,
-  // timestamps of last read post per channel
-  // { 1: Date.now() }
-  chatRead: {},
   style: string,
 };
 
@@ -33,8 +29,6 @@ const initialState: GUIState = {
   compactPalette: false,
   paletteOpen: true,
   menuOpen: false,
-  chatChannel: 1,
-  chatRead: {},
   style: 'default',
 };
 
@@ -108,19 +102,6 @@ export default function gui(
       };
     }
 
-    case 'SET_CHAT_CHANNEL': {
-      const { cid } = action;
-
-      return {
-        ...state,
-        chatChannel: cid,
-        chatRead: {
-          ...state.chatRead,
-          cid: Date.now(),
-        },
-      };
-    }
-
     case 'SELECT_COLOR': {
       const {
         compactPalette,
@@ -145,43 +126,6 @@ export default function gui(
       };
     }
 
-    case 'RECEIVE_ME':
-    case 'LOGIN': {
-      const { channels } = action;
-      const cids = Object.keys(channels);
-      const chatRead = { ...state.chatRead };
-      for (let i = 0; i < cids.length; i += 1) {
-        const cid = cids[i];
-        chatRead[cid] = 0;
-      }
-      return {
-        ...state,
-        chatRead,
-      };
-    }
-
-    case 'ADD_CHAT_CHANNEL': {
-      const [cid] = Object.keys(action.channel);
-      return {
-        ...state,
-        chatRead: {
-          ...state.chatRead,
-          [cid]: 0,
-        },
-      };
-    }
-
-    case 'REMOVE_CHAT_CHANNEL': {
-      const { cid } = action;
-      const chatRead = { ...state.chatRead };
-      delete chatRead[cid];
-      return {
-        ...state,
-        chatRead,
-      };
-    }
-
-
     case 'PLACE_PIXEL': {
       let { pixelsPlaced } = state;
       pixelsPlaced += 1;

src/reducers/index.js

@@ -9,6 +9,7 @@ import modal from './modal';
 import user from './user';
 import chat from './chat';
 import contextMenu from './contextMenu';
+import chatRead from './chatRead';
 import fetching from './fetching';
 
 import type { AudioState } from './audio';
@@ -28,6 +29,7 @@ export type State = {
   user: UserState,
   chat: ChatState,
   contextMenu: ContextMenuState,
+  chatRead: ChatReadState,
   fetching: FetchingState,
 };
 
@@ -52,5 +54,6 @@ export default persistCombineReducers(config, {
   user,
   chat,
   contextMenu,
+  chatRead,
   fetching,
 });

src/routes/api/block.js

@@ -108,8 +108,8 @@ async function block(req: Request, res: Response) {
   if (channel) {
     const channelId = channel.id;
     channel.destroy();
-    webSockets.broadcastRemoveChatChannel(user.id, channelId, false);
+    webSockets.broadcastRemoveChatChannel(user.id, channelId);
-    webSockets.broadcastRemoveChatChannel(userId, channelId, true);
+    webSockets.broadcastRemoveChatChannel(userId, channelId);
   }
 
   if (ret) {

src/routes/api/blockdm.js

@@ -45,10 +45,10 @@ async function blockdm(req: Request, res: Response) {
     const channel = channels[i];
     if (channel.type === 1) {
       const channelId = channel.id;
-      channel.destroy();
       const { dmu1id, dmu2id } = channel;
-      webSockets.broadcastRemoveChatChannel(dmu1id, channelId, true);
+      channel.destroy();
-      webSockets.broadcastRemoveChatChannel(dmu2id, channelId, true);
+      webSockets.broadcastRemoveChatChannel(dmu1id, channelId);
+      webSockets.broadcastRemoveChatChannel(dmu2id, channelId);
     }
   }
 

src/routes/api/leavechan.js

@@ -65,7 +65,7 @@ async function leaveChan(req: Request, res: Response) {
 
   user.regUser.removeChannel(channel);
 
-  webSockets.broadcastRemoveChatChannel(user.id, channelId, false);
+  webSockets.broadcastRemoveChatChannel(user.id, channelId);
 
   res.json({
     status: 'ok',

src/routes/api/startdm.js

@@ -47,12 +47,6 @@ async function startDm(req: Request, res: Response) {
 
   const targetUser = await RegUser.findOne({
     where: query,
-    attributes: [
-      'id',
-      'name',
-      'blockDm',
-    ],
-    raw: true,
   });
   if (!targetUser) {
     res.status(401);
@@ -61,14 +55,15 @@ async function startDm(req: Request, res: Response) {
     });
     return;
   }
+  userId = targetUser.id;
+  userName = targetUser.name;
   if (targetUser.blockDm) {
     res.status(401);
     res.json({
-      errors: ['Target user doesn\'t allo DMs'],
+      errors: [`${userName} doesn't allow DMs`],
     });
+    return;
   }
-  userId = targetUser.id;
-  userName = targetUser.name;
 
   /*
    * check if blocked
@@ -76,7 +71,7 @@ async function startDm(req: Request, res: Response) {
   if (await isUserBlockedBy(user.id, userId)) {
     res.status(401);
     res.json({
-      errors: ['You are blocked by this user'],
+      errors: [`${userName} has blocked you.`],
     });
     return;
   }
@@ -106,10 +101,19 @@ async function startDm(req: Request, res: Response) {
     raw: true,
   });
   const ChannelId = channel[0].id;
+  const curTime = Date.now();
 
   const promises = [
-    ChatProvider.addUserToChannel(user.id, ChannelId, false),
+    ChatProvider.addUserToChannel(
-    ChatProvider.addUserToChannel(userId, ChannelId, true),
+      user.id,
+      ChannelId,
+      [userName, 1, curTime, userId],
+    ),
+    ChatProvider.addUserToChannel(
+      userId,
+      ChannelId,
+      [user.getName(), 1, curTime, user.id],
+    ),
   ];
   await Promise.all(promises);
 

src/socket/SocketServer.js

@@ -104,7 +104,7 @@ class SocketServer extends WebSocketEvents {
       });
       ws.on('message', (message) => {
         if (typeof message === 'string') {
-          SocketServer.onTextMessage(message, ws);
+          this.onTextMessage(message, ws);
         } else {
           this.onBinaryMessage(message, ws);
         }
@@ -175,13 +175,19 @@ class SocketServer extends WebSocketEvents {
     });
   }
 
+  /*
+   * keep in mind that a user could
+   * be connected from multiple devices
+   */
   findWsByUserId(userId) {
-    const { clients } = this.wss;
+    const it = this.wss.clients.keys();
-    for (let i = 0; i < clients.length; i += 1) {
+    let client = it.next();
-      const ws = clients[i];
+    while (!client.done) {
+      const ws = client.value;
       if (ws.user.id === userId && ws.readyState === WebSocket.OPEN) {
         return ws;
       }
+      client = it.next();
     }
     return null;
   }
@@ -190,35 +196,31 @@ class SocketServer extends WebSocketEvents {
     userId: number,
     channelId: number,
     channelArray: Array,
-    notify: boolean,
   ) {
-    const ws = this.findWsByUserId(userId);
+    this.wss.clients.forEach((ws) => {
-    if (ws) {
+      if (ws.user.id === userId && ws.readyState === WebSocket.OPEN) {
-      ws.user.channels[channelId] = channelArray;
+        ws.user.addChannel(channelId, channelArray);
-      const text = JSON.stringify([
+        const text = JSON.stringify([
-        'addch', {
+          'addch', {
-          [channelId]: channelArray,
+            [channelId]: channelArray,
-        },
+          },
-      ]);
+        ]);
-      if (notify) {
         ws.send(text);
       }
-    }
+    });
   }
 
   broadcastRemoveChatChannel(
     userId: number,
     channelId: number,
-    notify: boolean,
   ) {
-    const ws = this.findWsByUserId(userId);
+    this.wss.clients.forEach((ws) => {
-    if (ws) {
+      if (ws.user.id === userId && ws.readyState === WebSocket.OPEN) {
-      delete ws.user.channels[channelId];
+        ws.user.removeChannel(channelId);
-      const text = JSON.stringify('remch', channelId);
+        const text = JSON.stringify(['remch', channelId]);
-      if (notify) {
         ws.send(text);
       }
-    }
+    });
   }
 
   broadcastPixelBuffer(canvasId: number, chunkid, data: Buffer) {
@@ -286,7 +288,7 @@ class SocketServer extends WebSocketEvents {
     webSockets.broadcastOnlineCounter(online);
   }
 
-  static async onTextMessage(text, ws) {
+  async onTextMessage(text, ws) {
     /*
      * all client -> server text messages are
      * chat messages in [message, channelId] format
@@ -333,13 +335,11 @@ class SocketServer extends WebSocketEvents {
          */
         const dmUserId = chatProvider.checkIfDm(user, channelId);
         if (dmUserId) {
-          console.log('is dm');
           const dmWs = this.findWsByUserId(dmUserId);
-          if (!dmWs 
+          if (!dmWs
             || !chatProvider.userHasChannelAccess(dmWs.user, channelId)
           ) {
-            console.log('adding channel')
+            await ChatProvider.addUserToChannel(
-            ChatProvider.addUserToChannel(
               dmUserId,
               channelId,
               [ws.name, 1, Date.now(), user.id],

src/socket/WebSocketEvents.js

@@ -28,14 +28,12 @@ class WebSocketEvents {
     userId: number,
     channelId: number,
     channelArray: Array,
-    notify: boolean,
   ) {
   }
 
   broadcastRemoveChatChannel(
     userId: number,
     channelId: number,
-    notify: boolean,
   ) {
   }
 

src/socket/websockets.js

@@ -94,20 +94,17 @@ class WebSockets {
    * @param userId numerical id of user
    * @param channelId numerical id of chat channel
    * @param channelArray array with channel info [name, type, lastTs]
-   * @param notify if user should get notified over websocket
-   *        (i.e. false if the user already gets it via api response)
    */
   broadcastAddChatChannel(
     userId: number,
     channelId: number,
     channelArray: Array,
-    notify: boolean = true,
   ) {
     this.listeners.forEach(
       (listener) => listener.broadcastAddChatChannel(
         userId,
+        channelId,
         channelArray,
-        notify,
       ),
     );
   }
@@ -116,19 +113,16 @@ class WebSockets {
    * broadcast Removing chat channel from user
    * @param userId numerical id of user
    * @param channelId numerical id of chat channel
-   * @param notify if user should get notified over websocket
    *        (i.e. false if the user already gets it via api response)
    */
   broadcastRemoveChatChannel(
     userId: number,
     channelId: number,
-    notify: boolean = true,
   ) {
     this.listeners.forEach(
       (listener) => listener.broadcastRemoveChatChannel(
         userId,
         channelId,
-        notify,
       ),
     );
   }

src/store/audio.js

@@ -200,21 +200,31 @@ export default (store) => (next) => (action) => {
     }
 
     case 'RECEIVE_CHAT_MESSAGE': {
-      if (!chatNotify) break;
+      if (mute || !chatNotify) break;
 
-      const { isPing } = action;
+      const { isPing, channel } = action;
-      const { chatChannel } = state.gui;
+      const { mute: muteCh, chatChannel } = state.chatRead;
-      // eslint-disable-next-line eqeqeq
+      if (muteCh.includes(channel)) break;
-      if (!isPing && action.channel != chatChannel) {
+      if (muteCh.includes(`${channel}`)) break;
-        break;
+      const { channels } = state.chat;
-      }
 
       const oscillatorNode = context.createOscillator();
       const gainNode = context.createGain();
 
       oscillatorNode.type = 'sine';
       oscillatorNode.frequency.setValueAtTime(310, context.currentTime);
-      const freq = (isPing) ? 540 : 355;
+      /*
+       * ping if user mention or
+       * message in DM channel that is not currently open
+       */
+      const freq = (isPing
+        || (
+          channels[channel]
+          && channels[channel][1] === 1
+          // eslint-disable-next-line eqeqeq
+          && channel != chatChannel
+        )
+      ) ? 540 : 355;
       oscillatorNode.frequency.exponentialRampToValueAtTime(
         freq,
         context.currentTime + 0.025,

src/store/protocolClientHook.js

@@ -19,7 +19,7 @@ export default (store) => (next) => (action) => {
     }
 
     case 'SET_NAME':
-    case 'LOGIN:':
+    case 'LOGIN':
     case 'LOGOUT': {
       ProtocolClient.reconnect();
       break;

src/styles/arkeros.css

@@ -22,10 +22,14 @@ tr:nth-child(odd) {
   color: #ff91a6;
 }
 
-.actionbuttons:hover, .menu > div:hover {
+.actionbuttons:hover, .menu > div:hover, .channeldd, .contextmenu {
   background: linear-gradient(160deg, #61dcea , #ffb1e1, #ecffec, #ffb1e1, #61dcea);
 }
 
+.chn, .chntype, .contextmenu > div {
+  background-color: #ebebeb80;
+}
+
 #chatbutton {
   background: linear-gradient(135deg, orange , yellow, green, aqua, blue, violet);
 }

src/styles/dark-round.css

@@ -35,6 +35,25 @@ tr:nth-child(even) {
   border-radius: 8px;
 }
 
+.channeldd, .contextmenu {
+  background-color: #535356;
+  color: #efefef;
+  border-radius: 8px;
+}
+
+.chntop {
+  margin-top: 4px;
+}
+
+.chn, .chntype, .contextmenu > div {
+  background-color: #5f5f5f;
+}
+
+.chn.selected, .chn:hover, .chntype.selected, .chntype:hover,
+.contextmenu > div:hover {
+  background-color: #404040;
+}
+
 .actionbuttons, .coorbox, .onlinebox, .cooldownbox, #historyselect {
   background-color: rgba(59, 59, 59, 0.8);
   color: #f4f4f4;

src/styles/dark.css

@@ -65,6 +65,20 @@ tr:nth-child(even) {
   background-color: hsla(216, 4%, 74%, .3);
 }
 
+.channeldd, .contextmenu {
+  background-color: #535356;
+  color: #efefef;
+}
+
+.chn, .chntype, .contextmenu > div {
+  background-color: #5f5f5f;
+}
+
+.chn.selected, .chn:hover, .chntype.selected, .chntype:hover,
+.contextmenu > div:hover {
+  background-color: #404040;
+}
+
 .modalinfo {
   color: #ddd;
 }

src/styles/default.css

@@ -134,15 +134,20 @@ tr:nth-child(even) {
   background-color: rgba(226, 226, 226);
   border: solid black;
   border-width: thin;
+  color: #212121;
+  box-shadow: 0 0 2px 2px rgba(0,0,0,.2);
 }
 
 .contextmenu > div {
-  border-width: thin;
   margin: 2px;
+  height: 18px;
+  padding: 3px 2px 0px 0px;
+  background-color: #ebebeb;
+  border-top: thin solid #b1b1b2;
 }
 
 .contextmenu > div:hover {
-  background-color: white;
+  background-color: #c9c9c9;
   cursor: pointer;
 }
 
@@ -155,29 +160,42 @@ tr:nth-child(even) {
 }
 
 .channelbtn {
-  background-color: #d0d0d0;
+  position: relative;
+  background-color: #ebebeb;
   text-align: center;
   border-style: solid;
   border-width: thin;
   border-radius: 4px;
-}
+  width: 50px;
-
+  height: 100%;
-.channelbtn:hover {
+  white-space: nowrap;
-  cursor: pointer;
+  font-size: 14px;
-  background-color: white;
+  overflow-x: hidden;
+  color: #212121;
 }
 
 .channeldd {
   background-color: rgba(226, 226, 226);
+  color: #212121;
+  border: solid black;
+  border-width: thin;
   width: 90px;
+  box-shadow: 0 0 2px 2px rgba(0,0,0,.2);
 }
 
 .channeldds {
   height: 120px;
-  overflow-y: scroll;
+  overflow-y: auto;
+  overflow-x: hidden;
   margin: 2px;
 }
 
+.chntop {
+  display: flex;
+  height: 24px;
+  border-bottom: solid thin;
+}
+
 .actionbuttons, .coorbox, .onlinebox, .cooldownbox, #palettebox {
   position: fixed;
   background-color: rgba(226, 226, 226, 0.80);
@@ -224,10 +242,6 @@ tr:nth-child(even) {
 }
 
 #helpbutton {
-  left: 16px;
-  top: 221px;
-}
-#minecraftbutton {
   left: 16px;
   top: 180px;
 }
@@ -485,15 +499,43 @@ tr:nth-child(even) {
   cursor: pointer;
 }
 
-.chn.selected, .chnunread {
+.chn {
-  font-weight: bold;
+  position: relative;
-  font-size: 17px;
+  background-color: #ebebeb;
+  white-space: nowrap;
+  border-bottom: solid thin #b1b1b2;
+  padding: 1px;
+  font-size: 15px;
+  height: 22px;
+}
+
+.chn.selected, .chn:hover, .channelbtn.selected, .channelbtn:hover {
+  cursor: pointer;
+  background-color: #c9c9c9;
 }
 
 .chnunread {
+  position: absolute;
+  top: -1px;
+  right: 1px;
+  font-weight: bold;
+  font-size: 12px;
   color: red;
 }
 
+.chntype {
+  position: relative;
+  flex: auto;
+  text-align: center;
+  background-color: #ebebeb;
+  border-left: solid thin #b1b1b2;
+}
+.chntype.selected, .chntype:hover {
+  cursor: pointer;
+  font-size: 110%;
+  background-color: #c9c9c9;
+}
+
 .usermessages {
   font-size: 14px;
   font-weight: 500;

src/styles/light-round.css

@@ -1,7 +1,11 @@
-.chatbox {
+.chatbox, .channeldd, .contextmenu {
   border-radius: 8px;
 }
 
+.chntop {
+  margin-top: 4px;
+}
+
 .actionbuttons, .coorbox, .onlinebox, .cooldownbox, #historyselect {
   border-radius: 21px;
 }