Initial commit

assets/css/_vars.scss

@@ -0,0 +1,27 @@
+$cl_black: rgb(0, 0, 0);
+$cl_gray: rgb(128, 128, 128);
+$cl_white: rgb(255, 255, 255);
+
+$cl_anemo: rgb(39, 161, 146);
+$cl_pyro: rgb(190, 40, 40);
+$cl_hydro: rgb(34, 143, 186);
+$cl_electro: rgb(109, 81, 184);
+$cl_cryo: rgb(128, 172, 211);
+$cl_dendro: rgb(83, 153, 100);
+$cl_geo: rgb(214, 153, 64);
+
+$cl_common: rgb(55, 180, 140);
+$cl_rare: rgb(80, 130, 205);
+$cl_epic: rgb(160, 65, 225);
+$cl_legendary: rgb(215, 125, 55);
+$cl_challenge: rgb(190, 40, 40);
+$cl_seelie: rgb(25, 225, 215);
+
+$cl_sand: rgb(120, 106, 80);
+$cl_sea: rgb(27, 40, 59);
+
+$cl_ui_dark: rgb(74, 83, 102);
+$cl_ui_darker: rgb(40, 46, 61);
+$cl_ui_shell: rgb(183, 186, 194);
+$cl_ui_light: rgb(236, 229, 216);
+$cl_ui_hover: rgb(217, 167, 98);

assets/css/font.scss

@@ -0,0 +1,31 @@
+@font-face {
+    font-family: 'ptsans_regular';
+    src: url('../font/ptsans-regular.woff2') format('woff2'),
+    url('../font/ptsans-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'ptsans_bold';
+    src: url('../font/ptsans-bold.woff2') format('woff2'),
+    url('../font/ptsans-bold.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'ptsans_italic';
+    src: url('../font/ptsans-italic.woff2') format('woff2'),
+    url('../font/ptsans-italic.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'ptsans_bold_italic';
+    src: url('../font/ptsans-bolditalic.woff2') format('woff2'),
+    url('../font/ptsans-bolditalic.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}

assets/css/layout.scss

@@ -0,0 +1,53 @@
+body {
+    overflow: hidden;
+}
+
+#page-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+    width: 100vw;
+}
+
+#header-container, #footer-container {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    padding: 0 20px;
+    z-index: 2;
+}
+
+#header-container {
+    max-height: 64px;
+}
+
+#main-container {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    z-index: 1;
+}
+
+#main-left-container, #main-center-container, #main-right-container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+#main-left-container, #main-right-container {
+    flex-shrink: 0;
+}
+
+#main-center-container {
+    flex-grow: 1;
+    max-width: 100%;
+}
+
+#footer-container {
+    max-height: 32px;
+}

assets/css/normalize.scss

@@ -0,0 +1,198 @@
+html {
+    box-sizing: border-box;
+    font-size: 16px;
+    height: 100vh;
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+    width: 100vw;
+}
+
+* {
+    box-sizing: border-box;
+    position: relative;
+    &:before, &:after {
+        box-sizing: border-box;
+    }
+    //&:focus {
+    //    outline: none;
+    //}
+}
+
+body {
+    height: 100vh;
+    margin: 0;
+    width: 100vw;
+}
+
+main {
+    display: block;
+}
+
+a {
+    background-color: transparent;
+    color: inherit;
+    text-decoration: none;
+    &:visited, &:hover, &:active, &:focus {
+        color: inherit;
+    }
+}
+
+abbr[title] {
+    border-bottom: none;
+    text-decoration: underline dotted;
+}
+
+b, strong {
+    font-weight: bolder;
+}
+
+button, input, optgroup, select, textarea {
+    font-family: inherit;
+    font-size: 100%;
+    line-height: 1.15;
+    margin: 0;
+}
+
+button, input {
+    overflow: visible;
+}
+
+button, select {
+    text-transform: none;
+}
+
+details {
+    display: block;
+}
+
+div, textarea, table, td, th, code, pre, samp {
+    word-wrap: break-word;
+    hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+}
+
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow: visible;
+}
+
+img {
+    border-style: none;
+    max-width: 100%;
+    height: auto;
+}
+
+a, button, input, select, textarea {
+    &:focus {
+        outline: none;
+    }
+}
+
+legend {
+    box-sizing: border-box;
+    color: inherit;
+    display: table;
+    max-width: 100%;
+    padding: 0;
+    white-space: normal;
+}
+
+pre, code, kbd, samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+    white-space: pre-wrap;
+}
+
+progress {
+    vertical-align: baseline;
+}
+
+small {
+    font-size: 80%;
+}
+
+sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+summary {
+    display: list-item;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+textarea {
+    overflow: auto;
+}
+
+template {
+    display: none;
+}
+
+button, [type="button"], [type="reset"], [type="submit"] {
+    -webkit-appearance: button;
+    &:hover {
+        cursor: pointer;
+    }
+    &::-moz-focus-inner, &::-moz-focus-inner, &::-moz-focus-inner, &::-moz-focus-inner {
+        border-style: none;
+        padding: 0;
+    }
+    &:-moz-focusring, &:-moz-focusring, &:-moz-focusring, &:-moz-focusring {
+        outline: 1px dotted ButtonText;
+    }
+}
+
+[type="checkbox"], [type="radio"] {
+    padding: 0;
+}
+
+[type="number"] {
+    //-moz-appearance: textfield;
+    &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
+        height: auto;
+        //-webkit-appearance: none;
+    }
+}
+
+[type="search"] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+    &::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+}
+
+[hidden] {
+    display: none !important;
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+}

assets/js/Classes/Store.js

@@ -0,0 +1,98 @@
+export class Store {
+    /** @private {string} */
+    #_storeName;
+    /** @private {boolean} */
+    #_autoIncrement;
+    /** @private {string|Array} */
+    #_keyPath;
+    /** @private {Object[]} */
+    #_indexes;
+
+    /**
+     * @param {string} storeName
+     * @param {boolean} autoIncrement
+     * @param {string|Array} keyPath
+     * @param {Object[]} indexes
+     */
+    constructor(storeName, autoIncrement = true, keyPath = "id", indexes = []) {
+        this.#_storeName = storeName;
+        this.#_autoIncrement = autoIncrement;
+        this.#_keyPath = keyPath;
+        this.#_indexes = indexes;
+    }
+
+    get storeName() {
+        return this.#_storeName;
+    }
+
+    set storeName(value) {
+        this.#_storeName = value
+    }
+
+    get autoIncrement() {
+        return this.#_autoIncrement;
+    }
+
+    set autoIncrement(value) {
+        this.#_autoIncrement = value
+    }
+
+    get keyPath() {
+        return this.#_keyPath;
+    }
+
+    set keyPath(value) {
+        this.#_keyPath = value
+    }
+
+    get indexes() {
+        return this.#_indexes;
+    }
+
+    set indexes(value) {
+        this.#_indexes = value
+    }
+}
+
+export class Index {
+    /** @private {string} */
+    #_name;
+    /** @private {string} */
+    #_keyPath;
+    /** @private {Object} */
+    #_options = {};
+
+    /**
+     * @param {string} keyPath
+     * @param {boolean} isUnique
+     */
+    constructor(keyPath, isUnique = false) {
+        this.#_name = keyPath;
+        this.#_keyPath = keyPath;
+        this.#_options = { unique: isUnique};
+    }
+
+    get name() {
+        return this.#_name;
+    }
+
+    set name(value) {
+        this.#_name = value;
+    }
+
+    get keyPath() {
+        return this.#_keyPath;
+    }
+
+    set keyPath(value) {
+        this.#_keyPath = value;
+    }
+
+    get options() {
+        return this.#_options;
+    }
+
+    set options(value) {
+        this.#_options = value;
+    }
+}

assets/js/Classes/Worldmap.js

@@ -0,0 +1,338 @@
+export class Profile {
+    #__type = "class"
+    /** @private {string} */
+    #_slug;
+    /** @private {string} */
+    #_name;
+    /** @private {string} */
+    #_server;
+    /** @private {boolean} */
+    #_isActive;
+
+    /**
+     * @param {string} slug
+     * @param {string} name
+     * @param {string} server
+     * @param {boolean} isActive
+     */
+    constructor(slug = "", name = "", server = "eu", isActive = true) {
+        this.#_slug = slug;
+        this.#_name = name;
+        this.#_server = server;
+        this.#_isActive = isActive;
+    }
+
+    get __type () {
+        return this.#__type;
+    }
+
+    get slug() {
+        return this.#_slug;
+    }
+
+    set slug(value) {
+        this.#_slug = value;
+    }
+
+    get name() {
+        return this.#_name;
+    }
+
+    set name(value) {
+        this.#_name = value;
+    }
+
+    get server() {
+        return this.#_server;
+    }
+
+    set server(value) {
+        this.#_server = value;
+    }
+
+    get isActive() {
+        return this.#_isActive;
+    }
+
+    set isActive(value) {
+        this.#_isActive = Boolean(value);
+    }
+
+    /**
+     * @param {string} slug
+     * @param {string} name
+     * @param {string} server
+     * @param {boolean} isActive
+     */
+    hydrate({slug, name, server, isActive}) {
+        this.slug = slug;
+        this.name = name;
+        this.server = server;
+        this.isActive = isActive;
+    }
+
+    /**
+     * @return {{slug: string, name: string, server: string, isActive: number}}
+     */
+    dehydrate() {
+        return {
+            slug: this.slug,
+            name: this.name,
+            server: this.server,
+            isActive: Number(this.isActive)
+        }
+    }
+}
+
+export class Region {
+    #__type = "class";
+    /** @private {string} */
+    #_slug;
+    /** @private {string} */
+    #_name;
+    /** @private {number} */
+    #_scrollLeft;
+    /** @private {number} */
+    #_scrollTop;
+    /** @private {number} */
+    #_zoomLevel;
+
+    /**
+     * @param {string} slug
+     * @param {string} name
+     * @param {number} scrollLeft
+     * @param {number} scrollTop
+     * @param {number} zoomLevel
+     */
+    constructor(slug, name, scrollLeft = 50, scrollTop = 50, zoomLevel = 8) {
+        this.#_slug = slug;
+        this.#_name = name;
+        this.#_scrollLeft = scrollLeft;
+        this.#_scrollTop = scrollTop;
+        this.#_zoomLevel = zoomLevel;
+    }
+
+    get __type () {
+        return this.#__type;
+    }
+
+    get slug() {
+        return this.#_slug;
+    }
+
+    set slug(value) {
+        this.#_slug = value;
+    }
+
+    get name() {
+        return this.#_name;
+    }
+
+    set name(value) {
+        this.#_name = value;
+    }
+
+    get scrollLeft() {
+        return this.#_scrollLeft;
+    }
+
+    set scrollLeft(value) {
+        this.#_scrollLeft = Number(value);
+    }
+
+    get scrollTop() {
+        return this.#_scrollTop;
+    }
+
+    set scrollTop(value) {
+        this.#_scrollTop = Number(value);
+    }
+
+    get zoomLevel() {
+        return this.#_zoomLevel;
+    }
+
+    set zoomLevel(value) {
+        this.#_zoomLevel = Number(value);
+    }
+
+    /**
+     * @param {string} slug
+     * @param {string} name
+     * @param {number} scrollLeft
+     * @param {number} scrollTop
+     * @param {number} zoomLevel
+     */
+    hydrate({slug, name, scrollLeft, scrollTop, zoomLevel}) {
+        this.slug = slug;
+        this.name = name;
+        this.scrollLeft = scrollLeft;
+        this.scrollTop = scrollTop;
+        this.zoomLevel = zoomLevel;
+    }
+
+    /**
+     * @return {{slug: string, name: string, scrollLeft: number, scrollTop: number, zoomLevel: number}}
+     */
+    dehydrate() {
+        return {
+            slug: this.slug,
+            name: this.name,
+            scrollLeft: Number(this.scrollLeft),
+            scrollTop: Number(this.scrollTop),
+            zoomLevel: Number(this.zoomLevel)
+        }
+    }
+}
+
+export class Filter {
+    #__type = "class";
+    /** @private {string} */
+    #_region;
+    /** @private {string} */
+    #_slug;
+    /** @private {boolean} */
+    #_isActive;
+
+    /**
+     * @param {string} region
+     * @param {string} slug
+     * @param {boolean} isActive
+     */
+    constructor(region, slug, isActive=false) {
+        this.#_region = region;
+        this.#_slug = slug;
+        this.#_isActive = isActive;
+    }
+
+    get __type () {
+        return this.#__type;
+    }
+
+    get slug() {
+        return this.#_slug;
+    }
+
+    set slug(value) {
+        this.#_slug = value;
+    }
+
+    get region() {
+        return this.#_region;
+    }
+
+    set region(value) {
+        this.#_region = value;
+    }
+
+    get isActive() {
+        return this.#_isActive;
+    }
+
+    set isActive(value) {
+        this.#_isActive = Boolean(value);
+    }
+
+    /**
+     * @param {string} region
+     * @param {string} slug
+     * @param {boolean} isActive
+     */
+    hydrate({region, slug, isActive}) {
+        this.region = region
+        this.slug = slug
+        this.isActive = isActive;
+    }
+
+    /**
+     * @return {{region: string, slug: string, isActive: number}}
+     */
+    dehydrate() {
+        return {
+            region: this.region,
+            slug: this.slug,
+            isActive: Number(this.isActive)
+        }
+    }
+}
+
+export class Node {
+    #__type = "class";
+    /** @private {string} */
+    #_profile;
+    /** @private {string} */
+    #_region;
+    /** @private {string} */
+    #_domId;
+    /** @private {boolean} */
+    #_isHidden;
+    
+    constructor(profile, id, region, isHidden) {
+        this.#_profile = profile;
+        this.#_domId = id;
+        this.#_region = region;
+        this.#_isHidden = isHidden;
+
+    }
+
+    get __type () {
+        return this.#__type;
+    }
+
+    get profile() {
+        return this.#_profile;
+    }
+
+    set profile(value) {
+        this.#_profile = value;
+    }
+
+    get region() {
+        return this.#_region;
+    }
+
+    set region(value) {
+        this.#_region = value;
+    }
+    
+    get domId() {
+        return this.#_domId;
+    }
+
+    set domId(value) {
+        this.#_domId = value;
+    }
+
+    get isHidden() {
+        return this.#_isHidden;
+    }
+
+    set isHidden(value) {
+        this.#_isHidden = Boolean(value);
+    }
+
+    /**
+     * @param {string} profile
+     * @param {string} domId
+     * @param {string} region
+     * @param {boolean} isHidden
+     */
+    hydrate({profile, domId, region, isHidden}) {
+        this.profile = profile;
+        this.domId = domId;
+        this.region = region;
+        this.isHidden = isHidden;
+    }
+
+    /**
+     * @return {{profile: string, domId: string, region: string, isHidden: number}}
+     */
+    dehydrate() {
+        return {
+            profile: this.profile,
+            domId: this.domId,
+            region: this.region,
+            isHidden: Number(this.isHidden)
+        }
+    }
+}

assets/js/idb_stores.js

@@ -0,0 +1,15 @@
+import {Store, Index} from "./Classes/Store";
+
+
+export const IDB_stores = {
+    ProfileStore: new Store("profile", false, "slug", [
+        new Index("isActive", false)
+    ]),
+    RegionStore: new Store("region", false, "slug"),
+    FilterStore: new Store("filter", false, ["region", "slug"], [
+        new Index("region", false)
+    ]),
+    NodeStore: new Store("node", false, ["profile", "domId"], [
+        new Index("region", false)
+    ]),
+};

assets/js/statics.js

@@ -0,0 +1 @@
+export const STATIC_ENV = "prod";

assets/js/stores.js

@@ -0,0 +1,35 @@
+const WorldmapFilterStore = {
+    autoIncrement: false,
+    keyPath: "id",
+    storeName: "worldmapFilter",
+    // __construct: {
+    //     id: "",
+    //     filters: {},
+    // },
+    _filters: {},
+    storeObjects: {}
+};
+
+const WorldmapStore = {
+    autoIncrement: false,
+    keyPath: "id",
+    storeName: "worldmap",
+    _region: {
+        id: "",
+        name: "",
+        scrollLeft: 50,
+        scrollTop: 50,
+        zoomLevel: 1,
+    }
+};
+
+// const NodeStore = {
+//     storeName: "node",
+//     keyPath: "id",
+//     autoIncrement: false
+// }
+
+export const IDB_stores = {
+    WorldmapFilterStore,
+    WorldmapStore
+};