LaniakeaSupercluster/webrtc
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

游戏模式

Browse Source
This commit is contained in:
觉 2023-10-21 06:46:56 +08:00
parent 6a244555d6
commit e844cbd910
1 changed files with 60 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/chat.js
View File

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