jonas/ultimate_tictactoe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

friends

Browse Source
This commit is contained in:
Jonas Weinz 2019-03-24 16:43:29 +01:00
parent 5f7b231d60
commit fea8e43ee2
8 changed files with 230 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -10,6 +10,7 @@
</head> </head>
<body> <body>
<div id="main-container" class="main-container"></div> <div id="main-container" class="main-container"></div>
<script src="tools.js"></script>
<script src="settings.js"></script> <script src="settings.js"></script>
<script src="player.js"></script> <script src="player.js"></script>
<script src="tile.js"></script> <script src="tile.js"></script>

27
infocontainer.js
View File

@ -37,6 +37,33 @@ class Infocontainer
return l; return l;
} }
create_double_button(text, option)
{
var div = document.createElement("div");
div.className = "option-button-container";
var b1 = document.createElement("button");
var b2 = document.createElement("button");
b1.style.width = "10%";
b1.className = "infobar-button";
b2.className = "infobar-button";
b1.style.width = "80%";
b2.style.width = "20%";
b1.appendChild(document.createTextNode(text));
b2.appendChild(document.createTextNode(option));
div.appendChild(b1);
div.appendChild(b2);
this.container.appendChild(div);
return [div, b1,b2];
}
hide() hide()
{ {
this.container.style.display = "none"; this.container.style.display = "none";

27
main.js
View File

@ -22,37 +22,42 @@ create_game_container = main_menu.create_infocontainer();
create_game_container.create_label("Start Local Game"); create_game_container.create_label("Start Local Game");
b_local_game = create_game_container.create_button("Local Game"); b_local_game = create_game_container.create_button("Local Game");
// register container: // register container:
register_container = main_menu.create_infocontainer(); register_container = main_menu.create_infocontainer();
register_container.create_label("Login to play online"); register_container.create_label("Login to play online");
i_register_username = register_container.create_input("username"); i_register_username = register_container.create_input("username");
i_register_pw = register_container.create_input("password", true); i_register_pw = register_container.create_input("password", true);
b_register = register_container.create_button("register/login"); b_register = register_container.create_button("register/login");
register_container.create_label("(creates new account for a new username)"); //register_container.create_label("(creates new account for a new username)");
// logout: // logout:
logout_container = sub_menu.create_infocontainer(); logout_container = main_menu.create_infocontainer();
l_username = logout_container.create_label("logged in as: "); l_username = logout_container.create_label("logged in as: ");
b_logout = logout_container.create_button("logout"); b_logout = logout_container.create_button("logout");
// match control
match_control = sub_menu.create_infocontainer();
b_end_game = match_control.create_button("Close Match");
// fill subcontainer: // fill subcontainer:
match_slot_container = sub_menu.create_infocontainer(); match_slot_container = sub_menu.create_infocontainer();
match_slot_container.create_label("Running Matches<br>(click to open)"); match_slot_container.create_label("Running Matches<br>(click to open)");
// local match control:
match_control = sub_menu.create_infocontainer();
b_end_game = match_control.create_button("Close Match");
// search match: // search match:
search_match_container = main_menu.create_infocontainer(); search_match_container = sub_menu.create_infocontainer();
search_match_container.create_label("Create Online Match"); search_match_container.create_label("Create Online Match");
b_match_search = search_match_container.create_button("random match"); b_match_search = search_match_container.create_button("random match");
search_match_container.create_label("<p> </p>");
l_match_op = search_match_container.create_input("player name"); l_match_op = search_match_container.create_input("player name");
b_match_invite = search_match_container.create_button("invite player"); b_match_invite = search_match_container.create_button("invite player");
search_match_container.create_label("Invite friends:")
//status: //status:
@ -222,7 +227,7 @@ reconnect = function()
{ {
connection.close(); connection.close();
} }
connection = new WebsocketConnection(server_url, server_port, grid, l_status, match_slot_container, match_control, login_callback, on_connection_error); connection = new WebsocketConnection(server_url, server_port, grid, l_status, match_slot_container, match_control, search_match_container, login_callback, on_connection_error);
connection.reconnect(session_id); connection.reconnect(session_id);
} }
} }
@ -239,7 +244,7 @@ login = function(){
{ {
connection.close(); connection.close();
} }
connection = new WebsocketConnection(server_url, server_port, grid, l_status, match_slot_container, match_control, login_callback, on_connection_error); connection = new WebsocketConnection(server_url, server_port, grid, l_status, match_slot_container, match_control, search_match_container, login_callback, on_connection_error);
connection.connect(i_register_username.value.toLowerCase(), i_register_pw.value); connection.connect(i_register_username.value.toLowerCase(), i_register_pw.value);
} }
@ -266,6 +271,8 @@ invite_player = function()
} }
} }
// initiate stuff and connect events: // initiate stuff and connect events:
end_local_game(); end_local_game();

36
online_match_manager.js
View File

@ -21,10 +21,27 @@ class OnlineMatchManager
// create match button in match list: // create match button in match list:
this.control_container = control_container; this.control_container = control_container;
this.matches_container = matches_container this.matches_container = matches_container;
this.match_button = matches_container.create_button("" + this.online_opponent.get_name());
var tmp = matches_container.create_double_button("" + this.online_opponent.get_name(), "+")
this.match_button = tmp[1];
this.match_button_div = tmp[0];
this.match_button_option = tmp[2];
if (this.game_server_connection.is_friend(this.online_opponent.get_name()))
{
this.match_button_option.disabled = true;
}
else
{
this.match_button_option.addEventListener("click", () => {
this.game_server_connection.send_friend_request(this.online_opponent.get_name());
this.match_button_option.disabled = true;
});
}
this.match_button.addEventListener("click", () => this.open_match()); this.match_button.addEventListener("click", () => this.open_match());
this.match_button.style.background = "rbg(0,255,0)";
if (this.online_opponent.get_name() == this.match_state.active_player) if (this.online_opponent.get_name() == this.match_state.active_player)
{ {
@ -57,7 +74,12 @@ class OnlineMatchManager
this.game_server_connection.send_end_match(this.match_id); this.game_server_connection.send_end_match(this.match_id);
} }
this.matches_container.container.removeChild(this.match_button); if (this.match_button_div != null)
{
clearInner(this.match_button_div)
this.matches_container.container.removeChild(this.match_button_div);
this.match_button_div = null;
}
this.status_label.innerHTML = "match is closed"; this.status_label.innerHTML = "match is closed";
this.control_container.hide(); this.control_container.hide();
this.is_closed = true; this.is_closed = true;
@ -66,9 +88,11 @@ class OnlineMatchManager
remove_match() remove_match()
{ {
if (!this.is_closed) if (this.match_button_div != null)
{ {
this.matches_container.container.removeChild(this.match_button); clearInner(this.match_button_div)
this.matches_container.container.removeChild(this.match_button_div);
this.match_button_div = null;
} }
} }

68
style.css
View File

@ -162,23 +162,41 @@ a:visited {
text-align: center; text-align: center;
background: none; background: none;
white-space: normal; white-space: normal;
overflow-y: scroll;
}
@media (max-aspect-ratio: 1/1) {
.info-container{
width: calc(0.3 * var(--sidebar-width));
}
} }
.infobar-label { .infobar-label {
color: rgba(224, 217, 235, 0.8); color: rgba(224, 217, 235, 0.8);
font-size: calc(2 * var(--border-radius));
margin-left: 0;
margin-right: 0;
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: calc(2 * var(--border-radius)); text-align: center;
width: calc(var(--sidebar-width) - 4 * var(--border-radius));
} }
@media (max-aspect-ratio: 1/1) { .option-button-container
.infobar-label {
{ border-radius: 0%;
width: calc(var(--sidebar-width) * 0.25); margin: 0%;
} top: 0%;
display: flex;
flex-direction:row;
padding: none;
} }
.infobar-button { .infobar-button {
border-radius: var(--border-radius); border-radius: var(--border-radius);
margin: var(--border-radius); margin: var(--border-radius);
@ -189,9 +207,12 @@ a:visited {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: calc(2.8 * var(--border-radius)); font-size: calc(2.8 * var(--border-radius));
height: calc(4 * var(--border-radius)); height: calc(4 * var(--border-radius));
width: calc(var(--sidebar-width) - 4 * var(--border-radius)); /* width: calc(var(--sidebar-width) - 4 * var(--border-radius)); */
vertical-align: middle; margin-left: 0;
margin-right: 0;
width: 100%;
display: flex; display: flex;
vertical-align: middle;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
} }
@ -199,7 +220,6 @@ a:visited {
@media (max-aspect-ratio: 1/1) { @media (max-aspect-ratio: 1/1) {
.infobar-button{ .infobar-button{
width: calc(0.25 * var(--sidebar-width));
height: calc(0.18 * var(--sidebar-height)); height: calc(0.18 * var(--sidebar-height));
} }
} }
@ -214,16 +234,17 @@ a:visited {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: calc(2.8 * var(--border-radius)); font-size: calc(2.8 * var(--border-radius));
height: calc(4 * var(--border-radius)); height: calc(4 * var(--border-radius));
width: calc(var(--sidebar-width) - 4 * var(--border-radius)); margin-left: 0;
vertical-align: middle; margin-right: 0;
width: 100%;
display: flex; display: flex;
vertical-align: middle;
flex-direction: column; flex-direction: column;
} }
@media (max-aspect-ratio: 1/1) { @media (max-aspect-ratio: 1/1) {
.infobar-button-green{ .infobar-button-green{
width: calc(0.25 * var(--sidebar-width));
height: calc(0.18 * var(--sidebar-height)); height: calc(0.18 * var(--sidebar-height));
} }
} }
@ -238,16 +259,17 @@ a:visited {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: calc(2.8 * var(--border-radius)); font-size: calc(2.8 * var(--border-radius));
height: calc(4 * var(--border-radius)); height: calc(4 * var(--border-radius));
width: calc(var(--sidebar-width) - 4 * var(--border-radius)); margin-left: 0;
vertical-align: middle; margin-right: 0;
width: 100%;
display: flex; display: flex;
vertical-align: middle;
flex-direction: column; flex-direction: column;
} }
@media (max-aspect-ratio: 1/1) { @media (max-aspect-ratio: 1/1) {
.infobar-button-red{ .infobar-button-red{
width: calc(0.25 * var(--sidebar-width));
height: calc(0.18 * var(--sidebar-height)); height: calc(0.18 * var(--sidebar-height));
} }
} }
@ -262,16 +284,17 @@ a:visited {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: calc(2.8 * var(--border-radius)); font-size: calc(2.8 * var(--border-radius));
height: calc(4 * var(--border-radius)); height: calc(4 * var(--border-radius));
width: calc(var(--sidebar-width) - 4 * var(--border-radius)); margin-left: 0;
vertical-align: middle; margin-right: 0;
width: 100%;
display: flex; display: flex;
vertical-align: middle;
flex-direction: column; flex-direction: column;
} }
@media (max-aspect-ratio: 1/1) { @media (max-aspect-ratio: 1/1) {
.infobar-button-active{ .infobar-button-active{
width: calc(0.25 * var(--sidebar-width));
height: calc(0.18 * var(--sidebar-height)); height: calc(0.18 * var(--sidebar-height));
} }
} }
@ -300,9 +323,11 @@ a:visited {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: calc(3 * var(--border-radius)); font-size: calc(3 * var(--border-radius));
height: calc(4 * var(--border-radius)); height: calc(4 * var(--border-radius));
width: calc(var(--sidebar-width) - 4 * var(--border-radius)); margin-left: 0;
vertical-align: middle; margin-right: 0;
width: 100%;
display: flex; display: flex;
vertical-align: middle;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
} }
@ -315,6 +340,5 @@ a:visited {
.infobar-input{ .infobar-input{
height: calc(0.18 * var(--sidebar-height)); height: calc(0.18 * var(--sidebar-height));
width: calc(0.25 * var(--sidebar-width));
} }
} }

1
sw.js
View File

@ -7,6 +7,7 @@ self.addEventListener('install', function (e) {
caches.open('your-magic-cache').then(function (cache) { caches.open('your-magic-cache').then(function (cache) {
return cache.addAll([ return cache.addAll([
'/website/ultimate_tictactoe/', '/website/ultimate_tictactoe/',
'/website/ultimate_tictactoe/tools.js',
'/website/ultimate_tictactoe/index.html', '/website/ultimate_tictactoe/index.html',
'/website/ultimate_tictactoe/manifest.json', '/website/ultimate_tictactoe/manifest.json',
'/website/ultimate_tictactoe/icon.png', '/website/ultimate_tictactoe/icon.png',

13
tools.js Normal file
View File

@ -0,0 +1,13 @@
function clear(node) {
while (node.hasChildNodes()) {
clear(node.firstChild);
}
node.parentNode.removeChild(node);
}
function clearInner(node) {
while (node.hasChildNodes()) {
clear(node.firstChild);
}
}

97
websocket_connection.js
View File

@ -1,6 +1,6 @@
class WebsocketConnection class WebsocketConnection
{ {
constructor(ip, port, grid, status_label, matches_container, control_container, login_callback_func, error_callback_func) constructor(ip, port, grid, status_label, matches_container, control_container, search_container, login_callback_func, error_callback_func)
{ {
this.ip = ip; this.ip = ip;
this.port = port; this.port = port;
@ -13,6 +13,7 @@ class WebsocketConnection
this.status_label = status_label; this.status_label = status_label;
this.matches_container = matches_container; this.matches_container = matches_container;
this.control_container = control_container; this.control_container = control_container;
this.search_container = search_container;
this.active_match = null; this.active_match = null;
@ -27,8 +28,12 @@ class WebsocketConnection
this.closed_by_user = false; this.closed_by_user = false;
matches_container.hide();
this.friends = [];
this.friend_name_divs = [];
matches_container.hide();
} }
@ -52,6 +57,11 @@ class WebsocketConnection
return this.connected; return this.connected;
} }
is_friend(friend)
{
return this.friends.includes(friend);
}
on_open(username, pw) on_open(username, pw)
{ {
this.connected = true; this.connected = true;
@ -120,6 +130,18 @@ class WebsocketConnection
case "match_request_response": case "match_request_response":
this.on_match_request_response(msg.data); this.on_match_request_response(msg.data);
break; break;
case "friend_request_response":
this.on_friend_request_response(msg.data);
break;
case "unfriend_request_response":
this.on_unfriend_request_response(msg.data);
break;
case "friends_update":
this.on_friends_update(msg.data);
break;
} }
} }
@ -239,6 +261,51 @@ class WebsocketConnection
} }
} }
on_friend_request_response(data)
{
this.status_label.innerHTML = data.msg;
}
on_unfriend_request_response(data)
{
this.status_label.innerHTML = data.msg;
}
on_friends_update(data)
{
this.friends = data.friends;
// remove complete friend list:
var n = this.friend_name_divs.length;
var i;
for (i = 0; i < n; i++)
{
clearInner(this.friend_name_divs[i]);
this.search_container.container.removeChild(this.friend_name_divs[i]);
this.friend_name_divs[i] = null;
}
this.friend_name_divs = [];
// rebuild friend list:
n = this.friends.length;
for (i = 0; i < n; i++)
{
var tmp = this.search_container.create_double_button("" + this.friends[i], "-");
var name = this.friends[i];
tmp[1].addEventListener("click", () => {
this.send_match_request(name);
});
tmp[2].addEventListener("click", () => {
this.send_unfriend_request(name);
});
this.friend_name_divs.push(tmp[0])
}
}
connect(username, pw) connect(username, pw)
{ {
@ -303,6 +370,28 @@ class WebsocketConnection
this.socket.send(JSON.stringify(msg_object)); this.socket.send(JSON.stringify(msg_object));
} }
send_friend_request(friend_name)
{
var msg_object = {
type: "friend_request",
data: {
user: friend_name
}
};
this.socket.send(JSON.stringify(msg_object));
}
send_unfriend_request(friend_name)
{
var msg_object = {
type: "unfriend_request",
data: {
user: friend_name
}
};
this.socket.send(JSON.stringify(msg_object));
}
login(username, pw) login(username, pw)
{ {
this.player.set_name(username); this.player.set_name(username);
@ -320,6 +409,10 @@ class WebsocketConnection
relogin(session_id) relogin(session_id)
{ {
for (var key in this.openmatches)
{
this.openmatches[key].remove_match();
}
// register for game queue // register for game queue
var msg_object = { var msg_object = {
type: "reconnect", type: "reconnect",