From 7b8f1bd79f9a4f874efe60fd658ac1f962a28754 Mon Sep 17 00:00:00 2001 From: Cart1416 Date: Wed, 31 Jul 2024 19:19:06 -0400 Subject: [PATCH] improved upload dialog --- app.py | 9 +- levels/vMUwy94O.json | 572 +++++++++++++++++++++++++++++++++++++++++++ levels/vPS89q2f.json | 572 +++++++++++++++++++++++++++++++++++++++++++ public/index.html | 133 +++++++--- 4 files changed, 1247 insertions(+), 39 deletions(-) create mode 100644 levels/vMUwy94O.json create mode 100644 levels/vPS89q2f.json diff --git a/app.py b/app.py index e92fbb2..2364e3a 100644 --- a/app.py +++ b/app.py @@ -7,7 +7,8 @@ app = Flask(__name__) -UPLOAD_FOLDER = 'levels' +LEVELS_FOLDER = 'levels' +IMAGES_FOLDER = 'images' @app.route('/') def hello_world(): @@ -27,16 +28,16 @@ def upload_level(): if file: level_id = ''.join(random.choices(string.ascii_letters + string.digits, k=8)) filename = f"{level_id}.json" - filepath = os.path.join(UPLOAD_FOLDER, filename) + filepath = os.path.join(LEVELS_FOLDER, filename) file.save(filepath) return jsonify({"message": f"Level uploaded successfully. ID: {level_id}", "filename": filename}), 200 @app.route('/get_level/', methods=['GET']) def get_level(level_id): filename = f"{level_id}.json" - filepath = os.path.join(UPLOAD_FOLDER, filename) + filepath = os.path.join(LEVELS_FOLDER, filename) if os.path.exists(filepath): - return send_from_directory(UPLOAD_FOLDER, filename) + return send_from_directory(LEVELS_FOLDER, filename) else: return jsonify({"error": "Level not found"}), 404 diff --git a/levels/vMUwy94O.json b/levels/vMUwy94O.json new file mode 100644 index 0000000..5ad429e --- /dev/null +++ b/levels/vMUwy94O.json @@ -0,0 +1,572 @@ +{ + "levelName": null, + "authorName": "Cart1416", + "backgroundMusic": "ground_music.mp3", + "backgroundColor": "#9494ff", + "spawnPoint": { + "x": 64, + "y": 192 + }, + "startingLives": 5, + "levelMap": [ + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 2, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 2, + 2, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 2, + 2, + 2, + 2, + 2, + 2, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 2, + 10, + 0, + 2, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 2, + 0, + 0, + 9, + 9, + 9, + 0, + 2, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 2, + 2, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 9, + 9, + 9, + 9, + 9, + 9, + 9, + 9, + 0, + 0, + 1 + ], + [ + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1 + ] + ] +} \ No newline at end of file diff --git a/levels/vPS89q2f.json b/levels/vPS89q2f.json new file mode 100644 index 0000000..5ad429e --- /dev/null +++ b/levels/vPS89q2f.json @@ -0,0 +1,572 @@ +{ + "levelName": null, + "authorName": "Cart1416", + "backgroundMusic": "ground_music.mp3", + "backgroundColor": "#9494ff", + "spawnPoint": { + "x": 64, + "y": 192 + }, + "startingLives": 5, + "levelMap": [ + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 2, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 2, + 2, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 2, + 2, + 2, + 2, + 2, + 2, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 2, + 10, + 0, + 2, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 2, + 0, + 0, + 9, + 9, + 9, + 0, + 2, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 2, + 2, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 2, + 2, + 2, + 2, + 2, + 2, + 2, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1 + ], + [ + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 9, + 9, + 9, + 9, + 9, + 9, + 9, + 9, + 0, + 0, + 1 + ], + [ + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1, + 1 + ] + ] +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 79cee97..9338e1d 100644 --- a/public/index.html +++ b/public/index.html @@ -14,10 +14,67 @@ margin: 0; padding: 0; overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + } + + #uploadDialog { + border: 1px solid #ccc; + border-radius: 8px; + padding: 20px; + background: #fff; + box-shadow: 0 4px 8px rgba(0,0,0,0.2); + width: 300px; + text-align: center; + } + + #uploadDialog form { + display: flex; + flex-direction: column; + gap: 10px; + } + + #uploadDialog input[type="text"], + #uploadDialog input[type="file"] { + padding: 8px; + border: 1px solid #ddd; + border-radius: 4px; + box-sizing: border-box; + } + + #uploadDialog button { + padding: 10px 15px; + border: none; + border-radius: 4px; + background-color: #007bff; + color: #fff; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + #uploadDialog button:hover { + background-color: #0056b3; + } + + body::backdrop { + display: flex; + justify-content: center; + align-items: center; } + +

Upload level

+
+ + + +
+
@@ -64,6 +121,8 @@ // Add jump button cGL.addButton("jumpButton", canvas.width - buttonWidth - buttonPadding + desktopFix, canvas.height - buttonHeight - buttonPadding, buttonWidth, buttonHeight, true, "Jump"); + const uploadDialog = document.getElementById('uploadDialog'); + const marioRightImgs = [ `${assetsDirectory}/Mario_Small.png`, `${assetsDirectory}/Mario_Small_Walk_0.png`, @@ -1248,41 +1307,8 @@ }, 2000) } - if (cGL.buttons.uploadLevelButton.pressed && allowPlacing && canExportLevel) { - canExportLevel = false; - setTimeout(function() { - var levelName = prompt("Enter the level name:"); - var authorName = username; - var json = JSON.stringify({ - levelName: levelName, - authorName: authorName, - backgroundMusic: backgroundMusic, - backgroundColor: backgroundColor, - spawnPoint: spawnPoint, - startingLives: startingLives, - levelMap: levelMap - }, null, 2); - var blob = new Blob([json], { type: 'application/json' }); - var a = document.createElement('a'); - a.href = URL.createObjectURL(blob); - var formData = new FormData(); - formData.append('file', blob, `level-${levelName}.json`); - fetch(`${levelServer}/upload`, { - method: 'POST', - body: formData - }) - .then(response => response.json()) - .then(data => { - console.log('Success:', data); - alert(data.message); - }) - .catch(error => { - console.error('Error:', error); - }); - }, 1000) - setTimeout(function() { - canExportLevel = true; - }, 2000) + if (cGL.buttons.uploadLevelButton.pressed && allowPlacing) { + uploadDialog.open = true; } } @@ -2008,6 +2034,43 @@ } } + document.getElementById('uploadForm').addEventListener('submit', function(event) { + event.preventDefault(); + + var levelName = document.getElementById('levelName').value; + var levelImage = document.getElementById('levelImage').value; + + var authorName = username; + var json = JSON.stringify({ + levelName: levelName, + authorName: authorName, + backgroundMusic: backgroundMusic, + backgroundColor: backgroundColor, + spawnPoint: spawnPoint, + startingLives: startingLives, + imageUrl: levelImage, + levelMap: levelMap + }, null, 2); + var blob = new Blob([json], { type: 'application/json' }); + var a = document.createElement('a'); + a.href = URL.createObjectURL(blob); + var formData = new FormData(); + formData.append('file', blob, `level-${levelName}.json`); + fetch(`${levelServer}/upload`, { + method: 'POST', + body: formData + }) + .then(response => response.json()) + .then(data => { + console.log('Success:', data); + document.getElementById('uploadDialog').close(); + alert(data.message); + }) + .catch(error => { + console.error('Error:', error); + }); + }); + function renderBlocks() { const blockSize = mario.width; for (let y = 0; y < levelMap.length; y++) {