Portage du site sous vuejs #232

Merged
kazhnuz merged 29 commits from vue-remake into master 2023-02-08 12:45:46 +01:00
11 changed files with 122 additions and 15 deletions
Showing only changes of commit 628f5ecc38 - Show all commits

3
public/jdr/core.json Normal file
View file

@ -0,0 +1,3 @@
{
"name":"Règles de bases"
}

7
public/pages/jdr/core.md Normal file
View file

@ -0,0 +1,7 @@
# Règle de base de Pélican
Pélican est un système générique de jeu de rôle basé sur le système D100, ayant pour objectif de créer un système de jeu de rôle simple mais efficace, se basant sur les dés les plus générique dun rôliste. Il ne sagit cependant que dune base de système, à partir de laquelle vous pourrez construire des systèmes adaptés à votre univers et vos concepts.
Sur cette page, vous trouverez les règles les plus générales, qui sont utilisée pour pouvoir créer les autres jeux de rôles.
Ce set de règle est fourni par [Kazhnuz](https://kazhnuz.space), avec certaines règles reprise des systèmes de mon groupe de JDR. Il est distribué sous la [Creative Common BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).

View file

@ -7,6 +7,4 @@ Erratum est un JDR D100 basé sur mon set de règle [pélican](https://pelicanjd
Cette page à pour objectif de vous présenter à la fois l'univers et comment il interragit avec le système Pélican.
Ce set de règle est fourni par [Kazhnuz](https://kazhnuz.space), avec certaines règles reprise du système de [MDupoignard](https://twitter.com/MDupoignard). Il est distribué sous la [Licence Ludique Libre 1.0](https://fr.wikipedia.org/wiki/Licence_ludique_libre), crée par [Wizard of the Coast](https://company.wizards.com/).
Ce site est généré par [Docsify](https://docsify.now.sh/) et hébergé par [Chlore](https://chlore.net).
Ce set de règle est fourni par [Kazhnuz](https://kazhnuz.space), avec certaines règles reprise des systèmes de mon groupe de JDR. Il est distribué sous la [Creative Common BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).

View file

@ -5,7 +5,7 @@
"id": 0,
"title":"",
"links": [
{"title": "Règles de bases", "link": "core"}
{"title": "Règles de bases", "path": "core"}
]
}
],

View file

@ -5,7 +5,15 @@ import { computed } from "vue";
const store = useConfigStore();
const sidebar = computed(() => {
return store.getSidebar() ?? { title: "", id: 0, links: [] };
return store.getSidebar() ?? [{ title: "", id: 0, links: [] }];
});
const linkBase = computed(() => {
if (store.isJdrLoaded()) {
return `jdr/${store.currentJdr}`;
} else {
return `jdr`;
}
});
</script>
@ -15,9 +23,12 @@ const sidebar = computed(() => {
<ul v-for="item in sidebar" :key="item.id">
<div class="menu-divider" v-if="item.title">{{ item.title }}</div>
<li v-for="(link, index) in item.links" :key="index">
<router-link :to="`/jdr/core/${link.path}`" class="menu-item" :replace="true">{{
link.title
}}</router-link>
<router-link
:to="`/${linkBase}/${link.path}`"
class="menu-item"
:replace="true"
>{{ link.title }}</router-link
>
</li>
</ul>
</aside>

View file

@ -1,6 +1,7 @@
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import RuleView from "../views/RuleView.vue";
import JdrView from "../views/JdrView.vue";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -14,6 +15,10 @@ const router = createRouter({
path: "/jdr/:jdr/rules/:category/:filepath",
component: RuleView,
},
{
path: "/jdr/:jdr/",
component: JdrView,
},
{
path: "/about",
name: "about",

View file

@ -2,17 +2,59 @@ import { ref } from "vue";
import { defineStore } from "pinia";
import type PelicanConfig from "@/types/PelicanConfig";
import type LinkList from "@/types/LinkList";
import type JdrConfig from "@/types/JdrConfig";
import axios from "axios";
export const useConfigStore = defineStore("config", () => {
const config = ref(null as PelicanConfig | null);
const currentJdr = ref("");
const jdrConfig = ref(null as JdrConfig | null);
const sidebar = ref([{ id: 0, links: [] }] as LinkList[]);
function computeSidebar() {
return config.value?.sidebar ?? [{ id: 0, links: [] }];
}
function setConfig(newConfig: PelicanConfig) {
config.value = newConfig;
}
function getSidebar(): LinkList[] {
return config.value?.sidebar ?? [{ id: 0, links: [] }];
function loadJdr(newJdr: string) {
if (newJdr !== currentJdr.value) {
axios.get(`/jdr/${newJdr}.json`).then((response) => {
jdrConfig.value = response.data;
currentJdr.value = newJdr;
sidebar.value = computeSidebar();
});
}
}
return { config, setConfig, getSidebar };
function resetJdr() {
jdrConfig.value = null;
currentJdr.value = "";
sidebar.value = [{ id: 0, links: [] }];
}
function isJdrLoaded(): boolean {
return currentJdr.value !== "";
}
function getSidebar(): LinkList[] {
if (isJdrLoaded()) {
return sidebar.value;
} else {
return config.value?.jdr ?? [{ id: 0, links: [] }];
}
}
return {
config,
currentJdr,
jdrConfig,
setConfig,
getSidebar,
loadJdr,
resetJdr,
isJdrLoaded,
};
});

6
src/types/JdrConfig.ts Normal file
View file

@ -0,0 +1,6 @@
import type LinkList from "./LinkList";
export default interface JdrConfig {
name: string;
sidebar: LinkList[];
}

View file

@ -1,9 +1,17 @@
<script setup lang="ts">
import TheWelcome from "../components/TheWelcome.vue";
import { useConfigStore } from "@/stores/config";
import { onMounted } from "vue";
import MarkdownFile from "../components/MarkdownFile.vue";
const store = useConfigStore();
onMounted(() => {
store.resetJdr();
});
</script>
<template>
<main>
<TheWelcome />
</main>
<MarkdownFile path="pages/home">
Test d'afficher quelque chose en dessous du Markdown
</MarkdownFile>
</template>

17
src/views/JdrView.vue Normal file
View file

@ -0,0 +1,17 @@
<script setup lang="ts">
import { useConfigStore } from "@/stores/config";
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import MarkdownFile from "../components/MarkdownFile.vue";
const store = useConfigStore();
const route = useRoute();
onMounted(() => {
store.loadJdr(`${route.params.jdr}`);
});
</script>
<template>
<MarkdownFile :path="`pages/jdr/${$route.params.jdr}`"></MarkdownFile>
</template>

View file

@ -1,5 +1,15 @@
<script setup lang="ts">
import { useConfigStore } from "@/stores/config";
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import MarkdownFile from "../components/MarkdownFile.vue";
const store = useConfigStore();
const route = useRoute();
onMounted(() => {
store.loadJdr(`${route.params.jdr}`);
});
</script>
<template>