Merge pull request 'v0.9.1' (#14) from dev into master

Reviewed-on: #14
This commit is contained in:
Ali Gator 2024-04-29 13:29:52 +02:00
commit f2e59bbdce
16 changed files with 1813 additions and 3197 deletions

4343
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -12,10 +12,10 @@
"test": "vitest"
},
"dependencies": {
"@vitejs/plugin-vue": "^3.2.0",
"install": "^0.13.0",
"pinia": "^2.0.27",
"vite": "^3.2.4",
"@vitejs/plugin-vue": "3.2.0",
"install": "0.13.0",
"pinia": "2.0.27",
"vite": "^3.2.10",
"vue": "3.2"
},
"devDependencies": {

View File

@ -35,103 +35,23 @@
</script>
<template>
<div id="main">
<h1 id="main-title">
<span id="burger-toggle" @click="toggleMainMenu">
<main>
<h1
v-if="store.mainMenu || windowWidth <= 800"
id="main-title"
class="main-title"
>
<span id="burger-toggle" class="burger-toggle" @click="toggleMainMenu">
{{ store.mainMenu == true ? "▼" : "☰" }}
</span>
Cellular Automata Explorer
<span>Cellular Automata Explorer</span>
</h1>
<div id="container">
<MainMenu v-if="store.mainMenu || windowWidth >= 800" />
<div id="container" class="container">
<MainMenu v-if="store.mainMenu || windowWidth >= 800" class="main-menu" />
<CanvasBoard />
</div>
<MenuReset row-title="" />
</div>
<MenuReset :window-width="windowWidth" />
</main>
</template>
<style scope>
:root {
--dark1: #000000;
--dark2: #333333;
--dark3: #666666;
--light1: #999999;
--light2: #cccccc;
--light3: #eeeeee;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
/* color: #2c3e50; */
}
* {
margin: 0;
padding: 0;
}
body {
background: var(--dark1);
color: var(--light3);
font-family: Courier New;
}
canvas {
flex: auto;
background: rgb(0, 0, 0);
background: linear-gradient(
90deg,
rgba(0, 0, 0, 1) 0%,
rgba(131, 131, 131, 1) 52%,
rgba(0, 0, 0, 1) 100%
);
}
h1,
h2 {
font-weight: bold;
}
h1 {
margin: 10px auto;
font-size: larger;
text-transform: uppercase;
}
#container {
display: flex;
height: calc(100vh - 100px);
overflow: hidden;
flex-direction: column;
}
#burger-toggle {
display: none;
cursor: pointer;
font-size: 1.5em;
vertical-align: middle;
color: var(--light2);
}
@media screen and (max-width: 800px) {
h1 {
font-size: medium;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
}
#burger-toggle {
display: inline;
}
#main-menu {
background: var(--dark2);
margin: 0 auto;
}
}
</style>
<style src="./assets/css/main.css"></style>

228
src/assets/css/main.css Normal file
View File

@ -0,0 +1,228 @@
:root {
--dark1: #000000;
--dark2: #333333;
--dark3: #666666;
--light1: #999999;
--light2: #cccccc;
--light3: #eeeeee;
}
* {
margin: 0;
padding: 0;
}
body {
background: var(--dark1);
color: var(--light3);
/* font-family: Courier New; */
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
canvas {
flex: auto;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 1) 0%,
rgba(131, 131, 131, 1) 52%,
rgba(0, 0, 0, 1) 100%
);
}
h1,
h2,
.desktop-title {
font-weight: bold;
}
h1,
.desktop-title {
font-size: larger;
text-transform: uppercase;
}
.container {
display: flex;
height: calc(100vh - 100px);
overflow: hidden;
flex-direction: column;
}
.burger-toggle {
display: none;
cursor: pointer;
font-size: 1.5em;
vertical-align: middle;
color: var(--light2);
}
a {
font-weight: bold;
border: 1px solid white;
padding: 2px;
}
h2:hover {
cursor: pointer;
color: var(--light2);
}
select {
margin-top: 10px;
padding: 5px;
}
input[type="number"] {
max-width: 100%;
height: 100%;
}
input[type="button"] {
min-width: 40px;
min-height: 40px;
margin: 0 5px;
font-weight: bold;
line-height: 1.5em;
border-radius: 0;
outline: none;
border: none;
font-size: 1.1em;
background: var(--light2);
}
input[type="button"]:hover {
background: var(--light3);
}
.form-field {
display: flex;
margin: 10px;
justify-content: space-between;
}
.menu-row {
flex: 1;
position: relative;
}
.menu-row h2 {
font-size: medium;
padding: 10px;
cursor: pointer;
border-bottom: 1px solid var(--dark3);
border-top: 1px solid var(--dark3);
}
.menu-row a {
color: white;
font-weight: bold;
text-decoration: none;
font-size: small;
}
.menu-row-content {
position: absolute;
background: var(--dark1);
width: 100%;
overflow: scroll;
}
label,
.form-field label {
margin-right: 10px;
font-weight: bold;
}
.canvas-board {
flex: 1;
margin: 0 auto;
}
.main-menu {
display: flex;
flex-direction: row;
width: 100%;
flex: 1;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.main-menu::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.main-menu {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.reset-menu {
display: flex;
justify-content: space-between;
padding: 10px;
vertical-align: center;
}
.next,
.stop,
.reset {
display: inline-block;
vertical-align: bottom;
}
.reset-menu .loop {
padding: 5px;
display: inline-block;
}
@media screen and (max-width: 800px) {
h1 {
font-size: medium;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
}
.burger-toggle {
display: inline;
}
.main-menu {
background: var(--dark2);
margin: 0 auto;
flex-direction: column;
position: absolute;
}
.menu-row {
margin: 0 auto;
width: 100%;
}
.menu-row h2,
.form-field {
margin: 0;
}
.menu-row h2 {
border-bottom: 1px solid var(--dark3);
border-top: none;
}
.form-field {
padding: 10px;
}
.menu-row-content {
position: relative;
width: 100%;
}
.reset-menu {
justify-content: flex-end;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

View File

View File

@ -187,13 +187,8 @@
<canvas
id="board-canvas"
ref="board-canvas"
class="board-canvas"
:width="store.renderer.width"
:height="store.renderer.height"
/>
</template>
<style>
#canvas-board {
flex: 1;
margin: 0 auto;
}
</style>

View File

@ -13,30 +13,3 @@
import MenuElementaryCA from "./MenuElementaryCA.vue";
import Menu2dCA from "./Menu2dCA.vue";
</script>
<style>
#main-menu {
display: flex;
flex-direction: row;
width: 100%;
flex: 1;
}
/* Hide scrollbar for Chrome, Safari and Opera */
#main-menu::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
#main-menu {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
@media screen and (max-width: 800px) {
#main-menu {
flex-direction: column;
position: absolute;
}
}
</style>

View File

@ -50,13 +50,13 @@
<input
type="button"
name="start2d"
value="start"
value=""
@click="store.toggleDraw2d()"
/>
</div>
<div class="form-field">
<label>Start from last result</label>
<input type="button" value="start" @click="store.toggleDraw2dLast()" />
<input type="button" value="" @click="store.toggleDraw2dLast()" />
</div>
<div class="form-field">
<label>Start from picture</label><br />

View File

@ -53,14 +53,3 @@
</form>
</MenuRow>
</template>
<style scoped>
a {
font-weight: bold;
border: 1px solid white;
padding: 2px;
}
a:hover {
cursor: pointer;
}
</style>

View File

@ -38,7 +38,7 @@
<input
type="button"
name="start"
value="start"
value=""
@click="store.toggleDraw1d()"
/>
</div>
@ -105,12 +105,3 @@
</form>
</MenuRow>
</template>
<style>
.menu-row a {
color: white;
font-weight: bold;
text-decoration: none;
font-size: small;
}
</style>

View File

@ -6,7 +6,7 @@
const updateCanvasHeight = (event) => {
const elem = event.target;
store.renderer.resize(elem.value, store.renderer.width);
store.renderer.resize(store.renderer.width, elem.value);
};
const updateCanvasWidth = (event) => {
@ -56,8 +56,6 @@
</div>
<div class="form-field">
<label>Refresh Rate (ms)</label>
</div>
<div class="form-field">
<input
id="refreshRate"
name="refreshRate"

View File

@ -1,50 +1,56 @@
<script setup>
import { globalStore } from "../stores/index.js";
import { defineProps } from "vue";
const props = defineProps(
{
windowWidth: {
type: Number,
default: 800
}
}
);
const store = globalStore();
</script>
<template>
<div class="form-field">
<div class="form-field">
<label>
Loop
<input
:value="store.loop"
type="checkbox"
:checked="store.loop"
@input="store.toggleLoop()"
/>
</label>
<div class="reset-menu">
<div v-if="props.windowWidth >= 800" class="desktop-title">
Cellular Automata Explorer
</div>
<div class="reset-input">
<div class="loop">
<label>
loop
<input
:value="store.loop"
type="checkbox"
:checked="store.loop"
@input="store.toggleLoop()"
/>
</label>
</div>
<input
type="button"
name="next"
class="next"
value="⇨"
@click="store.toggleNext()"
/>
<input
type="button"
name="stop"
class="stop"
value="⏹"
@click="store.toggleStop()"
/>
<input
type="button"
name="reset"
class="reset"
value="⌫"
@click="store.toggleReset()"
/>
</div>
<input
type="button"
name="next"
class="next"
value="Next"
@click="store.toggleNext()"
/>
<input
type="button"
name="stop"
class="stop"
value="stop"
@click="store.toggleStop()"
/>
<input
type="button"
name="reset"
class="reset"
value="reset"
@click="store.toggleReset()"
/>
</div>
</template>
<style scoped>
.form-field {
display: flex;
margin: 5px;
justify-content: flex-end;
}
</style>

View File

@ -49,81 +49,3 @@
</div>
</div>
</template>
<style>
.menu-row h2 {
font-size: medium;
padding: 10px;
cursor: pointer;
border-bottom: 1px solid var(--dark3);
border-top: 1px solid var(--dark3);
margin: 0 0 10px 0;
}
select {
margin-top: 10px;
padding: 5px;
}
input[type="button"] {
min-width: 60px;
padding: 5px;
font-weight: bold;
margin-right: 10px;
}
.form-field {
display: flex;
margin: 10px;
justify-content: space-between;
}
.menu-row {
flex: 1;
position: relative;
}
.menu-row-content {
position: absolute;
background: var(--dark1);
width: 100%;
}
label,
.form-field label {
margin-right: 10px;
font-weight: bold;
}
@media screen and (max-width: 800px) {
.menu-row {
margin: 0 auto;
width: 100%;
}
.menu-row h2,
.form-field {
margin: 0;
}
.menu-row h2 {
border-bottom: 1px solid var(--dark3);
border-top: none;
}
.form-field {
padding: 10px;
}
/* .menu-row:active .menu-row-content {
display: flex;
flex-direction: column;
height: 100%;
} */
.menu-row-content {
position: relative;
width: 100%;
}
}
</style>

View File

@ -1,95 +0,0 @@
const presetRuleset = [
{
name: "rule 73",
rules: {
100: 0,
101: 0,
110: 1,
111: 0,
"011": 1,
"010": 0,
"001": 0,
"000": 1,
},
},
{
name: "rule 86",
rules: {
100: 1,
101: 0,
110: 0,
111: 1,
"011": 0,
"010": 1,
"001": 0,
"000": 1,
},
},
{
name: "rule 90",
rules: {
100: 1,
101: 0,
110: 1,
111: 0,
"011": 0,
"010": 0,
"001": 1,
"000": 0,
},
},
{
name: "rule 45?",
rules: {
100: 0,
101: 0,
110: 1,
111: 0,
"011": 1,
"010": 0,
"001": 1,
"000": 1,
},
},
{
name: "rule 54?",
rules: {
100: 1,
101: 0,
110: 1,
111: 1,
"011": 0,
"010": 1,
"001": 1,
"000": 0,
},
},
{
name: "unknown rule",
rules: {
100: 0,
101: 0,
110: 0,
111: 1,
"011": 0,
"010": 0,
"001": 1,
"000": 1,
},
},
];
const initialStates = [
{
id: "onecell",
name: "One cell at center",
description: "State with a single cell in the middle",
},
{
id: "random",
name: "Random cell",
description: "State populated with random cells",
},
];
export { presetRuleset, initialStates };

View File

@ -35,7 +35,7 @@ export const globalStore = defineStore("globalStore", {
picture: new Image(),
mainMenu: false,
activeSubMenu: "",
loop: false,
loop: true,
lastAction: "drawfromlast",
renderer: new Renderer(),
};