diff --git a/SRC/public/css/memory.css b/SRC/public/css/memory.css new file mode 100644 index 0000000..338e8cf --- /dev/null +++ b/SRC/public/css/memory.css @@ -0,0 +1,576 @@ +/* ============================================================================= + RESET, BOX SIZING, & CLEARFIX +============================================================================= */ + +*, +*::before, +*::after { + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.clearfix:after { + content: ""; + display: table; + clear: both; +} + +/* ============================================================================= + BASE +============================================================================= */ + +img { + display: block; + max-width: 100%; + height: auto; +} + +/* ============================================================================= + LAYOUT +============================================================================= */ +/* wrapper */ +.wrapper { + margin: 0 auto; + width: 100%; + min-width: 480px; +} + +/* container */ +.container { + margin: 0 auto; + width: 100%; + max-width: 1024px; +} + +/* ============================================================================= + MEMORY GAME (mg) +============================================================================= */ +/** + * Game container + * + * This is the overall container for the game. Different things get addead and + * removed from this container depending on the game state. + */ +.mg { + /* blank */ +} + +/** + * Game meta + * + * The game meta is the section that displays the level and moves. It's appended + * to the game container at the start, and shows the level the user selected + * and the number of moves the user has played. + */ +.mg__meta { + margin-bottom: 10px; + color: #28aadc; +} + +.mg__meta--item { + display: inline-block; +} + +.mg__meta--left { + float: left; +} + +.mg__meta--right { + float: right; +} + +.mg__meta--level { + margin-right: 20px; +} + +/** + * Game start screen + * + * The game start screen shows the "welcome" message and also a list for the + * user to choose a level. It's appended to the game container at the start, + * and once the user selects a level, it is removed from the container + */ +.mg__start-screen { + text-align: center; + padding: 80px 20px; +} + +.mg__start-screen--heading { + margin-bottom: 10px; + color: #282a2f; + font-size: 30px; +} + +.mg__start-screen--sub-heading { + font-size: 24px; + margin-bottom: 10px; + color: #28aadc; +} +.mg__start-screen--sub-heading::before, .mg__start-screen--sub-heading::after { + margin: 0 5px; + content: "-"; +} + +.mg__start-screen--text { + margin-bottom: 20px; +} + +.mg__start-screen--level-select { + list-style: none; + margin: 0; + padding: 0; +} +.mg__start-screen--level-select span { + color: #ff3c50; + font-size: 18px; + cursor: pointer; +} +.mg__start-screen--level-select span:hover { + color: #d50016; +} + +/** + * Game wrapper + * + * The game wrapper is where the actual game resides. Inside here, all the + * memory tiles get arranged and ready for game play. + */ +.mg__wrapper { + margin: 0 auto; + width: 100%; +} + +.mg__contents { + position: relative; + padding-bottom: 50%; + margin-left: -5px; + margin-right: -5px; +} + +/** + * Game tiles + * + * The game tiles are the tiles that are laid down on the memory game board. + * These tiles are the ones that the user clicks on to flip and reveal some + * images. The level the user selects determines the position and size of + * the tiles. + */ +.mg__tile { + position: absolute; + padding: 5px; +} + +/* game__level-1 styles */ +.mg__level-1 .mg__tile { + width: 25%; + height: 50%; +} + +.mg__level-1 .mg__tile-1 { + top: 0%; + left: 0%; +} +.mg__level-1 .mg__tile-2 { + top: 0%; + left: 25%; +} +.mg__level-1 .mg__tile-3 { + top: 0%; + left: 50%; +} +.mg__level-1 .mg__tile-4 { + top: 0%; + left: 75%; +} +.mg__level-1 .mg__tile-5 { + top: 50%; + left: 0%; +} +.mg__level-1 .mg__tile-6 { + top: 50%; + left: 25%; +} +.mg__level-1 .mg__tile-7 { + top: 50%; + left: 50%; +} +.mg__level-1 .mg__tile-8 { + top: 50%; + left: 75%; +} + +/* game__level-2 styles */ +.mg__level-2 .mg__tile { + width: 16.66667%; + height: 33.33333%; +} + +.mg__level-2 .mg__tile-1 { + top: 0%; + left: 0%; +} +.mg__level-2 .mg__tile-2 { + top: 0%; + left: 16.66667%; +} +.mg__level-2 .mg__tile-3 { + top: 0%; + left: 33.33333%; +} +.mg__level-2 .mg__tile-4 { + top: 0%; + left: 50%; +} +.mg__level-2 .mg__tile-5 { + top: 0%; + left: 66.66667%; +} +.mg__level-2 .mg__tile-6 { + top: 0%; + left: 83.33333%; +} +.mg__level-2 .mg__tile-7 { + top: 33.33333%; + left: 0%; +} +.mg__level-2 .mg__tile-8 { + top: 33.33333%; + left: 16.66667%; +} +.mg__level-2 .mg__tile-9 { + top: 33.33333%; + left: 33.33333%; +} +.mg__level-2 .mg__tile-10 { + top: 33.33333%; + left: 50%; +} +.mg__level-2 .mg__tile-11 { + top: 33.33333%; + left: 66.66667%; +} +.mg__level-2 .mg__tile-12 { + top: 33.33333%; + left: 83.33333%; +} +.mg__level-2 .mg__tile-13 { + top: 66.66667%; + left: 0%; +} +.mg__level-2 .mg__tile-14 { + top: 66.66667%; + left: 16.66667%; +} +.mg__level-2 .mg__tile-15 { + top: 66.66667%; + left: 33.33333%; +} +.mg__level-2 .mg__tile-16 { + top: 66.66667%; + left: 50%; +} +.mg__level-2 .mg__tile-17 { + top: 66.66667%; + left: 66.66667%; +} +.mg__level-2 .mg__tile-18 { + top: 66.66667%; + left: 83.33333%; +} + +/* game__level-3 styles */ +.mg__level-3 .mg__tile { + width: 12.5%; + height: 25%; +} + +.mg__level-3 .mg__tile-1 { + top: 0%; + left: 0%; +} +.mg__level-3 .mg__tile-2 { + top: 0%; + left: 12.5%; +} +.mg__level-3 .mg__tile-3 { + top: 0%; + left: 25%; +} +.mg__level-3 .mg__tile-4 { + top: 0%; + left: 37.5%; +} +.mg__level-3 .mg__tile-5 { + top: 0%; + left: 50%; +} +.mg__level-3 .mg__tile-6 { + top: 0%; + left: 62.5%; +} +.mg__level-3 .mg__tile-7 { + top: 0%; + left: 75%; +} +.mg__level-3 .mg__tile-8 { + top: 0%; + left: 87.5%; +} +.mg__level-3 .mg__tile-9 { + top: 25%; + left: 0%; +} +.mg__level-3 .mg__tile-10 { + top: 25%; + left: 12.5%; +} +.mg__level-3 .mg__tile-11 { + top: 25%; + left: 25%; +} +.mg__level-3 .mg__tile-12 { + top: 25%; + left: 37.5%; +} +.mg__level-3 .mg__tile-13 { + top: 25%; + left: 50%; +} +.mg__level-3 .mg__tile-14 { + top: 25%; + left: 62.5%; +} +.mg__level-3 .mg__tile-15 { + top: 25%; + left: 75%; +} +.mg__level-3 .mg__tile-16 { + top: 25%; + left: 87.5%; +} +.mg__level-3 .mg__tile-17 { + top: 50%; + left: 0%; +} +.mg__level-3 .mg__tile-18 { + top: 50%; + left: 12.5%; +} +.mg__level-3 .mg__tile-19 { + top: 50%; + left: 25%; +} +.mg__level-3 .mg__tile-20 { + top: 50%; + left: 37.5%; +} +.mg__level-3 .mg__tile-21 { + top: 50%; + left: 50%; +} +.mg__level-3 .mg__tile-22 { + top: 50%; + left: 62.5%; +} +.mg__level-3 .mg__tile-23 { + top: 50%; + left: 75%; +} +.mg__level-3 .mg__tile-24 { + top: 50%; + left: 87.5%; +} +.mg__level-3 .mg__tile-25 { + top: 75%; + left: 0%; +} +.mg__level-3 .mg__tile-26 { + top: 75%; + left: 12.5%; +} +.mg__level-3 .mg__tile-27 { + top: 75%; + left: 25%; +} +.mg__level-3 .mg__tile-28 { + top: 75%; + left: 37.5%; +} +.mg__level-3 .mg__tile-29 { + top: 75%; + left: 50%; +} +.mg__level-3 .mg__tile-30 { + top: 75%; + left: 62.5%; +} +.mg__level-3 .mg__tile-31 { + top: 75%; + left: 75%; +} +.mg__level-3 .mg__tile-32 { + top: 75%; + left: 87.5%; +} + +/** + * The tile inside + * + * The "tile inner" is the part of the tile that serves as the card. Inside + * this part, there's an outside and inside part. The outside of the card + * is the part that has the logo or the pattern or whatever...basically the + * part that doesn't show the content to be matched. The inside part has the + * actual images / info to be matched. + */ +.mg__tile--inner { + position: relative; + width: 100%; + height: 100%; + cursor: pointer; +} + +.mg__tile--outside, +.mg__tile--inside { + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transition: -webkit-transform 0.3s, background 0.3s; + transition: transform 0.3s, background 0.3s; +} + +.mg__tile--outside { + background: url("../img/default/logo-bw.png") 50% 50% no-repeat; + background-color: #dcdee1; + box-shadow: 0 0 0 1px #787a80; +} + +.mg__tile--inside { + background-color: #f8fafc; + box-shadow: 0 0 0 1px #787a80; + -webkit-transform: rotateY(-180deg); + transform: rotateY(-180deg); +} + +/* some transforms for flipped cards */ +.mg__tile--inner.flipped .mg__tile--outside { + -webkit-transform: rotateY(-180deg); + transform: rotateY(-180deg); +} + +.mg__tile--inner.flipped .mg__tile--inside { + -webkit-transform: rotateY(0); + transform: rotateY(0); +} + +/* some transitions for correct guesses - only needs to happen on card inside */ +.mg__tile--inner.flipped.correct .mg__tile--inside { + background-color: #ffffdc; +} + +/** + * Game message + * + * The game message area is an area to display game messages. It's used in the + * default set up where no callback is set in the JS. If a callback is set up, + * then this message area likely won't display. Unless you decide to display it + * in your own custom callback though! + */ +.mg__onend { + padding: 80px 20px; + text-align: center; +} + +.mg__onend--heading { + margin-bottom: 10px; + color: #28aadc; + font-size: 30px; +} + +.mg__onend--message { + margin-bottom: 10px; +} + +/** + * Game buttons + * + * A simple helper class for game buttons. Edit at your will. + */ +.mg__button { + margin: 0; + display: inline-block; + padding: 5px; + color: #fff; + font-family: "Roboto Slab", serif; + font-size: 14px; + appearance: none; + background: #ff3c50; + border: none; + border-radius: 3px; + box-shadow: none; + cursor: pointer; +} + +/* ============================================================================= + SOME SOCIAL STYLES +============================================================================= */ +.fb-like, +.twitter-share-button { + display: inline-block; + vertical-align: middle; +} + +.fb-like { + margin-right: 10px; +} + +/* ============================================================================= + FUSION ADS +============================================================================= */ +/** + * Fusion ads styles + * + * These are all the styles for my fusion ads. I'd reccommend deleting them if + * you are going to use this in your own app, because they are useless and you + * shouldn't be displaying my ad on your app/site in the first place. Thanks! + */ +#fusionads { + display: inline-block; + padding: 5px; + background: white; + font-size: 11px; + line-height: 1.2; + text-align: left; +} + +#fusionads .fusion-wrap { + display: block; + margin: 0 0 5px 0; + width: 130px; +} + +#fusionads a.fusion-text { + display: block; + color: #787a80; +} + +#fusionads a.fusion-img { + display: block; + margin-bottom: 5px; + width: 130px; + height: 100px; + background-color: #fff; +} + +#fusionads a.fusion-img img { + display: block; + margin: 0 0 10px 0; +} + +#fusionads a.fusion-poweredby { + color: #28aadc; +} diff --git a/SRC/public/js/classList.min.js b/SRC/public/js/classList.min.js new file mode 100644 index 0000000..e766411 --- /dev/null +++ b/SRC/public/js/classList.min.js @@ -0,0 +1 @@ +"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var a=document.createElement("_");if(a.classList.add("c1","c2"),!a.classList.contains("c2")){var b=function(a){var b=DOMTokenList.prototype[a];DOMTokenList.prototype[a]=function(a){var c,d=arguments.length;for(c=0;d>c;c++)a=arguments[c],b.call(this,a)}};b("add"),b("remove")}if(a.classList.toggle("c3",!1),a.classList.contains("c3")){var c=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(a,b){return 1 in arguments&&!this.contains(a)==!b?b:c.call(this,a)}}a=null}():!function(a){"use strict";if("Element"in a){var b="classList",c="prototype",d=a.Element[c],e=Object,f=String[c].trim||function(){return this.replace(/^\s+|\s+$/g,"")},g=Array[c].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1},h=function(a,b){this.name=a,this.code=DOMException[a],this.message=b},i=function(a,b){if(""===b)throw new h("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(b))throw new h("INVALID_CHARACTER_ERR","String contains an invalid character");return g.call(a,b)},j=function(a){for(var b=f.call(a.getAttribute("class")||""),c=b?b.split(/\s+/):[],d=0,e=c.length;e>d;d++)this.push(c[d]);this._updateClassName=function(){a.setAttribute("class",this.toString())}},k=j[c]=[],l=function(){return new j(this)};if(h[c]=Error[c],k.item=function(a){return this[a]||null},k.contains=function(a){return a+="",-1!==i(this,a)},k.add=function(){var a,b=arguments,c=0,d=b.length,e=!1;do a=b[c]+"",-1===i(this,a)&&(this.push(a),e=!0);while(++c\ + \ + Coups: \ + ' + this.numMoves + '\ + \ + \ +
\ + \ +
'; + this.gameMeta.innerHTML = this.gameMetaHTML; + this.game.appendChild(this.gameMeta); + + this.gameStartScreenHTML = '

Welcome to the Memory Game!

\ +

blablabla

\ +

Choisir niveau

\ + '; + this.gameStartScreen.innerHTML = this.gameStartScreenHTML; + this.game.appendChild(this.gameStartScreen); + + document.getElementById("mg__button--restart").addEventListener( "click", function(e) { + self.resetGame(); + }); + + this._startScreenEvents(); + } + + /** + * Memory _startScreenEvents + * + * We're now listening for events on the start screen. That is, we're waiting + * for when a user chooses a level. + */ + + Memory.prototype._startScreenEvents = function() { + var levelsNodes = this.gameStartScreen.querySelectorAll("ul.mg__start-screen--level-select span"); + for ( var i = 0, len = levelsNodes.length; i < len; i++ ) { + var levelNode = levelsNodes[i]; + this._startScreenEventsHandler(levelNode); + } + }; + + /** + * Memoery _startScreenEventsHandler + * + * A helper function to handle the click of the level inside the events + * function. + */ + + Memory.prototype._startScreenEventsHandler = function(levelNode) { + var self = this; + levelNode.addEventListener( "click", function(e) { + if (self.gameState === 1) { + self._setupGameWrapper(this); + } + }); + } + + /** + * Memory _setupGameWrapper + * + * This function sets up the game wrapper, which is where the actual memory + * tiles will reside and where all the game play happens. + */ + + Memory.prototype._setupGameWrapper = function(levelNode) { + this.level = levelNode.getAttribute("data-level"); + this.gameStartScreen.parentNode.removeChild(this.gameStartScreen); + this.gameContents.className = "mg__contents mg__level-"+this.level; + this.game.appendChild(this.gameWrapper); + + this.chosenLevel = this.level; + document.getElementById("mg__meta--level").innerHTML = this.chosenLevel; + + this._renderTiles(); + }; + + + /** + * Memory _renderTiles + * + * This renders the actual tiles with content. A few thing happen here: + * + * 1. Calculate grid X and Y based on user level selection + * 2. Calculate num tiles + * 3. Create new cards array based on level, and draw cards from original array + * 4. Shuffle the new cards array + * 5. Cards get distributed into tiles + * 6. gamePlay function gets triggered, taking care of all the game play action. + */ + + Memory.prototype._renderTiles = function() { + if(this.level == 1) {this.gridX = 2; this.gridY= 2; } + else if(this.level == 2) {this.gridX = 3; this.gridY= 2; } + else { this.gridX = 4; this.gridY=2 ; } + // this.gridY = this.gridX ; + this.numTiles = this.gridX * this.gridY; + //this.halfNumTiles = this.gridX; + this.halfNumTiles = this.numTiles/2; + this.newCards = []; + for ( var i = 0; i < this.halfNumTiles; i++ ) { + this.newCards.push(this.cards[i], this.cards[i]); + } + this.newCards = shuffle(this.newCards); + this.tilesHTML = ''; + for ( var i = 0; i < this.numTiles; i++ ) { + var n = i + 1; + this.tilesHTML += '
\ +
\ + \ + '; + this.tilesHTML +='
'; + this.tilesHTML +='
'; + /* if(this.level == 1 && n == 2){ + this.tilesHTML +=""; + }*/ + + } + this.tilesHTML +=""; + this.gameContents.innerHTML = this.tilesHTML; + this.gameState = 2; + this.options.onGameStart(); + this._gamePlay(); + } + + /** + * Memory _gamePlay + * + * Now that all the HTML is set up, the game is ready to be played. In this + * function, we loop through all the tiles (goverend by the .mg__tile--inner) + * class, and for each tile, we run the _gamePlayEvents function. + */ + + Memory.prototype._gamePlay = function() { + var tiles = document.querySelectorAll(".mg__tile--inner"); + for (var i = 0, len = tiles.length; i < len; i++) { + var tile = tiles[i]; + this._gamePlayEvents(tile); + }; + }; + + /** + * Memory _gamePlayEvents + * + * This function takes care of the "events", which is basically the clicking + * of tiles. Tiles need to be checked if flipped or not, flipped if possible, + * and if zero, one, or two cards are flipped. When two cards are flipped, we + * have to check for matches and mismatches. The _gameCardsMatch and + * _gameCardsMismatch functions perform two separate sets of functions, and are + * thus separated below. + */ + + Memory.prototype._gamePlayEvents = function(tile) { + var self = this; + tile.addEventListener( "click", function(e) { + if (!this.classList.contains("flipped")) { + if (self.card1flipped === false && self.card2flipped === false) { + this.classList.add("flipped"); + self.card1 = this; + self.card1id = this.getAttribute("data-id"); + self.card1flipped = true; + } else if( self.card1flipped === true && self.card2flipped === false ) { + this.classList.add("flipped"); + self.card2 = this; + self.card2id = this.getAttribute("data-id"); + self.card2flipped = true; + if ( self.card1id == self.card2id ) { + self._gameCardsMatch(); + } else { + self._gameCardsMismatch(); + } + } + } + }); + } + + /** + * Memory _gameCardsMatch + * + * This function runs if the cards match. The "correct" class is added briefly + * which fades in a background green colour. The times set on the two timeout + * functions are chosen based on transition values in the CSS. The "flip" has + * a 0.3s transition, so the "correct" class is added 0.3s later, shown for + * 1.2s, then removed. The cards remain flipped due to the activated "flip" + * class from the gamePlayEvents function. + */ + + Memory.prototype._gameCardsMatch = function() { + // cache this + var self = this; + + // add correct class + window.setTimeout( function(){ + self.card1.classList.add("correct"); + self.card2.classList.add("correct"); + }, 300 ); + + // remove correct class and reset vars + window.setTimeout( function(){ + self.card1.classList.remove("correct"); + self.card2.classList.remove("correct"); + self._gameResetVars(); + self.flippedTiles = self.flippedTiles + 2; + if (self.flippedTiles == self.numTiles) { + self._winGame(); + } + }, 1500 ); + + // plus one on the move counter + this._gameCounterPlusOne(); + }; + + /** + * Memory _gameCardsMismatch + * + * This function runs if the cards mismatch. If the cards mismatch, we leave + * them flipped for a little while so the user can see and remember what cards + * they actually are. Then after that slight delay, we removed the flipped + * class so they flip back over, and reset the vars. + */ + + Memory.prototype._gameCardsMismatch = function() { + // cache this + var self = this; + + // remove "flipped" class and reset vars + window.setTimeout( function(){ + self.card1.classList.remove("flipped"); + self.card2.classList.remove("flipped"); + self._gameResetVars(); + }, 900 ); + + // plus one on the move counter + this._gameCounterPlusOne(); + }; + + /** + * Memory _gameResetVars + * + * For each turn, some variables are updated for reference. After the turn is + * over, we need to reset these variables and get ready for the next turn. + * This function handles all of that. + */ + + Memory.prototype._gameResetVars = function() { + this.card1 = ""; + this.card2 = ""; + this.card1id = ""; + this.card2id = ""; + this.card1flipped = false; + this.card2flipped = false; + } + + /** + * Memory _gameCounterPlusOne + * + * Each turn, the user completes 1 "move". The obective of memory is to + * complete the game in as few moves as possible. Users need to know how many + * moves they've had so far, so this function updates that number and updates + * the HTML also. + */ + + Memory.prototype._gameCounterPlusOne = function() { + this.numMoves = this.numMoves + 1; + this.moveCounterUpdate = document.getElementById("mg__meta--moves").innerHTML = this.numMoves; + }; + + /** + * Memory _clearGame + * + * This function clears the game wrapper, by removing it from the game div. It + * allows us to rerun setupGame, and clears the air for other info like + * victory messages etc. + */ + + Memory.prototype._clearGame = function() { + if (this.gameMeta.parentNode !== null) this.game.removeChild(this.gameMeta); + if (this.gameStartScreen.parentNode !== null) this.game.removeChild(this.gameStartScreen); + if (this.gameWrapper.parentNode !== null) this.game.removeChild(this.gameWrapper); + if (this.gameMessages.parentNode !== null) this.game.removeChild(this.gameMessages); + } + + /** + * Memoray _winGame + * + * You won the game! This function runs the "onGameEnd" callback, which by + * default clears the game div entirely and shows a "play again" button. + */ + + Memory.prototype._winGame = function() { + var self = this; + if (this.options.onGameEnd() === false) { + this._clearGame(); + this.gameMessages.innerHTML = '

Bravo !

\ +

Vous avez gagné votre partie en ' + this.numMoves + ' coups.

\ + '; + this.game.appendChild(this.gameMessages); + document.getElementById("mg__onend--restart").addEventListener( "click", function(e) { + self.resetGame(); + }); + } else { + // run callback + this.options.onGameEnd(); + } + } + + /** + * Memory resetGame + * + * This function resets the game. It can run at the end of the game when the + * user is presented the option to play again, or at any time like a reset + * button. It is a public function, and can be used in whatever custom calls + * in your markup. + */ + + Memory.prototype.resetGame = function() { + this._clearGame(); + this._setupGame(); + }; + + /** + * Add Memory to global namespace + */ + + window.Memory = Memory; + +})( window ); diff --git a/SRC/public/pictures/default/logo-bw.png b/SRC/public/pictures/default/logo-bw.png new file mode 100644 index 0000000..719dc15 Binary files /dev/null and b/SRC/public/pictures/default/logo-bw.png differ diff --git a/SRC/public/pictures/default/logo-bw2.png b/SRC/public/pictures/default/logo-bw2.png new file mode 100644 index 0000000..38dbf96 Binary files /dev/null and b/SRC/public/pictures/default/logo-bw2.png differ diff --git a/SRC/public/pictures/default/monsters-01.png b/SRC/public/pictures/default/monsters-01.png new file mode 100644 index 0000000..2f623ba Binary files /dev/null and b/SRC/public/pictures/default/monsters-01.png differ diff --git a/SRC/public/pictures/default/monsters-02.png b/SRC/public/pictures/default/monsters-02.png new file mode 100644 index 0000000..74619dd Binary files /dev/null and b/SRC/public/pictures/default/monsters-02.png differ diff --git a/SRC/public/pictures/default/monsters-03.png b/SRC/public/pictures/default/monsters-03.png new file mode 100644 index 0000000..883c11e Binary files /dev/null and b/SRC/public/pictures/default/monsters-03.png differ diff --git a/SRC/public/pictures/default/monsters-04.png b/SRC/public/pictures/default/monsters-04.png new file mode 100644 index 0000000..4d80858 Binary files /dev/null and b/SRC/public/pictures/default/monsters-04.png differ diff --git a/SRC/public/pictures/default/monsters-05.png b/SRC/public/pictures/default/monsters-05.png new file mode 100644 index 0000000..3d8d37e Binary files /dev/null and b/SRC/public/pictures/default/monsters-05.png differ diff --git a/SRC/public/pictures/default/monsters-06.png b/SRC/public/pictures/default/monsters-06.png new file mode 100644 index 0000000..f0b6975 Binary files /dev/null and b/SRC/public/pictures/default/monsters-06.png differ diff --git a/SRC/public/pictures/default/monsters-07.png b/SRC/public/pictures/default/monsters-07.png new file mode 100644 index 0000000..aef65d2 Binary files /dev/null and b/SRC/public/pictures/default/monsters-07.png differ diff --git a/SRC/public/pictures/default/monsters-08.png b/SRC/public/pictures/default/monsters-08.png new file mode 100644 index 0000000..90d4f56 Binary files /dev/null and b/SRC/public/pictures/default/monsters-08.png differ diff --git a/SRC/public/pictures/default/monsters-09.png b/SRC/public/pictures/default/monsters-09.png new file mode 100644 index 0000000..03377b7 Binary files /dev/null and b/SRC/public/pictures/default/monsters-09.png differ diff --git a/SRC/public/pictures/default/monsters-10.png b/SRC/public/pictures/default/monsters-10.png new file mode 100644 index 0000000..18afe7d Binary files /dev/null and b/SRC/public/pictures/default/monsters-10.png differ diff --git a/SRC/public/pictures/default/monsters-11.png b/SRC/public/pictures/default/monsters-11.png new file mode 100644 index 0000000..3137744 Binary files /dev/null and b/SRC/public/pictures/default/monsters-11.png differ diff --git a/SRC/public/pictures/default/monsters-12.png b/SRC/public/pictures/default/monsters-12.png new file mode 100644 index 0000000..89816d1 Binary files /dev/null and b/SRC/public/pictures/default/monsters-12.png differ diff --git a/SRC/public/pictures/default/monsters-13.png b/SRC/public/pictures/default/monsters-13.png new file mode 100644 index 0000000..16a5bce Binary files /dev/null and b/SRC/public/pictures/default/monsters-13.png differ diff --git a/SRC/public/pictures/default/monsters-14.png b/SRC/public/pictures/default/monsters-14.png new file mode 100644 index 0000000..f285502 Binary files /dev/null and b/SRC/public/pictures/default/monsters-14.png differ diff --git a/SRC/public/pictures/default/monsters-15.png b/SRC/public/pictures/default/monsters-15.png new file mode 100644 index 0000000..015e230 Binary files /dev/null and b/SRC/public/pictures/default/monsters-15.png differ diff --git a/SRC/public/pictures/default/monsters-16.png b/SRC/public/pictures/default/monsters-16.png new file mode 100644 index 0000000..a583875 Binary files /dev/null and b/SRC/public/pictures/default/monsters-16.png differ diff --git a/SRC/resources/views/app.blade.php b/SRC/resources/views/app.blade.php index 25e7769..a62e1ea 100755 --- a/SRC/resources/views/app.blade.php +++ b/SRC/resources/views/app.blade.php @@ -11,6 +11,10 @@ + + + + @@ -29,6 +33,90 @@ @endif @yield('content') + + + + + + + + + + @@ -39,7 +127,7 @@ - +