PlayerInfoPanel
unknown
plain_text
2 months ago
2.4 kB
9
Indexable
<template> <div id="player-info-panel" class="player-info"> <img :src="avatar || placeholderAvatar" alt="Avatar" class="avatar" /> <div class="info"> <div class="name-level"> <span>ID & Username</span> <span>LEVEL: {{ level }}</span> </div> <div class="bars"> <div class="hp-bar" :style="{ width: `${(hp / maxHp) * 100}%` }">HP: {{ hp }}/{{ maxHp }}</div> <div class="ap-bar" :style="{ width: `${(ap / maxAp) * 100}%` }">AP: {{ ap }}/{{ maxAp }}</div> <div class="exp-bar" :style="{ width: `${exp}%` }">EXP: {{ exp }}%</div> </div> <div class="currencies"> <span>💰 Waluta gry: {{ gameCurrency }}</span> <span>💎 Waluta premium: {{ premiumCurrency }}</span> </div> </div> </div> </template> <script> export default { props: { avatar: { type: String, default: null }, level: Number, hp: Number, maxHp: Number, ap: Number, maxAp: Number, exp: Number, gameCurrency: String, premiumCurrency: String }, data() { return { placeholderAvatar: 'src/img/avatar.png' // Placeholder image }; } }; </script> <style scoped> .player-info { position: absolute; top: 10px; left: 10px; width: 400px; background: rgba(0, 0, 0, 0.8); padding: 15px; border-radius: 10px; display: flex; flex-direction: column; box-sizing: border-box; } .avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .info { flex: 1; margin-left: 10px; } .name-level { display: flex; justify-content: space-between; color: #fff; margin-bottom: 10px; } .bars { display: flex; flex-direction: column; margin-bottom: 10px; } .hp-bar, .ap-bar, .exp-bar { height: 20px; border-radius: 5px; margin: 5px 0; font-size: 12px; text-align: center; color: white; } .hp-bar { background-color: #d9534f; /* Red */ } .ap-bar { background-color: #5bc0de; /* Blue */ } .exp-bar { background-color: #f0ad4e; /* Yellow */ } .currencies { color: #fff; font-size: 14px; display: flex; justify-content: space-between; } @media (max-width: 600px) { .player-info { width: 100%; padding: 10px; } } </style>
Editor is loading...
Leave a Comment