Skip to content

Commit

Permalink
Merge pull request #31 from Liberluna/ui
Browse files Browse the repository at this point in the history 
UIの改善
  • Loading branch information
@nakasyou
nakasyou authored Jun 18, 2023
2 parents 434a1a6 + a8c2122 commit f99ae14
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 71 deletions.
147 changes: 79 additions & 68 deletions islands/Room.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { useRef, useEffect } from "preact/hooks"

import { useRef, useEffect, useState } from "preact/hooks"
import {
IconSend,
IconLogout,
IconMenu2,
IconX,
IconArrowDown,
} from "tabler-icons"
import ky from "ky";

import {
Expand Down Expand Up @@ -65,86 +71,91 @@ export default class extends Component {
//Box取得

const refBox = useRef<HTMLDivElement>(null);

function SDOB() {
const ref = refBox.current;

if (ref) {
STOB(ref);
}
}

function STOB(element: HTMLDivElement) {
element.scrollTop = element.scrollHeight;
} //一番下までスクロール


const reply = (msg: string): void => {
if (inp.current == null) {
return;
} else {
inp.current.value += " >>" + msg + " ";
}
}


const [isOpenMenu, setIsOpenMenu] = useState(false)
return (
<>
<div className="flex pl-4 py-2">
<input
ref={inp}
placeholder="message"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
/>

<button
onClick={() => {
if (inp.current?.value === "") {
alert(
"送信できませんでした。 送信内容が空の可能性が有ります。"
);
return;
}

this.state.socket.emit("message", {
body: inp.current?.value,
room: this.byProps.roomId,
uuid: crypto.randomUUID(),
});

if (inp.current) {
// 文字の消去
inp.current.value = "";
}
}}
class="mx-5 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
>
Send
</button>
<div class="relative w-full h-full">
<div className="top-0 left-0 right-0 min-h-screen">
<MessagesList messages={this.state.messages} reply={reply} />
</div>
<div className="flex sticky bottom-0 left-0 right-0">
<input
ref={inp}
placeholder="message"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
/>
<button
onClick={() => {
if (inp.current?.value === "") {
alert(
"送信できませんでした。 送信内容が空の可能性が有ります。"
);
return;
}
this.state.socket.emit("message", {
body: inp.current?.value,
room: this.byProps.roomId,
uuid: crypto.randomUUID(),
})
if (inp.current) {
// 文字の消去
inp.current.value = ""
}
}}
class="mx-5 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
>
<IconSend />
</button>
<div>
<div hidden={!isOpenMenu}>
<div class="absolute bottom-12 right-0 gap-2 grid grid-rows-3 justify-items-center">
<button
class="p-3 bg-red-400 text-center rounded-full drop-shadow-lg"
onClick={()=>{
setIsOpenMenu(false)
}}
>
<IconX />
</button>
<button
onClick={()=>{
if(window.confirm("退出しますか？"))
window.location.href = "/"
}}
class="text-center bg-cyan-300 p-2 rounded-full drop-shadow-lg w-12 h-12"
>
<IconLogout />
</button>
</div>
</div>
<button
onClick={()=>{
setIsOpenMenu(!isOpenMenu)
}}
class="bg-gray-300 hover:bg-gray-400 rounded text-center p-3"
>
<IconMenu2 />
</button>
</div>
</div>
</div>
<div className="h-5/6 overflow-y-scroll" ref={refBox}>
<MessagesList messages={this.state.messages} reply={reply} />
</div>

<button
title="Down"
onClick={SDOB}
class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-2 pl-4 rounded inline-flex items-cente fixed bottom-5 right-5"
>
<svg
class="fill-current w-4 h-4 mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"></path>
</svg>
</button>

<button
onClick={() => {
window.location.href = "/";
onClick={()=>{
window.scrollTo(999999999999999)
}}
className="font-bold bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-2 rounded inline-flex items-cente fixed bottom-5 left-0"
class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold p-2 pl-4 rounded-full inline-flex items-center fixed bottom-20 right-20 justify-items-center text-center"
>
<span>Exit</span>
<IconArrowDown />
</button>
</>
);
Expand Down
10 changes: 7 additions & 3 deletions routes/room/[roomid].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ export default function (props: PageProps) {
background-color: #333;
border-radius: 8px;
opacity: 0.8;
}
body{
width: 100%;
height: 100%;
}
`
return <>
Expand All @@ -42,10 +46,10 @@ export default function (props: PageProps) {
<style>
{css}
</style>
<script src="https://cdn.socket.io/socket.io-2.3.0.js"></script>
<script src="/socket-init.js"></script>
{/*<script src="https://cdn.socket.io/socket.io-2.3.0.js"></script>
<script src="/socket-init.js"></script>*/}
</Head>
<div className="bg-white dark:bg-gray-800 w-full h-screen overflow-x-hidden">
<div className="bg-white dark:bg-gray-800 w-full h-full">
<Room roomId={roomid}/>
</div>
</>
Expand Down

0 comments on commit f99ae14

Please sign in to comment.