reset/stop to bottom

This commit is contained in:
Ali Gator 2022-12-04 17:24:45 +01:00
parent 1204ac01c3
commit 2c69840d6f
4 changed files with 46 additions and 32 deletions

View File

@ -10,17 +10,20 @@
<MainMenu v-if="mainMenu || windowWidth >= 800" /> <MainMenu v-if="mainMenu || windowWidth >= 800" />
<CanvasBoard /> <CanvasBoard />
</div> </div>
<MenuReset row-title="" />
</div> </div>
</template> </template>
<script> <script>
import MainMenu from "./components/MainMenu.vue"; import MainMenu from "./components/MainMenu.vue";
import CanvasBoard from "./components/CanvasBoard.vue"; import CanvasBoard from "./components/CanvasBoard.vue";
import MenuReset from "./components/MenuReset.vue";
export default { export default {
name: "App", name: "App",
components: { components: {
MainMenu, MainMenu,
MenuReset,
CanvasBoard, CanvasBoard,
}, },
data() { data() {

View File

@ -1,30 +1,17 @@
<template> <template>
<MenuRow row-title="2D Cellular Automata"> <MenuRow row-title="2D Cellular Automata">
<div class="form-field"> <div class="form-field">
<label>Start from last result</label> <label>Start from empty board</label>
<input type="button" value="start" @click="toggleDraw2dLast()" />
</div>
<div class="form-field">
<input <input
type="button" type="button"
name="start2d" name="start2d"
value="start" value="start"
@click="toggleDraw2d()" @click="toggleDraw2d()"
/> />
<input </div>
type="button" <div class="form-field">
name="stop" <label>Start from last result</label>
class="stop" <input type="button" value="start" @click="toggleDraw2dLast()" />
value="stop"
@click="toggleStop()"
/>
<input
type="button"
name="reset"
class="reset"
value="reset"
@click="toggleReset()"
/>
</div> </div>
</MenuRow> </MenuRow>
</template> </template>
@ -40,12 +27,7 @@
MenuRow, MenuRow,
}, },
methods: { methods: {
...mapActions(globalStore, [ ...mapActions(globalStore, ["toggleDraw2dLast", "toggleDraw2d"]),
"toggleDraw2d",
"toggleDraw2dLast",
"toggleReset",
"toggleStop",
]),
}, },
}; };
</script> </script>

View File

@ -64,13 +64,6 @@
</form> </form>
<div class="form-field"> <div class="form-field">
<input type="button" name="start" value="start" @click="toggleDraw1d()" /> <input type="button" name="start" value="start" @click="toggleDraw1d()" />
<input
type="button"
name="reset"
class="reset"
value="reset"
@click="toggleReset"
/>
</div> </div>
</MenuRow> </MenuRow>
</template> </template>
@ -108,7 +101,7 @@
}, },
}, },
methods: { methods: {
...mapActions(globalStore, ["toggleDraw1d", "toggleReset"]), ...mapActions(globalStore, ["toggleDraw1d"]),
copyRules() { copyRules() {
const rules = JSON.stringify(this.rules); const rules = JSON.stringify(this.rules);
navigator.clipboard.writeText(rules); navigator.clipboard.writeText(rules);

View File

@ -0,0 +1,36 @@
<template>
<div class="form-field">
<input
type="button"
name="stop"
class="stop"
value="stop"
@click="toggleStop()"
/>
<input
type="button"
name="reset"
class="reset"
value="reset"
@click="toggleReset()"
/>
</div>
</template>
<script>
import { mapActions } from "pinia";
import { globalStore } from "../stores/index.js";
export default {
name: "MenuReset",
methods: {
...mapActions(globalStore, ["toggleReset", "toggleStop"]),
},
};
</script>
<style scoped>
.form-field {
display: flex;
margin: 0;
justify-content: flex-end;
}
</style>