You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.9 KiB
54 lines
1.9 KiB
import { AUTOMATONS } from './examples.js';
|
|
import { openAutomaton } from './fsm.js';
|
|
import { tr, trUserContent } from './i18n.ts';
|
|
import './modal.ts';
|
|
|
|
const automatonSelector = /** @type {HTMLDivElement} */ (document.getElementById('automaton-selector'));
|
|
const automatonCollection = /** @type {HTMLDivElement} */ (document.getElementById('automaton-collection'));
|
|
const backButton = /** @type {HTMLButtonElement} */ (document.getElementById('back-button'));
|
|
const app = /** @type {HTMLDivElement} */ (document.getElementById('app'));
|
|
|
|
for (const [displayName, automaton] of Object.entries(AUTOMATONS)) {
|
|
const card = document.createElement('div');
|
|
card.setAttribute('tabindex', '0');
|
|
card.setAttribute('role', 'button');
|
|
card.classList.add('card');
|
|
card.innerHTML = `
|
|
<div class="card-body">
|
|
<h5 class="card-title">${trUserContent(displayName)}</h5>
|
|
<p class="card-text">${automaton.length} ${tr('states')}</p>
|
|
</div>
|
|
`;
|
|
const handleEvent = () => {
|
|
automatonSelector.setAttribute('hidden', 'hidden');
|
|
app.removeAttribute('hidden');
|
|
openAutomaton(automaton);
|
|
};
|
|
card.addEventListener('click', handleEvent);
|
|
card.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
handleEvent();
|
|
}
|
|
});
|
|
automatonCollection.appendChild(card);
|
|
}
|
|
const create = document.createElement('div');
|
|
create.classList.add('card');
|
|
create.innerHTML = `
|
|
<div class="card-body">
|
|
<h5 class="card-title">${tr('Create New Automaton')}</h5>
|
|
<p class="card-text">${tr('Create a new automaton from scratch.')}</p>
|
|
</div>
|
|
`;
|
|
automatonCollection.appendChild(create);
|
|
create.addEventListener('click', () => {
|
|
automatonSelector.setAttribute('hidden', 'hidden');
|
|
app.removeAttribute('hidden');
|
|
openAutomaton([], true);
|
|
});
|
|
|
|
backButton.addEventListener('click', () => {
|
|
app.setAttribute('hidden', 'hidden');
|
|
automatonSelector.removeAttribute('hidden');
|
|
});
|