diff options
| -rw-r--r-- | .gitignore | 4 | ||||
| -rw-r--r-- | README.md | 10 | ||||
| -rw-r--r-- | index.html | 13 | ||||
| -rw-r--r-- | package.json | 20 | ||||
| -rw-r--r-- | public/favicon.png | bin | 0 -> 1426 bytes | |||
| -rw-r--r-- | src/App.vue | 20 | ||||
| -rw-r--r-- | src/main.js | 4 | ||||
| -rw-r--r-- | vite.config.js | 7 |
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 Binary files differnew file mode 100644 index 0000000..d1c4ee3 --- /dev/null +++ b/public/favicon.png 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 +}) |
