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

😙 uh, i only have 2.5h of sleep left 📌

Browse source
This commit is contained in:
Matei Adriel 2019-06-05 01:26:04 +00:00
parent d636eef359
commit 6204049a01
3 changed files with 96 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@ import { Subject, BehaviorSubject, fromEvent } from "rxjs";
import { svg, SVGTemplateResult, html } from "lit-html"; import { svg, SVGTemplateResult, html } from "lit-html";
import { subscribe } from "lit-rx"; import { subscribe } from "lit-rx";
import { Screen } from "../screen.ts"; import { Screen } from "../screen.ts";
import { ManagerState } from "./interfaces"; import { ManagerState, ComponentTemplate } from "./interfaces";
import { Store } from "../store"; import { Store } from "../store";
import { KeyboardInput } from "@eix/input" import { KeyboardInput } from "@eix/input"
import { success, error } from "toastr" import { success, error } from "toastr"
@ -116,14 +116,14 @@ export class ComponentManager {
} }
public shortcuts: { public shortcuts: {
[key:string]: string [key: string]: string
} = { } = {
clear: "ctrl delete", clear: "shift delete",
clean: "delete", clean: "delete",
save:"ctrl s", save: "ctrl s",
undo: "ctrl z", undo: "ctrl z",
refresh: "ctrl r" refresh: "ctrl r"
} }
constructor() { constructor() {
runCounter.increase() runCounter.increase()
@ -213,7 +213,26 @@ export class ComponentManager {
} }
public newGate(){ private initEmptyGate(name: string) {
const obj: ComponentTemplate = {
inputs: 1,
name,
version: "1.0.0",
outputs: 1,
activation: "",
editable: true,
material: {
mode: "color",
data: "blue"
}
}
this.templateStore.store.set(name, obj)
this.edit(name)
}
public newGate() {
this.preInput() this.preInput()
this.inputMode = "gate" this.inputMode = "gate"
this.placeholder.next("Gate name") this.placeholder.next("Gate name")
@ -235,13 +254,16 @@ export class ComponentManager {
const elem = <HTMLInputElement>document.getElementById("nameInput") const elem = <HTMLInputElement>document.getElementById("nameInput")
this.barAlpha.next("0") this.barAlpha.next("0")
if (this.inputMode == "create") { if (this.inputMode === "create") {
await this.createEmptySimulation(elem.value) await this.createEmptySimulation(elem.value)
success(`Succesfully created simulation ${elem.value}`, "", this.alertOptions) success(`Succesfully created simulation ${elem.value}`, "", this.alertOptions)
} }
else if (this.inputMode == "command") else if (this.inputMode === "command")
this.eval(elem.value) this.eval(elem.value)
else if (this.inputMode === "gate")
this.initEmptyGate(elem.value)
} }
private async handleDuplicateModal(name: string) { private async handleDuplicateModal(name: string) {
@ -249,7 +271,7 @@ export class ComponentManager {
title: "Warning", title: "Warning",
content: html`There was already a simulation called ${name}, content: html`There was already a simulation called ${name},
are you sure you want to override it? are you sure you want to override it?
All you work will be lost!` All your work will be lost!`
}) })
return result return result
@ -263,33 +285,62 @@ export class ComponentManager {
no: "", no: "",
yes: "save", yes: "save",
title: `Edit ${name}`, title: `Edit ${name}`,
content: html` content: html`${html`
<br> <br>
<div class="mdc-text-field mdc-text-field--textarea"> <div class="mdc-text-field mdc-text-field--textarea">
<textarea id="codeArea" class="mdc-text-field__input js" rows="8" cols="40">${ <textarea id="codeArea" class="mdc-text-field__input js" rows="8" cols="40">${
gate.activation gate.activation
}</textarea> }</textarea>
<div class="mdc-notched-outline"> <div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div> <div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch"> <div class="mdc-notched-outline__notch">
<label for="textarea" class="mdc-floating-label">Activation function</label> <label for="textarea" class="mdc-floating-label">Activation function</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div> </div>
<div class="mdc-notched-outline__trailing"></div> </div><br><br>
</div> <div class="mdc-text-field" id="inputCount">
</div> <input type="number" id="my-text-field" class="mdc-text-field__input inputCount-i" value=${gate.inputs}>
` <label class="mdc-floating-label" for="my-text-field">Inputs</label>
<div class="mdc-line-ripple"></div>
</div><br><br>
<div class="mdc-text-field" id="outputCount">
<input type="number" id="my-text-field" class="mdc-text-field__input outputCount-i" value=${gate.outputs}>
<label class="mdc-floating-label" for="my-text-field">Outputs</label>
<div class="mdc-line-ripple"></div>
</div><br><br>
<div class="mdc-text-field" id="color">
<input type="string" id="my-text-field" class="mdc-text-field__input color-i" value=${gate.material.data}>
<label class="mdc-floating-label" for="my-text-field">Outputs</label>
<div class="mdc-line-ripple"></div>
</div><br>
`}`
}).then(val => { }).then(val => {
this.ignoreKeyDowns = false this.ignoreKeyDowns = false
const elem = <HTMLTextAreaElement> document.querySelector("#codeArea") const elems: (HTMLInputElement | HTMLTextAreaElement)[] = [
const data = elem.value document.querySelector("#codeArea"),
document.querySelector(".inputCount-i"),
document.querySelector(".outputCount-i"),
document.querySelector(".color-i")
]
const data = elems.map(val => val.value)
this.templateStore.store.set(name,{ this.templateStore.store.set(name, {
...gate, ...gate,
activation: data activation: data[0],
inputs: Number(data[1]),
outputs: Number(data[2]),
material:{
mode: "color",
data: data[3]
}
}) })
}) })
const textField = new MDCTextField(document.querySelector('.mdc-text-field')); new MDCTextField(document.querySelector('.mdc-text-field'));
new MDCTextField(document.querySelector('#outputCount'));
new MDCTextField(document.querySelector('#inputCount'));
new MDCTextField(document.querySelector('#color'));
} }
public add(template: string, position?: [number, number]) { public add(template: string, position?: [number, number]) {

28
src/ts/common/componentManager/componentTemplateStore.ts
View file

@ -144,33 +144,7 @@ export class ComponentTemplateStore {
mode: "standard_image", mode: "standard_image",
data: "xor" data: "xor"
}, },
editable: true editable: false
})
this.store.set("true", {
inputs: 0,
outputs: 1,
name: "true",
version: "1.0.0",
activation: `
ctx.outputs[0].value = true
`.trim(),
material: {
mode: "color",
data: "green"
}
})
this.store.set("false", {
inputs: 0,
outputs: 1,
name: "false",
version: "1.0.0",
activation: `
ctx.outputs[0].value = false
`.trim(),
material: {
mode: "color",
data: "yellow"
}
}) })
this.store.set("light", { this.store.set("light", {
inputs: 1, inputs: 1,

26
src/ts/main.ts
View file

@ -107,23 +107,23 @@ render(html`
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">folder_open</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="#" id="openGates" @click=${() => {
menus[1].open = true
}}>
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">add</i>
<span class="mdc-list-item__text">Add logic gate</span>
</a>
<a class="mdc-list-item" href="#" id="openFile" @click=${() => { <a class="mdc-list-item" href="#" id="openFile" @click=${() => {
menus[2].open = true menus[2].open = true
}}> }}>
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">insert_drive_file</i> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">insert_drive_file</i>
<span class="mdc-list-item__text">File</span> <span class="mdc-list-item__text">Simulation</span>
</a> </a>
<a class="mdc-list-item" href="#" id="openCustomGates" @click=${() => { <a class="mdc-list-item" href="#" id="openCustomGates" @click=${() => {
menus[3].open = true menus[3].open = true
}}> }}>
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">edit</i> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">edit</i>
<span class="mdc-list-item__text">Edit gates</span> <span class="mdc-list-item__text">Custom gates</span>
</a>
<a class="mdc-list-item" href="#" id="openGates" @click=${() => {
menus[1].open = true
}}>
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">add</i>
<span class="mdc-list-item__text">Add component</span>
</a> </a>
</nav> </nav>
</div> </div>
@ -142,9 +142,15 @@ render(html`
<div class="mdc-menu mdc-menu-surface mdc-theme--primary-bg mdc-theme--on-primary" id="gateMenu"> <div class="mdc-menu mdc-menu-surface mdc-theme--primary-bg mdc-theme--on-primary" id="gateMenu">
<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.gates.pipe(map(_ => _.map(val => html` ${subscribe(manager.gates.pipe(map(_ => [..._].sort().map(val => html`
<li class= "mdc-list-item" role = "menuitem" @click=${() => manager.add(val)}> <li class= "mdc-list-item" role = "menuitem" @click=${() => manager.add(val)}>
<span class="mdc-list-item__text"> ${val} </span> <span class="mdc-list-item__text"> ${val} </span>
${(manager.templateStore.store.get(val).editable ?
html`&nbsp &nbsp &nbsp <span class="material-icons mdc-list-item__meta" @click=${
() => manager.templateStore.store.delete(val)
}> delete </span>` :
""
)}
</li>` </li>`
))))} ))))}
</ul> </ul>
@ -175,7 +181,7 @@ render(html`
))))} ))))}
<li class= "mdc-list-item" role = "menuitem" @click=${() => manager.newGate()}> <li class= "mdc-list-item" role = "menuitem" @click=${() => manager.newGate()}>
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">add</i> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">add</i>
<span class="mdc-list-item__text"> New gate </span> <span class="mdc-list-item__text"> New custom gate </span>
</li> </li>
</ul> </ul>
</div> </div>