board-game/web/vue/index.html

an online board game engine

<div id="app" v-cloak onselect="return false">
	<div class="loading" v-if="loading">
		<div class="icon"><i class="fa fa-fw fa-spinner fa-pulse fa-3x"></i></div>
	</div>
	<div class="unsupported"></div>
	<div class="dialog alert" v-if="dialog.alert">
		<div class="body">
			<div class="content text-left">
				{{ dialog.alert }}
			</div>
			<div class="buttons btn-group">
				<a class="btn" @click="dialog.alert = false" @touchstart.prevent="dialog.alert = false">确定</a>
			</div>
		</div>
	</div>
	<div class="modal" v-if="modal.introduction">
		<div>
			<h2>《{{ config.name }}》游戏规则</h2>
			<introduction :player="player"></introduction>
			<h2>《{{ config.name }}》大厅/房间操作指南</h2>
			<p>1、玩家进入大厅或房间后，可使用右上角的【我的】按钮，修改个人信息。请尽量使用姓名或大家对你的爱称方便游戏中识别<span v-if="!config.login">（服务器不保存玩家信息）</span>。</p>
			<p>2、玩家可以在大厅创建房间，房间创建后在页眉部分会显示房间号；</p>
			<p>3、其余玩家可输入房间号进入房间加入游戏，亦可扫描其他玩家分享的二维码信息快速进入房间；</p>
			<p v-if="config.teams.length > 1">4、队伍人数相同方能开始游戏，玩家进入房间后可点击空白方格变换队伍，每个队伍最多{{ config.team.size }}人，<span v-if="config.team.min > 1">每个队伍至少{{ config.team.min }}人方能开始游戏</span><span v-else>每个队伍有一人便可开始游戏</span>；</p>
			<p v-else="">4、<span v-if="config.team.min > 1">房间人数达到{{ config.team.min }}人方能开始游戏</span><span v-else>房间内有一人便可开始游戏</span>，房间内最多{{ config.team.size }}人参与游戏；</p>
			<p>5、游戏未开始时可以点击左上角的【退出】按钮退出房间。如房主退出房间，房间将解散。游戏中的玩家不能中途退出，也不能加入其他房间。</p>
			<p>6、房间创建完成或进入房间后可使用左上角的【分享】按钮快速邀请其他玩家直接加入游戏。</p>
			<p>7、房间创建完成后房主可使用右上角的【设置】按钮更改本次游戏或房间的相关设置。</p>
			<p>8、在房间中游戏未开始时，房主可以点击对应的玩家名称将玩家提出游戏房间，或点击空白方格禁止部分玩家加入游戏或更换队伍。</p>
		</div>
		<div class="btn-group">
			<a class="btn" @click="modal.introduction = false" @touchstart.prevent="modal.introduction = false">关闭</a>
		</div>
	</div>
	<div class="dialog" v-if="dialog.player">
		<div class="body">
			<div class="content">
				<p>
					昵称: <input type="text" v-model="dialog.player.name"><a @click="random" @touchstart.prevent="random" class="addon"><i class="fa fa-fw fa-braille"></i></a>
				</p>
			</div>
			<div class="buttons btn-group">
				<a class="btn" @click="savePlayer" @touchstart.prevent="savePlayer">确定</a>
				<a class="btn" v-if="player.name" @click="dialog.player = false" @touchstart.prevent="dialog.player = false">关闭</a>
			</div>
		</div>
	</div>
	<div class="modal" v-if="modal.qr">
		<h2 class="text-center">扫描二维码快速加入游戏</h2>
		<div class="text-center">
			<img :src="qr" alt="二维码" style="max-width: 90vmin; max-height: 90vmin;">
		</div>
		<div class="btn-group">
			<a class="btn" @click="modal.qr = false" @touchstart.prevent="modal.qr = false">关闭</a>
		</div>
	</div>
	<div class="dialog" v-if="dialog.join">
		<div class="body">
			<div class="content">
				房间号: <input type="number" v-model="dialog.join.roomId" size="10" maxlength="10">
			</div>
			<div class="buttons btn-group">
				<a class="btn" @click="join" @touchstart.prevent="join">加入游戏</a>
				<a class="btn" @click="dialog.join = false" @touchstart.prevent="dialog.join = false">关闭</a>
			</div>
		</div>
	</div>
	<div class="dialog" v-if="dialog.login">
		<div class="body">
			<div class="content login">
				<p>账号: <input type="text" v-model="dialog.login.id" size="32" maxlength="32"></p>
				<p>密码: <input type="password" v-model="dialog.login.password" size="32" maxlength="32"></p>
			</div>
			<div class="buttons btn-group">
				<a class="btn" @click="doLogin" @touchstart.prevent="doLogin">注册或登录</a>
			</div>
		</div>
	</div>
	<div class="dialog" v-if="dialog.settings">
		<div class="body">
			<div class="content settings">
				<p> 公开的: <checkbox :disabled="room && room.creator.id !== role.player.id" v-model="dialog.settings.publish"></checkbox> </p>
				<p v-for="declare in dialog.settings.declare">
					{{ declare.title }}:
					<input v-if="declare.type === 'number'" :disabled="room && room.creator.id !== role.player.id" type="number" v-model="dialog.settings[declare.name]">
					<checkbox v-if="declare.type === 'checkbox'" :disabled="room && room.creator.id !== role.player.id" v-model="dialog.settings[declare.name]"></checkbox>
					<select v-if="declare.type === 'select'" :disabled="room && room.creator.id !== role.player.id" v-model="dialog.settings[declare.name]">
						<option v-for="option in declare.options" :value="typeof option.value === 'undefined' ? option : option.value">{{ option.title || option }}</option>
					</select>
					<span class="description" v-if="declare.description"><br/>{{ declare.description }}</span>
				</p>
			</div>
			<div class="buttons btn-group">
				<a class="btn" @click="create" @touchstart.prevent="create" v-if="!(room && room.creator.id !== role.player.id)">{{ room ? '确定' : '创建游戏' }}</a>
				<a class="btn" @click="dialog.settings = false" @touchstart.prevent="dialog.settings = false">关闭</a>
			</div>
		</div>
	</div>
	<div class="main" :class="{ blur: dialogs }">
		<div class="panel" v-if="!room">
			<div class="top">
				<a class="pull-left btn" v-if="config.home" @click="home" @touchstart.prevent="home"><i class="fa fa-fw fa-home"></i><span>主页</span></a>
				<a class="pull-left btn" @click="share" @touchstart.prevent="share"><i class="fa fa-fw fa-share"></i><span>分享</span></a>
				{{ player.name }}
				<a class="pull-right btn" @click="mine" @touchstart.prevent="mine"><i class="fa fa-fw fa-user"></i><span>我的</span></a>
				<a class="pull-right btn" @click="help" @touchstart.prevent="help"><i class="fa fa-fw fa-question"></i><span>帮助</span></a>
			</div>
			<div class="hall">
				<div class="controls btn-group">
					<a @click="prepare" @touchstart.prevent="prepare" class="btn"><i class="fa fa-fw fa-plus"></i><span>创建游戏</span></a>
					<a @click="preJoin" @touchstart.prevent="preJoin" class="btn"><i class="fa fa-fw fa-sign-in"></i><span>加入游戏</span></a>
					<a @click="getRooms" @touchstart.prevent="getRooms" class="btn btn-simple"><i class="fa fa-fw fa-refresh" :class="{ 'fa-spin' : rooms.loading }"></i><span>刷新</span></a>
				</div>
				<div class="rooms scrollable">
					<div class="room" v-for="room in rooms.list">
						<div class="title">{{ room.id }}</div>
						<div class="message">
							<div class="creator"><i class="fa fa-fw fa-user-secret"></i>{{ room.creator.name }}</div>
							<div class="length" :class="{ 'text-gray': room.empty === 0 }">{{ room.length - room.empty }} / {{ room.length }}</div>
							<div class="status" :class="{ 'text-gray': room.status !== 'waiting' }">{{ rooms.status[room.status] }}</div>
						</div>
						<div class="btn-group"><a class="btn" @click="joinTo(room.id)" @touchstart.prevent="joinTo(room.id)"><i class="fa fa-fw fa-sign-in"></i>加入</a></div>
					</div>
				</div>
			</div>
		</div>
		<div class="panel" v-if="room && role && !game">
			<div class="result" v-if="role.result">
				<div class="title">{{ role.result.title }}</div>
				<result :player="player" :role="role"></result>
				<div class="btn-group"><a class="btn" @click="confirm" @touchstart.prevent="confirm">确定</a></div>
			</div>
			<div class="top">
				<a class="pull-left btn" @click="exit" @touchstart.prevent="exit"><i class="fa fa-fw fa-flip-horizontal fa-sign-out"></i><span>退出</span></a>
				<a class="pull-left btn" @click="share" @touchstart.prevent="share"><i class="fa fa-fw fa-share"></i><span>分享</span></a>
				<span><i class="fa fa-fw fa-lock" v-if="!room.settings.publish"></i>房间:{{ room.id }}</span>
				<a class="pull-right btn" @click="settings" @touchstart.prevent="settings"><i class="fa fa-fw fa-cogs"></i><span>设置</span></a>
				<a class="pull-right btn" @click="more" @touchstart.prevent="more"><i class="fa fa-fw fa-bars"></i><span>更多</span></a>
			</div>
			<div class="more" v-if="tip.more" @click="more" @touchstart.prevent="more">
				<a class="btn" @click="mine" @touchstart.prevent="mine"><i class="fa fa-fw fa-user"></i><span>我的</span></a>
				<a class="btn" @click="help" @touchstart.prevent="help"><i class="fa fa-fw fa-question"></i><span>帮助</span></a>
				<a class="pull-left btn" v-if="config.home" @click="home" @touchstart.prevent="home"><i class="fa fa-fw fa-home"></i><span>主页</span></a>
			</div>
			<div class="teams scrollable">
				<div class="team" v-for="(team, teamIndex) in room.teams">
					<div class="head" :class="team.color" v-if="room.teams.length > 1"><i class="fa fa-fw" :class="'fa-' + team.icon"></i>{{ team.name }}</div>
					<div class="roles">
						<div class="role" :class="team.color" v-for="(role, roleIndex) in team.roles">
							<div v-if="role === true" class="point" @click="move(role, teamIndex, roleIndex)" @touchstart.prevent="move(role, teamIndex, roleIndex)"><i class="fa fa-fw fa-hand-pointer-o"></i></div>
							<div v-else-if="role === false" class="point" @click="move(role, teamIndex, roleIndex)" @touchstart.prevent="move(role, teamIndex, roleIndex)"><i class="fa fa-fw fa-ban"></i></div>
							<div v-else class="title" :class="{ leaved: role.player.leaved }" @click="move(role, teamIndex, roleIndex)" @touchstart.prevent="move(role, teamIndex, roleIndex)">
								<i class="fa fa-fw fa-user-secret" v-if="role.player.id === room.creator.id" :class="{ self: role.player.id === player.id }"></i>
								<i class="fa fa-fw fa-user" v-else :class="{ self: role.player.id === player.id }"></i>
								{{ role.player.name }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="btn-group"><a class="btn" :disabled="!creator || !room.canStart" @click="start" @touchstart.prevent="start">开始游戏</a></div>
		</div>
		<div class="game" v-if="game">
			<control ref="control" v-if="config.control" :config="config.control" @control="onControl"></control>
			<game ref="game" :player="player"></game>
		</div>
	</div>
</div>