<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>五子</title>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
padding: 0;
margin: 0;
}
html,
body,
#five {
background: #ccc;
height: 100%;
}
.controls {
/* position: absolute; */
top: 20px;
margin: 5px;
}
#game {
width: 580px;
height: 580px;
/* box-shadow: 2px 2px 5px #333333; */
/* text-align: center; */
padding: 10px;
background: rgba(0, 0, 0, 0.2);
}
table {
width: 560px;
border-collapse: collapse;
border-spacing: 0;
}
td {
width: 35px;
height: 35px;
text-align: center;
}
span {
transition-duration: 100ms;
display: inline-block;
border-radius: 50%;
width: 28px;
height: 28px;
vertical-align: middle;
cursor: pointer;
}
.led {
transition-duration: 100ms;
display: inline-block;
border: 5px double grey;
border-radius: 50%;
width: 18px;
height: 18px;
z-index: 10;
vertical-align: middle;
}
.word {
background: radial-gradient(transparent, rgb(15 15 15 / 25%));
transition-duration: 100ms;
display: inline-block;
padding: 3px 6px;
border: 5px double grey;
z-index: 10;
vertical-align: middle;
}
.red {
filter: drop-shadow(0 0 2px red);
outline: 5px dashed rgba(234, 71, 71, 0.5);
}
span::after {
content: "";
height: 0;
display: inline-block;
vertical-align: middle;
}
.black {
box-shadow: 1px 1px 2px rgba(115, 115, 115, 0.7);
background: #000;
cursor: default;
}
.white {
box-shadow: 1px 1px 2px rgba(115, 115, 115, 0.7);
background: #fff;
cursor: default;
}
.highlight.black {
filter: drop-shadow(0 0 5px black);
}
.highlight.white {
filter: drop-shadow(0 0 5px white);
}
.red:active {
background: radial-gradient(transparent, rgb(15 15 15 / 25%));
}
.word:focus:not(:focus-visible):not(.red),
.word:active:not(:focus-visible):not(.red),
.word:hover:not(.red) {
background: radial-gradient(transparent, rgb(15 15 15 / 25%));
outline: 0;
}
.red:focus {
outline: 5px dashed rgba(234, 71, 71, 0.5);
}
.tables {
top: 0;
left: 0;
z-index: 3;
}
#xq-tips {
position: absolute;
top: 20%;
left: 0;
width: 100%;
height: 150px;
background: rgba(0, 0, 0, 0);
display: none;
z-index: 4;
backdrop-filter: blur(5px);
}
.xq-txt {
position: relative;
height: 150px;
background: rgba(35, 35, 35, 0.5);
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
color: #fff;
font-size: 40px;
text-align: center;
line-height: 150px;
}
#agin {
display: none;
}
#regret {
display: none;
}
.pointer {
display: none;
transition-duration: 100ms;
pointer-events: none;
position: absolute;
opacity: 50%;
left: 0;
top: 0;
z-index: 10;
}
.btn {
text-shadow: rgb(133, 133, 130) 1px 2px 3px;
}
.noshadow {
text-shadow: none;
}
input {
outline-style: none;
text-shadow: rgb(85, 85, 85) 3px 2px 4px;
border: 1px solid #ccc;
border-radius: 2px;
background: rgb(215 215 215 / 50%);
}
input:hover {
outline-style: none;
text-shadow: rgb(85, 85, 85) 3px 2px 4px;
border: 1px solid #ccc;
border-radius: 2px;
background: rgb(215 215 215 / 40%);
}
</style>
</head>
<body>
<div id="five">
<div class="controls">
<a class="btn btn-info" href="/"><i class="glyphicon glyphicon-home" aria-hidden="true"></i> 返回</a>
<button class="btn btn-primary" id="begin"><i class=" glyphicon glyphicon-ban-circle" aria-hidden="true"></i> 开始游戏</button>
<div class="btn-group">
<button class="btn btn-primary" id="agin"><i class=" glyphicon glyphicon-repeat" aria-hidden="true"></i> 重新游戏</button>
<button class="btn btn-warning" id="regret"><i class=" glyphicon glyphicon-backward" aria-hidden="true"></i> 悔棋</button>
<button class="btn btn-info" id="check"><i class=" glyphicon glyphicon-exclamation-sign" aria-hidden="true"></i> 下哪了</button>
</div>
<a class="btn btn-default noshadow" onclick="$('.help').toggle()" href="#help"><i class="glyphicon glyphicon-question-sign"></i></a>
<div class="led mylight"></div>
<div class="led light"></div>
<button class="btn btn-danger word message1">快</button>
<button class="btn btn-danger word message2">再想想？</button>
<button class="btn btn-danger word message3">拜拜</button>
<button class="btn btn-danger word message4"><input id="messageText"></button>
</div>
<div id="game" class="center-block">
<span class="black pointer"></span>
</div>
<p>Websocket：<i class="glyphicon glyphicon-remove ws" aria-hidden="true"></i></p>
<div style="display:inline-block">在线人数：<il class="label label-default" id="messageServer"></il>
</div>
<div class="help" style="display:none">
<h4 id="help">说明</h4>
<p>普通五子棋，需双人对战，同一设备只能使用一种颜色。（找不到同伴可以自己用两个设备玩）</p>
<p>右侧按钮可用于发送信号，但请勿频繁点击。</p>
<p>两个指示灯分别表示自身颜色和当前颜色，两者相同时说明该你了。</p>
</div>
</div>
</div>
<script src="/js/chess.js"></script>
</body>