Skip to content

Commit 9bb3a98

Browse files
SevanKSevanK
committed
locally working v1
0 parents  commit 9bb3a98

File tree

3 files changed

+199
-0
lines changed

3 files changed

+199
-0
lines changed

‎index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Flip Text</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<!-- Description -->
12+
<div class="title">
13+
<p>PUZZLESCRIPT LEVEL ROTATOR</p>
14+
</div>
15+
<div class="description">
16+
<p>This tool was made for rotating/flipping levels of <a href="https://www.puzzlescript.net" target="_blank">puzzlescript</a> games. <br>
17+
It should work on other (rectangular) texts may you find some use for it.</p>
18+
</div>
19+
20+
<!-- Buttons above the input -->
21+
<div class="buttons-top">
22+
<button id="rotateClockwise">Rotate Clockwise</button>
23+
<button id="rotateCounterclockwise">Rotate Counterclockwise</button>
24+
<button id="flipH">Flip Horizontally</button>
25+
<button id="flipV">Flip Vertically</button>
26+
<button id="transpose">Transpose</button>
27+
</div>
28+
29+
<textarea id="inputText" placeholder="Paste your level here. Non rectangular inputs might have unexpected results."></textarea>
30+
31+
<!-- Buttons below the output -->
32+
<div class="buttons-bottom">
33+
<button id="copyToClipboard">Copy to Clipboard</button>
34+
</div>
35+
36+
</div>
37+
<script src="script.js"></script>
38+
</body>
39+
</html>

‎script.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
// transpose
2+
document.getElementById("transpose").addEventListener("click", function() {
3+
console.log('transpose');
4+
const t = inputText.value;
5+
const columns = getColumns(t);
6+
7+
inputText.value = columns.join('\n');
8+
});
9+
10+
11+
// Rotate clockwise
12+
document.getElementById("rotateClockwise").addEventListener("click", function() {
13+
console.log('transpose');
14+
const t = inputText.value;
15+
const lines = t.split('\n').filter(line => line.trim() !== '');
16+
const columns = getColumns(t);
17+
console.log(columns[0])
18+
19+
let res = []
20+
for (let col = 0; col < columns.length; col++){
21+
newLine = columns[col].split('').reverse().join('');
22+
res.push(newLine);
23+
}
24+
inputText.value = res.join('\n');
25+
});
26+
27+
// Rotate counterclockwise
28+
document.getElementById("rotateCounterclockwise").addEventListener("click", function() {
29+
console.log('transpose');
30+
const t = inputText.value;
31+
const lines = t.split('\n').filter(line => line.trim() !== '');
32+
const columns = getColumns(t);
33+
console.log(columns[0])
34+
35+
let res = []
36+
for (let col = columns.length - 1; col >= 0; col--){
37+
newLine = columns[col];
38+
res.push(newLine);
39+
}
40+
inputText.value = res.join('\n');
41+
});
42+
43+
// Flip horizontally
44+
document.getElementById("flipH").addEventListener("click", function() {
45+
console.log('flipH!');
46+
const t = inputText.value;
47+
const lines = t.split('\n');
48+
const flippedLines = lines.map(line => {return line.split('').reverse().join('')}); // flip each line
49+
const flippedText = flippedLines.join('\n')
50+
inputText.value = flippedText;
51+
});
52+
53+
// Flip vertically
54+
document.getElementById("flipV").addEventListener("click", function() {
55+
const t = inputText.value;
56+
const lines = t.split('\n');
57+
const flippedLines = lines.reverse();
58+
inputText.value = flippedLines.join('\n');
59+
60+
});
61+
62+
// Copy to clipboard
63+
document.getElementById("copyToClipboard").addEventListener("click", function() {
64+
let t = document.getElementById("inputText").value;
65+
const button = document.getElementById("copyToClipboard");
66+
navigator.clipboard.writeText(t)
67+
.then(() => {
68+
// Change the text and color of the button
69+
button.textContent = "Copied!"; // Change the button text
70+
button.style.backgroundColor = "#4C50AF"; // Change the button color (green)
71+
72+
})
73+
.catch(err => {
74+
// Change the text and color of the button
75+
button.textContent = "Failed to copy: " + err; // Change the button text
76+
button.style.backgroundColor = "#AF4C50"; // Change the button color (green)
77+
78+
})
79+
80+
// After 1 second, reset the button text and color
81+
setTimeout(() => {
82+
button.textContent = "Copy to clipboard"; // Reset text
83+
button.style.backgroundColor = ""; // Reset the background color (default)
84+
}, 1000); // Wait for 1 seconds
85+
});
86+
87+
function getColumns(t){
88+
89+
const lines = t.split('\n').filter(line => line.trim() !== '');
90+
const maxLength = Math.max(...lines.map(line => line.length));
91+
92+
let columnsArray = [];
93+
94+
for (let i = 0; i < maxLength; i++){
95+
let column = lines.map(line => line[i] || '.').join('');
96+
columnsArray.push(column);
97+
}
98+
return columnsArray;
99+
//const columns = columnsArray.join('\n');
100+
//return columns;
101+
}

‎style.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
background-color: #f4f4f4;
8+
}
9+
10+
.container {
11+
gap: 20px;
12+
}
13+
14+
.description {
15+
margin: 20px 0;
16+
font-size: 16px;
17+
text-align: center;
18+
color: #333;
19+
font-family: Arial, sans-serif;
20+
}
21+
22+
23+
.title {
24+
font-size: 44px;
25+
text-align: center;
26+
color: #333;
27+
font-family: Arial, sans-serif;
28+
}
29+
30+
textarea {
31+
width: 100%;
32+
height:50vh;
33+
padding: 10px;
34+
border: 1px solid #ccc;
35+
background-color: white;
36+
justify-content:center;
37+
}
38+
39+
/* Styling for buttons */
40+
button {
41+
padding: 10px 20px;
42+
font-size: 16px;
43+
border: none;
44+
background-color: #4CAF50;
45+
color: white;
46+
cursor: pointer;
47+
margin: 5px;
48+
}
49+
50+
button:hover {
51+
background-color: #45a049;
52+
}
53+
54+
.buttons-top, .buttons-bottom {
55+
display: flex;
56+
justify-content: center;
57+
gap: 10px;
58+
margin-bottom: 20px;
59+
}

0 commit comments

Comments
 (0)