Initial commit.

src/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+  //
+</script>

src/assets/logo.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
+<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
+<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
+<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+</svg>

src/components/FirstAttempt.vue

@@ -0,0 +1,138 @@
+<template>
+    <v-container>
+        <v-row>
+            <v-col>Rank</v-col>
+            <v-col>East</v-col>
+            <v-col>West</v-col>
+        </v-row>
+        <v-row v-for="rank in ranks" :key="rank.name">
+            <v-col>{{ rank.name }}</v-col>
+            <v-col>
+                <v-chip draggable>{{rank.east}}</v-chip>
+            </v-col>
+            <v-col>
+                <v-chip draggable>{{rank.west}}</v-chip>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script setup>
+const ranks = [
+    {
+        name: 'Yokozuna',
+        east: 'Terunofuji',
+        west: ''
+    },
+    {
+        name: 'Ozeki',
+        east: 'Takekeisho',
+        west: 'Kirishima'
+    },
+    {
+        name: 'Ozeki',
+        east: '',
+        west: 'Hoshoryu'
+    },
+    {
+        name: 'Sekiwake',
+        east: 'Daieisho',
+        west: 'Wakamotoharu',
+    },
+    {
+        name: 'Sekiwake',
+        east: 'Kotonowaka',
+        west: ''
+    },
+    {
+        name: 'Komosubi',
+        east: 'Abi',
+        west: 'Hokutofuji'
+    },
+    {
+        name: 'Maegashira 1',
+        east: 'Asanoyama',
+        west: 'Ura'
+    },
+    {
+        name: 'Maegashira 2',
+        east: 'Shodai',
+        west: 'Meisei'
+    },
+    {
+        name: 'Maegashira 3',
+        east: 'Takayasu',
+        west: 'Tobizaru'
+    },
+    {
+        name: 'Maegashira 4',
+        east: 'Gonoyama',
+        west: 'Nishikigi'
+    },
+    {
+        name: 'Maegashira 5',
+        east: 'Onosho',
+        west: 'Midorifuji'
+    },
+    {
+        name: 'Maegashira 6',
+        east: 'Shonannoumi',
+        west: 'Takanosho'
+    },
+    {
+        name: 'Maegashira 7',
+        east: 'Hokuseiho',
+        west: 'Kinbozan'
+    },
+    {
+        name: 'Maegashira 8',
+        east: 'Endo',
+        west: 'Atamifuji'
+    },
+    {
+        name: 'Maegashira 9',
+        east: 'Myogiryu',
+        west: 'Mitakeumi'
+    },
+    {
+        name: 'Maegashira 10',
+        east: 'Ryuden',
+        west: 'Kotoeko'
+    },
+    {
+        name: 'Maegashira 11',
+        east: 'Sadanoumi',
+        west: 'Hiradoumi'
+    },
+    {
+        name: 'Maegashira 12',
+        east: 'Oho',
+        west: 'Tamawashi'
+    },
+    {
+        name: 'Maegashira 13',
+        east: 'Takarafuji',
+        west: 'Tsurugisho'
+    },
+    {
+        name: 'Maegashira 14',
+        east: 'Tomokaze',
+        west: 'Ichiyamamoto'
+    },
+    {
+        name: 'Maegashira 15',
+        east: 'Tohakuyru',
+        west: 'Churanoumi'
+    },
+    {
+        name: 'Maegashira 16',
+        east: 'Roga',
+        west: 'Nishikifuji'
+    },
+    {
+        name: 'Maegashira 17',
+        east: 'Kitanowaka',
+        west: ''
+    }
+    ];
+</script>

src/components/HelloWorld.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-container class="fill-height">
+    <v-responsive class="align-center text-center fill-height">
+      <v-img height="300" src="@/assets/logo.svg" />
+
+      <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
+
+      <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+
+      <div class="py-14" />
+
+      <v-row class="d-flex align-center justify-center">
+        <v-col cols="auto">
+          <v-btn
+            href="https://vuetifyjs.com/components/all/"
+            min-width="164"
+            rel="noopener noreferrer"
+            target="_blank"
+            variant="text"
+          >
+            <v-icon
+              icon="mdi-view-dashboard"
+              size="large"
+              start
+            />
+
+            Components
+          </v-btn>
+        </v-col>
+
+        <v-col cols="auto">
+          <v-btn
+            color="primary"
+            href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
+            min-width="228"
+            rel="noopener noreferrer"
+            size="x-large"
+            target="_blank"
+            variant="flat"
+          >
+            <v-icon
+              icon="mdi-speedometer"
+              size="large"
+              start
+            />
+
+            Get Started
+          </v-btn>
+        </v-col>
+
+        <v-col cols="auto">
+          <v-btn
+            href="https://community.vuetifyjs.com/"
+            min-width="164"
+            rel="noopener noreferrer"
+            target="_blank"
+            variant="text"
+          >
+            <v-icon
+              icon="mdi-account-group"
+              size="large"
+              start
+            />
+
+            Community
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-responsive>
+  </v-container>
+</template>
+
+<script setup>
+  //
+</script>

src/layouts/default/AppBar.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-app-bar flat>
+    <v-app-bar-title>
+      <v-icon icon="mdi-circle-slice-6" />
+
+      Essentials Preset
+    </v-app-bar-title>
+  </v-app-bar>
+</template>
+
+<script setup>
+  //
+</script>

src/layouts/default/Default.vue

@@ -0,0 +1,12 @@
+<template>
+  <v-app>
+    <default-bar />
+
+    <default-view />
+  </v-app>
+</template>
+
+<script setup>
+  import DefaultBar from './AppBar.vue'
+  import DefaultView from './View.vue'
+</script>

src/layouts/default/View.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-main>
+    <router-view />
+  </v-main>
+</template>
+
+<script setup>
+  //
+</script>

src/main.js

@@ -0,0 +1,20 @@
+/**
+ * main.js
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './App.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

src/plugins/index.js

@@ -0,0 +1,17 @@
+/**
+ * plugins/index.js
+ *
+ * Automatically included in `./src/main.js`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+import pinia from '../store'
+import router from '../router'
+
+export function registerPlugins (app) {
+  app
+    .use(vuetify)
+    .use(router)
+    .use(pinia)
+}

src/plugins/vuetify.js

@@ -0,0 +1,26 @@
+/**
+ * plugins/vuetify.js
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    themes: {
+      light: {
+        colors: {
+          primary: '#1867C0',
+          secondary: '#5CBBF6',
+        },
+      },
+    },
+  },
+})

src/router/index.js

@@ -0,0 +1,31 @@
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('@/layouts/default/Default.vue'),
+    children: [
+      {
+        path: '',
+        name: 'Home',
+        // route level code-splitting
+        // this generates a separate chunk (Home-[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () => import('@/views/Home.vue'),
+      },
+    ],
+  },
+  {
+    path: '/banzuke',
+    component: () => import('@/components/FirstAttempt.vue'),
+
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+})
+
+export default router

src/store/app.js

@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})

src/store/index.js

@@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()

src/styles/settings.scss

@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );

src/views/Home.vue

@@ -0,0 +1,7 @@
+<template>
+  <HelloWorld />
+</template>
+
+<script setup>
+  import HelloWorld from '@/components/HelloWorld.vue'
+</script>