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'> <link rel='stylesheet' href='style.css'>
</head> </head>
<body> <body ondragstart="return false;" ondrop="return false;">
hello world hello world
</body> </body>

8
src/scss/base.scss
View file

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

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

@ -16,6 +16,7 @@ import { Settings } from "../store/settings";
import { download } from "./download"; import { download } from "./download";
import { modal } from "../modals"; import { modal } from "../modals";
import { map } from "rxjs/operators"; import { map } from "rxjs/operators";
import { persistent } from "../store/persistent";
@Singleton @Singleton
@ -48,7 +49,8 @@ export class ComponentManager {
private upEvent = new KeyboardInput("up") private upEvent = new KeyboardInput("up")
private downEvent = new KeyboardInput("down") private downEvent = new KeyboardInput("down")
public name = "current" @persistent<ComponentManager, string>("current", "main'")
public name: string
public alertOptions = alertOptions public alertOptions = alertOptions
private commandHistory: string[] = [] private commandHistory: string[] = []
@ -140,9 +142,7 @@ export class ComponentManager {
else { else {
if (this.ctrlEvent.value) { if (this.ctrlEvent.value) {
if (this.createEvent.value) { if (this.createEvent.value) {
this.preInput() this.prepareNewSimulation()
this.inputMode = "create"
this.placeholder.next("Create simulation")
} }
else if (this.shiftEvent.value && this.palleteEvent.value) { else if (this.shiftEvent.value && this.palleteEvent.value) {
this.preInput() this.preInput()
@ -164,10 +164,16 @@ export class ComponentManager {
this.wireManager.update.subscribe(val => this.update()) this.wireManager.update.subscribe(val => this.update())
this.saves.next(this.store.ls()) this.saves.next(this.store.ls())
//if (this.saves.value.length === 0) if (this.saves.value.length === 0)
// this.save() this.save()
} }
public prepareNewSimulation() {
this.preInput()
this.inputMode = "create"
this.placeholder.next("Create simulation")
}
preInput() { preInput() {
const elem = <HTMLInputElement>document.getElementById("nameInput") const elem = <HTMLInputElement>document.getElementById("nameInput")
elem.value = "" elem.value = ""
@ -199,6 +205,7 @@ All you work will be lost!`
} }
public createEmptySimulation(name: string) { public createEmptySimulation(name: string) {
console.log(name)
const create = () => { const create = () => {
this.store.set(name, { this.store.set(name, {
wires: [], wires: [],
@ -209,6 +216,7 @@ All you work will be lost!`
if (name !== this.name) if (name !== this.name)
this.save() this.save()
this.name = name
this.refresh() this.refresh()
} }
@ -222,12 +230,14 @@ All you work will be lost!`
} }
public switchTo(name: string) { public switchTo(name: string) {
console.log(`switching to ${name}`)
const data = this.store.get(name) const data = this.store.get(name)
if (!data) if (!data)
error(`An error occured when trying to load ${name}`,"",this.alertOptions) error(`An error occured when trying to load ${name}`, "", this.alertOptions)
else this.name = name
this.loadState(data) this.refresh()
} }
eval(command: string) { eval(command: string) {
@ -259,6 +269,8 @@ All you work will be lost!`
} }
refresh() { refresh() {
console.log(this.name)
if (this.store.get(this.name)) { if (this.store.get(this.name)) {
this.loadState(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.scale = state.scale
this.screen.position = state.position this.screen.position = state.position
this.screen.update()
this.update() this.update()
} }
@ -410,8 +423,8 @@ All you work will be lost!`
const element = this.commandHistory[i]; const element = this.commandHistory[i];
this.commandHistoryStore.set(i.toString(), element) 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()) 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 screen = new Screen()
const manager = new ComponentManager() const manager = new ComponentManager()
manager.components.push(new Component("and", [200, 100], [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("not", [200, 500], [100, 100]))
manager.components.push(new Component("true", [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("false", [200, 500], [100, 100]))
manager.save()
manager.update() manager.update()
const handleEvent = <T>(e: T, func: (e: T) => any) => { const handleEvent = <T>(e: T, func: (e: T) => any) => {
@ -62,32 +63,27 @@ render(html`
<aside class="mdc-drawer main-sidebar"> <aside class="mdc-drawer main-sidebar">
<div class="mdc-drawer__content"> <div class="mdc-drawer__content">
<nav class="mdc-list"> <nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page"> <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">inbox</i> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">add</i>
<span class="mdc-list-item__text">Something</span> <span class="mdc-list-item__text">Create new simulation</span>
</a> </a>
<a class="mdc-list-item" href="#" id="openSimulation" @click=${() => { <a class="mdc-list-item" href="#" id="openSimulation" @click=${() => {
menu.open = true 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> <span class="mdc-list-item__text">Open simulation</span>
</a> </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> </nav>
</div> </div>
</aside> </aside>
<div class="mdc-menu mdc-menu-surface mdc-theme--primary-bg mdc-theme--on-primary"> <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"> <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
${subscribe(manager.saves.pipe(map(val => html` ${subscribe(manager.saves.pipe(map(_ => _.map(val => html`
<li class= "mdc-list-item" role = "menuitem" > <li class= "mdc-list-item" role = "menuitem" @click=${() => manager.switchTo(val)}>
<span class="mdc-list-item__text"> ${val} </span> <span class="mdc-list-item__text"> ${val} </span>
</li>` </li>`
)))} ))))}
</ul> </ul>
</div> </div>
`, document.body) `, document.body)