Merge pull request Larkenx#41 from Larkenx/feature/dialogue-graphs

Feature/dialogue graphs

package.json

@@ -23,6 +23,8 @@
 		"rot-js": "^0.6.5",
 		"simplex-noise": "^2.4.0",
 		"vue": "^2.5.2",
+		"vue-router": "^3.0.1",
+		"vue2vis": "^0.0.13",
 		"vuedraggable": "^2.16.0",
 		"vuetify": "^1.0.0"
 	},

src/App.vue

@@ -1,35 +1,17 @@
 <template>
   <v-app dark class="black">
     <v-content>
-      <v-container v-show="playerSelected"  class="mt-3" id="main_container" :style="{'max-width': uiWidth+6, 'max-height': uiHeight+6}">
-          <!--  Notifications -->
-          <v-layout row v-if="unstableBuildMessage">
-            <v-flex xs12>
-              <v-alert color="yellow darken-4" type="warning" dismissible v-model="unstableBuildMessage">
-                This build is unstable. A lot of working is going on under the hood. Expect lots of broken, weird things!
-              </v-alert>
-            </v-flex>
-          </v-layout>
-          <!-- Game Display and HUD-->
-          <v-layout  row id="ui" :style="{'max-width': uiWidth, 'max-height': uiHeight}">
-            <v-flex column :style="{'max-width': gameDisplayWidth}">
-              <v-layout id="game_container_row" :style="{'max-height': gameDisplayHeight, 'max-width': gameDisplayWidth}">
-                <game-overlay-view ref="gameOverlayView" />
-                <div id="game_container" />
-              </v-layout>
-              <message-log v-if="playerSelected"></message-log>
-            </v-flex>
-            <hud v-if="playerSelected" :showEquipment="showFooter"></hud>
-          </v-layout>
-          <death-modal v-if="playerSelected"></death-modal>
-      </v-container>
-      <start-menu v-show="!playerSelected" v-on:spriteSelected="loadGame"></start-menu>
+      <router-view></router-view>
     </v-content>
     <v-footer app v-if="showFooter">
       <small class="pl-2">RottenSoup</small>
+      <v-spacer />
       <v-btn target="_blank" href="https://github.com/Larkenx/Rotten-Soup" icon ripple>
         <v-icon>fa-github</v-icon>
       </v-btn>
+        <v-btn target="_blank" href="https://twitter.com/stevenlarken" icon ripple>
+          <v-icon>fa-twitter</v-icon>
+        </v-btn>
     </v-footer>
   </v-app>
 </template>
@@ -66,134 +48,17 @@ export default {
 	name: 'app',
 	data() {
 		return {
-			mouseControls: false,
-			loading: true,
-			playerSelected: false,
-			unstableBuildMessage: false,
-			gameOverlayVisible: true,
-			gameOverlayData: {},
-			uiWidth,
-			uiHeight,
-			gameDisplayWidth,
-			gameDisplayHeight,
 			showFooter
 		}
 	},
-	mounted() {
-		window.addEventListener('resize', this.recomputeSize)
-		// this.loadGame(4219)
-	},
-	beforeDestroy() {
-		window.removeEventListener('resize', this.recomputeSize)
-	},
-	components: {
-		'game-overlay-view': gameOverlayView,
-		'start-menu': startMenu,
-		'game-display': gameDisplay,
-		hud: hud,
-		'item-transfer-modal': itemTransferModal,
-		'death-modal': deathModal,
-		'help-dialog': helpDialog,
-		'message-log': messageLog
-	},
+	components: {},
 	created() {},
-	methods: {
-		loadGame(id) {
-			this.playerSelected = true
-			Game.init(id, window)
-			Game.log('Welcome to Rotten Soup!', 'information')
-			Game.log('Press ? to view the controls.', 'player_move')
-		},
-		recomputeSize(evt) {
-			console.log('resizing!')
-			this.uiWidth = '1470px'
-			this.uiHeight = '823px'
-			this.showFooter = true
-			this.gameDisplayWidth = '1024px'
-			this.gameDisplayHeight = '640px'
-			if (window.innerWidth <= 1400 || window.innerHeight <= 800) {
-				this.uiWidth = '1240px'
-				this.uiHeight = '750px'
-				this.showFooter = false
-				this.gameDisplayWidth = '800px'
-				this.gameDisplayHeight = '500px'
-			}
-			Game.display.resize()
-		}
-	}
+	methods: {}
 }
 </script>
 
 <style>
-@import url('https://fonts.googleapis.com/css?family=Droid+Sans+Mono|PT+Mono');
 .black {
 	background-color: black;
 }
-
-html {
-	overflow: hidden;
-}
-
-* {
-	font-family: 'Droid Sans Mono', monospace;
-	-webkit-touch-callout: none;
-	/* iOS Safari */
-	-webkit-user-select: none;
-	/* Safari */
-	-khtml-user-select: none;
-	/* Konqueror HTML */
-	-moz-user-select: none;
-	/* Firefox */
-	-ms-user-select: none;
-	/* Internet Explorer/Edge */
-	user-select: none;
-}
-
-#main_container {
-	max-width: 1470px;
-	padding: 0px;
-}
-
-#game_container {
-	position: absolute;
-	z-index: 1;
-}
-
-#ui {
-	border: 3px solid #4f4f4f;
-	background-color: #1e1f1f;
-	border-radius: 4px;
-}
-
-#game_container_row {
-	height: 640px;
-	max-height: 640px;
-}
-
-.test {
-	background-color: #824d03;
-}
-
-/* Overriding Vuetify's tool tip so that it is centered :) */
-
-[data-tooltip] {
-	position: relative;
-	text-align: center;
-}
-
-.modal {
-	border: 2px solid #3d3d3d;
-	border-radius: 4px;
-	background-color: black;
-	color: white;
-	width: 400px;
-	padding: 10px;
-	/*height: 600px;*/
-	position: absolute;
-	left: 20%;
-	top: 25%;
-	/*margin-left: -150px;*/
-	z-index: 2;
-	/*margin-top: -150px;*/
-}
 </style>

src/assets/js/game/Game.js

@@ -18,7 +18,13 @@ import LevelTransition from '#/entities/misc/LevelTransition.js'
 import Chest from '#/entities/misc/Chest.js'
 
 const { randomSimplexMap, randomDungeon, randomCave } = MapGen
-
+const defaultMinimapConfiguration = {
+	width: 44,
+	height: 26,
+	fontSize: 11,
+	spacing: 0.6,
+	forceSquareRatio: true
+}
 export let Game = {
 	app: null,
 	overview: null,
@@ -50,7 +56,7 @@ export let Game = {
 	overlayData: {
 		visible: false,
 		component: null,
-		data: {}
+		dialogue: {}
 	},
 
 	init(playerSpriteID) {
@@ -65,13 +71,7 @@ export let Game = {
 			tileWidth: 32,
 			tileHeight: 32
 		}
-		this.minimapOptions = {
-			width: 44,
-			height: 26,
-			fontSize: 11,
-			spacing: 0.6,
-			forceSquareRatio: true
-		}
+		this.minimapOptions = { ...defaultMinimapConfiguration }
 		let onceLoaded = () => {
 			let { resources } = PIXI.loader
 			this.levels['Mulberry Town'] = createMapFromJSON(resources['mulberryTown'].data, 'Mulberry Town')
@@ -104,6 +104,12 @@ export let Game = {
 		this.display.background.addChild(this.targetReticle)
 	},
 
+	findActor(type, id) {
+		return this.map.actors.filter(a => {
+			return a instanceof type && a.id === id
+		})
+	},
+
 	scheduleAllActors() {
 		// Set up the ROT engine and scheduler
 		this.scheduler = new ROT.Scheduler.Simple()
@@ -135,9 +141,11 @@ export let Game = {
 	},
 
 	inViewport(x, y) {
-		let cx = Game.player.x - ~~(Game.width / 2)
-		let cy = Game.player.y - ~~(Game.height / 2)
-		return cx <= x && x <= cx + Game.width && cy <= y && y <= cy + Game.height
+		let width = ~~(Game.display.width / 2 / 32)
+		let height = ~~(Game.display.height / 2 / 32)
+		let cx = Game.player.x - width
+		let cy = Game.player.y - height
+		return cx <= x && x <= cx + Game.display.width / 32 && cy <= y && y <= cy + Game.display.height / 32
 	},
 
 	createDungeonFloors(origin, dungeonName, numberOfFloors) {
@@ -168,6 +176,7 @@ export let Game = {
 	},
 
 	changeLevels(mapID, dungeon = false) {
+		this.minimapOptions = { ...defaultMinimapConfiguration }
 		let nextMap = this.levels[mapID]
 		if (dungeon === true && !(mapID + 1 in this.levels)) {
 			this.createDungeonFloors(this.currentLevel.name, mapID, 20)
@@ -406,7 +415,7 @@ export let Game = {
 
 	cycleThroughSelectableEnemies() {
 		if (this.enemyCycle === null) {
-			this.enemyCycle = this.getNearbyEnemies()
+			this.enemyCycle = this.getNearbyEnemies().filter(e => this.map.visible_tiles[e.x + ',' + e.y])
 			this.enemyCycleIndex = 0
 		}
 		// if there's more than one enemy, we can cycle to the next closest enemy
@@ -448,7 +457,9 @@ export let Game = {
 		}
 
 		if ((Game.player.targeting || Game.player.casting) && this.selectedTile !== null) {
-			let inView = Game.map.data[this.selectedTile.y][this.selectedTile.x].actors ? ' This tile is out of range or blocked.' : ''
+			const { x, y } = this.selectedTile
+			let visible = x + ',' + y in this.map.visible_tiles && !this.getTile(x, y).obstacles.some(o => o.blocked)
+			let inView = !visible ? ' This tile is out of range or blocked.' : ''
 			this.log(`[You see ${prettyNames} here.${inView}]`, 'player_move', true)
 		} else {
 			this.log(`[You see ${prettyNames} here.]`, 'player_move', true)
@@ -498,22 +509,31 @@ export let Game = {
 		else return null
 	},
 
-	closeDialog() {
-		if (this.dialogController !== null && this.dialogController.vm !== null && this.dialogController.vm.$refs !== null) {
-			this.dialogController.vm.$refs.app.closeDialog()
-		} else {
-			console.log('Unable to close dialog')
-		}
-	},
-
 	getNearestLevelTransition() {
 		let levelTransitions = this.map.actors.filter(a => a instanceof LevelTransition)
 		if (levelTransitions.length > 0) return levelTransitions[0]
 		else return null
 	},
 
-	openNPCDialog(data) {
+	openNPCDialog(dialogue) {
 		this.overlayData.visible = true
-		;(this.overlayData.component = 'npc-dialogue'), (this.overlayData.data = { ...data })
+		this.overlayData.component = 'npc-dialogue'
+		this.overlayData.dialogue = dialogue
+		this.overlayData.dialogue.init(this, this.overlayData.dialogue)
+		// this.overlayData.dialogue.initializeOrigin()
+	},
+
+	getValidPlaceableTilesForMap(mapIdentifier, x1, y1, x2, y2) {
+		let map = this.levels[mapIdentifier]
+		let validTiles = []
+		for (let x = x1; x <= x2; x++) {
+			for (let y = y1; y <= y2; y++) {
+				let tile = map.data[y][x]
+				if (!tile.blocked() && tile.actors.length === 0) {
+					validTiles.push(tile)
+				}
+			}
+		}
+		return validTiles
 	}
 }

src/assets/js/game/GameDisplay.js

@@ -219,11 +219,11 @@ export default class GameDisplay {
 				this.assignSprite(a)
 			}
 
-			if (a.dialogData !== undefined && a.dialogData !== null) {
-				console.log(a)
+			if (a.dialogData !== undefined && a.dialogData !== null && a.dialogBubbleEnabled) {
 				let gx = a.x * this.tileSize
 				let gy = (a.y - 1) * this.tileSize
-				const dialogBubble = { id: 8990, animated_id: 9830 }
+				let bubbleData = a.bubbleData
+				const dialogBubble = bubbleData !== null ? bubbleData : { id: 8623, animated_id: 9463 }
 				let frames = [this.getTexture(dialogBubble.id), this.getTexture(dialogBubble.animated_id)]
 				let sprite = new PIXI.extras.AnimatedSprite(frames)
 				sprite.position.set(gx, gy)