mirror of
https://github.com/wolfswolke/DeathGarden_API_Rebirth.git
synced 2026-04-26 08:16:54 -05:00
Added Private Match HTML with CSS
This commit is contained in:
ZKWolf
parent
d07068f7eb
commit
747f92d710
76
src/static/css/private_mm.css
Normal file
76
src/static/css/private_mm.css
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
color: #c9c9c9;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 20px;
|
||||||
|
color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #2e2e2e;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||||
|
width: 800px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
text-align: left;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select {
|
||||||
|
padding: 5px;
|
||||||
|
margin-left: 10px;
|
||||||
|
background-color: #3e3e3e;
|
||||||
|
color: #c9c9c9;
|
||||||
|
border: 1px solid #555;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #007BFF;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #0056b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.response {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-image {
|
||||||
|
display: block;
|
||||||
|
margin: 20px auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 755px;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #555;
|
||||||
|
}
|
||||||
151
src/templates/matchmaking/private_match.html
Normal file
151
src/templates/matchmaking/private_match.html
Normal file
|
|
@ -0,0 +1,151 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Matchmaking</title>
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/private_mm.css') }}">
|
||||||
|
<script>
|
||||||
|
function updateGameMode() {
|
||||||
|
const selectedGameMode = document.getElementById("gameMode").value;
|
||||||
|
const gameModes = {{ game_modes | tojson }};
|
||||||
|
const gameMode = gameModes.find(gm => gm.value === selectedGameMode);
|
||||||
|
const gameModeImage = document.getElementById("gameModeImage");
|
||||||
|
|
||||||
|
if (gameMode) {
|
||||||
|
gameModeImage.src = gameMode.image;
|
||||||
|
} else {
|
||||||
|
gameModeImage.src = "{{ url_for('matchmaking_images', filename='Map_Matchmaking_Placeholder.png') }}";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showResponse(elementId, response) {
|
||||||
|
const responseElement = document.getElementById(elementId);
|
||||||
|
responseElement.style.display = 'block';
|
||||||
|
if (response.status === 'OK') {
|
||||||
|
responseElement.style.color = 'green';
|
||||||
|
responseElement.innerHTML = 'Success: ' + response.message;
|
||||||
|
} else {
|
||||||
|
responseElement.style.color = 'red';
|
||||||
|
responseElement.innerHTML = 'Error: ' + response.message;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submitHostForm() {
|
||||||
|
const cloudID = document.getElementById("hostCloudID").value;
|
||||||
|
const gameMode = document.getElementById("gameMode").value;
|
||||||
|
const runners = parseInt(document.getElementById("runners").value);
|
||||||
|
const hunters = 1;
|
||||||
|
|
||||||
|
if (!cloudID || !gameMode || isNaN(runners) || runners <= 0) {
|
||||||
|
alert("Please fill in all the fields correctly.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
cloudID,
|
||||||
|
gameMode,
|
||||||
|
runners,
|
||||||
|
hunters
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch('/api/matchmaking/register_private_match', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
}).then(res => res.json());
|
||||||
|
|
||||||
|
showResponse('hostResponse', response);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submitJoinForm() {
|
||||||
|
const cloudID = document.getElementById("joinCloudID").value;
|
||||||
|
const matchID = document.getElementById("matchID").value;
|
||||||
|
|
||||||
|
if (!cloudID || !matchID) {
|
||||||
|
alert("Please fill in all the fields.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
cloudID,
|
||||||
|
matchID
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch('/api/matchmaking/join_private_match', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
}).then(res => res.json());
|
||||||
|
|
||||||
|
showResponse('joinResponse', response);
|
||||||
|
}
|
||||||
|
window.onload = function() {
|
||||||
|
document.getElementById("gameModeImage").src = "{{ url_for('matchmaking_images', filename='Map_Matchmaking_Placeholder.png') }}";
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Matchmaking</h1>
|
||||||
|
<div class="container">
|
||||||
|
<button onclick="document.getElementById('hostForm').style.display='block'; document.getElementById('joinForm').style.display='none'">HOST</button>
|
||||||
|
<button onclick="document.getElementById('hostForm').style.display='none'; document.getElementById('joinForm').style.display='block'">JOIN</button>
|
||||||
|
|
||||||
|
<div id="hostForm" style="display:none">
|
||||||
|
<h2>Host a Game</h2>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="gameMode">Game Mode:</label>
|
||||||
|
<select id="gameMode" onchange="updateGameMode()">
|
||||||
|
<option value="">Select a game mode</option>
|
||||||
|
{% for mode in game_modes %}
|
||||||
|
<option value="{{ mode.value }}">{{ mode.name }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<img id="gameModeImage" src="" alt="Game Mode Image" class="game-image">
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="runners">Number of Runners:</label>
|
||||||
|
<input type="number" id="runners" min="1"> <span>MAX 10</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="hunters">Number of Hunters:</label>
|
||||||
|
<input type="number" id="hunters" value="1" disabled> <span>Work in progress</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="hostCloudID">Your Cloud ID:</label>
|
||||||
|
<input type="text" id="hostCloudID">
|
||||||
|
</div>
|
||||||
|
<div class="label">
|
||||||
|
<br>
|
||||||
|
<span>WARNING! Going above 5 players can result in lag!</span>
|
||||||
|
<br>
|
||||||
|
<span>Please note that higher Spec machines can hold more players.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button onclick="submitHostForm()" style="margin-top: 10px;">SUBMIT</button>
|
||||||
|
<div id="hostResponse" class="response" style="display:none"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="joinForm" style="display:none">
|
||||||
|
<h2>Join a Game</h2>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="matchID">Match ID:</label>
|
||||||
|
<input type="text" id="matchID">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="joinCloudID">Your Cloud ID:</label>
|
||||||
|
<input type="text" id="joinCloudID">
|
||||||
|
</div>
|
||||||
|
<button onclick="submitJoinForm()" style="margin-top: 10px;">SUBMIT</button>
|
||||||
|
<div id="joinResponse" class="response" style="display:none"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user