Redesign with game rooms
This commit is contained in:
parent
9dd9a212a5
commit
cde596132c
35
client-api/src/main/java/lingo/client/api/Destinations.java
Normal file
35
client-api/src/main/java/lingo/client/api/Destinations.java
Normal file
@ -0,0 +1,35 @@
|
||||
package lingo.client.api;
|
||||
|
||||
public class Destinations {
|
||||
|
||||
public static final String CHAT = topicDestination("chat");
|
||||
|
||||
public static final String GAME_CLOSED = topicDestination("gameClosed");
|
||||
|
||||
public static final String GAME_HOSTED = topicDestination("gameHosted");
|
||||
|
||||
public static final String GAME_JOINED = topicDestination("gameJoined");
|
||||
|
||||
public static final String GAME_LEFT = topicDestination("gameLeft");
|
||||
|
||||
public static final String GAME_STARTED = topicDestination("gameStarted");
|
||||
|
||||
public static final String OPPONENT_JOINED = topicDestination("opponentJoined");
|
||||
|
||||
public static final String OPPONENT_REPORTS = topicDestination("opponentReports");
|
||||
|
||||
public static final String PLAYER_REPORTS = topicDestination("playerReports");
|
||||
|
||||
public static final String PRACTICE_GAME = topicDestination("practiceGame");
|
||||
|
||||
public static final String PRACTICE_REPORTS = topicDestination("practiceReports");
|
||||
|
||||
public static final String SESSION_USERNAME = topicDestination("sessionUsername");
|
||||
|
||||
public static final String USER_JOINED = topicDestination("userJoined");
|
||||
|
||||
private static String topicDestination(String suffix) {
|
||||
return "/topic/" + suffix;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
package lingo.client.api;
|
||||
|
||||
public class StompTopics {
|
||||
|
||||
public static final String CHAT = createTopicName("chat");
|
||||
|
||||
public static final String GAME_STARTED = createTopicName("gameStarted");
|
||||
|
||||
public static final String OPPONENT_JOINED = createTopicName("opponentJoined");
|
||||
|
||||
public static final String OPPONENT_LEFT = createTopicName("opponentLeft");
|
||||
|
||||
public static final String OPPONENT_REPORTS = createTopicName("opponentReports");
|
||||
|
||||
public static final String PLAYER_REPORTS = createTopicName("playerReports");
|
||||
|
||||
public static final String PRACTICE_GAME = createTopicName("practiceGame");
|
||||
|
||||
public static final String PRACTICE_REPORTS = createTopicName("practiceReports");
|
||||
|
||||
public static final String USER_JOINED = createTopicName("userJoined");
|
||||
|
||||
private static String createTopicName(String suffix) {
|
||||
return "/topic/lingo/" + suffix;
|
||||
}
|
||||
|
||||
}
|
||||
@ -29,7 +29,7 @@ import javafx.scene.paint.Color;
|
||||
import javafx.scene.text.Font;
|
||||
import javafx.scene.text.TextAlignment;
|
||||
import javafx.scene.web.WebView;
|
||||
import lingo.client.api.StompTopics;
|
||||
import lingo.client.api.Destinations;
|
||||
import lingo.client.util.FxmlController;
|
||||
import lingo.client.view.Board;
|
||||
import lingo.client.view.OpponentBoard;
|
||||
@ -154,13 +154,13 @@ public class MultiplayerPresenter implements FxmlController {
|
||||
@PostConstruct
|
||||
private void postConstruct() {
|
||||
executorService.execute(() -> {
|
||||
stompTemplate.subscribe("/user" + StompTopics.OPPONENT_JOINED, new OpponentJoinedHandler(),
|
||||
stompTemplate.subscribe("/user" + Destinations.OPPONENT_JOINED, new OpponentJoinedHandler(),
|
||||
subscription -> subscriptionsLatch.countDown());
|
||||
stompTemplate.subscribe("/user" + StompTopics.OPPONENT_LEFT, new OpponentLeftHandler(),
|
||||
stompTemplate.subscribe("/user" + Destinations.OPPONENT_LEFT, new OpponentLeftHandler(),
|
||||
subscription -> subscriptionsLatch.countDown());
|
||||
stompTemplate.subscribe("/user" + StompTopics.OPPONENT_REPORTS, new OpponentReportHandler(),
|
||||
stompTemplate.subscribe("/user" + Destinations.OPPONENT_REPORTS, new OpponentReportHandler(),
|
||||
subscription -> subscriptionsLatch.countDown());
|
||||
stompTemplate.subscribe("/user" + StompTopics.PLAYER_REPORTS, new PlayerReportHandler(),
|
||||
stompTemplate.subscribe("/user" + Destinations.PLAYER_REPORTS, new PlayerReportHandler(),
|
||||
subscription -> subscriptionsLatch.countDown());
|
||||
});
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ package lingo.common;
|
||||
import java.util.Collections;
|
||||
import java.util.List;
|
||||
import java.util.Set;
|
||||
import java.util.concurrent.atomic.AtomicInteger;
|
||||
|
||||
public class Game {
|
||||
|
||||
@ -12,23 +13,25 @@ public class Game {
|
||||
public static final int WORD_LENGTH = 5;
|
||||
public static final int[] INVALID_GUESS = new int[] { 9, 9, 9, 9, 9 };
|
||||
|
||||
public final String playerOne;
|
||||
private static final AtomicInteger idCounter = new AtomicInteger(0);
|
||||
|
||||
public final String playerTwo;
|
||||
public final int id;
|
||||
|
||||
private final Set<String> acceptableGuesses;
|
||||
private Player host;
|
||||
|
||||
private final List<String> possibleWords;
|
||||
private Player challenger;
|
||||
|
||||
private Set<String> acceptableGuesses;
|
||||
|
||||
private List<String> possibleWords;
|
||||
|
||||
private String word;
|
||||
|
||||
private int wordIndex = 0;
|
||||
|
||||
public Game(String playerOne, String playerTwo, List<String> possibleWords, Set<String> acceptableGuesses) {
|
||||
this.playerOne = playerOne;
|
||||
this.playerTwo = playerTwo;
|
||||
this.possibleWords = possibleWords;
|
||||
this.acceptableGuesses = acceptableGuesses;
|
||||
public Game(Player host) {
|
||||
this.id = idCounter.incrementAndGet();
|
||||
this.host = host;
|
||||
}
|
||||
|
||||
private static int indexOf(char[] array, char searchTerm) {
|
||||
@ -77,6 +80,14 @@ public class Game {
|
||||
return result;
|
||||
}
|
||||
|
||||
public Player getChallenger() {
|
||||
return challenger;
|
||||
}
|
||||
|
||||
public Player getHost() {
|
||||
return host;
|
||||
}
|
||||
|
||||
public String newGame() {
|
||||
Collections.shuffle(possibleWords);
|
||||
wordIndex = 0;
|
||||
@ -88,4 +99,20 @@ public class Game {
|
||||
return word;
|
||||
}
|
||||
|
||||
public void setAcceptableGuesses(Set<String> value) {
|
||||
this.acceptableGuesses = value;
|
||||
}
|
||||
|
||||
public void setChallenger(Player value) {
|
||||
this.challenger = value;
|
||||
}
|
||||
|
||||
public void setHost(Player value) {
|
||||
this.host = value;
|
||||
}
|
||||
|
||||
public void setPossibleWords(List<String> value) {
|
||||
this.possibleWords = value;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
32
common/src/main/java/lingo/common/GameLeftMessage.java
Normal file
32
common/src/main/java/lingo/common/GameLeftMessage.java
Normal file
@ -0,0 +1,32 @@
|
||||
package lingo.common;
|
||||
|
||||
public class GameLeftMessage {
|
||||
|
||||
private Game game;
|
||||
|
||||
private Player gameLeaver;
|
||||
|
||||
public GameLeftMessage() {}
|
||||
|
||||
public GameLeftMessage(Game game, Player gameLeaver) {
|
||||
this.game = game;
|
||||
this.gameLeaver = gameLeaver;
|
||||
}
|
||||
|
||||
public Game getGame() {
|
||||
return game;
|
||||
}
|
||||
|
||||
public Player getGameLeaver() {
|
||||
return gameLeaver;
|
||||
}
|
||||
|
||||
public void setGame(Game game) {
|
||||
this.game = game;
|
||||
}
|
||||
|
||||
public void setGameLeaver(Player gameLeaver) {
|
||||
this.gameLeaver = gameLeaver;
|
||||
}
|
||||
|
||||
}
|
||||
25
common/src/main/java/lingo/common/Player.java
Normal file
25
common/src/main/java/lingo/common/Player.java
Normal file
@ -0,0 +1,25 @@
|
||||
package lingo.common;
|
||||
|
||||
public class Player {
|
||||
|
||||
private final String sessionId;
|
||||
|
||||
private String username;
|
||||
|
||||
public Player(String sessionId) {
|
||||
this.sessionId = sessionId;
|
||||
}
|
||||
|
||||
public String getSessionId() {
|
||||
return sessionId;
|
||||
}
|
||||
|
||||
public String getUsername() {
|
||||
return username;
|
||||
}
|
||||
|
||||
public void setUsername(String username) {
|
||||
this.username = username;
|
||||
}
|
||||
|
||||
}
|
||||
43
common/src/main/java/lingo/common/SetUsernameMessage.java
Normal file
43
common/src/main/java/lingo/common/SetUsernameMessage.java
Normal file
@ -0,0 +1,43 @@
|
||||
package lingo.common;
|
||||
|
||||
public class SetUsernameMessage {
|
||||
|
||||
private String errorMessage;
|
||||
|
||||
private boolean success;
|
||||
|
||||
private String username;
|
||||
|
||||
public SetUsernameMessage() {}
|
||||
|
||||
public SetUsernameMessage(boolean success, String username, String errorMessage) {
|
||||
this.errorMessage = errorMessage;
|
||||
this.success = success;
|
||||
this.username = username;
|
||||
}
|
||||
|
||||
public String getErrorMessage() {
|
||||
return errorMessage;
|
||||
}
|
||||
|
||||
public boolean isSuccess() {
|
||||
return success;
|
||||
}
|
||||
|
||||
public String getUsername() {
|
||||
return username;
|
||||
}
|
||||
|
||||
public void setErrorMessage(String errorMessage) {
|
||||
this.errorMessage = errorMessage;
|
||||
}
|
||||
|
||||
public void setSuccess(boolean success) {
|
||||
this.success = success;
|
||||
}
|
||||
|
||||
public void setUsername(String username) {
|
||||
this.username = username;
|
||||
}
|
||||
|
||||
}
|
||||
@ -2,12 +2,12 @@ package lingo.server;
|
||||
|
||||
import static org.springframework.messaging.simp.SimpMessageHeaderAccessor.SESSION_ID_HEADER;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.Collection;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.HashSet;
|
||||
import java.util.Map;
|
||||
|
||||
import javax.annotation.PostConstruct;
|
||||
import java.util.Set;
|
||||
import java.util.TreeMap;
|
||||
|
||||
import org.slf4j.Logger;
|
||||
import org.slf4j.LoggerFactory;
|
||||
@ -19,19 +19,23 @@ import org.springframework.messaging.handler.annotation.MessageMapping;
|
||||
import org.springframework.messaging.simp.SimpMessageHeaderAccessor;
|
||||
import org.springframework.messaging.simp.SimpMessageType;
|
||||
import org.springframework.messaging.simp.SimpMessagingTemplate;
|
||||
import org.springframework.messaging.simp.annotation.SubscribeMapping;
|
||||
import org.springframework.messaging.simp.stomp.StompHeaderAccessor;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
import org.springframework.web.socket.messaging.AbstractSubProtocolEvent;
|
||||
import org.springframework.web.socket.messaging.SessionConnectedEvent;
|
||||
import org.springframework.web.socket.messaging.SessionDisconnectEvent;
|
||||
|
||||
import lingo.client.api.StompTopics;
|
||||
import lingo.client.api.Destinations;
|
||||
import lingo.common.ChatMessage;
|
||||
import lingo.common.Game;
|
||||
import lingo.common.GameLeftMessage;
|
||||
import lingo.common.Player;
|
||||
import lingo.common.Report;
|
||||
import lingo.common.SetUsernameMessage;
|
||||
|
||||
@Controller
|
||||
@MessageMapping("/lingo")
|
||||
@RestController
|
||||
public class LingoController implements ApplicationListener<AbstractSubProtocolEvent> {
|
||||
|
||||
private static final Logger log = LoggerFactory.getLogger(LingoController.class);
|
||||
@ -42,25 +46,41 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
|
||||
@Autowired
|
||||
private WordRepository wordRepo;
|
||||
|
||||
private final List<String> waitingList = new ArrayList<>();
|
||||
private final Map<Integer, Game> gameById = new TreeMap<>();
|
||||
|
||||
private final Map<String, Game> gameBySession = new HashMap<>();
|
||||
private final Map<Player, Game> gameByPlayer = new HashMap<>();
|
||||
|
||||
private final Map<String, Game> practiceBySession = new HashMap<>();
|
||||
private final Map<Player, Game> practiceByPlayer = new HashMap<>();
|
||||
|
||||
private final Map<String, String> usernameBySession = new HashMap<>();
|
||||
private final Map<String, Player> playerBySession = new HashMap<>();
|
||||
|
||||
private final Set<String> usernames = new HashSet<>();
|
||||
|
||||
@MessageMapping("/chat")
|
||||
public ChatMessage chat(String message, @Header(SESSION_ID_HEADER) String sessionId) {
|
||||
final String username = usernameBySession.get(sessionId);
|
||||
return new ChatMessage(username, message);
|
||||
final Player player = playerBySession.get(sessionId);
|
||||
if (player == null) {
|
||||
log.warn("No player for session {}", sessionId);
|
||||
throw new IllegalStateException("No player for session " + sessionId);
|
||||
}
|
||||
return new ChatMessage(player.getUsername(), message);
|
||||
}
|
||||
|
||||
@RequestMapping("/games")
|
||||
public Collection<Game> getGames() {
|
||||
return gameById.values();
|
||||
}
|
||||
|
||||
@MessageMapping("/guess")
|
||||
public void guess(String guess, @Header(SESSION_ID_HEADER) String sessionId) {
|
||||
final Player player = playerBySession.get(sessionId);
|
||||
if (player == null) {
|
||||
log.warn("No player for session {}", sessionId);
|
||||
return;
|
||||
}
|
||||
guess = guess.toUpperCase();
|
||||
log.info("Player {} guessed: {}", sessionId, guess);
|
||||
final Game game = gameBySession.get(sessionId);
|
||||
log.info("{} guessed {}", sessionId, guess);
|
||||
final Game game = gameByPlayer.get(player);
|
||||
final int[] result = game.evaluate(guess);
|
||||
|
||||
// Generate reports
|
||||
@ -80,49 +100,123 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
|
||||
playerReport.setResult(result);
|
||||
opponentReport.setResult(result);
|
||||
}
|
||||
final String opponentId = sessionId.equals(game.playerOne) ? game.playerTwo : game.playerOne;
|
||||
sendToUser(sessionId, StompTopics.PLAYER_REPORTS, playerReport);
|
||||
sendToUser(opponentId, StompTopics.OPPONENT_REPORTS, opponentReport);
|
||||
}
|
||||
|
||||
@MessageMapping("/join")
|
||||
public void join(String username, @Header(SESSION_ID_HEADER) String sessionId) {
|
||||
log.info("Player joined: {}, {}", sessionId, username);
|
||||
usernameBySession.put(sessionId, username);
|
||||
send(StompTopics.USER_JOINED, username);
|
||||
joinWaitingList(sessionId);
|
||||
}
|
||||
|
||||
private void joinWaitingList(String sessionId) {
|
||||
synchronized (waitingList) {
|
||||
if (!waitingList.contains(sessionId)) {
|
||||
waitingList.add(sessionId);
|
||||
waitingList.notify();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private void leave(String sessionId) {
|
||||
final String username = usernameBySession.remove(sessionId);
|
||||
if (username != null) {
|
||||
send(StompTopics.CHAT, new ChatMessage(null, username + " left"));
|
||||
}
|
||||
final Game game = gameBySession.remove(sessionId);
|
||||
if (game == null) {
|
||||
leaveWaitingList(sessionId);
|
||||
final Player opponent;
|
||||
if (sessionId.equals(game.getHost().getSessionId())) {
|
||||
opponent = game.getChallenger();
|
||||
} else {
|
||||
log.info("Player {} left their game!", sessionId);
|
||||
final String opponentId = sessionId.equals(game.playerOne) ? game.playerTwo : game.playerOne;
|
||||
gameBySession.remove(opponentId);
|
||||
sendToUser(opponentId, StompTopics.OPPONENT_LEFT, "You win!");
|
||||
joinWaitingList(opponentId);
|
||||
opponent = game.getHost();
|
||||
}
|
||||
sendToPlayer(player, Destinations.PLAYER_REPORTS, playerReport);
|
||||
sendToPlayer(opponent, Destinations.OPPONENT_REPORTS, opponentReport);
|
||||
}
|
||||
|
||||
@MessageMapping("/hostGame")
|
||||
public synchronized void hostGame(@Header(SESSION_ID_HEADER) String sessionId) {
|
||||
final Player player = playerBySession.get(sessionId);
|
||||
if (player == null) {
|
||||
log.warn("No player for session {}", sessionId);
|
||||
return;
|
||||
}
|
||||
if (gameByPlayer.containsKey(player)) {
|
||||
log.warn("{} is in a game already", player.getUsername());
|
||||
return;
|
||||
}
|
||||
final Game game = new Game(player);
|
||||
gameById.put(game.id, game);
|
||||
gameByPlayer.put(player, game);
|
||||
log.info("{} hosted a game", player.getUsername());
|
||||
send(Destinations.GAME_HOSTED, game);
|
||||
}
|
||||
|
||||
@MessageMapping("/joinGame")
|
||||
public synchronized void joinGame(Integer gameId, @Header(SESSION_ID_HEADER) String sessionId) {
|
||||
final Player player = playerBySession.get(sessionId);
|
||||
if (player == null) {
|
||||
log.warn("No player for session {}", sessionId);
|
||||
return;
|
||||
}
|
||||
if (gameByPlayer.containsKey(player)) {
|
||||
log.warn("{} is in a game already", player.getUsername());
|
||||
return;
|
||||
}
|
||||
final Game game = gameById.get(gameId);
|
||||
if (game == null) {
|
||||
log.warn("No game with id {}", gameId);
|
||||
return;
|
||||
}
|
||||
if (game.getChallenger() == null) {
|
||||
game.setChallenger(player);
|
||||
gameByPlayer.put(player, game);
|
||||
log.info("{} joined {}'s game", player.getUsername(), game.getHost());
|
||||
send(Destinations.GAME_JOINED, game);
|
||||
|
||||
// Start the game immediately
|
||||
// TODO: require the players to "ready up"
|
||||
game.setAcceptableGuesses(wordRepo.getGuesses());
|
||||
game.setPossibleWords(wordRepo.getWords());
|
||||
final String firstWord = game.newGame();
|
||||
final String firstLetter = String.valueOf(firstWord.charAt(0));
|
||||
log.info("First word: {}", firstWord);
|
||||
final Player playerOne = game.getHost();
|
||||
final Player playerTwo = game.getChallenger();
|
||||
final String[] playerOneMessage = new String[] { firstLetter, playerTwo.getUsername() };
|
||||
final String[] playerTwoMessage = new String[] { firstLetter, playerOne.getUsername() };
|
||||
sendToPlayer(playerOne, Destinations.OPPONENT_JOINED, playerOneMessage);
|
||||
sendToPlayer(playerTwo, Destinations.OPPONENT_JOINED, playerTwoMessage);
|
||||
send(Destinations.GAME_STARTED, new String[] { playerOne.getUsername(), playerTwo.getUsername() });
|
||||
}
|
||||
}
|
||||
|
||||
private void leaveWaitingList(String sessionId) {
|
||||
synchronized (waitingList) {
|
||||
waitingList.remove(sessionId);
|
||||
waitingList.notify();
|
||||
private synchronized void leave(String sessionId) {
|
||||
final Player player = playerBySession.remove(sessionId);
|
||||
if (player == null) {
|
||||
log.warn("No player for session {}", sessionId);
|
||||
return;
|
||||
}
|
||||
final String username = player.getUsername();
|
||||
usernames.remove(username);
|
||||
final Game game = gameByPlayer.remove(player);
|
||||
if (game == null) {
|
||||
log.info("{} left", username);
|
||||
send(Destinations.CHAT, new ChatMessage(null, username + " left"));
|
||||
return;
|
||||
}
|
||||
leaveGame(game, player);
|
||||
}
|
||||
|
||||
@MessageMapping("/leaveGame")
|
||||
public synchronized void leaveGame(@Header(SESSION_ID_HEADER) String sessionId) {
|
||||
final Player player = playerBySession.get(sessionId);
|
||||
if (player == null) {
|
||||
log.warn("No player for session {}", sessionId);
|
||||
return;
|
||||
}
|
||||
final Game game = gameByPlayer.remove(player);
|
||||
if (game == null) {
|
||||
log.warn("{} is not in a game", player.getUsername());
|
||||
return;
|
||||
}
|
||||
leaveGame(game, player);
|
||||
}
|
||||
|
||||
private synchronized void leaveGame(Game game, Player player) {
|
||||
final Player gameHost = game.getHost();
|
||||
final Player gameChallenger = game.getChallenger();
|
||||
if (gameHost == player) {
|
||||
if (gameChallenger == null) {
|
||||
// Close the game
|
||||
gameById.remove(game.id);
|
||||
send(Destinations.GAME_CLOSED, game);
|
||||
} else {
|
||||
// Leave the game
|
||||
game.setHost(gameChallenger);
|
||||
game.setChallenger(null);
|
||||
send(Destinations.GAME_LEFT, new GameLeftMessage(game, player));
|
||||
}
|
||||
} else if (gameChallenger == player) {
|
||||
// Leave the game
|
||||
game.setChallenger(null);
|
||||
send(Destinations.GAME_LEFT, new GameLeftMessage(game, player));
|
||||
}
|
||||
}
|
||||
|
||||
@ -138,6 +232,7 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
|
||||
private void onSessionConnected(SessionConnectedEvent event) {
|
||||
final String sessionId = StompHeaderAccessor.wrap(event.getMessage()).getSessionId();
|
||||
log.info("Session connected: {}", sessionId);
|
||||
playerBySession.put(sessionId, new Player(sessionId));
|
||||
}
|
||||
|
||||
private void onSessionDisconnect(SessionDisconnectEvent event) {
|
||||
@ -146,27 +241,31 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
|
||||
leave(sessionId);
|
||||
}
|
||||
|
||||
@PostConstruct
|
||||
private void postConstruct() {
|
||||
new Thread(new WaitingListListener()).start();
|
||||
@SubscribeMapping("/topic/sessionId")
|
||||
public String onSessionId(@Header(SESSION_ID_HEADER) String sessionId) {
|
||||
return sessionId;
|
||||
}
|
||||
|
||||
@MessageMapping("/practiceGame")
|
||||
public void practiceGame(@Header(SESSION_ID_HEADER) String sessionId) {
|
||||
log.info("Player wants a practice session: {}", sessionId);
|
||||
final Game game = new Game(sessionId, null, wordRepo.getWords(), wordRepo.getGuesses());
|
||||
practiceBySession.put(sessionId, game);
|
||||
final Player player = playerBySession.get(sessionId);
|
||||
log.info("{} wants a practice session", sessionId);
|
||||
final Game game = new Game(player);
|
||||
game.setAcceptableGuesses(wordRepo.getGuesses());
|
||||
game.setPossibleWords(wordRepo.getWords());
|
||||
practiceByPlayer.put(player, game);
|
||||
final String firstWord = game.newGame();
|
||||
final String firstLetter = String.valueOf(firstWord.charAt(0));
|
||||
log.info("First word: {}", firstWord);
|
||||
sendToUser(sessionId, StompTopics.PRACTICE_GAME, firstLetter);
|
||||
sendToPlayer(player, Destinations.PRACTICE_GAME, firstLetter);
|
||||
}
|
||||
|
||||
@MessageMapping("/practiceGuess")
|
||||
public void practiceGuess(String guess, @Header(SESSION_ID_HEADER) String sessionId) {
|
||||
final Player player = playerBySession.get(sessionId);
|
||||
guess = guess.toUpperCase();
|
||||
log.info("Player {} guessed: {}", sessionId, guess);
|
||||
final Game game = practiceBySession.get(sessionId);
|
||||
log.info("{} guessed {}", sessionId, guess);
|
||||
final Game game = practiceByPlayer.get(player);
|
||||
final int[] result = game.evaluate(guess);
|
||||
|
||||
// Generate report
|
||||
@ -181,57 +280,38 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
|
||||
} else {
|
||||
report.setResult(result);
|
||||
}
|
||||
sendToUser(sessionId, StompTopics.PRACTICE_REPORTS, report);
|
||||
sendToPlayer(player, Destinations.PRACTICE_REPORTS, report);
|
||||
}
|
||||
|
||||
private void send(String destination, Object payload) {
|
||||
messagingTemplate.convertAndSend(destination, payload);
|
||||
}
|
||||
|
||||
private void sendToUser(String user, String destination, Object payload) {
|
||||
// TODO: cache the headers?
|
||||
final SimpMessageHeaderAccessor headerAccessor = SimpMessageHeaderAccessor.create(SimpMessageType.MESSAGE);
|
||||
headerAccessor.setSessionId(user);
|
||||
headerAccessor.setLeaveMutable(true);
|
||||
final MessageHeaders headers = headerAccessor.getMessageHeaders();
|
||||
messagingTemplate.convertAndSendToUser(user, destination, payload, headers);
|
||||
private void sendToPlayer(Player player, String destination, Object payload) {
|
||||
sendToSession(player.getSessionId(), destination, payload);
|
||||
}
|
||||
|
||||
/**
|
||||
* Task that spawns a game whenever two players are waiting.
|
||||
*/
|
||||
private class WaitingListListener implements Runnable {
|
||||
private void sendToSession(String sessionId, String destination, Object payload) {
|
||||
// TODO: cache the headers?
|
||||
final SimpMessageHeaderAccessor headerAccessor = SimpMessageHeaderAccessor.create(SimpMessageType.MESSAGE);
|
||||
headerAccessor.setSessionId(sessionId);
|
||||
headerAccessor.setLeaveMutable(true);
|
||||
final MessageHeaders headers = headerAccessor.getMessageHeaders();
|
||||
messagingTemplate.convertAndSendToUser(sessionId, destination, payload, headers);
|
||||
}
|
||||
|
||||
@Override
|
||||
public void run() {
|
||||
while (true) {
|
||||
final String playerOne;
|
||||
final String playerTwo;
|
||||
synchronized (waitingList) {
|
||||
while (waitingList.size() < 2) {
|
||||
try {
|
||||
waitingList.wait();
|
||||
} catch (InterruptedException ok) {
|
||||
ok.printStackTrace();
|
||||
}
|
||||
}
|
||||
playerOne = waitingList.remove(0);
|
||||
playerTwo = waitingList.remove(0);
|
||||
}
|
||||
final Game game = new Game(playerOne, playerTwo, wordRepo.getWords(), wordRepo.getGuesses());
|
||||
gameBySession.put(playerOne, game);
|
||||
gameBySession.put(playerTwo, game);
|
||||
final String firstWord = game.newGame();
|
||||
final String firstLetter = String.valueOf(firstWord.charAt(0));
|
||||
log.info("First word: {}", firstWord);
|
||||
final String playerOneUsername = usernameBySession.get(playerOne);
|
||||
final String playerTwoUsername = usernameBySession.get(playerTwo);
|
||||
final String[] playerOneMessage = new String[] { firstLetter, playerTwoUsername };
|
||||
final String[] playerTwoMessage = new String[] { firstLetter, playerOneUsername };
|
||||
sendToUser(playerOne, StompTopics.OPPONENT_JOINED, playerOneMessage);
|
||||
sendToUser(playerTwo, StompTopics.OPPONENT_JOINED, playerTwoMessage);
|
||||
send(StompTopics.GAME_STARTED, new String[] { playerOneUsername, playerTwoUsername });
|
||||
}
|
||||
@MessageMapping("/setUsername")
|
||||
public synchronized void setUsername(String username, @Header(SESSION_ID_HEADER) String sessionId) {
|
||||
final Player player = playerBySession.get(sessionId);
|
||||
if (usernames.add(username)) {
|
||||
player.setUsername(username);
|
||||
log.info("{} --> {}", sessionId, username);
|
||||
sendToPlayer(player, Destinations.SESSION_USERNAME, new SetUsernameMessage(true, username, null));
|
||||
send(Destinations.USER_JOINED, new Object[] { username, playerBySession.size() });
|
||||
} else {
|
||||
log.warn("{} -/> {} : Username taken", sessionId, username);
|
||||
final SetUsernameMessage response = new SetUsernameMessage(false, null, "Username taken");
|
||||
sendToPlayer(player, Destinations.SESSION_USERNAME, response);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -24,9 +24,10 @@ public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
|
||||
}
|
||||
|
||||
@Override
|
||||
public void configureMessageBroker(MessageBrokerRegistry config) {
|
||||
config.enableSimpleBroker("/topic");
|
||||
config.setApplicationDestinationPrefixes("/app");
|
||||
public void configureMessageBroker(MessageBrokerRegistry registry) {
|
||||
registry.enableSimpleBroker("/topic");
|
||||
registry.setApplicationDestinationPrefixes("/app", "/user");
|
||||
registry.setUserDestinationPrefix("/user");
|
||||
}
|
||||
|
||||
@Override
|
||||
|
||||
@ -2,28 +2,57 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Lingo</title>
|
||||
<title>Lingo | Client</title>
|
||||
<link rel="stylesheet" href="cube-grid.css">
|
||||
<link rel="stylesheet" href="layout.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="usernameDiv" class="jumbotron">
|
||||
<h2>What is your name?</h2>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<input id="username" type="text" class="form-control" maxlength="16" placeholder="Name">
|
||||
</div>
|
||||
<p id="usernameError" class="error-message"></p>
|
||||
<button id="usernameButton" type="button" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="appDiv" class="hidden">
|
||||
<div>
|
||||
<div class="main column">
|
||||
<div class="header row">Lingo</div>
|
||||
<div class="body row nofooter">
|
||||
<div id="canvasDiv" class="hidden">
|
||||
<canvas id="canvas" class="centered" width="600" height="475" tabindex="1"></canvas>
|
||||
<div id="usernameDiv" class="form">
|
||||
<h2>What is your name?</h2>
|
||||
<input id="nicknameInput" type="text" class="form-control" maxlength="16">
|
||||
<p id="usernameError" class="error-message"></p>
|
||||
</div>
|
||||
<div id="appDiv" class="hidden">
|
||||
<div id="lobbyColumn" class="lobby column primary">
|
||||
<div id="vue-app" class="body row noheader nofooter scroll-y">
|
||||
<div class="panel panel-default">
|
||||
<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>
|
||||
<div v-for="game in games">
|
||||
<div v-if="game.started" v-bind:id="'game-' + game.id" class="list-group-item">
|
||||
<strong>{{ game.playerOne }}</strong>
|
||||
is playing with
|
||||
<strong>{{ game.playerTwo }}</strong>
|
||||
</div>
|
||||
<button v-else v-bind:id="'game-' + game.id" @click="joinGame" type="button" class="list-group-item">
|
||||
<strong>{{ game.playerOne }}</strong>
|
||||
wants to play
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button v-if="inGame" @click="leaveGame" type="button">Leave game</button>
|
||||
<button v-else @click="hostGame" type="button">Create a game</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="gameColumn" class="game column">
|
||||
<div class="body row noheader nofooter">
|
||||
<div id="canvasDiv" class="hidden">
|
||||
<canvas id="canvas" class="centered" width="600" height="475" tabindex="1"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -31,7 +60,7 @@
|
||||
<div class="header row">Chat</div>
|
||||
<div id="messageList" class="body row scroll-y"></div>
|
||||
<div class="footer row">
|
||||
<input id="messageInput" placeholder="Chat here..." />
|
||||
<input id="messageInput" placeholder="Type here to chat..." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -24,48 +24,100 @@ var canvas = document.getElementById('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
var client;
|
||||
var sessionId = null;
|
||||
|
||||
var vm = new Vue({
|
||||
el: '#vue-app',
|
||||
data: {
|
||||
games: [],
|
||||
gameId: null
|
||||
},
|
||||
computed: {
|
||||
inGame: function() {
|
||||
return this.gameId !== null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hostGame: function(event) {
|
||||
client.send('/app/hostGame');
|
||||
},
|
||||
joinGame: function(event) {
|
||||
// Discard 'game-' prefix
|
||||
var buttonId = event.target.id;
|
||||
var gameId = buttonId.substr(5);
|
||||
client.send('/app/joinGame', {}, gameId);
|
||||
},
|
||||
leaveGame: function(event) {
|
||||
client.send('/app/leaveGame');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function afterConnected(stompConnectedFrame) {
|
||||
console.log('Connected to STOMP endpoint')
|
||||
var sessionIdTopic = '/user/topic/sessionId';
|
||||
var sessionIdSubscription = null;
|
||||
var sessionIdHandler = function(message) {
|
||||
console.log('Session ID: ' + message.body);
|
||||
sessionId = message.body;
|
||||
sessionIdSubscription.unsubscribe();
|
||||
}
|
||||
sessionIdSubscription = client.subscribe(sessionIdTopic, sessionIdHandler);
|
||||
}
|
||||
|
||||
function main() {
|
||||
|
||||
client = Stomp.over(new SockJS('/stomp'));
|
||||
client.connect({}, afterConnected);
|
||||
|
||||
var usernameDiv = document.getElementById('usernameDiv');
|
||||
var usernameInput = document.getElementById('username');
|
||||
var usernameButton = document.getElementById('usernameButton');
|
||||
var usernameError = document.getElementById('usernameError');
|
||||
var submitUsernameFunction = function() {
|
||||
var usernameValue = usernameInput.value.trim();
|
||||
if (usernameValue.length === 0) {
|
||||
return;
|
||||
var usernameInput = document.getElementById('nicknameInput');
|
||||
|
||||
var usernameTopic = '/user/topic/sessionUsername';
|
||||
var usernameSubscription = null;
|
||||
var usernameHandler = function(message) {
|
||||
var response = JSON.parse(message.body);
|
||||
if (response.success === true) {
|
||||
console.log('Username: ' + response.username);
|
||||
myUsername = response.username;
|
||||
start();
|
||||
usernameDiv.classList.add('hidden');
|
||||
appDiv.classList.remove('hidden');
|
||||
} else {
|
||||
usernameError.innerHTML = response.errorMessage;
|
||||
}
|
||||
myUsername = usernameValue;
|
||||
localStorage.setItem('lingo.username', myUsername);
|
||||
console.log('My username: ' + myUsername);
|
||||
start();
|
||||
usernameDiv.classList.add('hidden');
|
||||
appDiv.classList.remove('hidden');
|
||||
}
|
||||
usernameButton.addEventListener('click', submitUsernameFunction);
|
||||
};
|
||||
|
||||
usernameInput.focus();
|
||||
usernameInput.addEventListener('keydown', function(e) {
|
||||
if (e.keyCode === KEYCODE_RETURN) {
|
||||
e.preventDefault();
|
||||
submitUsernameFunction();
|
||||
if (sessionId === null) {
|
||||
usernameError.innerHTML = 'Not connected to server';
|
||||
return;
|
||||
}
|
||||
var usernameValue = usernameInput.value.trim();
|
||||
if (usernameValue.length === 0) {
|
||||
usernameError.innerHTML = 'Name cannot be empty';
|
||||
return;
|
||||
}
|
||||
if (usernameSubscription === null) {
|
||||
usernameSubscription = client.subscribe(usernameTopic, usernameHandler);
|
||||
client.subscribe('/topic/userJoined', onUserJoined);
|
||||
}
|
||||
client.send('/app/setUsername', {}, usernameValue);
|
||||
}
|
||||
});
|
||||
usernameInput.addEventListener('keyup', function(e) {
|
||||
if (e.keyCode === KEYCODE_RETURN) {
|
||||
return;
|
||||
}
|
||||
var usernameValue = usernameInput.value.trim();
|
||||
if (usernameValue.length === 0) {
|
||||
usernameError.innerHTML = 'Name cannot be empty.';
|
||||
usernameButton.disabled = true;
|
||||
} else {
|
||||
if (usernameValue.length !== 0) {
|
||||
usernameError.innerHTML = '';
|
||||
usernameButton.disabled = false;
|
||||
}
|
||||
});
|
||||
var storedUsername = localStorage.getItem('lingo.username');
|
||||
if (storedUsername === null) {
|
||||
usernameInput.value = 'Alex Trebek';
|
||||
} else {
|
||||
usernameInput.value = storedUsername;
|
||||
}
|
||||
}
|
||||
|
||||
function start() {
|
||||
@ -80,18 +132,16 @@ function start() {
|
||||
reset();
|
||||
repaint();
|
||||
|
||||
client = Stomp.over(new SockJS('/stomp'));
|
||||
|
||||
client.connect({}, function(frame) {
|
||||
subscribeToChat();
|
||||
subscribeToGameStarted();
|
||||
subscribeToOpponentJoined();
|
||||
subscribeToOpponentLeft();
|
||||
subscribeToOpponentReports();
|
||||
subscribeToPlayerReports();
|
||||
subscribeToUserJoined();
|
||||
client.send('/app/lingo/join', {}, myUsername);
|
||||
});
|
||||
client.subscribe('/topic/chat', onChat);
|
||||
client.subscribe('/topic/gameClosed', onGameClosed);
|
||||
client.subscribe('/topic/gameHosted', onGameHosted);
|
||||
client.subscribe('/topic/gameJoined', onGameJoined);
|
||||
client.subscribe('/topic/gameLeft', onGameLeft);
|
||||
client.subscribe('/topic/gameStarted', onGameStarted);
|
||||
client.subscribe('/user/topic/opponentJoined', onOpponentJoined);
|
||||
client.subscribe('/user/topic/opponentLeft', onOpponentLeft);
|
||||
client.subscribe('/user/topic/opponentReports', onOpponentReport);
|
||||
client.subscribe('/user/topic/playerReports', onPlayerReport);
|
||||
}
|
||||
|
||||
// special keys
|
||||
@ -104,7 +154,7 @@ function addKeydownListener() {
|
||||
}
|
||||
else if (e.which === KEYCODE_RETURN) {
|
||||
if (myGuess.length === 5) {
|
||||
client.send("/app/lingo/guess", {}, myGuess);
|
||||
client.send("/app/guess", {}, myGuess);
|
||||
myGuess = '';
|
||||
repaint();
|
||||
}
|
||||
@ -138,8 +188,8 @@ function addChatMessageListener() {
|
||||
return;
|
||||
}
|
||||
messageInput.value = '';
|
||||
client.send('/app/lingo/chat', {}, text);
|
||||
addChatMessage('Me', text);
|
||||
client.send('/app/chat', {}, text);
|
||||
addChatMessage(myUsername, text);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -147,7 +197,7 @@ function addChatMessageListener() {
|
||||
function addChatMessage(sender, body) {
|
||||
var messageList = document.getElementById('messageList');
|
||||
var usernameNode = document.createElement('strong');
|
||||
var usernameTextNode = document.createTextNode(sender)
|
||||
var usernameTextNode = document.createTextNode(sender);
|
||||
usernameNode.appendChild(usernameTextNode);
|
||||
var messageTextNode = document.createTextNode(' ' + body);
|
||||
var messageItem = document.createElement('div');
|
||||
@ -315,6 +365,17 @@ function isValidResult(result) {
|
||||
return true;
|
||||
}
|
||||
|
||||
function removeGame(gameId) {
|
||||
var indexToRemove = null;
|
||||
for (var i = 0; i < vm.games.length; i++) {
|
||||
if (vm.games[i].id === gameId) {
|
||||
indexToRemove = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
vm.games.splice(indexToRemove, 1);
|
||||
}
|
||||
|
||||
function repaint() {
|
||||
// clear the canvas
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
@ -340,120 +401,198 @@ function reset(firstLetter, clearScore) {
|
||||
}
|
||||
}
|
||||
|
||||
function subscribeToChat() {
|
||||
client.subscribe('/topic/lingo/chat', function(message) {
|
||||
var chatMessage = JSON.parse(message.body);
|
||||
var messageSender = chatMessage.username;
|
||||
var messageBody = chatMessage.message;
|
||||
if (messageSender === null) {
|
||||
addChatAnnouncement(messageBody);
|
||||
} else if (messageSender === myUsername) {
|
||||
console.log('Ignoring message sent by myself')
|
||||
} else {
|
||||
console.log('Message from ' + messageSender + ": " + messageBody);
|
||||
addChatMessage(messageSender, messageBody);
|
||||
}
|
||||
});
|
||||
function toggleView() {
|
||||
var lobbyColumn = document.getElementById('lobbyColumn');
|
||||
var gameColumn = document.getElementById('gameColumn')
|
||||
if (lobbyColumn.classList.contains('primary')) {
|
||||
lobbyColumn.classList.remove('primary');
|
||||
} else {
|
||||
lobbyColumn.classList.add('primary');
|
||||
}
|
||||
if (gameColumn.classList.contains('primary')) {
|
||||
gameColumn.classList.remove('primary');
|
||||
} else {
|
||||
gameColumn.classList.add('primary');
|
||||
}
|
||||
}
|
||||
|
||||
function subscribeToGameStarted() {
|
||||
client.subscribe('/topic/lingo/gameStarted', function(message) {
|
||||
var report = JSON.parse(message.body);
|
||||
var playerOne = report[0];
|
||||
var playerTwo = report[1];
|
||||
if (playerOne === myUsername) {
|
||||
addChatAnnouncement('You are playing with ' + playerTwo);
|
||||
} else if (playerTwo === myUsername) {
|
||||
addChatAnnouncement('You are playing with ' + playerOne);
|
||||
} else {
|
||||
addChatAnnouncement(playerOne + ' is playing with ' + playerTwo);
|
||||
}
|
||||
});
|
||||
function onChat(message) {
|
||||
var chatMessage = JSON.parse(message.body);
|
||||
var messageSender = chatMessage.username;
|
||||
var messageBody = chatMessage.message;
|
||||
if (messageSender === null) {
|
||||
addChatAnnouncement(messageBody);
|
||||
} else if (messageSender === myUsername) {
|
||||
// Ignore messages sent by yourself
|
||||
} else {
|
||||
console.log('Message from ' + messageSender + ": " + messageBody);
|
||||
addChatMessage(messageSender, messageBody);
|
||||
}
|
||||
}
|
||||
|
||||
function subscribeToOpponentJoined() {
|
||||
client.subscribe('/user/topic/lingo/opponentJoined', function(message) {
|
||||
var report = JSON.parse(message.body);
|
||||
var firstLetter = report[0];
|
||||
opponentUsername = report[1];
|
||||
console.log('Opponent username: ' + opponentUsername);
|
||||
reset(firstLetter, true);
|
||||
canvasDiv.classList.remove('hidden');
|
||||
function onGameClosed(message) {
|
||||
var game = JSON.parse(message.body);
|
||||
var gameId = game.id;
|
||||
var gameHost = game.host.username;
|
||||
if (gameHost === myUsername) {
|
||||
vm.gameId = null;
|
||||
}
|
||||
console.log(gameHost + ' closed Game ' + gameId);
|
||||
removeGame(gameId);
|
||||
}
|
||||
|
||||
function onGameHosted(message) {
|
||||
var game = JSON.parse(message.body);
|
||||
var gameId = game.id;
|
||||
var gameHost = game.host.username;
|
||||
if (gameHost === myUsername) {
|
||||
vm.gameId = gameId;
|
||||
}
|
||||
console.log(gameHost + ' hosted Game ' + gameId);
|
||||
vm.games.push({ id: gameId, playerOne: gameHost, started: false });
|
||||
}
|
||||
|
||||
function onGameJoined(message) {
|
||||
var game = JSON.parse(message.body);
|
||||
var gameId = game.id;
|
||||
var gameHost = game.host.username;
|
||||
var gameChallenger = game.challenger.username;
|
||||
if (gameChallenger === myUsername) {
|
||||
vm.gameId = gameId;
|
||||
}
|
||||
console.log(gameChallenger + ' joined ' + gameHost + "'s game");
|
||||
for (var i = 0; i < vm.games.length; i++) {
|
||||
if (vm.games[i].id === gameId) {
|
||||
vm.games[i].playerTwo = gameChallenger;
|
||||
vm.games[i].started = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (gameHost === myUsername || gameChallenger === myUsername) {
|
||||
toggleView();
|
||||
}
|
||||
}
|
||||
|
||||
function onGameLeft(message) {
|
||||
var report = JSON.parse(message.body);
|
||||
var game = report.game;
|
||||
var gameId = game.id;
|
||||
var gameHost = game.host.username;
|
||||
var gameLeaver = report.gameLeaver.username;
|
||||
var previousPlayers = [];
|
||||
for (var i = 0; i < vm.games.length; i++) {
|
||||
if (vm.games[i].id === gameId) {
|
||||
previousPlayers.push(vm.games[i].playerOne);
|
||||
previousPlayers.push(vm.games[i].playerTwo);
|
||||
vm.games[i].playerOne = gameHost;
|
||||
vm.games[i].playerTwo = game.challenger ? game.challenger.username : null;
|
||||
vm.games[i].started = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
console.log(gameLeaver + ' left ' + gameHost + "'s game");
|
||||
if (gameLeaver === myUsername) {
|
||||
vm.gameId = null;
|
||||
}
|
||||
if (previousPlayers.indexOf(myUsername) != -1) {
|
||||
onOpponentLeft();
|
||||
toggleView();
|
||||
}
|
||||
}
|
||||
|
||||
function onGameStarted(message) {
|
||||
var report = JSON.parse(message.body);
|
||||
var playerOne = report[0];
|
||||
var playerTwo = report[1];
|
||||
if (playerOne === myUsername) {
|
||||
addChatAnnouncement('You are playing with ' + playerTwo);
|
||||
} else if (playerTwo === myUsername) {
|
||||
addChatAnnouncement('You are playing with ' + playerOne);
|
||||
} else {
|
||||
addChatAnnouncement(playerOne + ' is playing with ' + playerTwo);
|
||||
}
|
||||
}
|
||||
|
||||
function onOpponentJoined(message) {
|
||||
var report = JSON.parse(message.body);
|
||||
var firstLetter = report[0];
|
||||
opponentUsername = report[1];
|
||||
console.log('Opponent username: ' + opponentUsername);
|
||||
reset(firstLetter, true);
|
||||
canvasDiv.classList.remove('hidden');
|
||||
repaint();
|
||||
}
|
||||
|
||||
function onOpponentLeft(message) {
|
||||
opponentUsername = null;
|
||||
lastWord = null;
|
||||
canvasDiv.classList.add('hidden');
|
||||
repaint();
|
||||
}
|
||||
|
||||
function onOpponentReport(message) {
|
||||
var report = JSON.parse(message.body);
|
||||
if (report.correct === true) {
|
||||
var guess = report.guess;
|
||||
var firstLetter = report.firstLetter;
|
||||
console.log('Opponent guessed correctly! ' + guess);
|
||||
opponentScore = opponentScore + 100;
|
||||
lastWord = guess;
|
||||
reset(firstLetter, false);
|
||||
repaint();
|
||||
});
|
||||
}
|
||||
|
||||
function subscribeToOpponentLeft() {
|
||||
client.subscribe('/user/topic/lingo/opponentLeft', function(message) {
|
||||
opponentUsername = null;
|
||||
lastWord = null;
|
||||
canvasDiv.classList.add('hidden');
|
||||
} else {
|
||||
var result = report.result;
|
||||
console.log('Opponent result: ' + result);
|
||||
opponentResults.push(result);
|
||||
repaint();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function subscribeToOpponentReports() {
|
||||
client.subscribe('/user/topic/lingo/opponentReports', function(message) {
|
||||
var report = JSON.parse(message.body);
|
||||
if (report.correct === true) {
|
||||
var guess = report.guess;
|
||||
var firstLetter = report.firstLetter;
|
||||
console.log('Opponent guessed correctly! ' + guess);
|
||||
opponentScore = opponentScore + 100;
|
||||
lastWord = guess;
|
||||
reset(firstLetter, false);
|
||||
repaint();
|
||||
function onPlayerReport(message) {
|
||||
var report = JSON.parse(message.body);
|
||||
console.log('My report: ' + report);
|
||||
if (report.correct === true) {
|
||||
var guess = report.guess;
|
||||
var firstLetter = report.firstLetter;
|
||||
console.log('I guessed correctly!');
|
||||
myScore = myScore + 100;
|
||||
lastWord = guess;
|
||||
reset(firstLetter, false);
|
||||
repaint();
|
||||
} else {
|
||||
var guess = report.guess;
|
||||
var result = report.result;
|
||||
console.log('My result: ' + result);
|
||||
// TODO: use isValidResult function
|
||||
if (result[0] === 9) {
|
||||
myGuesses.push('-----');
|
||||
} else {
|
||||
var result = report.result;
|
||||
console.log('Opponent result: ' + result);
|
||||
opponentResults.push(result);
|
||||
repaint();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function subscribeToPlayerReports() {
|
||||
client.subscribe('/user/topic/lingo/playerReports', function(message) {
|
||||
var report = JSON.parse(message.body);
|
||||
console.log('My report: ' + report);
|
||||
if (report.correct === true) {
|
||||
var guess = report.guess;
|
||||
var firstLetter = report.firstLetter;
|
||||
console.log('I guessed correctly!');
|
||||
myScore = myScore + 100;
|
||||
lastWord = guess;
|
||||
reset(firstLetter, false);
|
||||
repaint();
|
||||
} else {
|
||||
var guess = report.guess;
|
||||
var result = report.result;
|
||||
console.log('My result: ' + result);
|
||||
// TODO: use isValidResult function
|
||||
if (result[0] === 9) {
|
||||
myGuesses.push('-----');
|
||||
} else {
|
||||
for (var i = 0; i < 5; i++) {
|
||||
if (result[i] === 2) {
|
||||
myProgress[i] = guess[i];
|
||||
}
|
||||
for (var i = 0; i < 5; i++) {
|
||||
if (result[i] === 2) {
|
||||
myProgress[i] = guess[i];
|
||||
}
|
||||
myGuesses.push(guess);
|
||||
}
|
||||
myResults.push(result);
|
||||
repaint();
|
||||
myGuesses.push(guess);
|
||||
}
|
||||
});
|
||||
myResults.push(result);
|
||||
repaint();
|
||||
}
|
||||
}
|
||||
|
||||
function subscribeToUserJoined() {
|
||||
client.subscribe('/topic/lingo/userJoined', function(message) {
|
||||
var username = message.body;
|
||||
if (username === myUsername) {
|
||||
addChatAnnouncement('You joined');
|
||||
function onUserJoined(message) {
|
||||
var report = JSON.parse(message.body);
|
||||
var username = report[0];
|
||||
var numUsers = report[1];
|
||||
if (username === myUsername) {
|
||||
addChatAnnouncement('Welcome to Lingo!');
|
||||
if (numUsers === 1) {
|
||||
addChatAnnouncement('You are the only player online');
|
||||
} else {
|
||||
addChatAnnouncement(username + ' joined');
|
||||
addChatAnnouncement('There are ' + numUsers + ' players online');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
addChatAnnouncement(username + ' joined');
|
||||
}
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Lingo</title>
|
||||
<title>Lingo | Home</title>
|
||||
<link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -54,7 +54,7 @@ body {
|
||||
}
|
||||
|
||||
.body.row.noheader {
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.footer.row {
|
||||
@ -70,3 +70,23 @@ body {
|
||||
.chat.column .body {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.lobby.column {
|
||||
width: 300px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.lobby.column .body {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.lobby.column.primary {
|
||||
width: inherit;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.game.column.primary {
|
||||
left: 300px;
|
||||
right: 0;
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@ function start() {
|
||||
client.connect({}, function(frame) {
|
||||
subscribeToPracticeGame();
|
||||
subscribeToPracticeReports();
|
||||
client.send('/app/lingo/practiceGame');
|
||||
client.send('/app/practiceGame');
|
||||
});
|
||||
}
|
||||
|
||||
@ -52,7 +52,7 @@ function addKeydownListener() {
|
||||
// return
|
||||
else if (e.which === 13) {
|
||||
if (myGuess.length === 5) {
|
||||
client.send("/app/lingo/practiceGuess", {}, myGuess);
|
||||
client.send("/app/practiceGuess", {}, myGuess);
|
||||
myGuess = '';
|
||||
repaint();
|
||||
}
|
||||
@ -223,7 +223,7 @@ function reset(firstLetter, clearScore) {
|
||||
}
|
||||
|
||||
function subscribeToPracticeGame() {
|
||||
client.subscribe('/user/topic/lingo/practiceGame', function(message) {
|
||||
client.subscribe('/user/topic/practiceGame', function(message) {
|
||||
var firstLetter = message.body;
|
||||
reset(firstLetter, true);
|
||||
repaint();
|
||||
@ -231,7 +231,7 @@ function subscribeToPracticeGame() {
|
||||
}
|
||||
|
||||
function subscribeToPracticeReports() {
|
||||
client.subscribe('/user/topic/lingo/practiceReports', function(message) {
|
||||
client.subscribe('/user/topic/practiceReports', function(message) {
|
||||
var report = JSON.parse(message.body);
|
||||
console.log('My report: ' + report);
|
||||
if (report.correct === true) {
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: cursive;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -28,7 +28,7 @@ button:hover:disabled {
|
||||
/* Main area */
|
||||
|
||||
.header {
|
||||
font-size: 1.4em;
|
||||
font-size: 1.6em;
|
||||
color: white;
|
||||
background: steelblue;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
|
||||
@ -46,6 +46,7 @@ button:hover:disabled {
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.message-item.first {
|
||||
@ -59,23 +60,85 @@ button:hover:disabled {
|
||||
#messageInput {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 100%;
|
||||
padding-left: 10px;
|
||||
background-color: linen;
|
||||
border-color: black;
|
||||
border-left: none;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
/* Username page */
|
||||
|
||||
.jumbotron {
|
||||
margin: 48px auto;
|
||||
padding: 48px 60px;
|
||||
width: 80%;
|
||||
background-color: #eee;
|
||||
border-radius: 6px;
|
||||
#messageInput::-webkit-input-placeholder {
|
||||
color: steelblue;
|
||||
}
|
||||
|
||||
.jumbotron h2 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
#messageInput::-moz-placeholder {
|
||||
color: steelblue;
|
||||
}
|
||||
|
||||
#messageInput:-ms-input-placeholder {
|
||||
color: steelblue;
|
||||
}
|
||||
|
||||
/* Lobby pane */
|
||||
|
||||
.panel {
|
||||
margin: 20px 0;
|
||||
border: 1px solid transparent;
|
||||
border-color: #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
background-color: lightgray;
|
||||
border-color: #ddd;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
color: steelblue;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.panel-heading+.list-group .list-group-item:first-item {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.panel>.list-group .list-group-item {
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: -1px;
|
||||
background-color: white;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
button.list-group-item {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
button.list-group-item:hover {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
/* Nickname pane */
|
||||
|
||||
.form {
|
||||
padding-top: 48px;
|
||||
text-align: center;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
@ -83,18 +146,17 @@ button:hover:disabled {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
width: 300px;
|
||||
font-size: 200%;
|
||||
letter-spacing: 3px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid black;
|
||||
color: steelblue;
|
||||
outline: none;
|
||||
padding-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Waiting pane */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user