Skip to content

Map-It-Web-Ui #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Map-It-Web-Ui #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e379703
Added file upload functionality to index.html and a functionality to …
RkeyDev Jul 23, 2025
39eba02
Enhance file upload validation by restricting input to CSV files
RkeyDev Jul 23, 2025
5be0e1b
Refactor file upload and map activation functionality; enhance stylin…
RkeyDev Jul 23, 2025
032a278
Refactor file input and upload button layout; enhance styling for wor…
RkeyDev Jul 24, 2025
4f55b2a
Add a blank line for improved readability in customMapLoader.js
RkeyDev Jul 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions public/customMapLoader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
function uploadFile() {

Check failure on line 1 in public/customMapLoader.js

View workflow job for this annotation

GitHub Actions / lint 

Missing space before function parentheses

Check failure on line 1 in public/customMapLoader.js

View workflow job for this annotation

GitHub Actions / lint 

'uploadFile' is defined but never used
const fileInput = document.getElementById('fileInput');

Check failure on line 2 in public/customMapLoader.js

View workflow job for this annotation

GitHub Actions / lint 

Extra semicolon

Check failure on line 2 in public/customMapLoader.js

View workflow job for this annotation

GitHub Actions / lint 

Expected indentation of 2 spaces but found 4
const file = fileInput.files[0];

Check failure on line 3 in public/customMapLoader.js

View workflow job for this annotation

GitHub Actions / lint 

Extra semicolon

Check failure on line 3 in public/customMapLoader.js

View workflow job for this annotation

GitHub Actions / lint 

Expected indentation of 2 spaces but found 4

if (!file) {

Check failure on line 5 in public/customMapLoader.js

View workflow job for this annotation

GitHub Actions / lint 

Expected indentation of 2 spaces but found 4
alert('Please select a file.');

Check failure on line 6 in public/customMapLoader.js

View workflow job for this annotation

GitHub Actions / lint 

Extra semicolon

Check failure on line 6 in public/customMapLoader.js

View workflow job for this annotation

GitHub Actions / lint 

Expected indentation of 4 spaces but found 8
return;

Check failure on line 7 in public/customMapLoader.js

View workflow job for this annotation

GitHub Actions / lint 

Expected indentation of 4 spaces but found 8
}

const allowedTypes = ['text/csv', 'application/vnd.ms-excel']; // CSV types
const fileExtension = file.name.split('.').pop().toLowerCase();

if (fileExtension !== 'csv' && !allowedTypes.includes(file.type)) {
alert('Please upload a valid CSV file.');
return;
}

const formData = new FormData();
formData.append('file', file);

fetch('http://localhost:8000/upload', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => alert(data))
.catch(err => {
console.error(err);
alert("Upload failed");
});
}

const switchMapsButton = document.getElementById('switch-maps-button');
let isRequestInProgress = false;
let currentlyActivate = true;


function activateRandomMap() {
console.log(currentlyActivate);

if (isRequestInProgress) return;

isRequestInProgress = true;
const url = currentlyActivate
? 'http://localhost:8000/activateRandomMap'
: 'http://localhost:8000/deactivateRandomMap';


switchMapsButton.innerText = currentlyActivate? 'Switch to random map' : 'Switch to custom map';


fetch(url, {
method: 'POST'
})
.then(response => response.text())
.then(data => {
console.log("after chaneg: " + currentlyActivate);
currentlyActivate = !currentlyActivate; // Flip state only on success
})
.catch(err => {
console.error(err);
})
.finally(() => {
isRequestInProgress = false;
});
}
86 changes: 86 additions & 0 deletions public/game.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,3 +196,89 @@ body {
.error-text {
color: red;
}




#upload-file-button{
display: block;
font-weight: bold;
color: #ecf0f1;
text-decoration: none;
border: 1px solid #34495e;
padding: 8px 15px;
border-radius: 5px;
background-color: #3498db;
transition: background-color 0.2s;
}

#file-input{
display: block;
font-weight: bold;
color: #ecf0f1;
text-decoration: none;
border: 1px solid #34495e;
padding: 8px 15px;
border-radius: 5px;
background-color: #3498db;
transition: background-color 0.2s;
}


#world-settings {
margin: 20px 0;
padding: 10px;
border-radius: 5px; /* rounded corners */
width: fit-content;
position: absolute;
top: 10px;
left: -10px;
z-index: 100; /* ensure it appears above other elements */
display: flex; /* or 'grid' */
flex-direction: column; /* stack elements vertically */
gap: 10px;
}


#world-settings input[type="file"] {
display: inline-block;
margin-right: 10px;

}

#world-settings button {
display: block;
font-weight: bold;
color: #ecf0f1;
text-decoration: none;
border: 1px solid #34495e;
padding: 8px 15px;
border-radius: 5px;
background-color: #3498db;
transition: background-color 0.2s;
}

#world-settings button:hover {
background-color: #2980b9
}


#world-settings button:disabled {
color: #666;
background-color: #2980b9; /* slightly darker for disabled state */
}

#file-input {
display: inline-block;
margin-right: 10px;
font-weight: bold;
color: #ecf0f1;
text-decoration: none;
padding: 8px 15px;
border-radius: 5px;
transition: background-color 0.2s;
width: 200px;
position: absolute;
left: -5px;
top: -25px;
}
11 changes: 10 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@

<body>
<div id="content">
<div id="world-settings">
<input type="file" id="fileInput" accept=".csv" style="display: none;">
<label for="fileInput" id="customFileLabel">Choose File</label>
<button onclick="uploadFile()" id="upload-file-button">Upload</button>
<button onclick="activateRandomMap()" id="switch-maps-button">Switch to custom map</button>
</div>

<a href="settings/index.html" id="settings-link">Settings</a>
<a href="#" id="info-btn">Info</a>

Expand All @@ -17,10 +24,12 @@ <h2>Game Information</h2>
<span id="info-text"></span>
</div>

<script src="customMapLoader.js"></script>

<form id="control">

<button id="run" disabled>Run</button>
<button id="stop" disabled>Stop</button>
<button id="stop" disabled>Stop</button>
<button id="music_ctl">Music</button>
<button id="reset">Reset</button>
<label id="info"></label>
Expand Down