esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

MAPG-203 implement game mode selection UI

Browse Source
This commit is contained in:
Bence Pőcze 2021-03-20 10:26:57 +01:00
parent 24a10c534e
commit 563f900423
Signed by: bence
GPG Key ID: AA52B11A3269D1C1
2 changed files with 69 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
public/static/js/maps.js
View File

@ -73,4 +73,40 @@
window.onresize = function () { window.onresize = function () {
Maps.calculateDescriptionDivHeights(); Maps.calculateDescriptionDivHeights();
}; };
document.getElementById('multiForm').onsubmit = function (e) {
e.preventDefault();
var roomId = this.elements.roomId.value;
if (roomId.length !== 6) {
return;
}
window.location.href = '/multiGame/' + this.elements.roomId.value;
};
document.getElementById('multiButton').onclick = function () {
MapGuesser.showModal('multi');
document.getElementById('createNewRoomButton').href = '/multiGame/new/' + this.dataset.mapId;
document.getElementById('multiForm').elements.roomId.select();
}
document.getElementById('closePlayModeButton').onclick = function () {
MapGuesser.hideModal();
};
document.getElementById('closeMultiButton').onclick = function () {
MapGuesser.hideModal();
};
var buttons = document.getElementById('mapContainer').getElementsByClassName('playButton');
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
button.onclick = function () {
MapGuesser.showModal('playMode');
document.getElementById('singleButton').href = '/game/' + this.dataset.mapId;
document.getElementById('multiButton').dataset.mapId = this.dataset.mapId;
};
}
})(); })();

40
views/maps.php
View File

@ -5,6 +5,32 @@ TODO: condition!
@extends(templates/layout_normal) @extends(templates/layout_normal)
@section(pagemodal)
<div id="playMode" class="modal">
<h2>Play map</h2>
<a id="singleButton" class="button fullWidth marginTop" href="" title="Single player">Single player</a>
<p class="bold center marginTop marginBottom">OR</p>
<button id="multiButton" class="fullWidth green" data-map-id="">Multiplayer (beta)</button>
<div class="right">
<button id="closePlayModeButton" class="gray marginTop" type="button">Close</button>
</div>
</div>
<div id="multi" class="modal">
<h2>Multiplayer (beta)</h2>
<form id="multiForm" class="marginTop" data-no-submit="true">
<a id="createNewRoomButton" class="button fullWidth green" href="" title="Create new room">Create new room</a>
<p class="bold center marginTop marginBottom">OR</p>
<div class="inputWithButton">
<input type="text" name="roomId" placeholder="Room to connect" required minlength="6" maxlength="6"><!--
--><button id="authenticateWithGoogleButton" type="submit">Connect</button>
</div>
<div class="right">
<button id="closeMultiButton" class="gray marginTop" type="button">Close</button>
</div>
</form>
</div>
@endsection
@section(main) @section(main)
<div id="mapContainer"> <div id="mapContainer">
<?php foreach ($maps as $map): ?> <?php foreach ($maps as $map): ?>
@ -35,15 +61,15 @@ TODO: condition!
<p class="small center"><?= $map['description'] ?></p> <p class="small center"><?= $map['description'] ?></p>
</div> </div>
</div> </div>
<?php if ($isAdmin): ?> <div class="buttonContainer">
<div class="buttonContainer"> <?php if ($isAdmin): ?>
<a class="button fullWidth noRightRadius" href="/game/<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a> <button class="button fullWidth noRightRadius playButton" data-map-id="<?= $map['id'] ?>" data-map-name="<?= htmlspecialchars($map['name']) ?>" title="Play map '<?= $map['name'] ?>'">Play this map</button>
<a class="button yellow fullWidth noLeftRadius noRightRadius" href="/admin/mapEditor/<?= $map['id']; ?>" title="Edit map '<?= $map['name'] ?>'">Edit</a> <a class="button yellow fullWidth noLeftRadius noRightRadius" href="/admin/mapEditor/<?= $map['id']; ?>" title="Edit map '<?= $map['name'] ?>'">Edit</a>
<button class="button red fullWidth noLeftRadius deleteButton" data-map-id="<?= $map['id'] ?>" data-map-name="<?= htmlspecialchars($map['name']) ?>" title="Delete map '<?= $map['name'] ?>'">Delete</button> <button class="button red fullWidth noLeftRadius deleteButton" data-map-id="<?= $map['id'] ?>" data-map-name="<?= htmlspecialchars($map['name']) ?>" title="Delete map '<?= $map['name'] ?>'">Delete</button>
</div> <?php else: ?>
<?php else: ?> <button class="button fullWidth playButton" data-map-id="<?= $map['id'] ?>" data-map-name="<?= htmlspecialchars($map['name']) ?>" title="Play map '<?= $map['name'] ?>'">Play this map</button>
<a class="button fullWidth" href="/game/<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a> <?php endif; ?>
<?php endif; ?> </div>
</div> </div>
<?php endforeach; ?> <?php endforeach; ?>
<?php if ($isAdmin): ?> <?php if ($isAdmin): ?>