mirror of
https://github.com/BlossomiShymae/clean-cuts.git
synced 2025-12-06 18:20:47 +01:00
Init commit
This commit is contained in:
Blossomi Shymae
53
pages/about.vue
Normal file
53
pages/about.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row mb-4">
|
||||
<div class="d-flex align-items-center flex-column">
|
||||
<div class="col-md-6">
|
||||
<h1 class="display-4">About <TheTitle /> </h1>
|
||||
<p class="lead">The <TheTitle /> project was started after experiencing stumbling blocks
|
||||
with a shelved project.
|
||||
</p>
|
||||
<p>Our purpose is to provide League of Legends game data that is easy
|
||||
to view for the common person. This game data is provided by CommunityDragon, another community resource.
|
||||
</p>
|
||||
<p>Therefore, no computer programming or scripting is needed.
|
||||
Not everyone can browse a JSON or navigate game data folders. :3</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 d-flex justify-content-center">
|
||||
<div style="width: 250px !important;" class="d-flex flex-column justify-content-center align-items-center gap-1 border border-light border-opacity-25 bg-blur-3 rounded">
|
||||
<img class="img-fluid rounded mb-2" src="/img/avatar.png"/>
|
||||
<div class="px-3">
|
||||
<div class="d-flex gap-2">
|
||||
<NuxtLink class="text-decoration-none d-inline-block text-light m-0" to="https://blossomishymae.github.io"><h5 class="text-light mb-0">Blossomi Shymae</h5></NuxtLink>
|
||||
<NuxtLink class="text-decoration-none d-inline-block text-light m-0" to="https://github.com/BlossomiShymae"><span><MaterialIcon name="github" :size="20" /> </span></NuxtLink>
|
||||
</div>
|
||||
<h5 class="fw-bold m-0 mb-2">Lonely elf girl</h5>
|
||||
<p>She likes to chat with her friends and do random programming projects, such as this one.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 d-flex flex-column justify-content-around">
|
||||
<div>
|
||||
<h3 class="fw-light">Technology stack</h3>
|
||||
<p>This website uses Nuxt.js, the meta-framework of universal application.</p>
|
||||
<p >Other libraries used include Bootstrap, the CSS framework, and Material Design for icons.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="fw-light">Contact</h3>
|
||||
<p>Blossomi Shymae can be reached via her Discord server.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MaterialIcon from '~/components/MaterialIcon.vue';
|
||||
import TheTitle from '~/components/TheTitle.vue';
|
||||
</script>
|
||||
57
pages/index.vue
Normal file
57
pages/index.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="d-flex flex-column justify-content-center align-items-center gap-2" style="margin-top: 25%;">
|
||||
<div class="d-flex flex-column justify-content-center align-items-center">
|
||||
<h1 class="display-4"><TheTitle /></h1>
|
||||
<p>Your local League of Legends companion index.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<h2>The <TheTitle /> Project</h2>
|
||||
<p>Our primary purpose is to make game data viewable in a human-friendly
|
||||
format without needing computer programming or scripting knowledge.
|
||||
</p>
|
||||
<p>CommunityDragon, the unofficial League of Legends data resource, is used for our project.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<h2>Resources</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="d-flex flex-column justify-content-center align-items-stretch gap-2">
|
||||
<a class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25" asp-area="" asp-page="/Champion/Index">
|
||||
<MaterialIcon name="account-group" :size="24"/> Champions
|
||||
</a>
|
||||
<a class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
|
||||
<MaterialIcon name="magic-staff" :size="24"/> Items
|
||||
</a>
|
||||
<a class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
|
||||
<MaterialIcon name="shield" :size="24"/> Runes
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="d-flex flex-column justify-content-center align-items-stretch gap-2">
|
||||
<a class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
|
||||
<MaterialIcon name="image" :size="24"/> Summoner Icons
|
||||
</a>
|
||||
<a class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
|
||||
<MaterialIcon name="floor-lamp" :size="24"/> Ward Skins
|
||||
</a>
|
||||
<a class="btn btn-dark bg-transparent bg-blur-3 border-light border-opacity-25">
|
||||
<MaterialIcon name="face-woman-shimmer" :size="24"/> Emotes
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MaterialIcon from '~/components/MaterialIcon.vue';
|
||||
import TheTitle from '~/components/TheTitle.vue';
|
||||
</script>
|
||||
49
pages/items/index.vue
Normal file
49
pages/items/index.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="d-flex flex-column gap-2">
|
||||
<h1>Items</h1>
|
||||
|
||||
<div class="overflow-hidden rounded border border-light border-opacity-25 p-4">
|
||||
<table class="sortable table table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Id</th>
|
||||
<th scope="col">Icon</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in items" :key="item.id">
|
||||
<th scope="row">
|
||||
<NuxtLink class="text-decoration-none text-light" :to="`/items/overview/${item.id}`">
|
||||
{{ item.id }}
|
||||
</NuxtLink>
|
||||
</th>
|
||||
<td>
|
||||
<NuxtLink class="text-decoration-none text-light" :to="`/items/overview/${item.id}`">
|
||||
<img class="rounded" :src="item.getIcon('latest')" width="32" height="32" loading="lazy" onerror="this.onerror = null; this.src = '/img/error.png'"/>
|
||||
</NuxtLink>
|
||||
</td>
|
||||
<td>
|
||||
<NuxtLink class="text-decoration-none text-light" :to="`/items/overview/${item.id}`">
|
||||
<span v-html="item.name"></span>
|
||||
</NuxtLink>
|
||||
</td>
|
||||
<td>
|
||||
<NuxtLink class="text-decoration-none text-light" :to="`/items/overview/${item.id}`">
|
||||
{{ item.priceTotal }}
|
||||
</NuxtLink>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useClient from '../../composables/useClient';
|
||||
|
||||
const { client } = useClient();
|
||||
const items = await client.items.listAsync({ locale: "default", version: "latest"});
|
||||
</script>
|
||||
68
pages/items/overview/[id].vue
Normal file
68
pages/items/overview/[id].vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<h1 class="display-4 mb-0"> {{ item.name }}</h1>
|
||||
<p class="text-muted" v-html="item.description"></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
|
||||
<img class="border rounded border-dark" :src="item.getIcon('latest')"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<Badge name="identifier">{{ item.id }}</Badge>
|
||||
<Badge name="hand-coin">{{ item.priceTotal }}</Badge>
|
||||
<Badge name="hand-coin-outline">{{ item.price }}</Badge>
|
||||
<Badge name="keyboard-variant" v-if="item.active">Active</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-6 col-sm-12 border-start border-light border-opacity-25 border-4"
|
||||
v-if="components.length > 0">
|
||||
<h4 class="fw-light">Component</h4>
|
||||
<div class="d-flex justify-content-around align-items-center gap-2 flex-wrap">
|
||||
<NuxtLink v-for="component in components" :to="`/items/overview/${component.id}`" :key="component.id">
|
||||
<img class="border rounded border-dark" :src="component.getIcon('latest')"/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-sm-12 border-start border-light border-opacity-25 border-4"
|
||||
v-if="composites.length > 0">
|
||||
<h4 class="fw-light">Composite</h4>
|
||||
<div class="d-flex justify-content-around align-items-center gap-2 flex-wrap">
|
||||
<NuxtLink v-for="composite in composites" :to="`/items/overview/${composite.id}`" :key="composite.id">
|
||||
<img class="border rounded border-dark" :src="composite.getIcon('latest')"/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router';
|
||||
import useClient from '../../../composables/useClient';
|
||||
import { Item } from '~/core/models';
|
||||
import Badge from '~/components/Badge.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.params.id as unknown;
|
||||
|
||||
const { client } = useClient();
|
||||
const items = await client.items.listAsync({locale: "default", version: "latest"});
|
||||
const _default = new Item({});
|
||||
|
||||
const item = items.find((x) => x.id == id) || _default;
|
||||
const components = item.from.map((id) => items.find((x) => x.id == id) || _default);
|
||||
const composites = item.to.map((id) => items.find((x) => x.id == id) || _default);
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user