adminoo/explorata
1
0
Fork 0
Code Releases Activity

process of vueification

Browse Source
This commit is contained in:
adminoo
2022-01-08 13:12:15 +01:00
parent 4b8e35946e
commit 248a334bf0
19 changed files with 27723 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Canvas.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<main id="main">
<canvas width="500" height="500" id="canvas"></canvas>
</main>
</template>

107
src/components/MainMenu.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<div id="sidebar">
<MenuRow row-title="General Properties">
<div class="form-field">
<label for="live">Canvas Resolution</label>
</div>
<div class="form-field">
<input name="canvasWidth" type="number" id="canvasWidth" value="1280"/>
</div>
<div class="form-field">
<input name="canvasHeight" type="number" id="canvasHeight" value="1024"/>
</div>
<div class="form-field">
<input type="button" name="canvasRefresh" id="canvasRefresh" value="refresh"/>
</div>
</MenuRow>
<MenuRow row-title="Cell Properties">
<div class="form-field">
<label for="live">Living cell color</label>
<input name="live" type="color" id="live" value="#000000"/>
</div>
<div class="form-field">
<label for="dead">Dead cell color</label>
<input name="dead" type="color" id="dead" value="#AA78E8"/>
</div>
<div class="form-field">
<label>Cell size</label>
<input name="cellSize" type="number" id="cellSize" value="5"/>
</div>
</MenuRow>
<MenuRow row-title="Elementary Cellular Automata">
<div class="form-field">
<label>Rules</label>
</div>
<div class="form-field">
<label>111
<input type="checkbox" name="111" checked>
</label>
</div>
<div class="form-field">
<label>110
<input type="checkbox" name="110">
</label>
</div>
<div class="form-field">
<label>101
<input type="checkbox" name="101" checked>
</label>
</div>
<div class="form-field">
<label>100
<input type="checkbox" name="100">
</label>
</div>
<div class="form-field">
<label>011
<input type="checkbox" name="011" checked>
</label>
</div>
<div class="form-field">
<label>010
<input type="checkbox" name="010">
</label>
</div>
<div class="form-field">
<label>001
<input type="checkbox" name="001">
</label>
</div>
<div class="form-field">
<label>000
<input type="checkbox" name="000" checked>
</label>
</div>
<div class="form-field">
<input type="button" name="start" id="start" value="start"/>
<input type="button" name="stop" class="stop" value="stop"/>
<input type="button" name="reset" class="reset" value="reset"/>
</div>
</MenuRow>
<MenuRow row-title="2D Cellular Automata">
<div class="form-field">
<input type="button" name="start2d" id="start2d" value="start"/>
<input type="button" name="stop" class="stop" value="stop"/>
<input type="button" name="reset" class="reset" value="reset"/>
</div>
</MenuRow>
</div>
</template>
<script>
import MenuRow from './MenuRow.vue'
export default {
name: 'MainMenu',
components: {
MenuRow
}
}
</script>
<style>
#sidebar {
flex-basis: fit-content;
padding: 0 10px;
width: fit-content;
}
</style>

57
src/components/MenuRow.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div class="menu-row">
<h2
@click="isHidden = !isHidden"
> {{ RowTitle }}</h2>
<div class="menu-row-content" v-if="!isHidden">
<form>
<slot></slot>
</form>
</div>
</div>
</template>
<script>
export default {
name: 'MenuRow',
props: {
RowTitle: String
},
data() {
return {
isHidden: true
}
}
}
</script>
<style>
.menu-row h2 {
font-size: medium;
padding: 10px;
cursor: pointer;
border: 2px solid darkgrey;
margin: 0 0 10px 0;
}
input[type="button"] {
min-width: 60px;
padding: 5px;
font-weight: bold;
margin-right: 10px;
}
.form-field {
display: flex;
margin: 10px;
}
.menu-row {
flex: 1;
}
label, .form-field label {
margin-right: 10px;
font-weight: bold;
}
</style>