85 lines
3.8 KiB
HTML
85 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Lingo</title>
|
|
<link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml">
|
|
<link rel="stylesheet" href="layout.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
|
|
<script src="//cdn.jsdelivr.net/npm/@stomp/stompjs@5.4.4/bundles/stomp.umd.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="vue-app" v-cloak>
|
|
<div class="main column">
|
|
<div class="header row">Lingo</div>
|
|
<div class="body row nofooter">
|
|
<div v-show="!username" class="form">
|
|
<h2>What is your name?</h2>
|
|
<input id="nicknameInput" type="text" class="form-control" maxlength="16">
|
|
<p class="error-message">{{ usernameError }}</p>
|
|
</div>
|
|
<div v-show="username">
|
|
<div v-bind:class="{ primary: !inStartedGame }" class="lobby column">
|
|
<div class="body row noheader nofooter scroll-y">
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Games</h3>
|
|
</div>
|
|
<div class="list-group">
|
|
<div v-if="games.length === 0" class="list-group-item">There are no games</div>
|
|
<template v-for="game in games">
|
|
<div v-if="game.started" v-bind:id="'game-' + game.id" class="list-group-item">
|
|
<strong>{{ game.playerOne }}</strong> vs. <strong>{{ game.playerTwo }}</strong>
|
|
</div>
|
|
<button v-else v-bind:id="'game-' + game.id" @click="joinGame" type="button" v-bind:disabled="inGame" class="list-group-item">
|
|
<strong>{{ game.playerOne }}</strong> wants to play a {{ game.wordLength }}-letter game
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<button v-show="inGame" @click="leaveGame" type="button" class="leave button">Leave game</button>
|
|
<button v-show="!inGame" @click="hostGame5" type="button" class="create button">Create 5-letter game</button>
|
|
<button v-show="!inGame" @click="hostGame6" type="button" class="create button">Create 6-letter game</button>
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">Players</h3>
|
|
</div>
|
|
<div class="list-group">
|
|
<div v-if="players.length === 0" class="list-group-item">There are no players</div>
|
|
<template v-for="player in players">
|
|
<div class="list-group-item user" v-if="player.username === username">{{ player.username }}</div>
|
|
<div class="list-group-item" v-else>{{ player.username }}</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-bind:class="{ primary: inStartedGame }" class="game column">
|
|
<div class="body row noheader nofooter">
|
|
<div v-show="inStartedGame" @keydown="onCanvasKeydown" @keypress="onCanvasKeypress">
|
|
<canvas id="canvas" class="centered" width="600" height="475" tabindex="1"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat column">
|
|
<div class="header row">Chat</div>
|
|
<div v-autoscroll class="body row scroll-y">
|
|
<div v-for="message in messages" class="message-item" :class="{ log: !message.sender }">
|
|
<strong v-if="message.sender">{{ message.sender }}</strong>
|
|
<span>{{ message.body }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="footer row">
|
|
<textarea @keypress="onChatKeypress" placeholder="Send a message" tabindex="2"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="client.js"></script>
|
|
</body>
|
|
</html>
|