游戏模式

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,46 +7,62 @@ 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({
-                    type: 'text',
-                    placeholder: '输入聊天内容',
                     style: {
-                        height: '5rem',
+                        display: 'flex',
                         margin: '1rem 2rem',
-                        padding: '1rem',
-                        boxSizing: 'border-box',
-                        boxShadow: '0 0 1rem #eee',
                     },
-                    onkeydown: event => {
+                    children: [
-                        const text = event.target.value.trim()
+                        Input({
-                        if (text && event.ctrlKey && event.key === 'Enter') {
+                            type: 'text',
-                            this.发送消息(text)
+                            placeholder: '输入聊天内容',
-                            event.target.value = ''
+                            style: {
-                        }
+                                flex: 1,
-                    }
+                                height: '3rem',
-                }),
+                                padding: '0 1rem',
-                Button({
+                                boxSizing: 'border-box',
-                    textContent: '发送(ctrl+Enter)',
+                                boxShadow: '0 0 1rem #eee',
-                    onclick: event => {
+                                border: 'none',
-                        const text = event.target.previousSibling.value.trim()
+                                outline: 'none',
-                        if (text) {
+                            },
-                            this.发送消息(text)
+                            onkeydown: event => {
-                            event.target.previousSibling.value = ''
+                                const text = event.target.value.trim()
-                        }
+                                if (text && event.key === 'Enter') {
-                    },
+                                    this.发送消息(text)
-                    style: {
+                                    event.target.value = ''
-                        margin: '1rem 2rem',
+                                }
-                        padding: '.5rem 1rem',
+                            }
-                        boxSizing: 'border-box',
+                        }),
-                        boxShadow: '0 0 1rem #eee',
+                        Button({
-                        borderRadius: '1rem',
+                            textContent: '发送(Enter)',
-                    }
+                            onclick: event => {
-                }),
+                                const text = event.target.previousSibling.value.trim()
+                                if (text) {
+                                    this.发送消息(text)
+                                    event.target.previousSibling.value = ''
+                                }
+                            },
+                            style: {
+                                padding: '.5rem 1rem',
+                                boxSizing: 'border-box',
+                                boxShadow: '0 0 1rem #eee',
+                                borderRadius: '1rem',
+                            }
+                        }),
+                    ]
+                })
             ]
-        }))
+        })
+        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) {