studio
/
shotgun
2
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

add register and login to frontend

This commit is contained in:
Branden J Brown 2024-02-02 08:28:36 -06:00
parent a044844d8b
commit 410d0fc587
4 changed files with 144 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
site/components.d.ts vendored
View File

@ -13,5 +13,6 @@ declare module 'vue' {
PlayerHP: typeof import('./src/components/PlayerHP.vue')['default']
PlayerItems: typeof import('./src/components/PlayerItems.vue')['default']
TheLanding: typeof import('./src/components/TheLanding.vue')['default']
TheLogin: typeof import('./src/components/TheLogin.vue')['default']
}
}

34
site/src/App.vue
View File

@ -7,7 +7,15 @@
</template>
</v-app-bar>
<v-main>
<TheLanding v-if="!playing && !loading" @play="clickPlay" />
<v-container v-if="!playing && !loading">
<TheLanding />
<v-row v-if="!loadingMe && !me" class="d-flex justify-center">
<TheLogin />
</v-row>
<v-row v-else-if="!loadingMe" class="d-flex justify-center">
<v-btn @click="clickPlay" color="primary">Play</v-btn>
</v-row>
</v-container>
<v-container v-else-if="loading" class="fill-height">
<v-row class="d-flex justify-center">
<v-progress-circular class="pa-8" indeterminate size="128"></v-progress-circular>
@ -20,7 +28,7 @@
<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core';
import { computed, ref } from 'vue';
import { computed, onMounted, ref } from 'vue';
import type { Action, Game } from '@/lib/game';
const dark = useDark();
@ -54,4 +62,26 @@ const testGame = ref<Game>({
function action(evt: Action) {
console.log(evt);
}
const loadingMe = ref(true);
const me = ref<string | null>(null);
onMounted(async () => {
loadingMe.value = true;
try {
const resp = await fetch('/user/me', {
method: 'GET',
mode: 'same-origin',
credentials: 'same-origin',
})
loadingMe.value = false;
if (!resp.ok) {
me.value = null;
return;
}
const { id } = await resp.json();
me.value = id as string;
} catch {
me.value = null;
}
});
</script>

97
site/src/components/TheLanding.vue
View File

@ -1,59 +1,42 @@
<template>
<v-container>
<v-row>
<v-col>
<v-sheet rounded :elevation="5" class="pa-4">
This is an experimental PvP reimplementation of <a href="https://mikeklubnika.itch.io/buckshot-roulette" target="_blank">Buckshot Roulette, a computer game by Mike Klubnika</a>.
Please play here only if you've bought and played the original.
</v-sheet>
</v-col>
</v-row>
<v-row>
<v-col>
<v-sheet rounded :elevation="5" class="pa-4">
When you log in and press PLAY below, you will be randomly matched with an opponent.
One player will be assigned as the dealer, and the other will be the challenger.
While there are plenty of changes that might improve balance for a PvP version of this game, the current rules are as in the original.
The challenger moves first each time the shotgun is loaded, but must win three rounds to win the match.
The dealer only needs to win one round.
</v-sheet>
</v-col>
</v-row>
<v-row>
<v-col>
<v-sheet rounded :elevation="5" class="pa-4">
There are no niceties in this implementation:
<ul>
<li>No MMR. Matching is done purely on a first-come, first-served basis.</li>
<li>No saves. If you disconnect, or the server goes down for any reason, everything is gone.</li>
<li>No pretty. Buckshot Roulette is an incredibly stylish and atmospheric game; this version is not.</li>
</ul>
</v-sheet>
</v-col>
</v-row>
<v-row>
<v-col>
<v-sheet rounded :elevation="5" class="pa-4">
Similarly, this server is not intended to be robust.
It runs on a hand-me-down PC sitting on the floor of my living room, the same computer that runs <a href="https://twitch.tv/robotisbroken" target="_blank">RobotIsBroken</a>.
Please don't DoS me. It won't be a challenge.
</v-sheet>
</v-col>
</v-row>
<v-row>
<v-col width="auto"></v-col>
<v-col cols="auto">
<v-btn color="primary" @click="emit('play')">Play</v-btn>
</v-col>
<v-col width="auto"></v-col>
</v-row>
</v-container>
<v-row>
<v-col>
<v-sheet rounded :elevation="5" class="pa-4">
This is an experimental PvP reimplementation of <a href="https://mikeklubnika.itch.io/buckshot-roulette" target="_blank">Buckshot Roulette, a computer game by Mike Klubnika</a>.
Please play here only if you've bought and played the original.
</v-sheet>
</v-col>
</v-row>
<v-row>
<v-col>
<v-sheet rounded :elevation="5" class="pa-4">
When you log in and press PLAY below, you will be randomly matched with an opponent.
One player will be assigned as the dealer, and the other will be the challenger.
While there are plenty of changes that might improve balance for a PvP version of this game, the current rules are as in the original.
The challenger moves first each time the shotgun is loaded, but must win three rounds to win the match.
The dealer only needs to win one round.
</v-sheet>
</v-col>
</v-row>
<v-row>
<v-col>
<v-sheet rounded :elevation="5" class="pa-4">
There are no niceties in this implementation:
<ul>
<li>No MMR. Matching is done purely on a first-come, first-served basis.</li>
<li>No saves. If you disconnect, or the server goes down for any reason, everything is gone.</li>
<li>No pretty. Buckshot Roulette is an incredibly stylish and atmospheric game; this version is not.</li>
</ul>
</v-sheet>
</v-col>
</v-row>
<v-row>
<v-col>
<v-sheet rounded :elevation="5" class="pa-4">
Similarly, this server is not intended to be robust.
It runs on a hand-me-down PC sitting on the floor of my living room, the same computer that runs <a href="https://twitch.tv/robotisbroken" target="_blank">RobotIsBroken</a>.
Please don't DoS me. It won't be a challenge.
</v-sheet>
</v-col>
</v-row>
</template>
<script setup lang="ts">
type Emits = {
(e: 'play'): void;
}
const emit = defineEmits<Emits>();
</script>

71
site/src/components/TheLogin.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<v-dialog v-model="register" max-width="800">
<template #activator="{ props }">
<v-btn @click="register = !register" class="mx-4" color="secondary">Register</v-btn>
</template>
<v-card title="Register for an account">
<v-card-text>
<p class="text-button">This website uses cookies to provide its basic functionality. By signing up for an account, you agree to these cookies.</p>
<p class="text-button mb-8">I strive to collect the least user information possible and will never use it for any purpose except to provide the service.</p>
<v-form v-model="valid" action="/user/register" method="post">
<v-text-field v-model="user" label="username" name="user" clearable :rules="userRules"></v-text-field>
<v-text-field v-model="pass" label="password" name="pass" clearable :rules="passRules" type="password"></v-text-field>
<v-row class="mx-4 my-2">
<v-btn variant="tonal" @click="doCancel">Cancel</v-btn>
<v-spacer></v-spacer>
<v-btn variant="tonal" color="success" type="submit" :disabled="!valid">Register</v-btn>
</v-row>
</v-form>
</v-card-text>
</v-card>
</v-dialog>
<v-dialog v-model="login" max-width="800">
<template #activator="{ props }">
<v-btn @click="login = !login" class="mx-4" color="primary">Log In</v-btn>
</template>
<v-card title="Log In">
<v-card-text>
<p class="text-button">This website uses cookies to provide its basic functionality. By signing into your account, you agree to these cookies.</p>
<p class="text-button mb-8">I strive to collect the least user information possible and will never use it for any purpose except to provide the service.</p>
<v-form v-model="valid" action="/user/login" method="post">
<v-text-field v-model="user" label="username" name="user" clearable :rules="userRules"></v-text-field>
<v-text-field v-model="pass" label="password" name="pass" clearable :rules="passRules" type="password"></v-text-field>
<v-row class="mx-4 my-2">
<v-btn variant="tonal" @click="doCancel">Cancel</v-btn>
<v-spacer></v-spacer>
<v-btn variant="tonal" color="success" type="submit" :disabled="!valid">Log In</v-btn>
</v-row>
</v-form>
</v-card-text>
</v-card>
</v-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const valid = ref<boolean | null>(null);
const register = ref(false);
const login = ref(false);
const user = ref('');
const pass = ref('');
const userRules = [
(v: string) => v.length >= 4 || 'username too short',
(v: string) => v.length <= 30 || 'username too long',
];
const passRules = [
(v: string) => v.length >= 8 || 'password too short',
(v: string) => v.length <= 256 || 'password too long',
]
function doCancel() {
user.value = '';
pass.value = '';
register.value = false;
login.value = false;
}
</script>