62 lines
2.7 KiB
TypeScript
62 lines
2.7 KiB
TypeScript
import { useParams } from "@solidjs/router";
|
||
|
||
function Room() {
|
||
const params = useParams();
|
||
|
||
return (
|
||
<>
|
||
<div class="flex-grow flex flex-col">
|
||
<div class="pt-2 flex items-center justify-center">
|
||
<span class="text-xl">路墙棋</span>
|
||
</div>
|
||
<div class="text-center text-sm mb-4">房间号: {params.roomId}</div>
|
||
|
||
<div class="flex flex-wrap justify-center -my-2">
|
||
<div class="relative box-shadow w-14 h-14 rounded-full border text-center flex items-center justify-center mx-4 my-2">
|
||
<div class="text-2xl overflow-hidden">
|
||
player1
|
||
</div>
|
||
<div class="absolute whitespace-nowrap px-1 translate-x-[-50%] rounded-full text-white text-xs bg-orange-600 top-0 left-[7px]">
|
||
房主
|
||
</div>
|
||
<div class="absolute whitespace-nowrap px-1 translate-x-[-50%] rounded-full text-white text-xs bg-orange-600 font-mono top-[39px] left-[46px]">
|
||
1
|
||
</div>
|
||
<div class="absolute whitespace-nowrap px-1 translate-x-[-50%] rounded-full text-white text-xs bg-orange-600 top-[39px] left-[7px]">
|
||
我
|
||
</div>
|
||
<button type="button" class="block absolute w-14 h-14 rounded-full" />
|
||
</div>
|
||
<div class="relative box-shadow w-14 h-14 rounded-full border text-center flex items-center justify-center mx-4 my-2">
|
||
<div class="text-2xl overflow-hidden">
|
||
player2
|
||
</div>
|
||
<div class="absolute whitespace-nowrap px-1 translate-x-[-50%] rounded-full text-white text-xs bg-gray-600 font-mono top-[39px] left-[46px]">
|
||
2
|
||
</div>
|
||
<div class="absolute left-[3px] top-[42px] border border-black rounded-full w-2.5 h-2.5 bg-gray-500" />
|
||
<button type="button" class="absolute rounded-full block h-6 w-6 leading-6 -top-1 left-9 bg-red-500 text-white active:bg-red-600 box-shadow">
|
||
✕
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<div class="mt-8 mb-12">
|
||
<button type="button" class="inline-block overflow-hidden whitespace-nowrap transition-colors rounded-full box-shadow h-6 leading-6 px-2 text-xs text-black/90 bg-slate-200/80 active:bg-slate-300/70">
|
||
离开座位，观战
|
||
</button>
|
||
</div>
|
||
<div class="my-8">
|
||
<button type="button" class="inline-block overflow-hidden whitespace-nowrap transition-colors rounded-full box-shadow h-10 leading-10 px-4 text-base text-white primary">
|
||
开始游戏
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Room;
|