prescientmoon/erratic-gate
prescientmoon/erratic-gate
1
Fork 0
Code Issues 2 Pull requests Activity

🌋 fixed saving and loading saves from the ui, fixed the scale bug and the switchTo not beeing triggered 🚈

Browse source
This commit is contained in:
Matei Adriel 2019-06-03 08:03:35 +00:00
parent 5bd50c4a32
commit 230957b1bf
5 changed files with 62 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/index.html
View file

@ -8,7 +8,7 @@
<link rel='stylesheet' href='style.css'>
</head>
<body>
<body ondragstart="return false;" ondrop="return false;">
hello world
</body>

8
src/scss/base.scss
View file

@ -1,7 +1,7 @@
@import "./toastr.scss";
@import "./modal.scss";
$mdc-theme-primary: black;
$mdc-theme-primary: orange / 2;
$mdc-theme-secondary: #feeae6;
$mdc-theme-on-primary: white;
$mdc-theme-surface: black;
@ -29,9 +29,9 @@ svg {
display: block;
}
.modal__btn-primary{
background: orange !important;
}
// .modal__btn-primary{
// background: orange !important;
// }
.createBar {
z-index:10;

33
src/ts/common/componentManager/componentManager.ts
View file

@ -16,6 +16,7 @@ import { Settings } from "../store/settings";
import { download } from "./download";
import { modal } from "../modals";
import { map } from "rxjs/operators";
import { persistent } from "../store/persistent";
@Singleton
@ -48,7 +49,8 @@ export class ComponentManager {
private upEvent = new KeyboardInput("up")
private downEvent = new KeyboardInput("down")
public name = "current"
@persistent<ComponentManager, string>("current", "main'")
public name: string
public alertOptions = alertOptions
private commandHistory: string[] = []
@ -140,9 +142,7 @@ export class ComponentManager {
else {
if (this.ctrlEvent.value) {
if (this.createEvent.value) {
this.preInput()
this.inputMode = "create"
this.placeholder.next("Create simulation")
this.prepareNewSimulation()
}
else if (this.shiftEvent.value && this.palleteEvent.value) {
this.preInput()
@ -164,10 +164,16 @@ export class ComponentManager {
this.wireManager.update.subscribe(val => this.update())
this.saves.next(this.store.ls())
//if (this.saves.value.length === 0)
// this.save()
if (this.saves.value.length === 0)
this.save()
}
public prepareNewSimulation() {
this.preInput()
this.inputMode = "create"
this.placeholder.next("Create simulation")
}
preInput() {
const elem = <HTMLInputElement>document.getElementById("nameInput")
elem.value = ""
@ -199,6 +205,7 @@ All you work will be lost!`
}
public createEmptySimulation(name: string) {
console.log(name)
const create = () => {
this.store.set(name, {
wires: [],
@ -209,6 +216,7 @@ All you work will be lost!`
if (name !== this.name)
this.save()
this.name = name
this.refresh()
}
@ -222,12 +230,14 @@ All you work will be lost!`
}
public switchTo(name: string) {
console.log(`switching to ${name}`)
const data = this.store.get(name)
if (!data)
error(`An error occured when trying to load ${name}`, "", this.alertOptions)
else
this.loadState(data)
this.name = name
this.refresh()
}
eval(command: string) {
@ -259,6 +269,8 @@ All you work will be lost!`
}
refresh() {
console.log(this.name)
if (this.store.get(this.name)) {
this.loadState(this.store.get(this.name))
}
@ -401,6 +413,7 @@ All you work will be lost!`
this.screen.scale = state.scale
this.screen.position = state.position
this.screen.update()
this.update()
}
@ -410,8 +423,8 @@ All you work will be lost!`
const element = this.commandHistory[i];
this.commandHistoryStore.set(i.toString(), element)
}
this.store.set(name || this.name, this.state)
this.store.set(this.name, this.state)
this.saves.next(this.store.ls())
success("Saved the simulation succesfully!", "", this.alertOptions)
success(`Saved the simulation ${this.name} succesfully!`, "", this.alertOptions)
}
}

21
src/ts/common/store/persistent.ts Normal file
View file

@ -0,0 +1,21 @@
import { Store } from "./store";
export const persistent = <T,K>(_default:K,storeKey = "main") => (target:T, key: keyof T & string) => {
let secret: K
const store = new Store<K>(key)
if (store.get(storeKey))
secret = store.get(storeKey)
else
secret = _default
Object.defineProperty(target,key,{
get() {
return secret
},
set(value:K) {
secret = value
store.set(storeKey, secret)
},
enumerable: true
})
}

28
src/ts/main.ts
View file

@ -10,10 +10,11 @@ import { MDCMenu } from '@material/menu';
const screen = new Screen()
const manager = new ComponentManager()
manager.components.push(new Component("and", [200, 100], [100, 100]))
manager.components.push(new Component("not", [200, 500], [100, 100]))
manager.components.push(new Component("true", [200, 500], [100, 100]))
manager.components.push(new Component("false", [200, 500], [100, 100]))
// manager.components.push(new Component("and", [200, 100], [100, 100]))
// manager.components.push(new Component("not", [200, 500], [100, 100]))
// manager.components.push(new Component("true", [200, 500], [100, 100]))
// manager.components.push(new Component("false", [200, 500], [100, 100]))
manager.save()
manager.update()
const handleEvent = <T>(e: T, func: (e: T) => any) => {
@ -62,32 +63,27 @@ render(html`
<aside class="mdc-drawer main-sidebar">
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">Something</span>
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page" @click=${() => manager.prepareNewSimulation()}>
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">add</i>
<span class="mdc-list-item__text">Create new simulation</span>
</a>
<a class="mdc-list-item" href="#" id="openSimulation" @click=${() => {
menu.open = true
// menu.setAbsolutePosition(screen.mousePosition[0], screen.mousePosition[1])
}}>
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">folder_open</i>
<span class="mdc-list-item__text">Open simulation</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">another thing</span>
</a>
</nav>
</div>
</aside>
<div class="mdc-menu mdc-menu-surface mdc-theme--primary-bg mdc-theme--on-primary">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
${subscribe(manager.saves.pipe(map(val => html`
<li class= "mdc-list-item" role = "menuitem" >
${subscribe(manager.saves.pipe(map(_ => _.map(val => html`
<li class= "mdc-list-item" role = "menuitem" @click=${() => manager.switchTo(val)}>
<span class="mdc-list-item__text"> ${val} </span>
</li>`
)))}
))))}
</ul>
</div>
`, document.body)