Add front-end prototype to assets

app/assets/frontend/src/components/TopLevel.component.js

@@ -0,0 +1,99 @@
+import {Component} from '../../lib/vues6.js'
+import {router} from '../module/routing.js'
+
+const template = `
+<div class="top-level-container">
+    <div class="navbar-container">
+        <h1 class="title">Fantasy Football</h1>
+        <ul class="navbar">
+            <li class="navbar-item" v-for="item of navbar_items" :class="{ active: current_route === item.page }">
+                <app-link :href="item.page" :text="item.title"></app-link>
+            </li>
+            
+            <li class="navbar-item">
+                <a href="#" @click="on_refresh($event)">Refresh</a>
+            </li>
+        </ul>
+    </div>
+    <div class="page-container">
+        <page-my-team v-if="current_route === 'my-team'"></page-my-team>
+        <page-add-players v-if="current_route === 'my-team/add-players'"></page-add-players>
+        <page-scores v-if="current_route === 'scores'"></page-scores>
+        <page-league v-if="current_route === 'league'"></page-league>
+        <page-draft-board v-if="current_route === 'draft-board'"></page-draft-board>
+    </div>
+</div>
+`
+
+/**
+ * Top-level component which manages the display of the entire game.
+ * @extends Component
+ */
+class TopLevelComponent extends Component {
+    static get selector() { return 'app-top-level' }
+    static get template() { return template }
+    static get props() { return [] }
+
+    /**
+     * The currently loaded page route.
+     * @type {string}
+     */
+    current_route = ''
+
+    /**
+     * Array of navigation bar items where "title" is the page name, and "page" is the page route.
+     * @type {Array<object>}
+     */
+    navbar_items = [
+        { title: 'My Team', page: 'my-team' },
+        { title: 'Add Players', page: 'my-team/add-players' },
+        { title: 'Scores', page: 'scores' },
+        { title: 'League', page: 'league' },
+        { title: 'Draft Board', page: 'draft-board' },
+    ]
+
+    /**
+     * Called when the component is initialized.
+     * @return {Promise<void>}
+     */
+    async vue_on_create() {
+        // Listen for navigation changes.
+        this.router_subscription = router.subscribe((path, args) => this.on_route_change(path, args))
+
+        const url_params = new URLSearchParams(window.location.search)
+        if ( url_params.has('then') ) {
+            const route = url_params.get('then')
+            router.navigate(route)
+        } else if ( !this.current_route ) {
+            router.navigate('my-team')
+        }
+    }
+
+    /**
+     * Called when the component is destroyed.
+     * @return {Promise<void>}
+     */
+    async vue_on_destroy() {
+        // Stop listening for navigation changes.
+        this.router_subscription.unsubscribe()
+    }
+
+    /**
+     * Called when the navigation changes.
+     * @param {string} path
+     * @param {*} args
+     * @return {Promise<void>}
+     */
+    async on_route_change(path, args) {
+        if ( path.startsWith('/') ) path = path.slice(1)
+        if ( path.endsWith('/') ) path = path.slice(0, -1)
+
+        this.current_route = path
+    }
+
+    on_refresh($event) {
+        window.location.href = `/?then=${this.current_route}`
+    }
+}
+
+export default TopLevelComponent