update text color
This commit is contained in:
parent
085303fbab
commit
d023da05a5
18
src/App.js
18
src/App.js
@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
|
||||
import { initializeApp } from 'firebase/app';
|
||||
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
|
||||
import { getFirestore, doc, setDoc, addDoc, getDoc, getDocs, collection, onSnapshot, updateDoc, deleteDoc, query, writeBatch } from 'firebase/firestore';
|
||||
import { ArrowLeft, PlusCircle, Users, Swords, Shield, Trash2, Eye, Edit3, Save, XCircle, ChevronsUpDown, ChevronDown, ChevronUp, UserCheck, UserX, HeartCrack, HeartPulse, Zap, Share2, Copy as CopyIcon, Image as ImageIcon, EyeOff, ExternalLink } from 'lucide-react'; // Added ExternalLink
|
||||
import { ArrowLeft, PlusCircle, Users, Swords, Shield, Trash2, Eye, Edit3, Save, XCircle, ChevronsUpDown, ChevronDown, ChevronUp, UserCheck, UserX, HeartCrack, HeartPulse, Zap, Share2, Copy as CopyIcon, Image as ImageIcon, EyeOff, ExternalLink } from 'lucide-react';
|
||||
|
||||
// --- Firebase Configuration ---
|
||||
const firebaseConfig = {
|
||||
@ -52,7 +52,6 @@ function App() {
|
||||
const [isPlayerViewOnlyMode, setIsPlayerViewOnlyMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Check for query parameter to determine if this is a player-only display window
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
if (queryParams.get('playerView') === 'true') {
|
||||
setIsPlayerViewOnlyMode(true);
|
||||
@ -114,17 +113,12 @@ function App() {
|
||||
}
|
||||
|
||||
const openPlayerWindow = () => {
|
||||
// Construct the URL for the player view.
|
||||
// It's the current path + ?playerView=true
|
||||
// window.location.origin gives http://localhost:3000
|
||||
// window.location.pathname gives / (or your base path if deployed in a subfolder)
|
||||
const playerViewUrl = window.location.origin + window.location.pathname + '?playerView=true';
|
||||
window.open(playerViewUrl, '_blank', 'noopener,noreferrer,width=1024,height=768'); // Opens in a new tab/window
|
||||
window.open(playerViewUrl, '_blank', 'noopener,noreferrer,width=1024,height=768');
|
||||
};
|
||||
|
||||
|
||||
if (isPlayerViewOnlyMode) {
|
||||
// Render only the DisplayView if in player-only mode
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-800 text-slate-100 font-sans">
|
||||
{isAuthReady && <DisplayView />}
|
||||
@ -133,13 +127,12 @@ function App() {
|
||||
);
|
||||
}
|
||||
|
||||
// Default Admin View
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-800 text-slate-100 font-sans">
|
||||
<header className="bg-slate-900 p-4 shadow-lg">
|
||||
<div className="container mx-auto flex justify-between items-center">
|
||||
<h1
|
||||
className="text-3xl font-bold text-sky-400" // No longer needs to be clickable to go to admin, as this IS admin view
|
||||
className="text-3xl font-bold text-sky-400"
|
||||
>
|
||||
TTRPG Initiative Tracker
|
||||
</h1>
|
||||
@ -160,7 +153,7 @@ function App() {
|
||||
{!isAuthReady && !error && <p>Authenticating...</p>}
|
||||
</main>
|
||||
<footer className="bg-slate-900 p-4 text-center text-sm text-slate-400 mt-8">
|
||||
TTRPG Initiative Tracker v0.1.17
|
||||
TTRPG Initiative Tracker v0.1.18
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
@ -831,7 +824,6 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
|
||||
console.warn("Attempting to end encounter without confirmation");
|
||||
try {
|
||||
await updateDoc(doc(db, encounterPath), { isStarted: false, currentTurnParticipantId: null, round: 0, turnOrderIds: [] });
|
||||
// When an encounter ends, also deactivate it from the Player Display
|
||||
await setDoc(doc(db, ACTIVE_DISPLAY_DOC), {
|
||||
activeCampaignId: null,
|
||||
activeEncounterId: null
|
||||
@ -998,7 +990,7 @@ function DisplayView() {
|
||||
<div className="w-full bg-slate-600 rounded-full h-6 md:h-8 relative overflow-hidden border-2 border-slate-500">
|
||||
<div className={`h-full rounded-full transition-all ${p.currentHp <= p.maxHp / 4 ? 'bg-red-500' : (p.currentHp <= p.maxHp / 2 ? 'bg-yellow-500' : 'bg-green-500')}`} style={{ width: `${Math.max(0, (p.currentHp / p.maxHp) * 100)}%` }}></div>
|
||||
{p.type !== 'monster' && (
|
||||
<span className="absolute inset-0 flex items-center justify-center text-xs md:text-sm font-medium text-white mix-blend-difference px-2">
|
||||
<span className="absolute inset-0 flex items-center justify-center text-xs md:text-sm font-medium text-white px-2"> {/* Removed mix-blend-difference */}
|
||||
HP: {p.currentHp} / {p.maxHp}
|
||||
</span>
|
||||
)}
|
||||
|
Loading…
x
Reference in New Issue
Block a user