Initial
This commit is contained in:
118
resources/app/templates/hud/camera-views.html
Normal file
118
resources/app/templates/hud/camera-views.html
Normal file
@@ -0,0 +1,118 @@
|
||||
{{#*inline "controlBar"}}
|
||||
<nav class="control-bar bottom flexrow" aria-label="{{localize 'WEBRTC.NavLabel'}}">
|
||||
<div class="volume-bar">
|
||||
<i class="fas fa-volume-down fa-fw vol-min"></i>
|
||||
<input class="webrtc-volume-slider" type="range" min="0" max="1" step="0.05" value="{{this.volume}}"/>
|
||||
<i class="fas fa-volume-up fa-fw vol-max"></i>
|
||||
</div>
|
||||
|
||||
{{#if (and local (not @root.hidden))}}
|
||||
<a class="av-control toggle" data-action="toggle-dock">
|
||||
<i class="far fa-fw"></i>
|
||||
</a>
|
||||
|
||||
<a class="av-control toggle" data-action="toggle-players">
|
||||
<i class="far fa-fw fa-rotate-270"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<a class="av-control toggle" data-action="toggle-video">
|
||||
<i class="fas fa-fw"></i>
|
||||
</a>
|
||||
|
||||
<a class="av-control toggle" data-action="toggle-audio">
|
||||
<i class="fas fa-fw"></i>
|
||||
</a>
|
||||
|
||||
<a class="av-control toggle" data-action="mute-peers">
|
||||
<i class="fas fa-fw"></i>
|
||||
</a>
|
||||
|
||||
<a class="av-control toggle" data-action="disable-video">
|
||||
<i class="fas fa-fw"></i>
|
||||
</a>
|
||||
|
||||
{{#if this.local}}
|
||||
<a class="av-control" data-tooltip="{{localize 'WEBRTC.TooltipConfigure'}}" data-action="configure">
|
||||
<i class="fas fa-cog"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
</nav>
|
||||
{{/inline}}
|
||||
|
||||
{{#*inline "cameraBox"}}
|
||||
<div class="camera-view {{this.cameraViewClass}}" data-user="{{this.user.id}}"
|
||||
{{#if @root.borderColors}}style="background: linear-gradient(to bottom, {{this.user.border.css}} 0%, {{this.user.color}} 100%);"{{/if}}>
|
||||
<div class="video-container {{#if this.settings.popout}}camera-container-popout{{/if}}">
|
||||
<img class="user-avatar" src="{{this.user.avatar}}"/>
|
||||
<video class="user-camera {{#if this.local}}local-camera{{/if}}"
|
||||
style="visibility:hidden; display: none;" autoplay="autoplay" playsinline="playsinline">
|
||||
</video>
|
||||
</div>
|
||||
|
||||
{{!-- Left Control Bar --}}
|
||||
<div class="control-bar left flexcol hidden">
|
||||
<a class="av-control toggle global" data-action="block-video">
|
||||
<i class="fas fa-fw"></i>
|
||||
</a>
|
||||
<a class="av-control toggle global" data-action="block-audio">
|
||||
<i class="fas fa-fw"></i>
|
||||
</a>
|
||||
<a class="av-control toggle" data-action="hide-user">
|
||||
<i class="fas fa-fw"></i>
|
||||
</a>
|
||||
|
||||
{{#if this.settings.popout}}
|
||||
<a class="av-control toggle" data-tooltip="{{localize 'WEBRTC.TooltipDock'}}" data-action="toggle-popout">
|
||||
<i class="fas fa-external-link-square-alt fa-rotate-180"></i>
|
||||
</a>
|
||||
{{else}}
|
||||
<a class="av-control toggle" data-tooltip="{{localize 'WEBRTC.TooltipPopout'}}" data-action="toggle-popout">
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{!-- Bottom Control Bar --}}
|
||||
{{#if (or @root.hidden (not local))}}
|
||||
{{> controlBar}}
|
||||
{{/if}}
|
||||
|
||||
{{!-- Right Notification Bar --}}
|
||||
<div class="notification-bar right flexcol">
|
||||
<i class="fas fa-video-slash fa-fw status-hidden hidden"></i>
|
||||
<i class="fas fa-microphone-slash fa-fw status-muted hidden"></i>
|
||||
</div>
|
||||
|
||||
<div class="shadow"></div>
|
||||
|
||||
<h3 class="player-name noborder {{@root.nameplates.cssClass}}" style="color: {{this.user.border}};">
|
||||
{{#if @root.nameplates.playerName}}
|
||||
<span>{{this.user.name}}</span>
|
||||
{{/if}}
|
||||
{{#if @root.nameplates.charname}}
|
||||
<span>{{#if this.charname}}{{this.charname}}{{else}}{{this.user.name}}{{/if}}</span>
|
||||
{{/if}}
|
||||
</h3>
|
||||
</div>
|
||||
{{/inline}}
|
||||
|
||||
<div id="camera-views" class="app {{dockClass}}">
|
||||
<div class="camera-container">
|
||||
<div class="camera-grid">
|
||||
{{#each users}}
|
||||
{{#if this.settings.popout}}
|
||||
<div id="camera-views-user-{{this.user.id}}" class="app camera-view-popout">
|
||||
{{> cameraBox isGM=../self.isGM muteAll=../muteAll}}
|
||||
</div>
|
||||
{{else}}
|
||||
{{> cameraBox isGM=../self.isGM muteAll=../muteAll dockClass=../dockClass}}
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="camera-view-width-control"></div>
|
||||
<div class="user-controls" data-user="{{self.id}}">
|
||||
{{> controlBar local=true}}
|
||||
</div>
|
||||
</div>
|
||||
5
resources/app/templates/hud/chat-bubble.html
Normal file
5
resources/app/templates/hud/chat-bubble.html
Normal file
@@ -0,0 +1,5 @@
|
||||
<div class="chat-bubble {{ cssClasses }}" data-token-id="{{ token.id }}">
|
||||
<div class="bubble-content">
|
||||
{{{ message }}}
|
||||
</div>
|
||||
</div>
|
||||
18
resources/app/templates/hud/controls.html
Normal file
18
resources/app/templates/hud/controls.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<nav id="controls" class="flexrow" data-tooltip-direction="RIGHT" aria-label="{{localize 'CONTROLS.NavLabel'}}">
|
||||
<ol class="main-controls app control-tools flexcol {{ cssClass }}" role="tablist">
|
||||
{{#each controls as |c|}}
|
||||
<li class="scene-control {{c.css}}" data-control="{{c.name}}" data-canvas-layer="{{c.layer}}" aria-label="{{localize c.title}}" role="tab" aria-controls="tools-panel-{{ c.name }}" data-tooltip="{{localize c.title}}">
|
||||
<i class="{{c.icon}}"></i>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
{{#each controls as |c|}}
|
||||
<ol id="tools-panel-{{ c.name }}" role="tabpanel" class="sub-controls app control-tools flexcol {{c.css}}">
|
||||
{{#each c.tools as |t|}}
|
||||
<li class="control-tool {{t.css}}" data-tool="{{t.name}}" aria-label="{{localize t.title}}" role="button" data-tooltip="{{t.tooltip}}">
|
||||
<i class="{{t.icon}}"></i>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
{{/each}}
|
||||
</nav>
|
||||
11
resources/app/templates/hud/dialog.html
Normal file
11
resources/app/templates/hud/dialog.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<div class="dialog-content">
|
||||
{{{content}}}
|
||||
</div>
|
||||
<div class="dialog-buttons">
|
||||
{{#each buttons as |button id|}}
|
||||
<button class="dialog-button {{cssClass}}" data-button="{{id}}" {{disabled button.disabled}}>
|
||||
{{{button.icon}}}
|
||||
{{{button.label}}}
|
||||
</button>
|
||||
{{/each}}
|
||||
</div>
|
||||
30
resources/app/templates/hud/drawing-hud.html
Normal file
30
resources/app/templates/hud/drawing-hud.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<form id="{{id}}" class="{{classes}}" data-appid="{{appId}}" autocomplete="off" onsubmit="event.preventDefault();">
|
||||
|
||||
<div class="col left">
|
||||
<div class="attribute elevation" data-tooltip="HUD.Elevation">
|
||||
<i class="fas fa-angle-up"></i>
|
||||
<input type="text" name="elevation" value="{{elevation}}" {{disabled (or locked (and isGamePaused (not isGM)))}}>
|
||||
</div>
|
||||
|
||||
<div class="control-icon" data-action="sort-up" data-tooltip="HUD.ToFront">
|
||||
<img src="{{icons.up}}" width="36" height="36"/>
|
||||
</div>
|
||||
|
||||
<div class="control-icon" data-action="sort-down" data-tooltip="HUD.ToBack">
|
||||
<img src="{{icons.down}}" width="36" height="36"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col middle">
|
||||
</div>
|
||||
|
||||
<div class="col right">
|
||||
<div class="control-icon {{visibilityClass}}" data-action="visibility" data-tooltip="HUD.ToggleVis">
|
||||
<img src="{{icons.visibility}}" width="36" height="36"/>
|
||||
</div>
|
||||
|
||||
<div class="control-icon {{lockedClass}}" data-action="locked" data-tooltip="HUD.ToggleLock">
|
||||
<img src="{{icons.lock}}" width="36" height="36"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
40
resources/app/templates/hud/hotbar.html
Normal file
40
resources/app/templates/hud/hotbar.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<div id="hotbar" class="flexrow {{#if locked}}locked{{/if}}" data-tooltip-direction="UP">
|
||||
<div id="hotbar-directory-controls" class="bar-controls flexcol">
|
||||
<a id="bar-toggle" aria-label="{{localize 'MACRO.CollapseHotbar'}}" role="button" data-tooltip="MACRO.CollapseHotbar">
|
||||
<i class="fas fa-caret-down"></i>
|
||||
</a>
|
||||
<a id="macro-directory" aria-label="{{localize 'MACRO.Directory'}}" role="button" data-tooltip="MACRO.Directory">
|
||||
<i class="fas fa-folder"></i>
|
||||
</a>
|
||||
</div>
|
||||
<nav id="action-bar" class="flexrow {{barClass}}" aria-label="{{localize 'MACRO.NavLabel'}}">
|
||||
<ol id="macro-list" class="flexrow" data-page="{{page}}">
|
||||
{{#each macros}}
|
||||
<li class="macro {{this.cssClass}}" data-slot="{{this.slot}}" role="button"
|
||||
{{#if this.macro}}
|
||||
data-macro-id="{{this.macro.id}}" aria-label="{{this.tooltip}}" data-tooltip="{{this.tooltip}}"
|
||||
{{else}}
|
||||
aria-label="{{localize 'MACRO.EmptySlot' slot=slot}}"
|
||||
{{/if}}>
|
||||
<span class="macro-key">{{this.key}}</span>
|
||||
{{#if this.icon}}
|
||||
<img class="macro-icon" src="{{this.icon}}" alt="{{this.tooltip}}" />
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
<div id="hotbar-lock" class="bar-controls flexcol" data-tooltip-direction="UP">
|
||||
<a class="page-control" data-action="lock" aria-label="{{localize 'MACRO.LockBar'}}" role="button" data-tooltip="MACRO.{{ifThen locked "Unlock" "Lock"}}Bar">
|
||||
<i class="fas fa-lock{{#unless locked}}-open{{/unless}}"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div id="hotbar-page-controls" class="bar-controls flexcol" data-tooltip-direction="UP">
|
||||
<a class="page-control" data-action="page-up" aria-label="{{localize 'MACRO.PageUp'}}" role="button" data-tooltip="MACRO.PageUp" alt="{{localize 'MACRO.PageUp'}}" >
|
||||
<i class="fas fa-caret-up"></i></a>
|
||||
<span class="page-number">{{page}}</span>
|
||||
<a class="page-control" data-action="page-down" aria-label="{{localize 'MACRO.PageDown'}}" role="button" data-tooltip="MACRO.PageDown" alt="{{localize 'MACRO.PageDown'}}">
|
||||
<i class="fas fa-caret-down"></i>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
7
resources/app/templates/hud/hud.html
Normal file
7
resources/app/templates/hud/hud.html
Normal file
@@ -0,0 +1,7 @@
|
||||
<div id="hud" style="width: {{ width }}px; height: {{ height }}px">
|
||||
<template id="token-hud"></template>
|
||||
<template id="tile-hud"></template>
|
||||
<template id="drawing-hud"></template>
|
||||
<div id="chat-bubbles">
|
||||
</div>
|
||||
</div>
|
||||
12
resources/app/templates/hud/menu.html
Normal file
12
resources/app/templates/hud/menu.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<nav id="menu" aria-label="{{localize 'MENU.NavLabel'}}">
|
||||
<ol id="menu-items">
|
||||
{{#each items as |item id|}}
|
||||
{{#if item.enabled}}
|
||||
<li class="menu-{{id}}">
|
||||
{{{item.icon}}}
|
||||
<h4>{{localize item.label}}</h4>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</ol>
|
||||
</nav>
|
||||
24
resources/app/templates/hud/navigation.html
Normal file
24
resources/app/templates/hud/navigation.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<nav id="navigation" class="app flexrow {{#if collapsed}}collapsed{{/if}}" data-tooltip-direction="CENTER"
|
||||
aria-label="{{localize 'SCENES.NavLabel'}}">
|
||||
{{#if scenes}}
|
||||
<a id="nav-toggle" class="nav-item" aria-label="{{localize 'SCENES.ToggleNav'}}" role="button" data-tooltip="SCENES.ToggleNav" alt="{{localize 'SCENES.ToggleNav'}}">
|
||||
<i class="fas fa-caret-{{#if collapsed}}down{{else}}up{{/if}}"></i>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<ol id="scene-list">
|
||||
{{#each scenes}}
|
||||
<li class="scene nav-item {{this.css}}" data-scene-id="{{this.id}}" {{#if this.tooltip}}data-tooltip="{{this.tooltip}}"{{/if}}>
|
||||
<a class="scene-name">
|
||||
{{#if this.active}}<i class="fas fa-bullseye"></i>{{/if}}
|
||||
{{{this.name}}}
|
||||
</a>
|
||||
<ul class="scene-players">
|
||||
{{#each this.users as |user i|}}
|
||||
<li class="scene-player" style="background-color: {{user.color}};">{{user.letter}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ol>
|
||||
</nav>
|
||||
4
resources/app/templates/hud/pause.html
Normal file
4
resources/app/templates/hud/pause.html
Normal file
@@ -0,0 +1,4 @@
|
||||
<figure id="pause" class="{{#if paused}}paused{{/if}}">
|
||||
<img src="icons/svg/clockwork.svg" class="fa-spin">
|
||||
<figcaption>{{localize "GAME.Paused"}}</figcaption>
|
||||
</figure>
|
||||
31
resources/app/templates/hud/tile-hud.html
Normal file
31
resources/app/templates/hud/tile-hud.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<form id="{{id}}" class="{{classes}}" data-appid="{{appId}}" autocomplete="off">
|
||||
<div class="col left">
|
||||
<div class="attribute elevation" data-tooltip="HUD.Elevation">
|
||||
<i class="fas fa-angle-up"></i>
|
||||
<input type="text" name="elevation" value="{{elevation}}" {{disabled (or locked (and isGamePaused (not isGM)))}}>
|
||||
</div>
|
||||
<div class="control-icon" data-action="sort-up" data-tooltip="HUD.ToFront">
|
||||
<img src="{{icons.up}}" width="36" height="36"/>
|
||||
</div>
|
||||
<div class="control-icon" data-action="sort-down" data-tooltip="HUD.ToBack">
|
||||
<img src="{{icons.down}}" width="36" height="36"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col middle">
|
||||
</div>
|
||||
|
||||
<div class="col right">
|
||||
<div class="control-icon {{visibilityClass}}" data-action="visibility" data-tooltip="HUD.ToggleVis">
|
||||
<img src="{{icons.visibility}}" width="36" height="36"/>
|
||||
</div>
|
||||
<div class="control-icon {{lockedClass}}" data-action="locked" data-tooltip="HUD.ToggleLock">
|
||||
<img src="{{icons.lock}}" width="36" height="36"/>
|
||||
</div>
|
||||
{{#if isVideo }}
|
||||
<div class="control-icon" data-action="video" data-tooltip="{{videoTitle}}">
|
||||
<i class="{{videoIcon}}"></i>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</form>
|
||||
65
resources/app/templates/hud/token-hud.html
Normal file
65
resources/app/templates/hud/token-hud.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<form id="{{id}}" class="{{classes}}" data-appid="{{appId}}" autocomplete="off" onsubmit="event.preventDefault();">
|
||||
|
||||
<div class="col left">
|
||||
<div class="attribute elevation" data-tooltip="HUD.Elevation">
|
||||
<i class="fas fa-angle-up"></i>
|
||||
<input type="text" name="elevation" value="{{elevation}}" {{disabled (or locked (and isGamePaused (not isGM)))}}>
|
||||
</div>
|
||||
|
||||
<div class="control-icon" data-action="sort-up" data-tooltip="HUD.ToFront">
|
||||
<img src="{{icons.up}}" width="36" height="36"/>
|
||||
</div>
|
||||
|
||||
<div class="control-icon" data-action="sort-down" data-tooltip="HUD.ToBack">
|
||||
<img src="{{icons.down}}" width="36" height="36"/>
|
||||
</div>
|
||||
|
||||
{{#if canConfigure}}
|
||||
<div class="control-icon" data-action="config" data-tooltip="HUD.OpenConfig">
|
||||
<i class="fas fa-cog"></i>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="col middle">
|
||||
<div class="attribute bar2">
|
||||
{{#if displayBar2}}
|
||||
<input type="text" name="bar2" value="{{bar2Data.value}}" {{#unless bar2Data.editable}}disabled{{/unless}}>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="attribute bar1">
|
||||
{{#if displayBar1}}
|
||||
<input type="text" name="bar1" value="{{bar1Data.value}}" {{#unless bar1Data.editable}}disabled{{/unless}}>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col right">
|
||||
{{#if isGM}}
|
||||
<div class="control-icon {{visibilityClass}}" data-action="visibility" data-tooltip="HUD.ToggleVis">
|
||||
<img src="{{icons.visibility}}" width="36" height="36"/>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="control-icon {{effectsClass}}" data-action="effects" data-tooltip="HUD.AssignStatusEffects">
|
||||
<img src="{{icons.effects}}" width="36" height="36"/>
|
||||
</div>
|
||||
<div class="status-effects">
|
||||
{{#each statusEffects as |status|}}
|
||||
<img class="effect-control {{status.cssClass}}" src="{{status.src}}"
|
||||
{{#if status.title}}data-tooltip="{{status.title}}"{{/if}} data-status-id="{{status.id}}"/>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<div class="control-icon {{targetClass}}" data-action="target" data-tooltip="HUD.ToggleTargetState">
|
||||
<i class="fas fa-bullseye"></i>
|
||||
</div>
|
||||
|
||||
{{#if canToggleCombat}}
|
||||
<div class="control-icon {{combatClass}}" data-action="combat" data-tooltip="HUD.ToggleCombatState">
|
||||
<img src="{{icons.combat}}" width="36" height="36"/>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</form>
|
||||
19
resources/app/templates/hud/toolclip.html
Normal file
19
resources/app/templates/hud/toolclip.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<div class="toolclip">
|
||||
<video src="{{ src }}" autoplay muted loop></video>
|
||||
<h4>{{ localize heading }}</h4>
|
||||
{{#each items}}
|
||||
<p>
|
||||
{{#if paragraph}}
|
||||
{{{ localize paragraph }}}
|
||||
{{else}}
|
||||
<strong>{{ localize heading }}:</strong>
|
||||
{{#if content}}
|
||||
{{{ localize content mod=@root.mod alt=@root.alt }}}
|
||||
{{else}}
|
||||
<span class="reference">{{ localize reference mod=@root.mod alt=@root.alt }}</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</p>
|
||||
{{/each}}
|
||||
<p class="faint">{{ localize "CONTROLS.DisableToolclips" }}</p>
|
||||
</div>
|
||||
Reference in New Issue
Block a user