游戏模式

src/chat.js

@@ -1,5 +1,5 @@
 import { get, set, del, update, createStore, values } from 'idb-keyval'
-import { Span, Button, List, ListItem, TextArea, createElement } from './weigets.js'
+import { Span, Button, List, ListItem, TextArea, createElement, Input } from './weigets.js'
 
 export default class Chat {
     constructor({ name, EventListeners = {}, onsend, onexit }) {
@@ -7,29 +7,43 @@ export default class Chat {
         this.store = createStore(`db-chat-${name}`, `store-chat-${name}`)
         this.ul = List({ classList: ['chat-list'] })
         this.EventListeners = EventListeners
-        document.body.appendChild(createElement({
+        this.element = createElement({
+            style: {
+                position: 'fixed', bottom: 0, left: '50%',
+                maxWidth: '64rem', width: '100%',
+                transform: 'translate(-50%, 0)',
+                display: 'none',
+            },
             children: [
                 this.ul,
-                TextArea({
+                createElement({
+                    style: {
+                        display: 'flex',
+                        margin: '1rem 2rem',
+                    },
+                    children: [
+                        Input({
                             type: 'text',
                             placeholder: '输入聊天内容',
                             style: {
-                        height: '5rem',
-                        margin: '1rem 2rem',
-                        padding: '1rem',
+                                flex: 1,
+                                height: '3rem',
+                                padding: '0 1rem',
                                 boxSizing: 'border-box',
                                 boxShadow: '0 0 1rem #eee',
+                                border: 'none',
+                                outline: 'none',
                             },
                             onkeydown: event => {
                                 const text = event.target.value.trim()
-                        if (text && event.ctrlKey && event.key === 'Enter') {
+                                if (text && event.key === 'Enter') {
                                     this.发送消息(text)
                                     event.target.value = ''
                                 }
                             }
                         }),
                         Button({
-                    textContent: '发送(ctrl+Enter)',
+                            textContent: '发送(Enter)',
                             onclick: event => {
                                 const text = event.target.previousSibling.value.trim()
                                 if (text) {
@@ -38,7 +52,6 @@ export default class Chat {
                                 }
                             },
                             style: {
-                        margin: '1rem 2rem',
                                 padding: '.5rem 1rem',
                                 boxSizing: 'border-box',
                                 boxShadow: '0 0 1rem #eee',
@@ -46,7 +59,10 @@ export default class Chat {
                             }
                         }),
                     ]
-        }))
+                })
+            ]
+        })
+        document.body.appendChild(this.element)
         document.head.appendChild(createElement({
             innerText: `
             ul.chat-list {
@@ -69,6 +85,15 @@ export default class Chat {
             }`
         }, 'style'))
         this.载入消息()
+        this.挂载全局快捷键()
+    }
+    挂载全局快捷键() {
+        document.addEventListener('keydown', event => {
+            if (event.key === 'Enter' || event.key === '/') {
+                this.element.style.display = 'block'
+                this.element.querySelector('input').focus()
+            }
+        })
     }
     // 收到应答(对方确认消息已被接收)
     answer(data) {