mirror of
https://github.com/RPCSX/RPCSX.github.io.git
synced 2026-01-31 01:05:21 +01:00
lint: format
This commit is contained in:
OCDkirby
92
src/App.vue
92
src/App.vue
@@ -115,19 +115,34 @@ const darkThemeOverrides: GlobalThemeOverrides = {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-config-provider :theme="theme" :themeOverrides="theme === null ? lightThemeOverrides : darkThemeOverrides">
|
||||
<n-config-provider
|
||||
:theme="theme"
|
||||
:theme-overrides="theme === null ? lightThemeOverrides : darkThemeOverrides"
|
||||
>
|
||||
<n-layout>
|
||||
<div class="wrapper">
|
||||
<div class="top-portion-wrapper">
|
||||
<Suspense>
|
||||
<TopBarMenu :themex="theme" :toggle="toggleTheme" />
|
||||
<TopBarMenu
|
||||
:themex="theme"
|
||||
:toggle="toggleTheme"
|
||||
/>
|
||||
</Suspense>
|
||||
<n-alert title="Important" type="warning" closable>
|
||||
<n-text class="alert-text">This is the only official RPCSX site. others such as rpcsx.com are not affiliated
|
||||
with RPCSX.</n-text>
|
||||
<n-alert
|
||||
title="Important"
|
||||
type="warning"
|
||||
closable
|
||||
>
|
||||
<n-text class="alert-text">
|
||||
This is the only official RPCSX site. others such as rpcsx.com are not affiliated
|
||||
with RPCSX.
|
||||
</n-text>
|
||||
</n-alert>
|
||||
<div class="columns">
|
||||
<div id="main-column" class="column">
|
||||
<div
|
||||
id="main-column"
|
||||
class="column"
|
||||
>
|
||||
<div class="top-main">
|
||||
<Suspense>
|
||||
<Hook :themex="theme" />
|
||||
@@ -137,7 +152,10 @@ const darkThemeOverrides: GlobalThemeOverrides = {
|
||||
<!-- todo put something here if necessary -->
|
||||
<div class="column-content" />
|
||||
</div>
|
||||
<div id="right-column" class="column">
|
||||
<div
|
||||
id="right-column"
|
||||
class="column"
|
||||
>
|
||||
<div class="top-right">
|
||||
<MainCard :themex="theme" />
|
||||
</div>
|
||||
@@ -149,20 +167,55 @@ const darkThemeOverrides: GlobalThemeOverrides = {
|
||||
</div>
|
||||
<n-divider />
|
||||
<div class="bottom-portion-wrapper">
|
||||
<n-carousel autoplay direction="horizontal" dot-type="line">
|
||||
<img class="carousel-img" src="/assets/sonicmania.png" alt="Sonic Mania running on RPCSX">
|
||||
<img class="carousel-img" src="/assets/we-are-doomed.png" alt="We Are Doomed running on RPCSX">
|
||||
<img class="carousel-img" src="/assets/sample-1.png" alt="Development sample running on RPCSX">
|
||||
<img class="carousel-img" src="/assets/steamydeck.jpg" alt="RPCSX crashing on Steam Deck">
|
||||
<n-carousel
|
||||
autoplay
|
||||
direction="horizontal"
|
||||
dot-type="line"
|
||||
>
|
||||
<img
|
||||
class="carousel-img"
|
||||
src="/assets/sonicmania.png"
|
||||
alt="Sonic Mania running on RPCSX"
|
||||
>
|
||||
<img
|
||||
class="carousel-img"
|
||||
src="/assets/we-are-doomed.png"
|
||||
alt="We Are Doomed running on RPCSX"
|
||||
>
|
||||
<img
|
||||
class="carousel-img"
|
||||
src="/assets/sample-1.png"
|
||||
alt="Development sample running on RPCSX"
|
||||
>
|
||||
<img
|
||||
class="carousel-img"
|
||||
src="/assets/steamydeck.jpg"
|
||||
alt="RPCSX crashing on Steam Deck"
|
||||
>
|
||||
</n-carousel>
|
||||
<n-divider />
|
||||
<n-text class="copyright-text">© {{ new Date().getFullYear() }} - RPCSX (the real one)</n-text>
|
||||
<n-text class="copyright-text">
|
||||
© {{ new Date().getFullYear() }} - RPCSX (the real one)
|
||||
</n-text>
|
||||
</div>
|
||||
</div>
|
||||
</n-layout>
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
var theme = ref<BuiltInGlobalTheme | null>(darkTheme);
|
||||
|
||||
export default defineComponent({
|
||||
props: ['theme'],
|
||||
methods: {
|
||||
toggleTheme() {
|
||||
theme.value = theme.value == null ? darkTheme : null;
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.n-layout {
|
||||
background-size: cover;
|
||||
@@ -290,16 +343,3 @@ const darkThemeOverrides: GlobalThemeOverrides = {
|
||||
padding-top: 15%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
var theme = ref<BuiltInGlobalTheme | null>(darkTheme);
|
||||
|
||||
export default defineComponent({
|
||||
methods: {
|
||||
toggleTheme() {
|
||||
theme.value = theme.value == null ? darkTheme : null;
|
||||
}
|
||||
},
|
||||
props: ['theme']
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,21 +1,27 @@
|
||||
<template>
|
||||
<n-card hoverable>
|
||||
<div class="card-wrapper">
|
||||
<div class="icon-wrapper">
|
||||
<n-icon size="35">
|
||||
<slot name="card-icon" class="card-icon"/>
|
||||
</n-icon>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<n-h3 class="card-header">
|
||||
<slot name="card-title" />
|
||||
</n-h3>
|
||||
<n-text class="body-text" id="card-body">
|
||||
<slot />
|
||||
</n-text>
|
||||
</div>
|
||||
</div>
|
||||
</n-card>
|
||||
<n-card hoverable>
|
||||
<div class="card-wrapper">
|
||||
<div class="icon-wrapper">
|
||||
<n-icon size="35">
|
||||
<slot
|
||||
name="card-icon"
|
||||
class="card-icon"
|
||||
/>
|
||||
</n-icon>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<n-h3 class="card-header">
|
||||
<slot name="card-title" />
|
||||
</n-h3>
|
||||
<n-text
|
||||
id="card-body"
|
||||
class="body-text"
|
||||
>
|
||||
<slot />
|
||||
</n-text>
|
||||
</div>
|
||||
</div>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -16,6 +16,35 @@ const headers = response.headers
|
||||
var contributors = headers.get('link')?.match(/&page=(\d+)>; rel="last"/)[1]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="hook">
|
||||
<div class="hook-item">
|
||||
<n-gradient-text
|
||||
id="emu-name"
|
||||
type="info"
|
||||
>
|
||||
RPCSX
|
||||
</n-gradient-text>
|
||||
<n-gradient-text type="info">
|
||||
{{ getTime() }}
|
||||
</n-gradient-text>
|
||||
<n-text>of development.</n-text>
|
||||
</div>
|
||||
<div class="hook-item">
|
||||
<n-gradient-text type="info">
|
||||
{{ contributors }}
|
||||
</n-gradient-text>
|
||||
<n-text>experienced contributors.</n-text>
|
||||
</div>
|
||||
<div class="hook-item">
|
||||
<n-gradient-text type="info">
|
||||
0
|
||||
</n-gradient-text>
|
||||
<n-text>days since someone asked for Bloodborne.</n-text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hook {
|
||||
display: flex;
|
||||
@@ -48,21 +77,3 @@ var contributors = headers.get('link')?.match(/&page=(\d+)>; rel="last"/)[1]
|
||||
src: url('/fonts/The_Rave_Is_In_Your_Pants.otf');
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="hook">
|
||||
<div class="hook-item">
|
||||
<n-gradient-text type="info" id="emu-name">RPCSX</n-gradient-text>
|
||||
<n-gradient-text type="info">{{ getTime() }}</n-gradient-text>
|
||||
<n-text>of development.</n-text>
|
||||
</div>
|
||||
<div class="hook-item">
|
||||
<n-gradient-text type="info">{{ contributors }}</n-gradient-text>
|
||||
<n-text>experienced contributors.</n-text>
|
||||
</div>
|
||||
<div class="hook-item">
|
||||
<n-gradient-text type="info">0</n-gradient-text>
|
||||
<n-text>days since someone asked for Bloodborne.</n-text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -12,18 +12,24 @@ const cardOverrides : Partial<CardThemeVars> = {
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-card
|
||||
hoverable
|
||||
size="small"
|
||||
:theme-overrides="cardOverrides"
|
||||
>
|
||||
<template #header>
|
||||
RPCSX is your PlayStation™ 4 emulator.
|
||||
</template>
|
||||
<div class="body-text">
|
||||
Use only with lawfully obtained archival copies of PS4 games you physically own. <strong>RPCSX is non-commercial and is not affiliated with Sony or PlayStation.</strong>
|
||||
</div>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.n-card {
|
||||
max-width: 600px;
|
||||
line-height: 2.8em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<n-card hoverable size="small" :theme-overrides="cardOverrides">
|
||||
<template #header>
|
||||
RPCSX is your PlayStation™ 4 emulator.
|
||||
</template>
|
||||
<div class="body-text">Use only with lawfully obtained archival copies of PS4 games you physically own. <strong>RPCSX is non-commercial and is not affiliated with Sony or PlayStation.</strong></div>
|
||||
</n-card>
|
||||
</template>
|
||||
</style>
|
||||
@@ -91,31 +91,39 @@ const menuOptions: MenuOption[] = [
|
||||
|
||||
<template>
|
||||
<div class="bar-wrapper">
|
||||
<n-button quaternary tag="a" href="https://rpcsx.github.io/rpcsx-site/">
|
||||
<img alt="RPCSX logo" class="logo" src="/assets/logo-dark.png" width="32" height="32" />
|
||||
<n-button
|
||||
quaternary
|
||||
tag="a"
|
||||
href="https://rpcsx.github.io/rpcsx-site/"
|
||||
>
|
||||
<img
|
||||
alt="RPCSX logo"
|
||||
class="logo"
|
||||
src="/assets/logo-dark.png"
|
||||
width="32"
|
||||
height="32"
|
||||
>
|
||||
</n-button>
|
||||
<n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
|
||||
<n-button circle @click="toggle" class="dark-mode-button">
|
||||
<n-menu
|
||||
v-model:value="activeKey"
|
||||
mode="horizontal"
|
||||
:options="menuOptions"
|
||||
/>
|
||||
<n-button
|
||||
circle
|
||||
class="dark-mode-button"
|
||||
@click="toggle"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<MoonIcon v-if="themex == null" />
|
||||
<SunIcon v-else />
|
||||
</n-icon>
|
||||
</template>
|
||||
|
||||
</n-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bar-wrapper {
|
||||
display: inline-block;
|
||||
flex-flow: row nowrap;
|
||||
text-align: center;
|
||||
margin: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
methods: {
|
||||
@@ -125,3 +133,12 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bar-wrapper {
|
||||
display: inline-block;
|
||||
flex-flow: row nowrap;
|
||||
text-align: center;
|
||||
margin: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user