# grinding-simulator-mvp-lively

## Component Path

<script>
import { ensureLoadGS, gsFolder, componentPathIncluded } from './load.js';
import { gsDir } from './utils.js';
debugger

const loaded = ensureLoadGS()

function success(text) {
  return <span><i class='fa fa-check' style='color: green'></i> {text}</span>;
}
function failure(text) {
  return <span><i class='fa fa-times' style='color: red'></i> {text}</span>;
}

const info = <div></div>;
function updateInfo() {
  info.innerHTML = '';
  
  const readyMsg = success('This component path of GS is ready to be played.');
  const notInPathMsg = failure('You need to include the component root first.');
  info.append(<div>{componentPathIncluded() ? readyMsg : notInPathMsg}</div>); 
  
  const gsDirInLocalStorageMsg = success('GS_DIR is in local storage and points to this folder.');
  const notInLocalStorageMsg = failure('You need to set "gsDir" to this folder first.');
  info.append(<div>{gsFolder.isThisFolder() ? gsDirInLocalStorageMsg : notInLocalStorageMsg}</div>); 
  
  info.append(<span>Current component paths:
  <ul>{...lively.components.persistentCustomTemplatePaths.map(path => <li>{path}</li>)}</ul>
  </span>);
}
updateInfo();
loaded.then(updateInfo)
info;
</script>

<script>
import { COMPONENTS_DIR } from './utils/dir.js';
<span>
Component Path <i>{COMPONENTS_DIR}</i>
<button click={e => {
  lively.components.addPersistentCustomTemplatePath(COMPONENTS_DIR);
  updateInfo();
}}>Add</button>
<button click={e => {
  lively.components.removePersistentCustomTemplatePath(COMPONENTS_DIR);
  updateInfo();
}}>Remove</button>
</span>
</script>

<script>
<button click={e => {
  gsFolder.remove();
  updateInfo();
}}>Remove gsFolder from LocalStorage</button>
</script>

## GS Dir

<script>
loaded.then(() => {
  return <button style='background: linear-gradient(#20ee20, #40ee40); border: solid green 1px' click={e => {
    if (!componentPathIncluded()) {
      alert('you need to include the path first');
      return;
    }
    lively.openComponentInWindow('gs-simulator');
  }}>Play the Game!</button>;
})
</script>

[devlog](./devlog.md)