Commit b06fca56 authored by Julien Enselme's avatar Julien Enselme
Browse files

chore(webpack): version assets for caching

parent 04786b8e
app/assets-list.js
aurelia-karma.js
app/game/create/default-names.js
app/locale/**/*.js
......@@ -2,7 +2,6 @@
/node_modules
/dist
/public
/app/assets-list.js
/reports
npm-debug.log
yarn-error.log
......
......@@ -47,7 +47,7 @@ $medium-height: 800px;
}
div.create-game-container {
background: url("/assets/game/backgrounds/game-creation.jpg");
background: url("../../../assets/game/backgrounds/game-creation.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
......
......@@ -25,7 +25,7 @@ along with Arena of Titans. If not, see <http://www.gnu.org/licenses/>.
<input ref="inviteLink" type="text" value.bind="url" readonly />
<button click.delegate="copyUrl()" class="" data-clipboard-target="#invite-link">
<img
src.bind="assetSource.forMiscImage('clippy')"
src.bind="clippyImg"
width="13"
alt="Copy to clipboard"
/>
......
......@@ -18,14 +18,15 @@
*/
import { bindable } from "aurelia-framework";
import { AssetSource } from "../../../../services/assets";
import clippy from "../../../../../assets/game/misc/clippy.svg";
export class AotUrlCopyCustomElement {
@bindable url;
inviteLink = null; // Populated by ref.
constructor() {
this.assetSource = AssetSource;
this.clippyImg = clippy;
}
copyUrl() {
......
......@@ -23,7 +23,7 @@
<require from="./widgets/popover/popover"></require>
<require from="./widgets/sounds/sounds"></require>
<img click.delegate="openOptions()" class="option-opener" src.bind="assetSource.forGlobalImage('gear')" />
<img click.delegate="openOptions()" class="option-opener" src.bind="assetSources.gear" />
<aot-popup></aot-popup>
<aot-popover></aot-popover>
......
......@@ -28,6 +28,8 @@ import * as currentTurnActions from "./actions/currentTurn";
import { Popup } from "./services/popup";
import { SW } from "../services/sw";
import gear from "../../assets/components/gear.png";
@inject(Store, Popup, SW)
export class Layout {
constructor(store, popup, sw) {
......@@ -45,7 +47,9 @@ export class Layout {
});
this._popup = popup;
this.assetSource = AssetSource;
this.assetSources = {
gear,
};
sw.preloadBundles("game");
AssetSource.preloadAssets("game");
......
......@@ -10,7 +10,7 @@
}
.play-left {
background: url(/assets/game/backgrounds/gauge.jpg);
background: url(../../../assets/game/backgrounds/gauge.jpg);
background-size: 100% 100%;
display: block;
float: left;
......@@ -38,7 +38,7 @@
}
#board-bg {
background: url(/assets/game/backgrounds/board.jpg);
background: url(../../../assets/game/backgrounds/board.jpg);
background-size: 100% 100%;
height: $play-main-height - 2vh; /* Compensate for padding-top & padding-bottom */
min-height: $play-main-min-height;
......@@ -56,7 +56,7 @@
#cards-container {
align-items: center;
background: url(/assets/game/backgrounds/cards.jpg);
background: url(../../../assets/game/backgrounds/cards.jpg);
background-size: 100% 100%;
display: flex;
height: $play-secondary-height;
......@@ -74,7 +74,7 @@
}
#notifications {
background: url(/assets/game/backgrounds/infos.jpg);
background: url(../../../assets/game/backgrounds/infos.jpg);
background-size: 100% 100%;
height: $play-main-height;
min-height: $play-main-min-height;
......@@ -92,7 +92,7 @@
#counter-countainer {
align-items: center;
background-image: url(/assets/game/backgrounds/stopwatch.jpg);
background-image: url(../../../assets/game/backgrounds/stopwatch.jpg);
background-size: 100% 100%;
display: flex;
height: $play-secondary-height;
......
......@@ -2791,15 +2791,15 @@
<image style="overflow:visible;enable-background:new ;" width="1231" height="652"
id="ocean_x5F_background"
xlink:href.bind="assetSource.forBackground('ocean')">
xlink:href.bind="backgrounds.ocean">
</image>
<image style="overflow:visible;enable-background:new ;" width="1231" height="652"
id="island_x5F_background" transform="matrix(1 0 0 1 1.9291 -1.0472)"
xlink:href.bind="assetSource.forBackground('island')">
xlink:href.bind="backgrounds.island">
</image>
<image style="overflow:visible;" width="1231" height="652" id="cloud_x5F_background"
xlink:href.bind="assetSource.forBackground('clouds')" transform="matrix(1 0 0 1 0 -0.1843)">
xlink:href.bind="backgrounds.clouds" transform="matrix(1 0 0 1 0 -0.1843)">
</image>
</g>
<g id="squares" ref="squaresLayer">
......
......@@ -25,6 +25,10 @@ import { AssetSource } from "../../../../services/assets";
import { BOARD_MOVE_MODE, BOARD_SELECT_SQUARE_MODE } from "../../../constants";
import { TrackActions } from "../../../services/TrackActions";
import ocean from "../../../../../assets/game/backgrounds/ocean.jpeg";
import island from "../../../../../assets/game/backgrounds/island.png";
import clouds from "../../../../../assets/game/backgrounds/clouds.png";
@inject(Store, TrackActions)
export class AotBoardCustomElement {
@bindable playerIndex = null;
......@@ -46,6 +50,11 @@ export class AotBoardCustomElement {
this.boardMode = BOARD_MOVE_MODE;
this.players = {};
this._hiddenPlayerIndexes = [];
this.backgrounds = {
ocean,
clouds,
island,
};
this.assetSource = AssetSource;
// Map squares to its color if the color changed from the default.
this.squaresToColors = {};
......
.sprite-movement-wizard-yellow {
background-image: url(/assets/game/cards/movement/wizard-yellow.png);
background-image: url(../../../../../assets/game/cards/movement/wizard-yellow.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-wizard-red {
background-image: url(/assets/game/cards/movement/wizard-red.png);
background-image: url(../../../../../assets/game/cards/movement/wizard-red.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-wizard-blue {
background-image: url(/assets/game/cards/movement/wizard-blue.png);
background-image: url(../../../../../assets/game/cards/movement/wizard-blue.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-wizard-black {
background-image: url(/assets/game/cards/movement/wizard-black.png);
background-image: url(../../../../../assets/game/cards/movement/wizard-black.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-warrior-yellow {
background-image: url(/assets/game/cards/movement/warrior-yellow.png);
background-image: url(../../../../../assets/game/cards/movement/warrior-yellow.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-warrior-red {
background-image: url(/assets/game/cards/movement/warrior-red.png);
background-image: url(../../../../../assets/game/cards/movement/warrior-red.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-warrior-blue {
background-image: url(/assets/game/cards/movement/warrior-blue.png);
background-image: url(../../../../../assets/game/cards/movement/warrior-blue.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-warrior-black {
background-image: url(/assets/game/cards/movement/warrior-black.png);
background-image: url(../../../../../assets/game/cards/movement/warrior-black.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-queen-yellow {
background-image: url(/assets/game/cards/movement/queen-yellow.png);
background-image: url(../../../../../assets/game/cards/movement/queen-yellow.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-queen-red {
background-image: url(/assets/game/cards/movement/queen-red.png);
background-image: url(../../../../../assets/game/cards/movement/queen-red.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-queen-blue {
background-image: url(/assets/game/cards/movement/queen-blue.png);
background-image: url(../../../../../assets/game/cards/movement/queen-blue.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-queen-black {
background-image: url(/assets/game/cards/movement/queen-black.png);
background-image: url(../../../../../assets/game/cards/movement/queen-black.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-knight-yellow {
background-image: url(/assets/game/cards/movement/knight-yellow.png);
background-image: url(../../../../../assets/game/cards/movement/knight-yellow.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-knight-red {
background-image: url(/assets/game/cards/movement/knight-red.png);
background-image: url(../../../../../assets/game/cards/movement/knight-red.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-knight-blue {
background-image: url(/assets/game/cards/movement/knight-blue.png);
background-image: url(../../../../../assets/game/cards/movement/knight-blue.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-knight-black {
background-image: url(/assets/game/cards/movement/knight-black.png);
background-image: url(../../../../../assets/game/cards/movement/knight-black.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-king-yellow {
background-image: url(/assets/game/cards/movement/king-yellow.png);
background-image: url(../../../../../assets/game/cards/movement/king-yellow.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-king-red {
background-image: url(/assets/game/cards/movement/king-red.png);
background-image: url(../../../../../assets/game/cards/movement/king-red.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-king-blue {
background-image: url(/assets/game/cards/movement/king-blue.png);
background-image: url(../../../../../assets/game/cards/movement/king-blue.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-king-black {
background-image: url(/assets/game/cards/movement/king-black.png);
background-image: url(../../../../../assets/game/cards/movement/king-black.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-bishop-yellow {
background-image: url(/assets/game/cards/movement/bishop-yellow.png);
background-image: url(../../../../../assets/game/cards/movement/bishop-yellow.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-bishop-red {
background-image: url(/assets/game/cards/movement/bishop-red.png);
background-image: url(../../../../../assets/game/cards/movement/bishop-red.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-bishop-blue {
background-image: url(/assets/game/cards/movement/bishop-blue.png);
background-image: url(../../../../../assets/game/cards/movement/bishop-blue.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-bishop-black {
background-image: url(/assets/game/cards/movement/bishop-black.png);
background-image: url(../../../../../assets/game/cards/movement/bishop-black.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-assassin-yellow {
background-image: url(/assets/game/cards/movement/assassin-yellow.png);
background-image: url(../../../../../assets/game/cards/movement/assassin-yellow.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-assassin-red {
background-image: url(/assets/game/cards/movement/assassin-red.png);
background-image: url(../../../../../assets/game/cards/movement/assassin-red.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-assassin-blue {
background-image: url(/assets/game/cards/movement/assassin-blue.png);
background-image: url(../../../../../assets/game/cards/movement/assassin-blue.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
}
.sprite-movement-assassin-black {
background-image: url(/assets/game/cards/movement/assassin-black.png);
background-image: url(../../../../../assets/game/cards/movement/assassin-black.png);
background-repeat: no-repeat;
height: 193px;
width: 140px;
......@@ -227,7 +227,7 @@
.sprite-movement-assassin-red,
.sprite-movement-assassin-blue,
.sprite-movement-assassin-black {
/*background-image: url(/assets/game/sprites/cards.png);*/
/*background-image: url(../../../../../assets/game/sprites/cards.png);*/
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
......
......@@ -19,7 +19,7 @@ along with Arena of Titans. If not, see <http://www.gnu.org/licenses/>.
aot-infos {
.element-infos {
background-image: url(/assets/game/backgrounds/popup-ingame.png);
background-image: url(../../../../../assets/game/backgrounds/popup-ingame.png);
background-repeat: no-repeat;
background-size: 150px 160px;
font-family: "Roboto Condensed", sans-serif;
......
......@@ -20,9 +20,11 @@
import * as LogManager from "aurelia-logging";
import { inject } from "aurelia-framework";
import { I18N } from "aurelia-i18n";
import { AssetSource } from "../../services/assets";
import { Sounds } from "./sounds";
import { EventAggregatorSubscriptions } from "../services/utils";
import { EventAggregatorSubscriptions } from "./utils";
import favicon from "../../../assets/favicon.png";
import faviconNotify from "../../../assets/favicon-notify.png";
const PLAY_VOICE_TIMEOUT = 45000;
......@@ -39,8 +41,8 @@ export class Notify {
});
this._sounds = sounds;
this._head = document.head || (document.head = document.getElementsByTagName("head")[0]);
this._originalFaviconHref = AssetSource.forMiscImage("favicon");
this._notifyFavicon = AssetSource.forMiscImage("favicon-notify");
this._originalFaviconHref = favicon;
this._notifyFavicon = faviconNotify;
this._body = document.body || document.getElementByTagName("body")[0];
document.addEventListener("visibilitychange", () => this._handleVisibilityChange());
......
......@@ -27,11 +27,11 @@
<div class="lang-chooser option-line">
<img
src.bind="assetSource.forGlobalImage('french-flag')"
src.bind="assetSources.frenchFlag"
click.delegate="changeLang('fr')"
/>
<img
src.bind="assetSource.forGlobalImage('english-flag')"
src.bind="assetSources.englishFlag"
click.delegate="changeLang('en')"
/>
</div>
......
......@@ -21,14 +21,19 @@
import { inject } from "aurelia-framework";
import { I18N } from "aurelia-i18n";
import { Options } from "../../services/options";
import { AssetSource } from "../../../services/assets";
import frenchFlag from "../../../../assets/components/french.png";
import englishFlag from "../../../../assets/components/english.png";
@inject(Options, I18N)
export class AotOptionsCustomElement {
constructor(options, i18n) {
this.options = options;
this.i18n = i18n;
this.assetSource = AssetSource;
this.assetSources = {
frenchFlag,
englishFlag,
};
}
activate(model) {
......
......@@ -20,7 +20,7 @@ along with Arena of Titans. If not, see <http://www.gnu.org/licenses/>.
@import "../../../style/media-queries";
aot-popup .popup-player-box {
background: url(/assets/game/backgrounds/popup.png) no-repeat;
background: url(../../../../assets/game/backgrounds/popup.png) no-repeat;
background-size: 100% 100%;
padding-bottom: 40px;
......
......@@ -47,12 +47,12 @@ aot-popup {
}
&.default {
background: url(/assets/game/backgrounds/popup.png) no-repeat;
background: url(../../../../assets/game/backgrounds/popup.png) no-repeat;
background-size: 100% 100%;
}
&.game-over {
background: url(/assets/game/backgrounds/popup-game-over.png) no-repeat;
background: url(../../../../assets/game/backgrounds/popup-game-over.png) no-repeat;
background-size: 100% 100%;
}
}
......
......@@ -18,7 +18,7 @@ along with Arena of Titans. If not, see <http://www.gnu.org/licenses/>.
*/
aot-popup .popup-transition {
background: url(/assets/game/backgrounds/popup-transition.png) no-repeat;
background: url(../../../../assets/game/backgrounds/popup-transition.png) no-repeat;
background-size: 100% 100%;
height: 20vh;
max-width: 100%;
......
......@@ -271,7 +271,8 @@ aot-popup .popup-trump-animation {
animation-duration: 0.5s;
animation-iteration-count: 2;
animation-name: powerup_big;
background: url("/assets/game/backgrounds/animation-power-up-big.png") no-repeat;
background: url("../../../../assets/game/backgrounds/animation-power-up-big.png")
no-repeat;
background-size: 50% 50%;
bottom: 40vh;
height: 100vh;
......@@ -312,7 +313,8 @@ aot-popup .popup-trump-animation {
animation-duration: 0.5s;
animation-iteration-count: 2;
animation-name: powerup_small;
background: url("/assets/game/backgrounds/animation-power-up-small.png") no-repeat;
background: url("../../../../assets/game/backgrounds/animation-power-up-small.png")
no-repeat;
background-size: 50% 50%;
bottom: 140vh;
height: 100vh;
......
......@@ -19,7 +19,7 @@
<template>
<audio ref="audio">
<source src.bind="assetSource.forSound(sound, 'mp3')" type="audio/mp3" />
<source src.bind="assetSource.forSound(sound, 'ogg')" type="audio/ogg" />
<source src.bind="forSound(sound, 'mp3')" type="audio/mp3" />
<source src.bind="forSound(sound, 'ogg')" type="audio/ogg" />
</audio>
</template>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment