MagicTableTop/join.html at master · mayo320/MagicTableTop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Joining</title>
		<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="/css/playerjoin.css">
	</head>
	<body>
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="/socket.io/socket.io.js"></script>

		<script type="text/javascript">
			var print = console.log;
			var playerID = -1;
			var socket = io("/player");
			var joined = false;
			socket.on("ev-playgame", function(gameURL){
				window.location.href = gameURL;
			});
			socket.on("ev-joined", function(pinfo){
				print(pinfo);
				$("#joining-page").addClass('hidden');
				joined = true;
				var $joined = $("#joined-page");
				$joined.removeClass('hidden');
				$joined.find(".pname").html(pinfo.name);
			});
			socket.on("ev-sethost", function(flag){
				if (flag) $("#gamelist").removeClass("hidden");
				else $("#gamelist").addClass("hidden");
			});


			function avc(){
				var v = joined ? $("#joined-page .playername").val() : $("#joining-page .playername").val();
				v = v.replace(/<\/?[^>]+(>|$)/g, ""); // strip HTML tags

				if (v.length < 1){
					alert("Your name is too short!");
					return;
				}
				if (v.length > 15){
					alert("Your name is too LONG! (max 10 characters)");
					return;
				}
				socket.emit("ev-playerjoin", v);
			}
			function playGame(gameName){
				socket.emit("ev-playgame", gameName);
			}
		</script>

		<div id="joining-page" class="">
			<h1>Hello Player</h1> <hr>
			<h3>What is your name?</h3>
			<input type="text" class="playername" maxlength="10">
			<div> <hr>
			<button class="btn btn-default" onclick="avc()"><h3>Join</h3></button>
			</div>
		</div>

		<div id="joined-page" class="hidden">
			<h1>Hello <span class="pname"></span></h1> <hr>
			<h3>Change your name?</h3>
			<input type="text" class="playername" maxlength="20">

			<button class="btn btn-default" onclick="avc()">Change</button>

			<hr>
		</div>


		<div id="gamelist" class="hidden">
			<h3>You are the Host</h3>
			<h5>When everyone is ready, click on a game to start the game.</h5>
			<hr>
			<ul>
			</ul>

			<div class="template hidden">
				<li onclick="" class="">
					<h4 class="name">Game name</h4>
					<img src="https://www.mindgamesbrisbane.com/wp-content/uploads/2018/10/689070013563.jpeg">
				</li>
			</div>
		</div>


		<script type="text/javascript">
			var games = {{GAMES}};

			var $ul = $("#gamelist ul");
			var template = $("#gamelist .template").html();

			for(var i in games){
				var g = games[i];
				// var li = "<li onclick='playGame(\""+g.folder_name+"\")'>";
				$ul.append(template);
				var li = $ul.find("li:last");
				li.find('h4').html(g.name);
				li.attr("onclick", "playGame('"+g.folder_name+"')");
				li.find("img").attr("src", g.cover);
			}
		</script>
	</body>
</html>