~demindiro/werewolves

04ee7b16b9ab0a26a7bde56a8dc577c38c49d756 — David Hoppenbrouwers 10 months ago 58f557b + b85bf25 master
Merge branch 'ui'

I forgot what exactly I changed but it's quite a bit
3 files changed, 111 insertions(+), 36 deletions(-)

M templates/base.html
M templates/index.html
M web.py
M templates/base.html => templates/base.html +57 -1
@@ 2,8 2,64 @@
<html>
	<head>
		<title>{{ gettext('Werewolves') }}</title>
		<meta name="viewport" content="width=device-width" />
		<style>
			@import url("https://static.salt-inc.org/fonts/comic-neue.css");

			* {
				text-align: center;
				font-family: Comic Neue;
				width: 100%;
			}

			html, body {
				height: 100%;
			}

			html {
				display: table;
				margin: auto;
			}

			body {
				transition-duration: 2s;
				display: table-cell;
				vertical-align: middle;
				max-width: 500px;
			}

			input {
				display: block;
				margin: auto;
				border: 1px solid #ccc;
				border-radius: 12px;
				padding: 4px 16px;
				margin-top: 2px;
				width: 100%;
				box-sizing: border-box;
				max-width: 200px;
			}

			input[type=text] {
				background: white;
			}

			input[type=submit], input[type=button] {
				background: #eee;
			}

			body.day {
				background-color: lightblue;
				color: black;
			}

			body.night {
				background-color: #23212d;
				color: white;
			}
		</style>
	</head>
	<body>
	<body class="day">
		{% block body %}
		<h1 id="title">{{ gettext('Werewolves') }}</h1>
		<noscript>{{ gettext('This game requires Javascript to be enabled') }}</noscript>

M templates/index.html => templates/index.html +53 -34
@@ 3,19 3,27 @@
	{{ super() }}
	<p id="error" style="display:none"></p>
	<div id="index" style="display:none">
		<input class="code" type="text" placeholder="{{ gettext('Code') }}" />
		<input type="button" onclick="showGame()" value="{{ gettext('View game') }}" />
		<form onsubmit="showGame(); return false">
			<input class="code" type="text" placeholder="{{ gettext('Code') }}" />
			<input type="submit" value="{{ gettext('View game') }}" />
		</form>
		<br />
		<input class="name" type="text" placeholder="{{ gettext('Username') }}" />
		<input type="button" onclick="createGame()" value="{{ gettext('Create game') }}" />
		<form onsubmit="createGame(); return false">
			<input class="name" type="text" placeholder="{{ gettext('Username') }}" />
			<input type="submit" value="{{ gettext('Create game') }}" />
		</form>
	</div>
	<div id="game" style="display:none">
		<h2 class="code"></h2>
		<p id="game-players"></p>
		<input id="game-start" type="button" onclick="startGame()" value="{{ gettext('Start game') }}" />
		<form onsubmit="startGame(); return false">
			<input id="game-start" type="submit" value="{{ gettext('Start game') }}" />
		</form>
		<br />
		<input id="game-name" type="text" placeholder="{{ gettext('Username') }}" />
		<input id="game-join" type="button" onclick="joinGame()" value="{{ gettext('Join') }}" />
		<form id="game-join" onsubmit="joinGame(); return false">
			<input id="game-name" type="text" placeholder="{{ gettext('Username') }}" />
			<input type="submit" value="{{ gettext('Join') }}" />
		</form>
	</div>
	<script>
		function showError(text) {


@@ 37,6 45,11 @@
		}


		function setDay(isDay) {
			document.body.className = isDay ? "day" : "night"
		}


		function requestGet(url, callback) {
			let req = new XMLHttpRequest()
			req.addEventListener("load", callback)


@@ 72,30 85,25 @@
					return
				}
			}
			request("get", "{{ url_for('api.get_game_info', code='__code') }}"
					.replace("__code", code), showRequestHandler(code))
			requestGet("{{ url_for('api.get_game_info', code='__code') }}"
					.replace("__code", code), function (e) {
				if (e.target.status === 200) {
					window.location.href = "{{ url_for('index', code='__code') }}"
							.replace("__code", code)
				}
			})
		}


		function createGame() {
			let data = { name: getField("index", "name").value }
			requestPost("{{ url_for('api.create_game') }}", data, function(e) {
				let code = JSON.parse(e.target.response)["code"]
				history.pushState(null, "", "/" + code + "/")
				setVisible("index", false)
				setVisible("game", true)
			})
		}


		function showRequestHandler(code) {
			return function(e) {
				if (this.status > 0) {

				} else {
					showError("Failed to show game")
				if (e.target.status === 201) {
					let code = JSON.parse(e.target.response)["code"]
					window.location.href = "{{ url_for('index', code='__code') }}"
							.replace("__code", code)
				}
			}
			})
		}




@@ 135,7 143,7 @@
			let players = info["players"] || []
			setVisible("game-players", false)
			setVisible("game-start", false)
			if (info["players"].indexOf(info["name"]) >= 0) {
			if (info["players"].indexOf(info["name"]) >= 0 || activity != "waiting") {
				setVisible("game-name", false)
				setVisible("game-join", false)
			} else {


@@ 148,26 156,28 @@
					document.getElementById("title").textContent = "Waiting for players"
					setVisible("game-players", true)
					setVisible("game-start", true)
					let text = ""
					for (let i = 0; i < players.length; i++) {
						text += players[i] + ", "
					let text = players.length > 0 ? players[0] : ""
					for (let i = 1; i < players.length; i++) {
						text += ", " + players[i]
					}
					document.getElementById("game-players").textContent = text
					break
				case "wolves":
					document.getElementById("title").textContent = "The wolves awaken..."
					setVisible("game-players", true)
					getActivityInfoWolves(info["state"])
					getActivityInfoWolves(info["state"] || [])
					setDay(false)
					break
				case "vote":
					document.getElementById("title").textContent = "The village votes..."
					setVisible("game-players", true)
					getActivityInfoVote(info["state"])
					getActivityInfoVote(info["state"] || [])
					setDay(true)
					break
				case "finished":
					document.getElementById("title").textContent = "Game over!"
					setVisible("game-players", true)
					getActivityInfoFinished(info["state"])
					getActivityInfoFinished(info["state"] || [])
					break
				default:
					document.getElementById("title").textContent = "Unknown activity: " + activity


@@ 177,17 187,19 @@


		function getActivityInfoWolves(state) {
			createVoteButtons(state["options"], "wolves", state["vote_count"], state["vote"])
			createVoteButtons(state["options"] || [], "wolves", state["vote_count"], state["vote"])
		}


		function getActivityInfoVote(state) {
			createVoteButtons(state["options"], "vote", state["vote_count"], state["vote"])
			createVoteButtons(state["options"] || [], "vote", state["vote_count"], state["vote"])
		}


		function getActivityInfoFinished(state) {
			document.getElementById("game-players").textContent = "Winners: " + state["winners"]
			console.log(state)
			setDay(state["winners"] === "citizens")
		}




@@ 230,7 242,14 @@
			}
		}

		(function() {

		window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
			alert("Error occured: " + errorMsg + "\n\nURL: " + url + "\nLine: " + lineNumber);
			return false;
		}


		!(function() {
			if (getGameCode() === "") {
				setVisible("index", true)
				setVisible("game", false)

M web.py => web.py +1 -1
@@ 38,4 38,4 @@ def get_status():


if __name__ == '__main__':
    app.run(port=5000, threaded=True)
    app.run(port=5000, threaded=True, host='0.0.0.0')