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

66
src/App.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<div id="main">
<h1 id="main-title">Cellular Automata Explorer</h1>
<div id="container">
<MainMenu/>
<Canvas/>
</div>
</div>
</template>
<script>
import MainMenu from './components/MainMenu.vue'
export default {
name: 'App',
components: {
MainMenu
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
* {
margin: 0;
padding: 0;
}
body {
background: black;
color: white;
font-family: Courier New;
}
canvas {
flex: auto;
background: #110812;
margin-right: 10px;
}
h1, h2 {
font-weight: bold;
}
h1 {
margin : 10px auto;
font-size: larger;
text-align: center;
}
#main {
flex: 4;
}
#container {
display: flex;
}
</style>

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

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>

65
src/style.css → src/components/MenuRow.vue
View File

@ -1,41 +1,39 @@
* {
margin: 0;
padding: 0;
}
<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>
body {
background: black;
color: white;
font-family: Courier New;
}
canvas {
background: #110812;
}
h1, h2 {
font-weight: bold;
}
h1 {
margin : 10px auto;
font-size: larger;
text-align: center;
<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;
}
sidebar {
padding: 0 10px;
width: fit-content;
}
}
input[type="button"] {
min-width: 60px;
padding: 5px;
@ -56,11 +54,4 @@ label, .form-field label {
margin-right: 10px;
font-weight: bold;
}
#main {
flex: 4;
}
#container {
display: flex;
}
</style>

122
src/index.html
View File

@ -1,122 +0,0 @@
<html>
<head>
<title>Cellular Automaton Explorer</title>
<link rel="stylesheet" href="./style.css" >
</head>
<body>
<h1>Cellular Automata Explorer</h1>
<div id="container">
<sidebar>
<div class="menu-row">
<h2>General Properties</h2>
<div class="menu-row-content">
<form>
<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>
</form>
</div>
</div>
<div class="menu-row">
<h2>Cell Properties</h2>
<div class="menu-row-content">
<form>
<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>
</form>
</div>
</div>
<div class="menu-row">
<h2>Elementary Cellular Automata</h2>
<div class="menu-row-content">
<form name="rules">
<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>
</form>
</div>
</div>
<div class="menu-row">
<h2>2D Cellular Automata</h2>
<div class="menu-row-content">
<form>
<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>
</form>
</div>
</div>
</sidebar>
<main id="main">
<canvas width="500" height="500" id="canvas"></canvas>
</main>
</div>
<script type="module" src="./js/main.js"></script>
</body>
</html>

8
src/main.js Normal file
View File

@ -0,0 +1,8 @@
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')

0
src/js/automata.js → src/modules/automata.js
View File

0
src/js/common.js → src/modules/common.js
View File

0
src/js/main.js → src/modules/main.js
View File