jeobeardy
/
Jeobeardy
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Added pfp in player list; added sizing in outer div

This commit is contained in:
EisiBaer 2023-10-27 15:16:53 +02:00
parent 31db2f0fc1
commit b306ff49d8
2 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/webapp/components/blocks/PlayerListEntry.vue
View File

@ -1,4 +1,5 @@
<script setup> <script setup>
import ProfilePicture from '@/components/blocks/ProfilePicture.vue';
const props = defineProps({ const props = defineProps({
player: Object, player: Object,
@ -18,6 +19,13 @@ const props = defineProps({
const emit = defineEmits(["manualPointsAdjustment", "answerRuled", "revealPlayerAnswer", "letPlayerChoose"]); const emit = defineEmits(["manualPointsAdjustment", "answerRuled", "revealPlayerAnswer", "letPlayerChoose"]);
let protocol = ('https:' == document.location.protocol ? 'https://' : 'http://');
let hostname = window.location.hostname;
if( window.location.hostname.includes("localhost" ) ){
hostname += ':3000';
}
const API_URL = `${protocol}${hostname}/api`;
function revealAnswer(){ function revealAnswer(){
emit("revealPlayerAnswer", props.player._id); emit("revealPlayerAnswer", props.player._id);
} }
@ -33,13 +41,20 @@ function letPlayerChoose(){
<div class="card-body p-2"> <div class="card-body p-2">
<div class="row"> <div class="row">
<div class="col position-relative"> <div class="col position-relative">
<h5 class="mb-0 text-truncate"> <div class="d-flex justify-content-start align-content-center">
<template v-if="props.player.isAnswering"> <template v-if="props.player.isAnswering">
<span class="align-self-center me-2">
<font-awesome-layers :title="'Player is answering'"> <font-awesome-layers :title="'Player is answering'">
<font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-square" size="lg" fade style="--fa-animation-duration:2s" /> <font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-square" size="lg" fade style="--fa-animation-duration:2s" />
<font-awesome-icon class="text-white" icon="fa-solid fa-angle-right" size="sm" /> <font-awesome-icon class="text-white" icon="fa-solid fa-angle-right" size="sm" />
</font-awesome-layers> </font-awesome-layers>
</span>
</template> </template>
<ProfilePicture
:sizing="'2em'"
:srcOverride="API_URL + '/user/pfp/' + props.player.pfpFilename"
/>
<h5 class="mb-0 ms-2 text-truncate align-self-center">
{{ props.player.name }} {{ props.player.name }}
</h5> </h5>
<span <span
@ -50,6 +65,7 @@ function letPlayerChoose(){
</span> </span>
</div> </div>
</div> </div>
</div>
<div v-if="props.isHost || props.player.currentTextAnswer" class="row mt-2"> <div v-if="props.isHost || props.player.currentTextAnswer" class="row mt-2">
<div class="col-sm-2 text-nowrap"> <div class="col-sm-2 text-nowrap">

2
src/webapp/components/blocks/ProfilePicture.vue
View File

@ -46,7 +46,7 @@ const pfpSrc = computed( () => {
<template> <template>
<div> <div>
<div class="border border-1 border-white rounded-3 overflow-hidden"> <div class="border border-1 border-white rounded-3 overflow-hidden" :style="[ { 'width': props.sizing }, { 'height': props.sizing } ]" >
<img :src="pfpSrc" alt="Profile Picture of the user" class="pfp" :style="[ { 'width': props.sizing }, { 'height': props.sizing } ]" /> <img :src="pfpSrc" alt="Profile Picture of the user" class="pfp" :style="[ { 'width': props.sizing }, { 'height': props.sizing } ]" />
<div v-show="props.isPreview" class="position-relative"> <div v-show="props.isPreview" class="position-relative">
<span class="position-absolute bottom-0 end-0 bg-black bg-opacity-50 px-1 rounded-2"> <span class="position-absolute bottom-0 end-0 bg-black bg-opacity-50 px-1 rounded-2">