mirror of
https://github.com/wolfswolke/DeathGarden_API_Rebirth.git
synced 2026-03-21 17:54:09 -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