IfCasper/CasperV1FiveM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.0.1

Browse Source
This commit is contained in:
IfCasper
2026-07-07 21:08:52 +02:00
commit 4c20cfc716
2613 changed files with 318021 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
resources/[creators]/blips_creator/html/index.css Normal file
View File

@@ -0,0 +1,120 @@
/* Main blip container */
.big-container {
position: absolute;
left:25vw;
top: 25vh;
width: 50vw !important;
height: 50vh !important;
background-color: #222;
border-radius: 1vh;
overflow-y: auto;
color: #999;
display: none;
}
/* Edit blip container */
.little-container {
position: absolute;
right: 1vw;
top: 25vh;
width: 20vw !important;
height: 50vh !important;
background-color: #222;
border-radius: 1vh;
overflow-y: auto;
display: none;
color: #999;
}
#blip-sprites {
position: absolute;
left:25vw;
width: 50vw;
height: 20vh;
overflow-y: scroll;
background-color: #222;
display: none;
}
#blips-container {
overflow-x: hidden;
overflow-y: auto;
border-radius: 1vw;
}
.blip {
transition-duration: 100ms;
}
.blip:hover {
background-color: #333;
}
.blip-sprite {
transition-duration: 100ms;
width: 2vw;
height: 2vw;
}
.blip-sprite:hover {
transform: scale(0.9);
}
.blip-sprite:not(:hover) {
transform: scale(1.0);
}
#edit-blip-sprite {
transition-duration: 200ms;
}
#edit-blip-sprite:hover {
transform: scale(0.8);
}
#edit-blip-sprite:not(:hover) {
transform: scale(1.0);
}
.blip-color {
width: 1.5vw;
height: 1.5vw;
transition-duration: 100ms;
}
.blip-color:hover{
transform: scale(0.9);
}
.blip-color:not(:hover){
transform: scale(1.0);
}
.icon-hoverable {
transition-duration: 100ms;
}
.icon-hoverable:hover {
transform: scale(0.9);
}
.icon-hoverable:not(:hover) {
transform: scale(1.0);
}

226
resources/[creators]/blips_creator/html/index.html Normal file
View File

@@ -0,0 +1,226 @@
<!DOCTYPE html>
<html>
<head>
<title>Blips Creator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- Script CSS -->
<link href="index.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body style="background-color: transparent !important;">
<div id="notification" class="toast position-absolute mt-5 start-50 translate-middle" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Blips Creator</strong>
</div>
<div id="notification-message" class="toast-body">
</div>
</div>
<div id="map-utilities" class="big-container container">
<div class="row mt-2">
<div class="col">
<button id="create-blip-btn" type="button" class="btn btn-success">Create Blip</button>
<button id="create-global-blip-btn" type="button" class="btn btn-warning">Create Global Blip (admin)</button>
<button id="refresh-blips-btn" type="button" class="btn btn-info">Refresh</button>
<button id="map-utilities-close-btn" type="button" class="btn-close btn-close-white float-end"
aria-label="Close"></button>
</div>
</div>
<div id="blips-container" class="container my-2"></div>
</div>
<div id="edit-blip" class="little-container container">
<button id="edit-blip-close-btn" type="button" class="btn-close btn-close-white float-end mt-2 mb-4"
aria-label="Close"></button>
<select id="edit-blip-type" class="form-select mt-3">
<option value="coords" selected>Coordinate</option>
<option value="area">Area</option>
<option value="radius">Radius</option>
</select>
<div id="edit-blip-sprite-name-container" class="row mt-4">
<figure id="edit-blip-sprite-container" class="figure col-3">
<img id="edit-blip-sprite" class="blip-sprite img-fluid mt-3 ms-3" alt="Current Blip">
<figcaption class="figure-caption">Blip Image</figcaption>
</figure>
<div class="col-9">
<div class="input-group mt-3">
<span class="input-group-text" id="edit-blip-name-describe">Blip Name</span>
<input id="edit-blip-name" type="text" class="form-control" placeholder="Blip Name"
aria-label="Blip Name" aria-describedby="edit-blip-name-describe">
</div>
</div>
</div>
<div id="edit-blip-scale-container">
<label for="edit-blip-scale" class="form-label mt-3 fs-2">Blip Scale</label>
<input id="edit-blip-scale" type="range" class="form-range" min="0.5" max="2.0" step="0.01">
</div>
<div id="edit-blip-height-width-container">
<label for="edit-blip-width" class="form-label mt-3 fs-2">Blip width</label>
<input id="edit-blip-width" type="range" class="form-range" min="1.0" max="10000.0" step="1.0">
<label for="edit-blip-height" class="form-label mt-3 fs-2">Blip height</label>
<input id="edit-blip-height" type="range" class="form-range" min="1.0" max="10000.0" step="1.0">
</div>
<label for="edit-blip-alpha" class="form-label mt-3 fs-2">Blip Opacity</label>
<input id="edit-blip-alpha" type="range" class="form-range" min="0" max="255" step="1">
<p class="fs-2">Blip Color</p>
<div id="blip-colors" class="container my-2"></div>
<div id="edit-blip-tick-container" class="form-check form-switch mt-3 fs-4">
<input class="form-check-input" type="checkbox" id="edit-blip-tick">
<label class="form-check-label" for="edit-blip-tick">Tick on Blip</label>
</div>
<div id="edit-blip-outline-container" class="form-check form-switch mt-3 fs-4">
<input class="form-check-input" type="checkbox" id="edit-blip-outline">
<label class="form-check-label" for="edit-blip-outline">Outline</label>
</div>
<div class="form-check mt-3 fs-5">
<input class="form-check-input" type="radio" name="edit-blip-display" data-display=3
id="edit-blip-display-mainmap">
<label class="form-check-label" for="edit-blip-display-mainmap">
Main map only
</label>
</div>
<div class="form-check fs-5">
<input class="form-check-input" type="radio" name="edit-blip-display" data-display=5
id="edit-blip-display-minimap">
<label class="form-check-label" for="edit-blip-display-minimap">
Minimap only
</label>
</div>
<div class="form-check fs-5">
<input class="form-check-input" type="radio" name="edit-blip-display" data-display=2
id="edit-blip-display-both">
<label class="form-check-label" for="edit-blip-display-both">
Main map + Minimap
</label>
</div>
<button id="edit-blip-share-btn" type="button" class="btn btn-info mt-3">Share blip</button>
<button id="edit-blip-delete-btn" type="button" class="btn btn-danger mt-3 mb-3 col-12">Delete Blip</button>
</div>
<div id="delete-blip-modal" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete blip</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Are you sure to delete this blip?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button id="delete-blip-btn" type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<div id="create-blip-mode" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Blip creation mode</h5>
<button id="blip-mode-close-btn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>How would you like to create the blip?</p>
</div>
<div class="modal-footer">
<button id="create-blip-from-coords-btn" class="btn btn-secondary">Create from coords</button>
<button id="create-blip-place-blip-btn" class="btn btn-success">Place blip</button>
</div>
</div>
</div>
</div>
<div id="create-from-coords-modal" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create from coordinates</h5>
<button id="from-coords-close-btn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<span class="input-group-text" id="x-coord-label">x</span>
<input id="x-coord" type="text" class="form-control" aria-label="x" aria-describedby="x-coord-label">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="y-coord-label">y</span>
<input id="y-coord" type="text" class="form-control" aria-label="y" aria-describedby="y-coord-label">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="z-coord-label">z</span>
<input id="z-coord" type="text" class="form-control" aria-label="z" aria-describedby="z-coord-label">
</div>
<button id="current-coords-btn" type="button" class="btn btn-secondary my-2">Current coords</button>
</div>
<div class="modal-footer">
<button id="confirm-from-coords" class="btn btn-success">Create</button>
</div>
</div>
</div>
</div>
<div id="share-choose-id" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Share blip</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<span class="input-group-text" id="player-id-label">Player ID</span>
<input id="player-id" type="text" class="form-control" aria-label="Player ID" aria-describedby="player-id-label">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
<button id="share-btn" class="btn btn-success">Share</button>
</div>
</div>
</div>
</div>
<div id="blip-sprites" class="container mt-2 border border-2 rounded" style="resize: vertical;"></div>
<!-- jQuery, then bootstrap, then popper -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"
integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
crossorigin="anonymous"></script>
<script src="index.js"></script>
<script src="../utils/dialogs/dialogs.js"></script>
</body>
</html>

745
resources/[creators]/blips_creator/html/index.js Normal file
View File

@@ -0,0 +1,745 @@
const resName = GetParentResourceName();
let isCreatingGlobalBlip = false;
let blipIdToDuplicate = null;
let isAdmin = false;
let currentGameBuild = null;
let spritesIDs = {};
const colors = {
[0]: "rgb(254, 254, 254)",
[1]: "rgb(224, 50, 50)",
[2]: "rgb(113, 203, 113)",
[3]: "rgb(93, 182, 229)",
[4]: "rgb(254, 254, 254)",
[5]: "rgb(238, 198, 78)",
[6]: "rgb(194, 80, 80)",
[7]: "rgb(156, 110, 175)",
[8]: "rgb(254, 122, 195)",
[9]: "rgb(245, 157, 121)",
[10]: "rgb(177, 143, 131)",
[11]: "rgb(141, 206, 167)",
[12]: "rgb(112, 168, 174)",
[13]: "rgb(211, 209, 231)",
[14]: "rgb(143, 126, 152)",
[15]: "rgb(106, 196, 191)",
[16]: "rgb(213, 195, 152)",
[17]: "rgb(234, 142, 80)",
[18]: "rgb(151, 202, 233)",
[19]: "rgb(178, 98, 135)",
[20]: "rgb(143, 141, 121)",
[21]: "rgb(166, 117, 94)",
[22]: "rgb(175, 168, 168)",
[23]: "rgb(231, 141, 154)",
[24]: "rgb(187, 214, 91)",
[25]: "rgb(12, 123, 86)",
[26]: "rgb(122, 195, 254)",
[27]: "rgb(171, 60, 230)",
[28]: "rgb(205, 168, 12)",
[29]: "rgb(69, 97, 171)",
[30]: "rgb(41, 165, 184)",
[31]: "rgb(184, 155, 123)",
[32]: "rgb(200, 224, 254)",
[33]: "rgb(240, 240, 150)",
[34]: "rgb(237, 140, 161)",
[35]: "rgb(249, 138, 138)",
[36]: "rgb(251, 238, 165)",
[37]: "rgb(254, 254, 254)",
[38]: "rgb(44, 109, 184)",
[39]: "rgb(154, 154, 154)",
[40]: "rgb(76, 76, 76)",
[41]: "rgb(242, 157, 157)",
[42]: "rgb(108, 183, 214)",
[43]: "rgb(175, 237, 174)",
[44]: "rgb(255, 167, 95)",
[45]: "rgb(241, 241, 241)",
[46]: "rgb(236, 240, 41)",
[47]: "rgb(255, 154, 24)",
[48]: "rgb(246, 68, 165)",
[49]: "rgb(224, 58, 58)",
[50]: "rgb(138, 109, 227)",
[51]: "rgb(255, 139, 92)",
[52]: "rgb(65, 108, 65)",
[53]: "rgb(179, 221, 243)",
[54]: "rgb(58, 100, 121)",
[55]: "rgb(160, 160, 160)",
[56]: "rgb(132, 114, 50)",
[57]: "rgb(101, 185, 231)",
[58]: "rgb(75, 65, 117)",
[59]: "rgb(225, 59, 59)",
[60]: "rgb(240, 203, 88)",
[61]: "rgb(205, 63, 152)",
[62]: "rgb(207, 207, 207)",
[63]: "rgb(39, 106, 159)",
[64]: "rgb(216, 123, 27)",
[65]: "rgb(142, 131, 147)",
[66]: "rgb(240, 203, 87)",
[67]: "rgb(101, 185, 231)",
[68]: "rgb(101, 185, 231)",
[69]: "rgb(121, 205, 121)",
[70]: "rgb(239, 202, 87)",
[71]: "rgb(239, 202, 87)",
[72]: "rgb(61, 61, 61)",
[73]: "rgb(239, 202, 87)",
[74]: "rgb(101, 185, 231)",
[75]: "rgb(224, 50, 50)",
[76]: "rgb(120, 35, 35)",
[77]: "rgb(101, 185, 231)",
[78]: "rgb(58, 100, 121)",
[79]: "rgb(224, 50, 50)",
[80]: "rgb(101, 185, 231)",
[81]: "rgb(242, 164, 12)",
[82]: "rgb(164, 204, 170)",
[83]: "rgb(168, 84, 242)",
[84]: "rgb(101, 185, 231)",
[85]: "rgb(61, 61, 61)",
}
function showNotification(message, duration=false) {
var notification = $("#notification");
if(duration) {
notification.toast({
autohide: true,
delay: duration
})
} else {
notification.toast({
autohide: false,
})
}
$("#notification-message").text(message)
notification.toast("show")
}
function getPathForSprite(spriteId) {
const spriteData = spritesIDs[spriteId]
if(spriteData.position) {
return `../_sprites/REPLACEABLE/${spriteData.image}`
} else {
return `../_sprites/NOT_REPLACEABLE/${spriteData.image}`
}
}
function fillSprites(){
var spritesDiv = $("#blip-sprites");
for (const [id, spriteData] of Object.entries(spritesIDs)) {
var currentSpritesCount = spritesDiv.children().last().children().length
var sprite = $(`
<div class="col-1">
<img src="${getPathForSprite(id)}" class="blip-sprite img-fluid p-2">
</div>
`)
sprite.val(id)
if(currentSpritesCount < 12 && currentSpritesCount > 0) {
var lastRow = spritesDiv.children().last();
lastRow.append(sprite)
} else {
var newRow = $(`<div class="row"></div>`);
newRow.append(sprite)
spritesDiv.append(newRow)
}
sprite.click(function(){
var blipSprite = $(this).val();
var blipId = $("#edit-blip").val()
$("#blip-sprites").hide();
if(spritesIDs[blipSprite].gameBuild <= gameBuild) {
$("#edit-blip-sprite").attr("src", getPathForSprite(blipSprite))
$.post(`https://${resName}/edit-blip-sprite`, JSON.stringify({blipSprite: blipSprite, blipId: blipId}))
} else {
showNotification(`This sprite requires ${spritesIDs[blipSprite].gameBuild} server game build`, 3000)
}
})
}
}
function fillColors(){
var colorsDiv = $("#blip-colors")
for (const [id, rgb] of Object.entries(colors)) {
var currentColorsCount = colorsDiv.children().last().children().length
var color = $(`<div class="blip-color m-1 col-1"></div>`);
color.css({"background-color": rgb});
color.data("color-id", id)
if(currentColorsCount < 9 && currentColorsCount > 0) {
var lastRow = colorsDiv.children().last();
lastRow.append(color);
} else {
var newRow = $(`<div class="row"></div>`);
newRow.append(color)
colorsDiv.append(newRow)
}
color.click(function(){
var blipId = $("#edit-blip").val();
var blipColor = $(this).data("color-id");
$.post(`https://${resName}/edit-blip-color`, JSON.stringify({blipId: blipId, blipColor: blipColor}))
})
}
} fillColors();
function editBlip(blipId, blipData) {
$("#edit-blip").val(blipId);
setBlipType(blipData.type)
$(`#edit-blip-type option[value="${blipData.type}"]`).prop("selected", true)
$("#edit-blip-name").val(blipData.name)
$("#edit-blip-scale").val(blipData.scale)
$("#edit-blip-alpha").val(blipData.alpha)
$("#edit-blip-sprite").attr("src", getPathForSprite(blipData.sprite))
$("#edit-blip-tick").prop("checked", blipData.ticked)
$("#edit-blip-outline").prop("checked", blipData.outline)
// If is global hides share btn
if(!blipData.identifier) {
$("#edit-blip-share-btn").hide();
$("#edit-blip").data("is-global", true);
$("#edit-blip").data("global-id", blipData.id);
} else {
$("#edit-blip-share-btn").show();
$("#edit-blip").data("is-global", false);
}
switch(blipData.display){
case 2: {
$("#edit-blip-display-both").prop("checked", true)
$("#edit-blip-display-mainmap").prop("checked", false)
$("#edit-blip-display-minimap").prop("checked", false)
break;
}
case 3: {
$("#edit-blip-display-both").prop("checked", false)
$("#edit-blip-display-mainmap").prop("checked", true)
$("#edit-blip-display-minimap").prop("checked", false)
break;
}
case 5: {
$("#edit-blip-display-both").prop("checked", false)
$("#edit-blip-display-mainmap").prop("checked", false)
$("#edit-blip-display-minimap").prop("checked", true)
break;
}
}
$("#map-utilities").hide();
$("#edit-blip").fadeIn();
$("#edit-blip").scrollTop(0)
}
function hideBlip(blipId) {
$.post(`https://${resName}/hide-blip`, JSON.stringify({blipId: blipId}))
}
function showBlip(blipId) {
$.post(`https://${resName}/show-blip`, JSON.stringify({blipId: blipId}))
}
function addBlip(blipId, blipData, canBeEdited){
var container = $("#blips-container");
var lastRow = container.children().last();
var currentBlipsInRow = lastRow.children().length;
var blipDiv = $(`
<div class="blip col border rounded m-2">
<nav class="col-12 float-end">
<ul class="pagination float-end">
<li class="page-item">
<i class="blip-duplicate icon-hoverable bi bi-back float-end fs-3 mx-2"></i>
</li>
<li class="page-item">
${blipData.isHidden && '<i class="blip-toggle icon-hoverable bi bi-eye-slash float-end fs-3"></i>' || '<i class="blip-toggle icon-hoverable bi bi-eye float-end fs-3"></i>'}
</li>
</ul>
</nav>
<p class="blip-name text-center fs-2 fw-bold mt-1">${blipData.name}</p>
<p class="blip-street text-center fs-5 fw-light">${blipData.streetName}</p>
</div>
`);
if(blipData.type == "coords") {
blipDiv.append(`
<img src="${getPathForSprite(blipData.sprite)}" class="blip-sprite rounded mx-auto d-block mb-3" alt="...">
`)
} else if(blipData.type == "area") {
blipDiv.append(`<p class="text-center fs-4">Area</p>`)
}else if(blipData.type == "radius") {
blipDiv.append(`<p class="text-center fs-4">Radius</p>`)
}
if(!blipData.identifier) {
blipDiv.addClass("border-warning");
}
if(currentBlipsInRow < 4 && currentBlipsInRow > 0) {
lastRow.append(blipDiv);
} else {
var newRow = $(`<div class="row"></div>`);
newRow.append(blipDiv);
newRow.append(blipDiv);
container.append(newRow);
}
if(canBeEdited) {
blipDiv.click(function(){
editBlip(blipId, blipData);
})
}
blipDiv.find('.blip-toggle').click(function(e) {
e.preventDefault();
e.stopPropagation();
let eyeDiv = $(this)
if(eyeDiv.hasClass("bi-eye")) {
eyeDiv.removeClass("bi-eye");
eyeDiv.addClass("bi-eye-slash");
hideBlip(blipId)
} else {
eyeDiv.removeClass("bi-eye-slash");
eyeDiv.addClass("bi-eye");
showBlip(blipId)
}
});
blipDiv.find(".blip-duplicate").click(function(e) {
e.preventDefault();
e.stopPropagation();
blipIdToDuplicate = blipId;
$("#map-utilities").hide();
$("#create-blip-mode").modal("show");
});
}
function addBlips(blips, isAdmin) {
$("#blips-container").empty();
if(Object.keys(blips).length > 0) {
let globalBlips = {} // Separated so it can be added after local blips (sorting)
for (const [blipId, blipData] of Object.entries(blips)) {
if(blipData){
if(blipData.identifier) {
addBlip(blipId, blipData, true)
} else {
globalBlips[blipId] = blipData
}
}
}
for (const [blipId, blipData] of Object.entries(globalBlips)) {
if(blipData){
addBlip(blipId, blipData, isAdmin)
}
}
} else {
$("#blips-container").append(`<p class="mt-4 fs-1 text-center">No blips created</p>`);
}
}
$("#edit-blip-sprite").click(function(){
$("#blip-sprites").fadeIn();
})
$("#edit-blip-close-btn").click(function(){
var editBlipDiv = $("#edit-blip");
var blipId = parseInt(editBlipDiv.val());
$.post(`https://${resName}/save-blip`, JSON.stringify({blipId: blipId}), function(isSuccessful){
$("#edit-blip").hide();
openBlipsMenu()
})
})
$("#map-utilities-close-btn").click(function(){
$("#map-utilities").fadeOut();
$.post(`https://${resName}/close`)
})
$("#create-blip-btn").click(function(){
$("#map-utilities").hide();
$("#create-blip-mode").modal("show");
})
$("#edit-blip-name").change(function(){
var blipId = $("#edit-blip").val()
var blipName = $(this).val();
$.post(`https://${resName}/edit-blip-name`, JSON.stringify({blipId: blipId, blipName: blipName}))
})
$("#edit-blip-scale").change(function(){
var blipId = $("#edit-blip").val()
var blipScale = $(this).val();
$.post(`https://${resName}/edit-blip-scale`, JSON.stringify({blipId: blipId, blipScale: blipScale}))
})
$("#edit-blip-alpha").change(function(){
var blipId = $("#edit-blip").val()
var blipAlpha = $(this).val();
$.post(`https://${resName}/edit-blip-alpha`, JSON.stringify({blipId: blipId, blipAlpha: blipAlpha}))
})
$("#edit-blip-tick").change(function(){
var blipId = $("#edit-blip").val()
var blipTick = $(this).prop("checked");
$.post(`https://${resName}/edit-blip-tick`, JSON.stringify({blipId: blipId, blipTick: blipTick}))
})
$("#edit-blip-outline").change(function(){
var blipId = $("#edit-blip").val()
var blipOutline = $(this).prop("checked");
$.post(`https://${resName}/edit-blip-outline`, JSON.stringify({blipId: blipId, blipOutline: blipOutline}))
})
$("#edit-blip-delete-btn").click(function(){
$("#delete-blip-modal").modal("show");
})
$("#delete-blip-btn").click(function(){
var editBlipDiv = $("#edit-blip");
var blipId = $("#edit-blip").val()
if(editBlipDiv.data("is-global")) {
var globalId = parseInt(editBlipDiv.data("global-id"));
$.post(`https://${resName}/delete-global-blip`, JSON.stringify({globalId: globalId, blipId: blipId}))
} else {
$.post(`https://${resName}/delete-blip`, JSON.stringify({blipId: blipId}))
}
$("#delete-blip-modal").modal("hide");
$("#edit-blip").hide();
openBlipsMenu()
})
$('input[type=range]').on('input', function () {
$(this).trigger('change');
});
$('input[type=radio][name=edit-blip-display]').change(function() {
var blipId = $("#edit-blip").val()
var display = $(this).data("display");
$.post(`https://${resName}/edit-blip-display`, JSON.stringify({blipId: blipId, blipDisplay: display}))
});
$("#create-blip-from-coords-btn").click(function(){
$("#x-coord").val("");
$("#y-coord").val("");
$("#z-coord").val("");
$("#x-coord").removeClass("is-invalid");
$("#y-coord").removeClass("is-invalid");
$("#z-coord").removeClass("is-invalid");
$("#create-blip-mode").modal("hide")
$("#create-from-coords-modal").modal("show")
})
$("#confirm-from-coords").click(function(){
var isEverythingFilled = true;
var xInput = $("#x-coord")
var yInput = $("#y-coord")
var zInput = $("#z-coord")
var xCoord = xInput.val();
var yCoord = yInput.val();
var zCoord = zInput.val();
if(!xCoord || xCoord != parseFloat(xCoord)) {
xInput.addClass("is-invalid");
isEverythingFilled = false
} else {
xInput.removeClass("is-invalid")
}
if(!yCoord || yCoord != parseFloat(yCoord)) {
yInput.addClass("is-invalid");
isEverythingFilled = false
} else {
yInput.removeClass("is-invalid")
}
if(!zCoord || zCoord != parseFloat(zCoord)) {
zInput.addClass("is-invalid");
isEverzthingFilled = false
} else {
zInput.removeClass("is-invalid")
}
if(isEverythingFilled) {
$("#create-from-coords-modal").modal("hide")
if(blipIdToDuplicate) {
$.post(`https://${resName}/duplicate-blip-from-coords`, JSON.stringify({blipIdToDuplicate: blipIdToDuplicate, x: xCoord, y: yCoord, z: zCoord}), function(data){
blipIdToDuplicate = null;
$.post(`https://${resName}/focus`)
openBlipsMenu()
});
} else {
$.post(`https://${resName}/create-blip-from-coords`, JSON.stringify({isGlobal: isCreatingGlobalBlip, x: xCoord, y: yCoord, z: zCoord}), function(data){
$.post(`https://${resName}/focus`)
openBlipsMenu()
});
}
}
})
$("#create-blip-place-blip-btn").click(function(){
$("#create-blip-mode").modal("hide")
showNotification("Where your blip should be?")
if(blipIdToDuplicate) {
$.post(`https://${resName}/duplicate-blip`, JSON.stringify({blipIdToDuplicate: blipIdToDuplicate}), function(data){
hideNotification()
blipIdToDuplicate = null;
$.post(`https://${resName}/focus`)
openBlipsMenu()
});
} else {
$.post(`https://${resName}/create-blip`, JSON.stringify({isGlobal: isCreatingGlobalBlip}), function(data){
hideNotification()
$.post(`https://${resName}/focus`)
openBlipsMenu()
})
}
})
$("#from-coords-close-btn").click(function(){
$("#create-blip-mode").modal("show");
})
$("#blip-mode-close-btn").click(function(){
openBlipsMenu()
})
$("#edit-blip-share-btn").click(function(){
var editBlipDiv = $("#edit-blip");
var blipId = parseInt(editBlipDiv.val());
$.post(`https://${resName}/save-blip`, JSON.stringify({blipId: blipId}), function(isSuccessful){
if(isSuccessful){
var playerIdInput = $("#player-id")
playerIdInput.val("");
playerIdInput.removeClass("is-invalid");
$("#share-choose-id").modal("show");
}
})
})
$("#share-btn").click(function(){
var playerIdInput = $("#player-id")
var playerId = playerIdInput.val();
if(!playerId || playerId != parseInt(playerId)) {
playerIdInput.addClass("is-invalid");
} else {
var blipId = $("#edit-blip").val()
$.post(`https://${resName}/share-blip`, JSON.stringify({playerId: parseInt(playerId), blipId: blipId}));
$("#share-choose-id").modal("hide");
}
});
$("#refresh-blips-btn").click(function(){
$("#map-utilities").hide();
openBlipsMenu()
})
function mapActive(){
showNotification("Press SPACEBAR to open the menu", 3000)
}
function hideNotification(){
$("#notification").toast("hide");
}
function openBlipsMenu(){
if(isCreatingGlobalBlip) {
isCreatingGlobalBlip = false
}
$.post(`https://${resName}/get-saved-blips`, {}, function(blips){
blips = JSON.parse(blips)
addBlips(blips, isAdmin)
$("#map-utilities").fadeIn();
})
}
function activateAdmin(){
isAdmin = true
$("#create-global-blip-btn").unbind().click(function(){
isCreatingGlobalBlip = true;
$("#map-utilities").hide();
$("#create-blip-mode").modal("show");
});
}
// Click if the player is not admin
$("#create-global-blip-btn").click(function() {
$("#map-utilities").hide();
$.post(`https://${resName}/askForNotAllowedMenu`, {});
})
window.addEventListener('message', (event) => {
let data = event.data
let action = data.action;
if(action == 'mapActive') {
mapActive();
} else if(action == 'mapClosed') {
hideNotification();
} else if(action == 'openBlipsMenu') {
openBlipsMenu();
} else if(action == "activateAdmin") {
activateAdmin();
} else if (action == "setGameBuild") {
gameBuild = data.gameBuild;
} else if (action == "loadSprites") {
spritesIDs = data.spritesIDs;
fillSprites()
}
})
function setBlipType(type) {
switch(type) {
case 'coords': {
$("#edit-blip-scale-container").show();
$("#edit-blip-tick-container").show();
$("#edit-blip-outline-container").show();
$("#edit-blip-sprite-container").show();
$("#edit-blip-height-width-container").hide();
let blipScaleDiv = $("#edit-blip-scale");
blipScaleDiv.attr("min", 0.5);
blipScaleDiv.attr("max", 2.0);
blipScaleDiv.attr("step", 0.01);
break;
}
case 'area': {
$("#edit-blip-scale-container").hide();
$("#edit-blip-tick-container").hide();
$("#edit-blip-outline-container").hide();
$("#edit-blip-sprite-container").hide();
$("#edit-blip-height-width-container").show();
break;
}
case 'radius': {
$("#edit-blip-scale-container").show();
$("#edit-blip-tick-container").hide();
$("#edit-blip-outline-container").hide();
$("#edit-blip-sprite-container").hide();
$("#edit-blip-height-width-container").hide();
let blipScaleDiv = $("#edit-blip-scale");
blipScaleDiv.attr("min", 1.0);
blipScaleDiv.attr("max", 10000.0);
blipScaleDiv.attr("step", 1.0);
break;
}
}
}
$("#edit-blip-type").change(function() {
let blipType = $(this).val()
let blipId = $("#edit-blip").val()
setBlipType(blipType)
$.post(`https://${resName}/edit-blip-type`, JSON.stringify({blipId: blipId, blipType: blipType}))
})
$("#edit-blip-width").change(function() {
let blipWidth = $(this).val()
let blipId = $("#edit-blip").val()
$.post(`https://${resName}/edit-blip-width`, JSON.stringify({blipId: blipId, blipWidth: blipWidth}))
})
$("#edit-blip-height").change(function() {
let blipHeight = $(this).val()
let blipId = $("#edit-blip").val()
$.post(`https://${resName}/edit-blip-height`, JSON.stringify({blipId: blipId, blipHeight: blipHeight}))
})
async function getCurrentCoords() {
return new Promise((resolve, reject) => {
$.post(`https://${resName}/getCurrentCoords`, {}, function(coords) {
resolve(coords);
})
});
}
$("#current-coords-btn").click(async function() {
let coords = await getCurrentCoords();
$("#x-coord").val(coords.x);
$("#y-coord").val(coords.y);
$("#z-coord").val(coords.z);
})

226
resources/[creators]/blips_creator/html/index_de.html Normal file
View File

@@ -0,0 +1,226 @@
<!DOCTYPE html>
<html>
<head>
<title>Blips Creator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- Script CSS -->
<link href="index.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body style="background-color: transparent !important;">
<div id="notification" class="toast position-absolute mt-5 start-50 translate-middle" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Blips Creator</strong>
</div>
<div id="notification-message" class="toast-body">
</div>
</div>
<div id="map-utilities" class="big-container container">
<div class="row mt-2">
<div class="col">
<button id="create-blip-btn" type="button" class="btn btn-success">Blip erstellen</button>
<button id="create-global-blip-btn" type="button" class="btn btn-warning">Globalen Blip erstellen (Admin)</button>
<button id="refresh-blips-btn" type="button" class="btn btn-info">Neuladen</button>
<button id="map-utilities-close-btn" type="button" class="btn-close btn-close-white float-end"
aria-label="Close"></button>
</div>
</div>
<div id="blips-container" class="container my-2"></div>
</div>
<div id="edit-blip" class="little-container container">
<button id="edit-blip-close-btn" type="button" class="btn-close btn-close-white float-end mt-2 mb-4"
aria-label="Close"></button>
<select id="edit-blip-type" class="form-select mt-3">
<option value="coords" selected>Koordinaten</option>
<option value="area">Bereich</option>
<option value="radius">Radius</option>
</select>
<div id="edit-blip-sprite-name-container" class="row mt-4">
<figure id="edit-blip-sprite-container" class="figure col-3">
<img id="edit-blip-sprite" class="blip-sprite img-fluid mt-3 ms-3" alt="Current Blip">
<figcaption class="figure-caption">Blip Bild</figcaption>
</figure>
<div class="col-9">
<div class="input-group mt-3">
<span class="input-group-text" id="edit-blip-name-describe">Blip Name</span>
<input id="edit-blip-name" type="text" class="form-control" placeholder="Blip Name"
aria-label="Blip Name" aria-describedby="edit-blip-name-describe">
</div>
</div>
</div>
<div id="edit-blip-scale-container">
<label for="edit-blip-scale" class="form-label mt-3 fs-2">Blip Skala</label>
<input id="edit-blip-scale" type="range" class="form-range" min="0.5" max="2.0" step="0.01">
</div>
<div id="edit-blip-height-width-container">
<label for="edit-blip-width" class="form-label mt-3 fs-2">Blip Breite</label>
<input id="edit-blip-width" type="range" class="form-range" min="1.0" max="10000.0" step="1.0">
<label for="edit-blip-height" class="form-label mt-3 fs-2">Blip Höhe</label>
<input id="edit-blip-height" type="range" class="form-range" min="1.0" max="10000.0" step="1.0">
</div>
<label for="edit-blip-alpha" class="form-label mt-3 fs-2">Blip Deckkraft</label>
<input id="edit-blip-alpha" type="range" class="form-range" min="0" max="255" step="1">
<p class="fs-2">Blip Farbe</p>
<div id="blip-colors" class="container my-2"></div>
<div id="edit-blip-tick-container" class="form-check form-switch mt-3 fs-4">
<input class="form-check-input" type="checkbox" id="edit-blip-tick">
<label class="form-check-label" for="edit-blip-tick">Häkchen am Blip</label>
</div>
<div id="edit-blip-outline-container" class="form-check form-switch mt-3 fs-4">
<input class="form-check-input" type="checkbox" id="edit-blip-outline">
<label class="form-check-label" for="edit-blip-outline">Umrandung</label>
</div>
<div class="form-check mt-3 fs-5">
<input class="form-check-input" type="radio" name="edit-blip-display" data-display=3
id="edit-blip-display-mainmap">
<label class="form-check-label" for="edit-blip-display-mainmap">
Nur auf Hauptmap
</label>
</div>
<div class="form-check fs-5">
<input class="form-check-input" type="radio" name="edit-blip-display" data-display=5
id="edit-blip-display-minimap">
<label class="form-check-label" for="edit-blip-display-minimap">
Nur auf Minimap
</label>
</div>
<div class="form-check fs-5">
<input class="form-check-input" type="radio" name="edit-blip-display" data-display=2
id="edit-blip-display-both">
<label class="form-check-label" for="edit-blip-display-both">
Haupt Map + Minimap
</label>
</div>
<button id="edit-blip-share-btn" type="button" class="btn btn-info mt-3">Blip teilen</button>
<button id="edit-blip-delete-btn" type="button" class="btn btn-danger mt-3 mb-3 col-12">Blip löschen</button>
</div>
<div id="delete-blip-modal" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Blip löschen</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Bist du sicher, dass du den Blip löschen willst?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
<button id="delete-blip-btn" type="button" class="btn btn-danger">Löschen</button>
</div>
</div>
</div>
</div>
<div id="create-blip-mode" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Blipe Erstellung</h5>
<button id="blip-mode-close-btn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Wie möchtest du den Blip erstellen?</p>
</div>
<div class="modal-footer">
<button id="create-blip-from-coords-btn" class="btn btn-secondary">Durch Koordinaten</button>
<button id="create-blip-place-blip-btn" class="btn btn-success">Blip platzieren</button>
</div>
</div>
</div>
</div>
<div id="create-from-coords-modal" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Erstellung durch Koordinaten</h5>
<button id="from-coords-close-btn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<span class="input-group-text" id="x-coord-label">X</span>
<input id="x-coord" type="text" class="form-control" aria-label="x" aria-describedby="x-coord-label">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="y-coord-label">Y</span>
<input id="y-coord" type="text" class="form-control" aria-label="y" aria-describedby="y-coord-label">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="z-coord-label">Z</span>
<input id="z-coord" type="text" class="form-control" aria-label="z" aria-describedby="z-coord-label">
</div>
<button id="current-coords-btn" type="button" class="btn btn-secondary my-2">Aktuelle Koordinaten</button>
</div>
<div class="modal-footer">
<button id="confirm-from-coords" class="btn btn-success">Erstellen</button>
</div>
</div>
</div>
</div>
<div id="share-choose-id" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Blip teilen</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<span class="input-group-text" id="player-id-label">Spieler ID</span>
<input id="player-id" type="text" class="form-control" aria-label="Player ID" aria-describedby="player-id-label">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Abbrechen</button>
<button id="share-btn" class="btn btn-success">Teilen</button>
</div>
</div>
</div>
</div>
<div id="blip-sprites" class="container mt-2 border border-2 rounded" style="resize: vertical;"></div>
<!-- jQuery, then bootstrap, then popper -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"
integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
crossorigin="anonymous"></script>
<script src="index.js"></script>
<script src="../utils/dialogs/dialogs.js"></script>
</body>
</html>