Skip to content

Commit 5201c86

Browse files
byandrevbyandrev
authored
Merge pull request #3 from MauricioDDS/main
Modificaciones iniciales TM Sim
2 parents b81fa91 + 80b75e8 commit 5201c86

File tree

4 files changed

+111
-47
lines changed

4 files changed

+111
-47
lines changed

‎index.html‎

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -11,40 +11,34 @@
1111
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
1212
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
1313
crossorigin="anonymous"
14-
referrerpolicy="no-referrer"
15-
/>
14+
referrerpolicy="no-referrer" />
1615

1716
<link
1817
rel="stylesheet"
1918
href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.7.5/joint.min.css"
2019
integrity="sha512-GyvR5jC0OnZNT+eb5PR1OaRq4uSlkE+SrHK/T3DfKyUboA191W3aUiuCrErwtZuVdPMVu/Me595KD+rxXSe19w=="
2120
crossorigin="anonymous"
22-
referrerpolicy="no-referrer"
23-
/>
21+
referrerpolicy="no-referrer" />
2422
<script
2523
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
2624
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
2725
crossorigin="anonymous"
28-
referrerpolicy="no-referrer"
29-
></script>
26+
referrerpolicy="no-referrer"></script>
3027
<script
3128
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
3229
integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
3330
crossorigin="anonymous"
34-
referrerpolicy="no-referrer"
35-
></script>
31+
referrerpolicy="no-referrer"></script>
3632
<script
3733
src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.5.0/backbone-min.js"
3834
integrity="sha512-NAJF/IIdtSJ5JxYalGv+g0xbnbHJTa0W24Gy21nImt+sBkjRWTOhoo+JAQvCw9A9WzCJmq/JVuijggiOkrdW1Q=="
3935
crossorigin="anonymous"
40-
referrerpolicy="no-referrer"
41-
></script>
36+
referrerpolicy="no-referrer"></script>
4237
<script
4338
src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.7.5/joint.min.js"
4439
integrity="sha512-pSAAtQw8Sz/OO4m9e2rLqIUe8pZVng7giqZgoBnFTkl3ovJJ6WHHxNgIY+q607xg3CHhWdZKih7oVofY5ENdxQ=="
4540
crossorigin="anonymous"
46-
referrerpolicy="no-referrer"
47-
></script>
41+
referrerpolicy="no-referrer"></script>
4842
</head>
4943
<body class="min-h-[100vh]">
5044
<div class="border-b-[2px]">
@@ -65,34 +59,38 @@ <h1 class="select-none">Automata Simulation</h1>
6559
<div
6660
class="element bg-white cursor-pointer select-none rounded-full border-2 w-8 h-8 text-center leading-6 text-xs"
6761
draggable="true"
68-
title="State"
69-
>
62+
title="State">
7063
q
7164
</div>
7265

7366
<div
7467
class="element bg-white cursor-pointer select-none rounded-full border-2 w-8 h-8 text-center leading-6 text-xs"
7568
draggable="true"
76-
title="Final State"
77-
>
69+
title="Final State">
7870
qf
7971
</div>
8072

8173
<div
8274
class="bg-white cursor-pointer select-none rounded-full border-2 w-8 h-8 text-center leading-6 text-xs"
8375
title="Clear all"
84-
id="btn-clear-all"
85-
>
76+
id="btn-clear-all">
8677
<i class="fa-solid fa-trash-can text-[10px]"></i>
8778
</div>
8879

8980
<div
9081
class="bg-white cursor-pointer select-none rounded-full border-2 w-8 h-8 text-center leading-6 text-xs"
9182
title="Download"
92-
id="btn-download"
93-
>
83+
id="btn-download">
9484
<i class="fa-solid fa-cloud-arrow-down text-[10px]"></i>
9585
</div>
86+
87+
<select
88+
class="change-simulator"
89+
id="changeSim"
90+
onchange="changeSimulator()">
91+
<option value="Automata-Simulator">AFD Simulator</option>
92+
<option value="Turing-Machine-Simulator">TM Simulator</option>
93+
</select>
9694
</div>
9795

9896
<div class="flex items-center gap-4">
@@ -102,8 +100,7 @@ <h1 class="select-none">Automata Simulation</h1>
102100
<a
103101
target="_blank"
104102
href="https://github.com/byandrev/automata-simulation"
105-
class="bg-gray-600 shadow text-white flex items-center gap-2 rounded px-2 py-1"
106-
>
103+
class="bg-gray-600 shadow text-white flex items-center gap-2 rounded px-2 py-1">
107104
<span class="text-xs block">Open Source</span>
108105
<i class="fa-brands fa-github"></i
109106
></a>
@@ -120,13 +117,11 @@ <h1 class="select-none">Automata Simulation</h1>
120117
type="text"
121118
id="input-string"
122119
placeholder="String"
123-
class="w-full px-1 h-8 text-xs rounded border-2 border-slate-200 bg-slate-100"
124-
/>
120+
class="w-full px-1 h-8 text-xs rounded border-2 border-slate-200 bg-slate-100" />
125121

126122
<button
127123
id="run"
128-
class="rounded flex items-center gap-2 shadow px-4 h-8 text-xs bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-500"
129-
>
124+
class="rounded flex items-center gap-2 shadow px-4 h-8 text-xs bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-500">
130125
<i class="fa-solid fa-play"></i>
131126
Run
132127
</button>
@@ -164,8 +159,7 @@ <h2 class="text-2xl font-bold mb-2">About</h2>
164159
autoplay="true"
165160
src="/example-use.mp4"
166161
class="border-2 rounded"
167-
alt="create, modify, and simulate automata"
168-
></video>
162+
alt="create, modify, and simulate automata"></video>
169163

170164
<p class="text-center text-sm font-bold underline">
171165
Rename states and transitions with double click
@@ -183,8 +177,8 @@ <h2 class="text-2xl font-bold mb-2">ToDo</h2>
183177
<i class="fa-regular fa-square-check"></i> Generate transition table
184178
</li>
185179
<li>
186-
<i class="fa-regular fa-square-check"></i> Generate automata from the
187-
transition table and viceversa
180+
<i class="fa-regular fa-square-check"></i> Generate automata from
181+
the transition table and viceversa
188182
</li>
189183
<li><i class="fa-regular fa-square-check"></i> Run step by step</li>
190184
<li>
@@ -261,8 +255,7 @@ <h3 class="text-2xl font-bold mb-2">Collaborate</h3>
261255
</main>
262256

263257
<footer
264-
class="container mx-auto flex justify-between items-end border-t-2 py-8 px-2"
265-
>
258+
class="container mx-auto flex justify-between items-end border-t-2 py-8 px-2">
266259
<div>
267260
<p>Automata Simulation</p>
268261
<p>
@@ -276,32 +269,27 @@ <h3 class="text-2xl font-bold mb-2">Collaborate</h3>
276269
</p>
277270
</div>
278271

279-
<p>
280-
Development with ❤️
281-
</p>
272+
<p>Development with ❤️</p>
282273
</footer>
283274

284275
<div
285276
class="modal micromodal-slide"
286277
id="modal-label-name"
287-
aria-hidden="true"
288-
>
278+
aria-hidden="true">
289279
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
290280
<div
291281
role="dialog"
292282
aria-modal="true"
293283
aria-labelledby="modal-1-title"
294-
class="modal__container relative pt-4"
295-
>
284+
class="modal__container relative pt-4">
296285
<span
297286
class="absolute top-[2px] left-0 text-xs bg-yellow-300 px-2 rounded-t"
298287
>Label name</span
299288
>
300289
<input
301290
type="text"
302291
id="input-label-name"
303-
class="p-2 rounded border-2"
304-
/>
292+
class="p-2 rounded border-2" />
305293
<!-- <button id="btn-label-name" class="modal__btn modal__btn-primary">
306294
Save
307295
</button> -->
@@ -312,31 +300,46 @@ <h3 class="text-2xl font-bold mb-2">Collaborate</h3>
312300
<div
313301
class="modal micromodal-slide"
314302
id="modal-state-name"
315-
aria-hidden="true"
316-
>
303+
aria-hidden="true">
317304
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
318305
<div
319306
role="dialog"
320307
aria-modal="true"
321308
aria-labelledby="modal-1-title"
322-
class="modal__container relative pt-4"
323-
>
309+
class="modal__container relative pt-4">
324310
<span
325311
class="absolute top-[2px] left-0 text-xs bg-yellow-300 px-2 rounded-t"
326312
>State name</span
327313
>
328314
<input
329315
type="text"
330316
id="input-state-name"
331-
class="p-2 rounded border-2"
332-
/>
317+
class="p-2 rounded border-2" />
333318
<!-- <button id="btn-state-name" class="modal__btn modal__btn-primary">
334319
Save
335320
</button> -->
336321
</div>
337322
</div>
338323
</div>
324+
<script>
325+
// Load Turing Machine Simulator
326+
function changeSimulator() {
327+
var select = document.getElementById("changeSim");
328+
if (select) {
329+
var options = select.options[select.selectedIndex].value;
330+
if (options === "Automata-Simulator") {
331+
console.log("xd1");
332+
333+
}
334+
else if(options === "Turing-Machine-Simulator"){
335+
console.log("xd2");
339336

337+
}
338+
} else {
339+
console.error("Element not found");
340+
}
341+
}
342+
</script>
340343
<script src="src/main.js" type="module"></script>
341344
</body>
342345
</html>

‎src/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,3 +171,4 @@ btnClearAll.addEventListener("click", () => {
171171

172172
// Download png
173173
btnDownload.addEventListener("click", download);
174+

‎src/styles.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,14 @@ input:focus {
174174
color: #fff;
175175
}
176176

177+
.change-simulator{
178+
background-color: #FFE500;
179+
margin-left: 10px;
180+
border-radius: 10px;
181+
padding: 2px 5px 2px 5px;
182+
padding-bottom: 5px;
183+
}
184+
177185
/**************************\
178186
Demo Animation Style
179187
\**************************/

‎src/tm.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { animateNode, renderError, renderOut } from "./animateNode.js";
2+
3+
function verifyAFD(paper, graph, automata, string) {
4+
let i = 0;
5+
let state = automata.initialState;
6+
let symbol = string[i];
7+
8+
const interval = setInterval(() => {
9+
animateNode(
10+
paper,
11+
graph,
12+
state,
13+
symbol,
14+
automata.finalStates.includes(state)
15+
);
16+
17+
if (i >= string.length) {
18+
clearInterval(interval);
19+
20+
if (automata.finalStates.includes(state)) {
21+
renderOut("VALID");
22+
return;
23+
}
24+
25+
renderOut("INVALID");
26+
renderError("I do not end in a final state");
27+
return;
28+
}
29+
30+
document
31+
.querySelector("#string-out")
32+
.querySelector(`span:nth-child(${i + 1})`).className =
33+
"symbol text-blue-500 font-bold symbol-active";
34+
35+
const isState = automata.transitions.find(
36+
(el) => el.state === state && el.symbol.includes(symbol)
37+
);
38+
39+
if (!isState) {
40+
clearInterval(interval);
41+
42+
renderOut("INVALID");
43+
return;
44+
}
45+
46+
i++;
47+
state = isState.nextState;
48+
symbol = string[i];
49+
}, 1000);
50+
}
51+
52+
export { verifyAFD };

0 commit comments

Comments
 (0)