Skip to content

Commit

Permalink
fixing start menu avatars missing
Browse files Browse the repository at this point in the history
  • Loading branch information
@Larkenx
Larkenx committed Dec 25, 2018
1 parent 160622a commit 469a531
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 73 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rotten-soup",
"version": "0.4.0",
"version": "0.4.2",
"private": false,
"scripts": {
"start": "node server",
Expand Down
66 changes: 35 additions & 31 deletions src/components/Game.vue
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,39 @@
<template >
<v-container class="pa-0" fill-height>
<div class="pa-0" v-show="playerSelected">
<div id="root_container">
<!-- Game Display -->
<div id="game_container" :style="getGameContainerStyling()" />
<!-- The game overlay -->
<div id="game_overlay_view" v-show="overlayVisible()" :is="overlayData.component" :style="getGameOverlayStyling()" :positioning="getGameOverlayPositioning()" />
<!-- The HUD -->
<div id="hud" :style="getHUDStyling()" v-if="playerSelected">
<hud />
</div>
</div>
<death-modal v-if="playerSelected"></death-modal>
<v-dialog v-model="navigateAwayModalActive" max-width="600px">
<v-card>
<v-card-text class="text-xs-center">
<h2 class="pa-1">Navigating Away</h2>
</v-card-text>
<v-card-text>
If you navigate away, you will lose your progress with this game! Are you sure you want to navigate away?
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="yellow darken-4" raised @click.native="navigate(true)">Continue</v-btn>
<v-btn color="yellow darken-4" flat @click.native="navigate(false)">Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
<start-menu v-show="!playerSelected" v-on:spriteSelected="loadGame"></start-menu>
</v-container>
<v-container class="pa-0" fill-height>
<div class="pa-0" v-show="playerSelected">
<div id="root_container">
<!-- Game Display -->
<div id="game_container" :style="getGameContainerStyling()"/>
<!-- The game overlay -->
<div
id="game_overlay_view"
v-show="overlayVisible()"
:is="overlayData.component"
:style="getGameOverlayStyling()"
:positioning="getGameOverlayPositioning()"
/>
<!-- The HUD -->
<div id="hud" :style="getHUDStyling()" v-if="playerSelected">
<hud/>
</div>
</div>
<death-modal v-if="playerSelected"></death-modal>
<v-dialog v-model="navigateAwayModalActive" max-width="600px">
<v-card>
<v-card-text class="text-xs-center">
<h2 class="pa-1">Navigating Away</h2>
</v-card-text>
<v-card-text>If you navigate away, you will lose your progress with this game! Are you sure you want to navigate away?</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="yellow darken-4" raised @click.native="navigate(true)">Continue</v-btn>
<v-btn color="yellow darken-4" flat @click.native="navigate(false)">Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
<start-menu v-show="!playerSelected" v-on:spriteSelected="loadGame"></start-menu>
</v-container>
</template>

<script>
Expand Down
84 changes: 43 additions & 41 deletions src/components/StartMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,30 +25,30 @@
</style>

<template>
<v-container fluid grid-list-xl>
<v-layout row>
<v-flex xs12>
<h2>Welcome to Rotten Soup</h2>
</v-flex>
</v-layout>
<v-layout row>
<v-flex>
<h3>Select your hero by clicking on the character you want to play</h3>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex style="padding: 10px" xs4 v-for="(sprite, index) in playerSprites" :key="index">
<!-- Card representing player class -->
<v-card style="padding: 25px">
<!-- Class name and short description -->
<v-layout row>
<div>
<h3>{{sprite.name}}</h3>
<p>{{sprite.description}}</p>
</div>
</v-layout>
<!-- Class abilities and stats-->
<!-- <v-layout row>
<v-container fluid grid-list-xl>
<v-layout row>
<v-flex xs12>
<h2>Welcome to Rotten Soup</h2>
</v-flex>
</v-layout>
<v-layout row>
<v-flex>
<h3>Select your hero by clicking on the character you want to play</h3>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex style="padding: 10px" xs4 v-for="(sprite, index) in playerSprites" :key="index">
<!-- Card representing player class -->
<v-card style="padding: 25px">
<!-- Class name and short description -->
<v-layout row>
<div>
<h3>{{sprite.name}}</h3>
<p>{{sprite.description}}</p>
</div>
</v-layout>
<!-- Class abilities and stats-->
<!-- <v-layout row>
<div>
<p>
Abilities
Expand All @@ -68,22 +68,24 @@
</v-layout>
</v-flex>
</div>
</v-layout> -->
<!-- Possible sprites player can choose to play -->
<v-layout row>
<h5>
Characters
</h5>
</v-layout>
<v-layout row>
<v-flex class="mr-2 ml-2" xs1 v-for="id in sprite.sprites" :key="id">
<img v-on:click="selectSprite(id)" v-bind:class="{spriteIsSelected : (selectedSprite === id), sprite : (selectedSprite !== id)}" :src="getPlayerSpriteImage(id)" />
</v-flex>
</v-layout>
</v-card>
</v-layout>-->
<!-- Possible sprites player can choose to play -->
<v-layout row>
<h5>Characters</h5>
</v-layout>
<v-layout row>
<v-flex class="mr-2 ml-2" xs1 v-for="id in sprite.sprites" :key="id">
<img
v-on:click="selectSprite(id)"
v-bind:class="{spriteIsSelected : (selectedSprite === id), sprite : (selectedSprite !== id)}"
:src="getPlayerSpriteImage(id)"
>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>

<script>
Expand Down Expand Up @@ -216,15 +218,15 @@ export default {
created() {},
methods: {
getPlayerSpriteImage(id) {
return `../static/images/player_sprites/${id}.png`
return `images/player_sprites/${id}.png`
},
selectSprite(id) {
this.$emit('spriteSelected', id)
// this.selectedSprite = id
// this.loadGame()
},
getSpellSplashArt(school, name) {
return `../static/images/spells/${school}/${name}.png`
return `images/spells/${school}/${name}.png`
}
}
}
Expand Down

0 comments on commit 469a531

Please sign in to comment.