Files
City10/resources/views/city/viewer.blade.php
T
marcocosta10000 a620f83dd8 feat(city): add player marketplace, mission journal, character customization and presence
- Player-to-player marketplace with listings, buying and selling
- Mission system with progress tracking and money rewards
- Character appearance customization (skin, hair, face, beard, accessory)
- Multiplayer presence feed showing nearby citizens in near-real-time
- Admin world dashboard with live platform metrics
- Bus and train transportation with temporary ride state
- Mobile joystick controls and minimap HUD
- Education bonus applied to work salary
2026-10-17 22:51:20 -03:00

377 lines
25 KiB
PHP
Executable File
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@extends('layouts.app')
@section('title', __('city.title'))
@section('content')
<div style="max-width: 1280px; margin: 0 auto;">
<div style="display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem;">
<h1 style="margin:0; color:#fff;">🏙️ {{ __('city.title') }}</h1>
<div style="display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;">
<span id="hud-clock" style="background:rgba(15,23,42,.85); border:1px solid var(--border); border-radius:.5rem;
padding:.35rem .6rem; font-size:.85rem; color:#fde68a; font-variant-numeric:tabular-nums;">🕒 --:--</span>
<span id="hud-weather" style="background:rgba(15,23,42,.85); border:1px solid var(--border); border-radius:.5rem;
padding:.35rem .6rem; font-size:.85rem; color:#7dd3fc;">☀️ —</span>
<span id="stats" style="color:var(--muted); font-size:.9rem;"></span>
<button type="button" id="audio-toggle" class="btn" aria-label="{{ __('city.audio') }}" title="{{ __('city.audio') }}">🔊</button>
<button type="button" id="reload" class="btn">{{ __('city.refresh') }}</button>
</div>
</div>
<div id="scene"
style="position:relative; width:100%; height:min(78vh, 720px); border-radius:1rem; overflow:hidden;
background:#0b1220; border:1px solid var(--border); box-shadow:0 20px 50px rgba(0,0,0,.45);">
<div id="loading" style="position:absolute; inset:0; display:grid; place-items:center; color:var(--muted);">
{{ __('city.loading') }}
</div>
<div id="error" style="position:absolute; inset:0; display:none; place-items:center; color:#fecaca;">
{{ __('city.error') }}
</div>
{{-- Minimap --}}
<div style="position:absolute; right:.7rem; bottom:4.6rem; z-index:12;">
<canvas id="minimap" width="160" height="160"
style="display:block; border-radius:.6rem; border:1px solid var(--border);
box-shadow:0 8px 20px rgba(0,0,0,.4);"
aria-label="{{ __('city.hud_minimap') }}"></canvas>
<div style="margin-top:.3rem; font-size:.62rem; color:#cbd5e1; background:rgba(15,23,42,.8);
border:1px solid var(--border); border-radius:.4rem; padding:.25rem .4rem; line-height:1.45;">
<span style="color:#f472b6;">●</span> você
<span style="color:#38bdf8;">●</span> jogadores
<span style="color:#facc15;">●</span> pedestres<br>
<span style="color:#94a3b8;">■</span> carros
<span style="color:#a78bfa;">■</span> motos
<span style="color:#4ade80;">■</span> bikes
<span style="color:#60a5fa;">■</span> ônibus<br>
<span style="color:#f59e0b;">■</span> lojas
<span style="color:#22c55e;">●</span> praças
</div>
</div>
{{-- Virtual joystick (mobile) --}}
<div id="joystick-base"
style="display:none; position:absolute; left:1.1rem; bottom:1.4rem; z-index:14;
width:110px; height:110px; border-radius:50%;
background:rgba(15,23,42,.55); border:2px solid rgba(148,163,184,.35);
touch-action:none;">
<div id="joystick-knob"
style="position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px;
border-radius:50%; background:rgba(56,189,248,.75); border:2px solid #e0f2fe;"></div>
</div>
<style>
@media (max-width: 820px), (pointer: coarse) {
#joystick-base { display: block !important; }
#minimap { width:120px !important; height:120px !important; }
}
</style>
{{-- Pedestrian red-light wait banner --}}
<div id="ped-wait"
style="display:none; position:absolute; bottom:4.2rem; left:50%; transform:translateX(-50%);
z-index:20; background:rgba(127,29,29,.92); color:#fecaca; border:1px solid #f87171;
border-radius:.6rem; padding:.5rem 1rem; font-size:.95rem; font-weight:600; white-space:nowrap;">
</div>
{{-- Gym equipment proximity prompt --}}
<div id="exercise-prompt"
style="display:none; position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
z-index:20; background:rgba(20,83,45,.92); color:#bbf7d0; border:1px solid #4ade80;
border-radius:.6rem; padding:.5rem 1rem; font-size:.95rem; font-weight:600; white-space:nowrap;">
</div>
{{-- Hospital admission banner --}}
<div id="hospital-banner"
style="display:none; position:absolute; top:5.2rem; left:50%; transform:translateX(-50%);
z-index:20; background:rgba(127,29,29,.92); color:#fecaca; border:1px solid #f87171;
border-radius:.6rem; padding:.55rem 1rem; font-size:.95rem; font-weight:600;">
🏥
</div>
{{-- Character vitals and actions --}}
<div id="char-panel"
style="position:absolute; top:.7rem; left:.7rem; z-index:12; width:250px;
background:rgba(15,23,42,.93); border:1px solid var(--border);
border-radius:.75rem; padding:.75rem; font-size:.8rem; color:var(--muted);">
<div style="color:#fff; font-weight:700; margin-bottom:.4rem;" id="char-name">—</div>
<div>{{ __('city.hud_hunger') }}: <span id="hud-hunger" style="color:#fca5a5;">—</span></div>
<div>{{ __('city.hud_thirst') }}: <span id="hud-thirst" style="color:#7dd3fc;">—</span></div>
<div>{{ __('city.hud_energy') }}: <span id="hud-energy" style="color:#86efac;">—</span></div>
<div>{{ __('city.hud_health') }}: <span id="hud-health" style="color:#f9a8d4;">—</span></div>
<div>{{ __('city.hud_money') }}: <span id="hud-money" style="color:#fde68a;">—</span></div>
<div>{{ __('city.hud_state') }}: <span id="hud-char-state" style="color:#c4b5fd;">—</span></div>
<div>{{ __('city.hud_education') }}: <span id="hud-education">—</span></div>
<div>{{ __('city.hud_exercise') }}: <span id="hud-exercise-count" style="color:#c4b5fd;">—</span></div>
<div style="margin-top:.35rem; color:#cbd5e1;">{{ __('city.hud_inventory') }}: <span id="hud-inv">—</span></div>
<div style="margin-top:.6rem; color:#fff; font-weight:600;">{{ __('city.hud_actions') }}</div>
<div style="display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.3rem;">
<button type="button" class="btn char-act" data-act="eat" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_eat') }}</button>
<button type="button" class="btn char-act" data-act="drink" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_drink') }}</button>
<button type="button" class="btn char-act" data-act="sleep" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_sleep') }}</button>
<button type="button" class="btn char-act" data-act="wake" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_wake') }}</button>
<button type="button" class="btn char-act" data-act="work" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_work') }}</button>
<button type="button" class="btn char-act" data-act="stop-work" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_stop') }}</button>
<button type="button" class="btn char-act" data-act="study" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_study') }}</button>
<button type="button" class="btn char-act" data-act="buy" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_buy') }}</button>
<button type="button" class="btn char-act" data-act="sell" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_sell_v') }}</button>
<button type="button" class="btn char-act" data-act="build" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_build') }}</button>
<button type="button" id="btn-market" class="btn" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_market') }}</button>
<button type="button" id="btn-customize" class="btn" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_customize') }}</button>
<button type="button" id="btn-ride-bus" class="btn" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_ride_bus') }}</button>
<button type="button" id="btn-ride-train" class="btn" style="padding:.25rem .45rem; font-size:.75rem;">{{ __('city.act_ride_train') }}</button>
</div>
{{-- Marketplace --}}
<div id="market-panel" style="display:none; margin-top:.55rem; border-top:1px solid var(--border); padding-top:.45rem;">
<div style="color:#fff; font-weight:600;">🛒 {{ __('city.act_market') }}</div>
<div id="market-list" style="max-height:120px; overflow:auto; font-size:.75rem;"></div>
<div style="display:flex; gap:.25rem; margin-top:.3rem; flex-wrap:wrap;">
<select id="market-item" style="flex:1; min-width:70px; padding:.2rem; background:#0b1220; color:var(--text); border:1px solid var(--border); border-radius:.3rem; font-size:.7rem;">
<option value="product">product</option>
<option value="food">food</option>
<option value="water">water</option>
<option value="materials">materials</option>
</select>
<input id="market-qty" type="number" min="1" max="100" value="1" style="width:48px; padding:.2rem; background:#0b1220; color:var(--text); border:1px solid var(--border); border-radius:.3rem; font-size:.7rem;">
<input id="market-price" type="number" min="0.5" step="0.5" value="5" style="width:52px; padding:.2rem; background:#0b1220; color:var(--text); border:1px solid var(--border); border-radius:.3rem; font-size:.7rem;">
<button type="button" id="market-sell" class="btn" style="padding:.2rem .4rem; font-size:.7rem;">OK</button>
</div>
</div>
{{-- Appearance customization --}}
<div id="customize-panel" style="display:none; margin-top:.55rem; border-top:1px solid var(--border); padding-top:.45rem;">
<div style="color:#fff; font-weight:600;">🎨 {{ __('city.act_customize') }}</div>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:.25rem; font-size:.72rem; margin-top:.3rem;">
<label>skin <select id="cz-skin"><option>1</option><option>2</option><option>3</option><option>4</option></select></label>
<label>hair <select id="cz-hair"><option>1</option><option>2</option><option>3</option><option>4</option></select></label>
<label>shirt <select id="cz-shirt"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></label>
<label>face <select id="cz-face"><option>1</option><option>2</option><option>3</option></select></label>
<label>beard <select id="cz-beard"><option>0</option><option>1</option><option>2</option></select></label>
<label>acc <select id="cz-accessory"><option>0</option><option>1</option><option>2</option></select></label>
</div>
<button type="button" id="customize-save" class="btn" style="margin-top:.35rem; width:100%; padding:.3rem; font-size:.75rem;">💾</button>
</div>
{{-- Missions journal --}}
<div style="margin-top:.55rem; border-top:1px solid var(--border); padding-top:.45rem;">
<div style="color:#fff; font-weight:600;">📜 {{ __('admin.world.missions') }}</div>
<div id="mission-list" style="max-height:100px; overflow:auto; font-size:.72rem; margin-top:.25rem;"></div>
</div>
<div style="margin-top:.6rem; color:#fff; font-weight:600;">{{ __('city.hud_jobs') }}</div>
<select id="job-select" style="width:100%; margin-top:.25rem; padding:.3rem; background:#0b1220; color:var(--text); border:1px solid var(--border); border-radius:.4rem;">
<option value="">—</option>
</select>
<button type="button" id="job-apply" class="btn" style="margin-top:.3rem; width:100%; padding:.3rem; font-size:.75rem;">{{ __('city.act_apply') }}</button>
<div style="margin-top:.6rem; color:#fff; font-weight:600;">{{ __('city.hud_social') }}</div>
<select id="citizen-select" style="width:100%; margin-top:.25rem; padding:.3rem; background:#0b1220; color:var(--text); border:1px solid var(--border); border-radius:.4rem;">
<option value="">—</option>
</select>
<div style="display:flex; gap:.3rem; margin-top:.3rem; flex-wrap:wrap;">
<button type="button" id="soc-friend" class="btn" style="padding:.25rem .4rem; font-size:.75rem;">{{ __('city.act_friend') }}</button>
<button type="button" id="soc-marry" class="btn" style="padding:.25rem .4rem; font-size:.75rem;">{{ __('city.act_marry') }}</button>
<button type="button" id="soc-child" class="btn" style="padding:.25rem .4rem; font-size:.75rem;">{{ __('city.act_child') }}</button>
</div>
<div id="char-msg" style="margin-top:.4rem; min-height:1.1em; color:#93c5fd;"></div>
</div>
{{-- Audio mixer (music / SFX / master volumes) --}}
<div id="audio-panel"
style="position:absolute; top:.7rem; right:.7rem; z-index:12; width:220px; display:none;
background:rgba(15,23,42,.93); border:1px solid var(--border);
border-radius:.75rem; padding:.75rem; font-size:.8rem; color:var(--muted);">
<div style="color:#fff; font-weight:700; margin-bottom:.5rem;">🎵 {{ __('city.audio') }}</div>
<label style="display:flex; justify-content:space-between; gap:.4rem; margin-bottom:.15rem;">
<span>{{ __('city.vol_master') }}</span>
<span id="vol-master-out" style="color:#e2e8f0; font-variant-numeric:tabular-nums;">85%</span>
</label>
<input type="range" id="vol-master" min="0" max="1" step="0.01" value="0.85" style="width:100%;">
<label style="display:flex; justify-content:space-between; gap:.4rem; margin:.45rem 0 .15rem;">
<span>{{ __('city.vol_music') }}</span>
<span id="vol-music-out" style="color:#e2e8f0; font-variant-numeric:tabular-nums;">70%</span>
</label>
<input type="range" id="vol-music" min="0" max="1" step="0.01" value="0.7" style="width:100%;">
<label style="display:flex; justify-content:space-between; gap:.4rem; margin:.45rem 0 .15rem;">
<span>{{ __('city.vol_sfx') }}</span>
<span id="vol-sfx-out" style="color:#e2e8f0; font-variant-numeric:tabular-nums;">100%</span>
</label>
<input type="range" id="vol-sfx" min="0" max="1" step="0.01" value="1" style="width:100%;">
<button type="button" id="vol-mute" class="btn" style="margin-top:.55rem; width:100%; padding:.3rem;"
aria-label="{{ __('city.mute') }}">🔊</button>
<p style="margin:.45rem 0 0; font-size:.7rem; color:#64748b;">{{ __('city.audio_hint') }}</p>
</div>
{{-- Click-to-start overlay (pointer lock gate) --}}
<div id="start-gate"
style="position:absolute; inset:0; display:grid; place-items:center; background:rgba(11,18,32,.75);
cursor:pointer; z-index:10; text-align:center;">
<div>
<div style="font-size:3rem; margin-bottom:.5rem;">🎮</div>
<p style="color:#fff; font-size:1.1rem; margin:0 0 .3rem;">{{ __('city.hint_fps') }}</p>
</div>
</div>
{{-- HUD bottom-left: POSIÇÃO panel (like example images) --}}
<div id="hud-pos"
style="position:absolute; left:.6rem; bottom:.6rem; z-index:5; display:none;
background:rgba(10,15,28,.88); border:1px solid rgba(148,163,184,.25); border-radius:.4rem;
padding:.5rem .7rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem;
color:#94a3b8; line-height:1.55; min-width:170px; pointer-events:none;">
<div style="color:#e2e8f0; font-weight:700; letter-spacing:.06em; font-size:.65rem; margin-bottom:.2rem;">{{ __('city.position') }}</div>
<div id="pos-xyz">x:0.0 y:1.7 z:0.0</div>
<div id="pos-ground">—</div>
<div id="pos-tris">—</div>
</div>
{{-- HUD bottom-right: selected / hint --}}
<div id="hud-hint"
style="position:absolute; right:.6rem; bottom:.6rem; z-index:5; display:flex; gap:.5rem;
pointer-events:none; flex-wrap:wrap; justify-content:flex-end;">
<span id="selected" style="background:rgba(15,23,42,.85); border:1px solid var(--border); border-radius:.5rem;
padding:.35rem .6rem; font-size:.8rem; color:#7dd3fc; display:none;"></span>
<span id="hint" style="background:rgba(15,23,42,.85); border:1px solid var(--border); border-radius:.5rem;
padding:.35rem .6rem; font-size:.75rem; color:var(--muted);">{{ __('city.hint') }}</span>
</div>
{{-- Chat panel (bottom-right, like example images) --}}
<div id="chat-panel"
style="position:absolute; right:.6rem; bottom:3.2rem; z-index:15; width:280px; display:none;
background:rgba(15,23,42,.96); border:1px solid var(--border); border-radius:.6rem;
overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.5); flex-direction:column;">
<div id="chat-header"
style="display:flex; align-items:center; justify-content:space-between; gap:.5rem;
padding:.55rem .7rem; background:rgba(30,41,59,.9); border-bottom:1px solid var(--border);">
<div style="display:flex; align-items:center; gap:.5rem; min-width:0;">
<span id="chat-dot" style="width:8px; height:8px; border-radius:50%; background:#22c55e; flex-shrink:0;"></span>
<div style="min-width:0;">
<div id="chat-name" style="font-weight:700; font-size:.85rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"></div>
<div id="chat-status" style="font-size:.7rem; color:var(--muted);"></div>
</div>
</div>
<div style="display:flex; gap:.3rem;">
<span id="chat-time" style="font-size:.65rem; color:var(--muted); align-self:center;"></span>
<button type="button" id="chat-close"
style="background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:1rem; padding:0 .2rem;"
aria-label="Close">×</button>
</div>
</div>
<div id="chat-messages"
style="padding:.6rem .7rem; overflow-y:auto; max-height:260px; display:flex; flex-direction:column;
gap:.5rem; font-size:.78rem; line-height:1.5;"></div>
<form id="chat-form"
style="display:flex; gap:.4rem; padding:.5rem .6rem; border-top:1px solid var(--border); background:rgba(11,18,32,.7);">
<input id="chat-input" type="text" maxlength="500" required
placeholder="{{ __('city.chat_placeholder') }}"
style="flex:1; min-width:0; padding:.45rem .6rem; border-radius:.4rem; border:1px solid var(--border);
background:#0b1220; color:var(--text); font-size:.8rem;">
<button type="submit" class="btn btn-primary" style="padding:.4rem .7rem; font-size:.75rem;">
{{ __('city.chat_send') }}
</button>
</form>
</div>
</div>
</div>
@endsection
@push('styles')
<style>
#scene canvas { display: block; touch-action: none; }
#chat-messages::-webkit-scrollbar { width: 6px; }
#chat-messages::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
.chat-bubble {
padding:.4rem .6rem; border-radius:.5rem; max-width:92%; word-break:break-word;
}
.chat-bubble.user {
background:rgba(14,165,233,.22); border:1px solid rgba(14,165,233,.4); color:#bae6fd; align-self:flex-end;
}
.chat-bubble.npc {
background:rgba(51,65,85,.55); border:1px solid rgba(148,163,184,.2); color:#e2e8f0; align-self:flex-start;
}
.chat-bubble.meta {
background:transparent; border:none; color:var(--muted); font-size:.7rem; align-self:center;
}
@media (max-width: 640px) {
#scene { height: 62vh !important; }
#hint { display: none; }
#chat-panel { width: calc(100% - 1.2rem); right: .6rem; left: .6rem; }
}
</style>
@endpush
@push('scripts')
<script>
window.CITY_CONFIG = {
dataUrl: @json(route('city.data')),
csrf: @json(csrf_token()),
i18n: {
stores: @json(__('city.stores_count')),
agents: @json(__('city.agents_count')),
vehicles: @json(__('city.vehicles_count')),
pedestrians: @json(__('city.pedestrians_count')),
open: @json(__('city.open')),
closed: @json(__('city.closed')),
selected: @json(__('city.selected')),
position: @json(__('city.position')),
onGround: @json(__('city.on_ground')),
tris: @json(__('city.triangles')),
chatThinking: @json(__('city.chat_thinking')),
chatResponding: @json(__('city.chat_responding')),
chatWith: @json(__('city.chat_with')),
chatSend: @json(__('city.chat_send')),
chatError: @json(__('city.chat_error')),
clock: @json(__('city.clock')),
weather: @json(__('city.weather')),
weather_clear: @json(__('city.weather_clear')),
weather_cloudy: @json(__('city.weather_cloudy')),
weather_rain: @json(__('city.weather_rain')),
weather_storm: @json(__('city.weather_storm')),
state_awake: @json(__('city.hud_state')),
actionOk: @json(__('city.action_ok')),
notFound: @json(__('city.action_unknown')),
jobs: @json(__('city.hud_jobs')),
applyJob: @json(__('city.apply_job')),
buyHint: @json(__('city.buy_hint')),
noFood: @json(__('city.no_food')),
noMoney: @json(__('city.no_money')),
noHouse: @json(__('city.no_house')),
noJob: @json(__('city.no_job')),
noMaterials: @json(__('city.no_materials')),
siteTaken: @json(__('city.site_taken')),
buildStarted: @json(__('city.build_started')),
outOfBounds: @json(__('city.out_of_bounds')),
socialFriendSent: @json(__('city.social_friend_sent')),
socialFriendOk: @json(__('city.social_friend_ok')),
socialMarriedOk: @json(__('city.social_married_ok')),
socialChildOk: @json(__('city.social_child_ok')),
chatSent: @json(__('city.chat_sent')),
me: @json(__('city.me')),
citizens: @json(__('city.citizens_near')),
hunger: @json(__('city.hud_hunger')),
thirst: @json(__('city.hud_thirst')),
energy: @json(__('city.hud_energy')),
money: @json(__('city.hud_money')),
education: @json(__('city.hud_education')),
inventory: @json(__('city.hud_inventory')),
hospitalHit: @json(__('city.hospital_hit')),
hospitalBlocked: @json(__('city.hospital_blocked')),
hospitalTitle: @json(__('city.hospital_title')),
hospitalLeft: @json(__('city.hospital_left')),
hospitalReleased: @json(__('city.hospital_released')),
exerciseUse: @json(__('city.exercise_use')),
exerciseActive: @json(__('city.exercise_active')),
exerciseStopHint: @json(__('city.exercise_stopHint')),
exerciseStart: @json(__('city.exerciseStart')),
exerciseStop: @json(__('city.exerciseStop')),
exerciseMaxHealth: @json(__('city.exercise_max_health')),
pedRed: @json(__('city.ped_red')),
},
citySlug: @json($city->slug),
};
</script>
<script type="module" src="{{ asset('js/city/app.js') }}"></script>
@endpush