aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTerry Truong <terry06890@gmail.com>2022-03-02 10:58:22 +1100
committerTerry Truong <terry06890@gmail.com>2022-03-02 11:05:21 +1100
commitaf1555e223ebb1b1813b9b85f4cf8dddc432189e (patch)
tree4bf05330cd497f5926d4c7aea4136e3cb3ffc194
Initial commit
-rw-r--r--.gitignore4
-rw-r--r--README.md10
-rw-r--r--index.html13
-rw-r--r--package.json20
-rw-r--r--public/favicon.pngbin0 -> 1426 bytes
-rw-r--r--src/App.vue20
-rw-r--r--src/main.js4
-rw-r--r--vite.config.js7
8 files changed, 78 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..6016223
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+rem.not
+package-lock.json
+node_modules/
+dist/
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a860b3f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,10 @@
+# Grid of Life
+
+An interactive visualisation of the biological tree of life.
+
+Each tile represents a group of organisms with a common ancestor.
+- Clicking on a tile expands it into tiles representing direct descendants.
+ If there are too many other tiles, there might not be room to expand.
+- Clicking on an expanded tile collapses it back into one tile.
+- Double-clicking on a tile expands it to fill the whole view.
+ Other tiles will be moved to the side.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3c63caf
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" href="/favicon.png" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Grid of Life</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.js"></script>
+ </body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..4a947cd
--- /dev/null
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "grid-of-life",
+ "private": true,
+ "version": "0.0.0",
+ "description": "An interactive visualisation of the biological tree of life",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "author": "Terry Truong",
+ "license": "MIT",
+ "dependencies": {
+ "vue": "^3.2.25"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^2.2.0",
+ "vite": "^2.8.0"
+ }
+}
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..d1c4ee3
--- /dev/null
+++ b/public/favicon.png
Binary files differ
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..a8c04d7
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,20 @@
+<script>
+export default {
+ data() {
+ return {
+ greeting: 'Hello World!'
+ }
+ }
+}
+</script>
+
+<template>
+ <p class="greeting">{{ greeting }}</p>
+</template>
+
+<style>
+.greeting {
+ color: green;
+ font-weight: bold;
+}
+</style>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..01433bc
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..7c75399
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+ plugins: [vue()],
+ server: {open: true} //open browser when dev server starts
+})