├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   ├── icon-fullscreen-close.svg
    │   ├── icon-fullscreen-open.svg
    │   └── icon-close.svg
    ├── main.js
    ├── components
    │   ├── ActiveFilters.vue
    │   ├── DarkmodeToggle.vue
    │   ├── FilterAside.vue
    │   └── GalleryComponent.vue
    ├── App.vue
    └── store
    │   └── index.js
├── babel.config.js
├── .gitignore
├── jsconfig.json
├── vue.config.js
├── config.js
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nftchef/art-engine-viewer/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nftchef/art-engine-viewer/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import store from './store'
4 | 
5 | createApp(App).use(store).mount('#app')
6 | 


--------------------------------------------------------------------------------
/src/assets/icon-fullscreen-close.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>


--------------------------------------------------------------------------------
/src/assets/icon-fullscreen-open.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>


--------------------------------------------------------------------------------
/src/assets/icon-close.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const config = require("./config");
 2 | console.log({ config });
 3 | process.env.VUE_APP_IMAGE_TYPE = config.imageType;
 4 | 
 5 | const { defineConfig } = require("@vue/cli-service");
 6 | module.exports = defineConfig({
 7 |   transpileDependencies: true,
 8 | });
 9 | 
10 | const path = require("path");
11 | module.exports = {
12 |   chainWebpack: (config) => {
13 |     //TODO: make paths dynamic
14 |     config.resolve.alias.set(
15 |       "#BUILD",
16 |       path.resolve(__dirname, "../Art Engine/build")
17 |     );
18 |   },
19 | };
20 | 


--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
 1 | // ***** FOR LOCAL DEV: SET THE PATH TO YOUR BUILD FOLDER, RELATIVE TO THIS PROJECT ****//                          this path is
 2 | //                             |
 3 | //                             |
 4 | //                             v
 5 | const buildPath = "../Art Engine/build";
 6 | 
 7 | /** TO UPLOAD TO A LIVE SERVER, SET EMBED PATH TO TRUE */
 8 | const hosted = false;
 9 | const hostedPath = "/build";
10 | // set the image type of your images from your build folder
11 | const imageType = "png";
12 | 
13 | module.exports = {
14 |   buildPath,
15 |   imageType,
16 |   hosted,
17 |   hostedPath,
18 | };
19 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "explorer",
 3 |   "version": "0.1.2",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "build": "vue-cli-service build",
 7 |     "lint": "vue-cli-service lint",
 8 |     "dev": "vue-cli-service serve"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.8.3",
12 |     "sass": "^1.49.9",
13 |     "sass-loader": "^12.6.0",
14 |     "vue": "^3.2.13",
15 |     "vuex": "^4.0.0"
16 |   },
17 |   "devDependencies": {
18 |     "@babel/core": "^7.12.16",
19 |     "@babel/eslint-parser": "^7.12.16",
20 |     "@vue/cli-plugin-babel": "~5.0.0",
21 |     "@vue/cli-plugin-eslint": "~5.0.0",
22 |     "@vue/cli-plugin-vuex": "~5.0.0",
23 |     "@vue/cli-service": "~5.0.0",
24 |     "eslint": "^7.32.0",
25 |     "eslint-plugin-vue": "^8.0.3"
26 |   },
27 |   "eslintConfig": {
28 |     "root": true,
29 |     "env": {
30 |       "node": true
31 |     },
32 |     "extends": [
33 |       "plugin:vue/vue3-essential",
34 |       "eslint:recommended"
35 |     ],
36 |     "parserOptions": {
37 |       "parser": "@babel/eslint-parser"
38 |     },
39 |     "rules": {}
40 |   },
41 |   "browserslist": [
42 |     "> 1%",
43 |     "last 2 versions",
44 |     "not dead",
45 |     "not ie 11"
46 |   ]
47 | }


--------------------------------------------------------------------------------
/src/components/ActiveFilters.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="active-filters">
 3 |     <span class="filter-label"
 4 |       >FILTERS
 5 |       <span class="filter-count">{{ activeFilters.length }}</span></span
 6 |     >
 7 |     <div v-for="filter in activeFilters" :key="filter" class="filter">
 8 |       <span>{{ filter.trait_type }}:{{ filter.value }}</span>
 9 |       <button @click="removeFilter(filter)">
10 |         <img src="@/assets/icon-close.svg" alt="" />
11 |       </button>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import { computed } from "@vue/runtime-core";
18 | import { useStore } from "vuex";
19 | export default {
20 |   setup() {
21 |     const store = useStore();
22 |     const activeFilters = computed(() => store.state.filters);
23 | 
24 |     return { activeFilters, removeFilter: removeFilter(store) };
25 |   },
26 | };
27 | 
28 | const removeFilter = (store) => (filter) => {
29 |   store.dispatch("REMOVE_FILTER", filter);
30 | };
31 | </script>
32 | 
33 | <style lang="scss" scoped>
34 | .active-filters {
35 |   display: flex;
36 |   height: 3rem;
37 |   align-items: center;
38 | }
39 | .filter {
40 |   align-items: center;
41 |   color: var(--dark);
42 |   background: #e9e9e9;
43 |   border-radius: 1rem;
44 |   display: flex;
45 |   font-size: 0.875em;
46 |   height: 1.25rem;
47 |   margin: 0 0.2rem;
48 |   overflow: hidden;
49 |   padding: 0.25rem 0.5rem;
50 | 
51 |   button {
52 |     background: none;
53 |     border: none;
54 |     height: 1rem;
55 |     width: 1rem;
56 | 
57 |     img {
58 |       width: 100%;
59 |     }
60 |   }
61 | }
62 | 
63 | .filter-label {
64 |   margin-right: 1rem;
65 |   font-weight: bolder;
66 | }
67 | 
68 | .filter-count {
69 |   font-weight: lighter;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🧪 Art Engine Explorer (alpha)
 2 | A local web app intended to be used in conjunction with the Art-Engine. This is a quick (desktop) viewer that allows you to visualize and 
 3 | 
 4 | <img width="1362" alt="image" src="https://user-images.githubusercontent.com/91582112/157121649-14523004-4279-4c6b-9949-ebaa7d435eb4.png">
 5 | <img width="1365" alt="image" src="https://user-images.githubusercontent.com/91582112/157121771-a09db140-b63c-4cd6-a310-60f15375b018.png">
 6 | 
 7 | # Controls
 8 | Use `arrow keys` to scroll through items when the detail modal or fullscreen modes are open
 9 | Use `Escape` to close teh detail modal or Fullscreen mode
10 | 
11 | ## Roadmap
12 | [] Add rarity calculations
13 | [] Add "jump to number" input 
14 | [] Integrate into the main art-engine repo as a submodule
15 | [] Properly configure the config.js file to allow for custom paths to the build dir
16 | 
17 | # Project setup
18 | **⚠️ Important!!**
19 | - As of this writing, this repo should be installed _next_ to the Art Engine folder so the _Viewer_ project can easily the `build` folders from the Art Engine generator. 
20 | - As of this writing, the viewer relies on the `.edition` metadata property for indexing images.
21 | 
22 | 
23 | Clone or Download this project _next to_ the generator folder.
24 | This build expects the art-engine folder to be named `Art Engine` 
25 | [To adjust the path of the build folder, see vue.config.js AND App.vue in_this_project]
26 | 
27 | If you are building JPEG images, change the config in `config.js` in the viewer config file.
28 | 
29 | ```
30 | yarn
31 | 
32 | // or using npm
33 | npm install
34 | ```
35 | 
36 | ### Once installed, run `yarn dev`
37 | ```
38 | yarn dev
39 | 
40 | // if using npm
41 | // npm run dev
42 | ```
43 | 
44 | ## Building for production
45 | This application uses standard Vue-cli building and bundling. For more information on deploying a live version (After revealing all your NFT art of course), see the Vue.js documentation https://vuejs.org/guide/introduction.html
46 | ### Compiles and minifies for production
47 | ```
48 | yarn build
49 | ```
50 | 
51 | ### Lints and fixes files
52 | ```
53 | yarn lint
54 | ```
55 | 
56 | ### Customize configuration
57 | See [Configuration Reference](https://cli.vuejs.org/config/).
58 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :class="{ app: true, darkmode }">
 3 |     <darkmode-toggle />
 4 |     <div class="explorer">
 5 |       <filter-aside />
 6 |       <gallery-component />
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | // import { computed } from "@vue/runtime-core";
13 | import { imageType } from "../config";
14 | // import { ref } from "@vue/reactivity";
15 | import { useStore } from "vuex";
16 | import FilterAside from "./components/FilterAside.vue";
17 | import GalleryComponent from "@/components/GalleryComponent.vue";
18 | 
19 | // ***** SET THE PATH TO YOUR BUILD FOLDER, RELATIVE TO THIS PROJECT ****//
20 | //                             |
21 | //                             |
22 | //                             v
23 | import metadata from "../../Art Engine/build/json/_metadata.json";
24 | import { computed } from "@vue/runtime-core";
25 | import DarkmodeToggle from "./components/DarkmodeToggle.vue";
26 | 
27 | export default {
28 |   name: "App",
29 |   components: {
30 |     GalleryComponent,
31 |     FilterAside,
32 |     DarkmodeToggle,
33 |   },
34 |   setup() {
35 |     const store = useStore();
36 | 
37 |     store.dispatch("INITIALIZE_TRAITS", metadata);
38 |     const darkmode = computed(() => store.state.darkmode);
39 | 
40 |     return {
41 |       // traitTypes,
42 |       GalleryComponent,
43 |       imageType,
44 |       darkmode,
45 |       // buildLoaded,
46 |       // allTraits,
47 |       metadata,
48 |     };
49 |   },
50 | };
51 | </script>
52 | 
53 | <style lang="scss">
54 | :root {
55 |   --dark: #222;
56 |   --light: #e5e5e5;
57 |   --white: #fff;
58 | }
59 | #app {
60 |   font-family: Avenir, Helvetica, Arial, sans-serif;
61 |   -webkit-font-smoothing: antialiased;
62 |   -moz-osx-font-smoothing: grayscale;
63 |   text-align: left;
64 |   width: 100vw;
65 | }
66 | 
67 | .app {
68 |   --background: var(--white);
69 | 
70 |   min-height: 100vh;
71 |   padding: 2em;
72 | 
73 |   &.darkmode {
74 |     --background: var(--dark);
75 |     --color: var(--light);
76 |   }
77 |   background: var(--background);
78 |   color: var(--color);
79 | }
80 | 
81 | * {
82 |   box-sizing: border-box;
83 |   margin: 0;
84 |   padding: 0;
85 | }
86 | 
87 | .explorer {
88 |   display: flex;
89 |   padding: 2rem;
90 | }
91 | </style>
92 | 


--------------------------------------------------------------------------------
/src/components/DarkmodeToggle.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="toggle">
  3 |     <span>
  4 |       <svg
  5 |         xmlns="http://www.w3.org/2000/svg"
  6 |         enable-background="new 0 0 24 24"
  7 |         height="24px"
  8 |         viewBox="0 0 24 24"
  9 |         width="24px"
 10 |         :fill="darkmode ? '#e5e5e5' : '#222222'"
 11 |       >
 12 |         <rect fill="none" height="24" width="24" />
 13 |         <path
 14 |           d="M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0 c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2 c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1 C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06 c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41 l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41 c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36 c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"
 15 |         />
 16 |       </svg>
 17 |     </span>
 18 |     <input type="checkbox" :checked="darkmode" name="darkmode" id="" />
 19 |     <label @click="store.dispatch('TOGGLE_DARK_MODE')" for="darkmode"
 20 |       >darkmode</label
 21 |     >
 22 |     <span>
 23 |       <svg
 24 |         xmlns="http://www.w3.org/2000/svg"
 25 |         enable-background="new 0 0 24 24"
 26 |         height="24px"
 27 |         viewBox="0 0 24 24"
 28 |         width="24px"
 29 |         :fill="darkmode ? '#e5e5e5' : '#222222'"
 30 |       >
 31 |         <rect fill="none" height="24" width="24" />
 32 |         <path
 33 |           d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26 c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
 34 |         />
 35 |       </svg>
 36 |     </span>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script setup>
 41 | import { computed } from "@vue/runtime-core";
 42 | import { useStore } from "vuex";
 43 | 
 44 | const store = useStore();
 45 | const darkmode = computed(() => store.state.darkmode);
 46 | </script>
 47 | 
 48 | <style lang="scss" scoped>
 49 | .toggle {
 50 |   align-items: center;
 51 |   display: flex;
 52 |   padding: 0 calc(2rem - 20px);
 53 | 
 54 |   span > svg {
 55 |     display: block;
 56 |     height: 16px;
 57 |   }
 58 | }
 59 | 
 60 | input[type="checkbox"] {
 61 |   height: 0;
 62 |   width: 0;
 63 |   visibility: hidden;
 64 | }
 65 | 
 66 | label {
 67 |   cursor: pointer;
 68 |   text-indent: -9999px;
 69 |   width: 32px;
 70 |   height: 16px;
 71 |   background: grey;
 72 |   display: block;
 73 |   border-radius: 16px;
 74 |   position: relative;
 75 | }
 76 | 
 77 | label:after {
 78 |   content: "";
 79 |   position: absolute;
 80 |   top: 1px;
 81 |   left: 1px;
 82 |   width: 14px;
 83 |   height: 14px;
 84 |   background: #fff;
 85 |   border-radius: 20px;
 86 |   transition: 0.3s;
 87 | }
 88 | 
 89 | input:checked + label {
 90 |   background: #672e72;
 91 | }
 92 | 
 93 | input:checked + label:after {
 94 |   left: calc(100% - 1px);
 95 |   transform: translateX(-100%);
 96 | }
 97 | 
 98 | label:active:after {
 99 |   width: 30px;
100 | }
101 | </style>
102 | 


--------------------------------------------------------------------------------
/src/components/FilterAside.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <aside class="filters">
  3 |     <h1>Filter</h1>
  4 |     <div v-for="category in Object.keys(allTraits).sort()" :key="category">
  5 |       <label
  6 |         for=""
  7 |         @click="collapsed[category] = !collapsed[category]"
  8 |         class="filter__type"
  9 |       >
 10 |         <svg
 11 |           :class="{ 'expand-icon': true, collapsed: collapsed[category] }"
 12 |           xmlns="http://www.w3.org/2000/svg"
 13 |           viewBox="0 0 48 48"
 14 |         >
 15 |           <path d="m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z" />
 16 |         </svg>
 17 |         {{ category }}</label
 18 |       >
 19 |       <ul class="filter__list" v-show="!collapsed[category]">
 20 |         <li
 21 |           class="filter__attribute"
 22 |           v-for="attribute in Object.keys(allTraits[category]).sort()"
 23 |           :key="attribute"
 24 |         >
 25 |           <input
 26 |             class="filter__checkbox"
 27 |             type="checkbox"
 28 |             @change="filterHandler($event, allTraits[category][attribute])"
 29 |             :checked="allTraits[category][attribute].filterState"
 30 |             :data-trait-type="category"
 31 |             :data-trait-attribute="attribute"
 32 |             :name="attribute"
 33 |             :id="attribute"
 34 |           />
 35 |           <label :for="attribute"
 36 |             >{{ attribute }}
 37 |             <span class="filter__attribute-count"
 38 |               >({{ allTraits[category][attribute].count }})</span
 39 |             ></label
 40 |           >
 41 |         </li>
 42 |       </ul>
 43 |     </div>
 44 |   </aside>
 45 | </template>
 46 | 
 47 | <script setup>
 48 | import { computed, reactive } from "@vue/runtime-core";
 49 | import { useStore } from "vuex";
 50 | // import { ref } from "@vue/reactivity";
 51 | 
 52 | const store = useStore();
 53 | const allTraits = computed(() => store.state.allTraits);
 54 | // const traitTypes = computed(() => store.state.traitTypes);
 55 | 
 56 | const collapsed = reactive({});
 57 | 
 58 | Object.keys(allTraits.value).forEach((key) => {
 59 |   collapsed[key] = true;
 60 | });
 61 | 
 62 | console.log({ collapsed });
 63 | 
 64 | const filterHandler = (e, trait) => {
 65 |   console.log("FilterHandler", { checked: e.target.checked, trait });
 66 | 
 67 |   if (e.target.checked) {
 68 |     // add
 69 |     console.log("add filter");
 70 |     store.dispatch("ADD_FILTER", {
 71 |       trait_type: e.target.dataset.traitType,
 72 |       value: e.target.dataset.traitAttribute,
 73 |     });
 74 |   } else {
 75 |     // remove
 76 |     console.log("remove filter");
 77 |     store.dispatch("REMOVE_FILTER", {
 78 |       trait_type: e.target.dataset.traitType,
 79 |       value: e.target.dataset.traitAttribute,
 80 |     });
 81 |   }
 82 | };
 83 | </script>
 84 | 
 85 | <style lang="scss" scoped>
 86 | .filters {
 87 |   margin-right: 2rem;
 88 |   min-width: 200px;
 89 | 
 90 |   h1 {
 91 |     font-size: 2em;
 92 |     font-weight: bolder;
 93 |     margin-bottom: 1rem;
 94 |     text-transform: uppercase;
 95 |   }
 96 | }
 97 | 
 98 | .expand-icon {
 99 |   width: 1.25rem;
100 | 
101 |   &.collapsed {
102 |     transform: rotate(-90deg);
103 |   }
104 | }
105 | 
106 | .filter {
107 |   &__list {
108 |     margin-bottom: 1rem;
109 |   }
110 |   &__type {
111 |     font-weight: bolder;
112 |     display: flex;
113 |     align-items: center;
114 |     margin-bottom: 1rem;
115 |   }
116 |   &__attribute {
117 |     list-style: none;
118 |     padding: 0 0.2rem;
119 |   }
120 | 
121 |   &__checkbox {
122 |     margin-right: 0.5rem;
123 |   }
124 | 
125 |   &__attribute-count {
126 |     opacity: 0.6;
127 |     font-size: 0.875em;
128 |   }
129 | }
130 | </style>
131 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
  1 | import { createStore } from "vuex";
  2 | 
  3 | export default createStore({
  4 |   state: {
  5 |     metadata: [],
  6 |     filters: [],
  7 |     results: [],
  8 |     allTraits: [],
  9 |     traitTypes: [],
 10 |     currentDetailIndex: 0,
 11 |     darkmode: false,
 12 |   },
 13 |   getters: {},
 14 |   mutations: {
 15 |     SET_RESULTS(state, _results) {
 16 |       state.results = _results;
 17 |     },
 18 |     SET_FILTERS(state, _filters) {
 19 |       state.filters = _filters;
 20 |     },
 21 |     SET_METADATA(state, _metadata) {
 22 |       state.metadata = _metadata;
 23 |     },
 24 |     SET_TRAITS(state, _traitsData) {
 25 |       state.allTraits = _traitsData;
 26 |     },
 27 |     SET_TRAIT_TYPES(state, _traits) {
 28 |       state.traitTypes = _traits;
 29 |     },
 30 |     SET_CURRENT_INDEX(state, _index) {
 31 |       state.currentDetailIndex = _index;
 32 |     },
 33 |     SET_DARKMODE(state, _on) {
 34 |       state.darkmode = _on;
 35 |     },
 36 |   },
 37 |   actions: {
 38 |     INITIALIZE_TRAITS({ commit }, metadata) {
 39 |       console.log("init traits,", metadata);
 40 |       commit("SET_METADATA", metadata);
 41 |       commit("SET_RESULTS", metadata);
 42 | 
 43 |       const allTraits = metadata.reduce((acc, item) => {
 44 |         // loop over each item in the entire metadata. this could be
 45 |         // time intensive.
 46 |         // Initialize the trait if it has not been initialized yet in the acc
 47 |         // initialize the value at count 1 it it has not been init yet
 48 |         // sum al the counts
 49 |         item.attributes.forEach((attribute) => {
 50 |           acc[attribute.trait_type] = {
 51 |             ...acc[attribute.trait_type],
 52 |             [attribute.value]: {
 53 |               filterState: false,
 54 |               count: acc[attribute.trait_type]
 55 |                 ? acc[attribute.trait_type][attribute.value]
 56 |                   ? acc[attribute.trait_type][attribute.value].count + 1
 57 |                   : 1
 58 |                 : 1,
 59 |             },
 60 |           };
 61 |         });
 62 |         return acc;
 63 |       }, {});
 64 | 
 65 |       const traitTypes = Object.keys(allTraits);
 66 |       commit("SET_TRAIT_TYPES", traitTypes);
 67 |       commit("SET_TRAITS", allTraits);
 68 |     },
 69 | 
 70 |     SET_AVAILABLE_ATTRIBUTES({ commit, state }) {
 71 |       const allTraits = state.results.reduce((acc, item) => {
 72 |         // loop over each item in the entire metadata. this could be
 73 |         // time intensive.
 74 |         // Initialize the trait if it has not been initialized yet in the acc
 75 |         // initialize the value at count 1 it it has not been init yet
 76 |         // sum al the counts
 77 |         item.attributes.forEach((attribute) => {
 78 |           acc[attribute.trait_type] = {
 79 |             ...acc[attribute.trait_type],
 80 |             [attribute.value]: {
 81 |               filterState: false,
 82 |               count: acc[attribute.trait_type]
 83 |                 ? acc[attribute.trait_type][attribute.value]
 84 |                   ? acc[attribute.trait_type][attribute.value].count + 1
 85 |                   : 1
 86 |                 : 1,
 87 |             },
 88 |           };
 89 |         });
 90 |         return acc;
 91 |       }, {});
 92 | 
 93 |       commit("SET_TRAITS", allTraits);
 94 |     },
 95 |     /**
 96 |      *
 97 |      * @param {context} param0 Unwraped context params for commit,state
 98 |      * @param {Array} filters [...{}] filters of types and value pairs
 99 |      */
100 |     UPDATE_RESULTS({ commit, state }, filters) {
101 |       // TODO: do the filtering of the metadata here
102 |       const subset = state.metadata.filter((item) => {
103 |         return item.attributes.includes(
104 |           (attribute) =>
105 |             attribute.trait_type === filters.trait_type &&
106 |             attribute.value === attribute.value
107 |         );
108 |       });
109 | 
110 |       commit("SET_RESULTS", subset);
111 |     },
112 | 
113 |     ADD_FILTER({ commit, dispatch, state }, filter) {
114 |       const filters = [...state.filters, { ...filter, filterState: true }];
115 |       const updateState = {
116 |         ...state.allTraits,
117 |       };
118 |       updateState[filter.trait_type][filter.value].filterState = true;
119 | 
120 |       commit("SET_TRAITS", updateState);
121 |       commit("SET_FILTERS", filters);
122 |       dispatch("FILTER");
123 |     },
124 | 
125 |     REMOVE_FILTER({ commit, dispatch, state }, traitFilter) {
126 |       const filters = state.filters.filter(
127 |         (trait) =>
128 |           trait.trait_type !== traitFilter.trait_type &&
129 |           trait.value !== traitFilter.value
130 |       );
131 |       const updateState = {
132 |         ...state.allTraits,
133 |       };
134 |       updateState[traitFilter.trait_type][
135 |         traitFilter.value
136 |       ].filterState = false;
137 |       commit("SET_TRAITS", updateState);
138 |       commit("SET_FILTERS", filters);
139 |       dispatch("FILTER");
140 |       dispatch("SET_AVAILABLE_ATTRIBUTES");
141 |     },
142 | 
143 |     FILTER({ commit, state, dispatch }) {
144 |       if (!state.filters.length || state.filters.length === 0) {
145 |         // clear all filter results and show all
146 |         commit("SET_RESULTS", state.metadata);
147 |         return;
148 |       }
149 | 
150 |       // console.log("active filters", state.filters);
151 | 
152 |       const results = state.metadata.filter((item) => {
153 |         return state.filters.every((filter) => {
154 |           // if the items attributes match any of the filters, return true
155 |           return item.attributes.some((attribute) => {
156 |             return (
157 |               attribute.trait_type === filter.trait_type &&
158 |               attribute.value === filter.value
159 |             );
160 |           });
161 |         });
162 | 
163 |         // return matches.length > 0;
164 |       });
165 |       // console.log({ results });
166 |       commit("SET_RESULTS", results);
167 |       dispatch("SET_AVAILABLE_ATTRIBUTES");
168 |     },
169 | 
170 |     // Set the metadata array index of the current selected item
171 |     CURRENT_DETAIL_INDEX({ commit }, _index) {
172 |       commit("SET_CURRENT_INDEX", _index);
173 |     },
174 | 
175 |     TOGGLE_DARK_MODE({ commit, state }) {
176 |       commit("SET_DARKMODE", !state.darkmode);
177 |     },
178 |   },
179 |   modules: {},
180 | });
181 | 


--------------------------------------------------------------------------------
/src/components/GalleryComponent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="gallery">
  3 |     <!-- <pre>detail index:{{ detailIndex }}</pre> -->
  4 |     <!-- <pre>selected img: {{ selectedToken }}</pre> -->
  5 |     <h1>{{ results.length }}/ {{ metadata.length }}</h1>
  6 | 
  7 |     <active-filters />
  8 |     <div class="results">
  9 |       <div class="result" v-for="item in results" :key="item.name">
 10 |         <div v-if="mode == 'gallery' || mode == 'gallery-list'">
 11 |           <!-- TODO: make src path configurable -->
 12 |           <img
 13 |             @click="selectionHandler(item, item.edition)"
 14 |             :data-token="item"
 15 |             :src="require(`#BUILD/images/${item.edition}.${imageType}`)"
 16 |             alt=""
 17 |             srcset=""
 18 |           />
 19 |         </div>
 20 |         <p>
 21 |           {{ item.name }}
 22 |         </p>
 23 |       </div>
 24 |     </div>
 25 |     <!-- <pre>{{ sources }}</pre> -->
 26 |     <!-- <pre>{{ type }}</pre> -->
 27 |   </div>
 28 | 
 29 |   <div
 30 |     v-if="selectedToken"
 31 |     v-show="modalOpen"
 32 |     :class="{ modal: true, fullscreen }"
 33 |   >
 34 |     <!-- {{ selectedToken }} -->
 35 |     <button @click="toggleFullscreen" class="fullscreen-toggle">
 36 |       <!-- Fullscreen toggle -->
 37 |       <img
 38 |         v-if="!fullscreen"
 39 |         src="@/assets/icon-fullscreen-open.svg"
 40 |         alt=""
 41 |         srcset=""
 42 |       />
 43 |       <img v-else src="@/assets/icon-fullscreen-close.svg" alt="" srcset="" />
 44 |     </button>
 45 |     <!-- Close modal -->
 46 |     <button class="close" @click="toggleModal">
 47 |       <img src="@/assets/icon-close.svg" alt="" srcset="" />
 48 |     </button>
 49 |     <div v-if="!fullscreen" class="metadata">
 50 |       <h1>{{ selectedToken.name }}</h1>
 51 |       <div class="attributes">
 52 |         <div
 53 |           v-for="attribute in selectedToken.attributes"
 54 |           class="attribute"
 55 |           :key="attribute.trait_type"
 56 |         >
 57 |           <p class="attribute__trait">{{ attribute.trait_type }}</p>
 58 |           <p class="attribute__value">{{ attribute.value }}</p>
 59 |         </div>
 60 |       </div>
 61 |     </div>
 62 |     <img
 63 |       :src="require(`#BUILD/images/${selectedToken.edition}.${imageType}`)"
 64 |       alt=""
 65 |       srcset=""
 66 |     />
 67 |   </div>
 68 |   <div class="screen" v-if="modalOpen"></div>
 69 | </template>
 70 | 
 71 | <script>
 72 | import { computed, ref, watch } from "@vue/runtime-core";
 73 | import { useStore } from "vuex";
 74 | import ActiveFilters from "./ActiveFilters.vue";
 75 | 
 76 | const handlers = {};
 77 | export default {
 78 |   components: { ActiveFilters },
 79 |   setup() {
 80 |     const store = useStore();
 81 | 
 82 |     const allTraits = computed(() => store.state.allTraits);
 83 |     const metadata = computed(() => store.state.metadata);
 84 |     const results = computed(() => store.state.results);
 85 | 
 86 |     const fullscreen = ref(false);
 87 | 
 88 |     const detailIndex = computed(() => store.state.currentDetailIndex);
 89 |     const selectedToken = ref(null);
 90 |     watch(detailIndex, (index) => {
 91 |       console.log("setting selected");
 92 |       selectedToken.value = metadata.value.find(
 93 |         (element) => element.edition == index
 94 |       );
 95 |     });
 96 | 
 97 |     const imageType = process.env.VUE_APP_IMAGE_TYPE;
 98 |     const modalOpen = ref(false);
 99 |     // const total = ref(null);
100 |     // TODO:
101 |     const mode = ref("gallery");
102 |     return {
103 |       mode,
104 |       allTraits,
105 |       metadata,
106 |       results,
107 |       imageType,
108 |       modalOpen,
109 |       fullscreen,
110 |       detailIndex,
111 |       toggleModal: () => (modalOpen.value = !modalOpen.value),
112 |       toggleFullscreen: toggleFullscreen(fullscreen),
113 |       selectedToken,
114 |       selectionHandler: selectionHandler(store, selectedToken, modalOpen),
115 |     };
116 |   },
117 | };
118 | 
119 | const selectionHandler = (store, selected, modalOpen) => (elem, index) => {
120 |   store.dispatch("CURRENT_DETAIL_INDEX", index);
121 |   console.log("selection handler", { index });
122 |   modalOpen.value = !modalOpen.value;
123 | 
124 |   toggleKeyHandler(store, modalOpen);
125 | };
126 | 
127 | const toggleKeyHandler = (store, modalOpen) => {
128 |   // remember the handlers if it is not created, otherwise reuse it
129 |   handlers.keyHandler = handlers.keyHandler
130 |     ? handlers.keyHandler
131 |     : keyPressHandler(store, modalOpen);
132 | 
133 |   if (modalOpen.value) {
134 |     window.addEventListener("keydown", handlers.keyHandler);
135 |   } else {
136 |     window.removeEventListener("keydown", handlers.keyHandler);
137 |   }
138 | };
139 | 
140 | const keyPressHandler = (store, modalOpen) => (e) => {
141 |   const index = store.state.currentDetailIndex;
142 |   const max = store.state.metadata.length;
143 |   const min = store.state.metadata[0].edition;
144 |   switch (e.key) {
145 |     case "Escape":
146 |       modalOpen.value = false;
147 |       toggleKeyHandler(store, modalOpen);
148 |       break;
149 |     case "ArrowUp":
150 |       e.preventDefault();
151 |       if (index + 1 <= max) {
152 |         store.dispatch("CURRENT_DETAIL_INDEX", index + 1);
153 |       }
154 |       break;
155 |     case "ArrowRight":
156 |       e.preventDefault();
157 |       if (index + 1 <= max) {
158 |         store.dispatch("CURRENT_DETAIL_INDEX", index + 1);
159 |       }
160 |       break;
161 |     case "ArrowLeft":
162 |       e.preventDefault();
163 |       if (index - 1 >= min) {
164 |         store.dispatch("CURRENT_DETAIL_INDEX", index - 1);
165 |       }
166 |       break;
167 |     case "ArrowDown":
168 |       e.preventDefault();
169 |       if (index - 1 >= min) {
170 |         store.dispatch("CURRENT_DETAIL_INDEX", index - 1);
171 |       }
172 |       break;
173 | 
174 |     default:
175 |       break;
176 |   }
177 | };
178 | 
179 | const toggleFullscreen = (fullscreenState) => () => {
180 |   fullscreenState.value = !fullscreenState.value;
181 | };
182 | </script>
183 | 
184 | <style lang="scss" scoped>
185 | .results {
186 |   display: grid;
187 |   grid-auto-rows: auto;
188 |   grid-gap: 1rem;
189 |   grid-template-columns: repeat(5, 1fr);
190 | 
191 |   img {
192 |     width: 100%;
193 |     transition: transform ease-in-out 0.25s;
194 |     &:hover {
195 |       cursor: pointer;
196 |       transform: scale(1.018);
197 |       box-shadow: 0px 2px 5px 1px rgb(0 0 0 / 23%);
198 |     }
199 |   }
200 | 
201 |   .result {
202 |     align-items: center;
203 |     display: flex;
204 |     flex-direction: column;
205 |     justify-content: center;
206 |   }
207 | }
208 | .screen {
209 |   width: 100vw;
210 |   height: 100vh;
211 |   top: 0;
212 |   left: 0;
213 |   position: fixed;
214 |   background: var(--background);
215 |   opacity: 0.65;
216 |   z-index: 9;
217 | }
218 | .modal {
219 |   display: flex;
220 |   position: fixed;
221 |   background: var(--background);
222 |   justify-content: space-between;
223 |   top: 0;
224 |   left: 0;
225 |   right: 0;
226 |   bottom: 0;
227 |   width: 85vw;
228 |   height: 50vh;
229 |   margin: auto;
230 |   border: 1px solid;
231 |   border-radius: 0.6rem;
232 |   overflow: hidden;
233 |   z-index: 10;
234 | 
235 |   &.fullscreen {
236 |     height: 99vh;
237 |     width: 99vw;
238 |     justify-content: center;
239 |   }
240 | 
241 |   .metadata {
242 |     flex-basis: 50%;
243 |     padding: 2rem;
244 | 
245 |     h1 {
246 |       margin-bottom: 1rem;
247 |     }
248 |   }
249 |   .attributes {
250 |     display: grid;
251 |     grid-template-columns: 1fr 1fr;
252 |     grid-gap: 0.5rem 1rem;
253 | 
254 |     .attribute {
255 |       &__trait {
256 |         font-size: 0.9em;
257 |         font-weight: bolder;
258 |         line-height: 1;
259 |       }
260 |       &__value {
261 |         font-size: 1.1em;
262 |       }
263 |     }
264 |   }
265 | 
266 |   button {
267 |     position: absolute;
268 |     background: none;
269 |     border: none;
270 |     opacity: 50%;
271 | 
272 |     &.fullscreen-toggle {
273 |       right: 0;
274 |       top: 0;
275 |     }
276 | 
277 |     &.close {
278 |       left: 0;
279 |       top: 0;
280 |     }
281 | 
282 |     &:hover {
283 |       cursor: pointer;
284 |     }
285 |   }
286 | }
287 | </style>
288 | 


--------------------------------------------------------------------------------