I am using ui bootstrap in my Angularjs application.
I want to customize the modals header by changing the backgroud color.
But if I zoom on the header of a modal, I see that the header where I can apply the color changes is not round as it should be.
So the result is not nice in the end.
How can I change the header background color in a "nice" way?
Thank you.
[UPDATE]
onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
$uibModal.open({
templateUrl: 'app/entities/consultant/consultant-dialog.html',
controller: 'ConsultantDialogController',
controllerAs: 'vm',
backdrop: 'static',
windowClass: 'consultant-dialog-modal-window',
HTML CODE OF MODAL :
<form name="editForm" class="form-horizontal" role="form" novalidate ng-submit="vm.save()" show-validation>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
ng-click="vm.clear()">×</button>
<h4 class="modal-title" id="myConsultantLabel">modal header</h4>
</div>
<div class="modal-body">
Just set the CSS overflow property on modal-content to hidden:
.modal-content {
overflow: hidden;
}
See snippet for details.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
.modal-content {
overflow: hidden;
}
.modal-header {
background: lightblue;
}
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
If your build process lets you run less, then this is how I solved it:
// path to your bootstrap source
#import (reference) "../../../bower_components/bootstrap/less/mixins.less";
// remove the background color from the container
.modal-default .modal-content,
.modal-primary .modal-content,
.modal-success .modal-content,
.modal-info .modal-content,
.modal-warning .modal-content,
.modal-danger .modal-content {
background-color: transparent;
}
// apply the border radius to the top and bottom
.modal-default .modal-header,
.modal-primary .modal-header,
.modal-success .modal-header,
.modal-info .modal-header,
.modal-warning .modal-header,
.modal-danger .modal-header {
.border-top-radius(#border-radius-large);
}
.modal-default .modal-footer,
.modal-primary .modal-footer,
.modal-success .modal-footer,
.modal-info .modal-footer,
.modal-warning .modal-footer,
.modal-danger .modal-footer {
.border-bottom-radius(#border-radius-large);
}
.modal-default .modal-body,
.modal-primary .modal-body,
.modal-success .modal-body,
.modal-info .modal-body,
.modal-warning .modal-body,
.modal-danger .modal-body {
background-color: #modal-content-bg;
}
.modal-variant(#color; #background; #border) {
.modal-header {
color: #color;
background-color: #background;
border-color: #border;
}
.modal-footer {
color: #color;
background-color: #background;
border-color: #border;
}
}
// build modals based on button defaults
.modal-default {
.modal-variant(#btn-default-color; #btn-default-bg; #btn-default-border);
}
.modal-primary {
.modal-variant(#btn-primary-color; #btn-primary-bg; #btn-primary-border);
}
// Success appears as green
.modal-success {
.modal-variant(#btn-success-color; #btn-success-bg; #btn-success-border);
}
// Info appears as blue-green
.modal-info {
.modal-variant(#btn-info-color; #btn-info-bg; #btn-info-border);
}
// Warning appears as orange
.modal-warning {
.modal-variant(#btn-warning-color; #btn-warning-bg; #btn-warning-border);
}
// Danger and error appear as red
.modal-danger {
.modal-variant(#btn-danger-color; #btn-danger-bg; #btn-danger-border);
}
(I believe I'm also #importing the base bootstrap.less file)
Then, you can use the usual $uibModal.open(...), or add a property such as windowClass: 'modal-danger'. This adds the class to the underlying container and cascades the change without altering how "normal" modals are styled.
This will color both the modal-header and modal-footer with the standard bootstrap button colors. You can drop the footer declaration in the variant method (and copy the modal-body block) if you'd like to have the footer remain white.
Related
I am implementing Quiz App but here I am facing an issue if I put static data in array the questions are coming.
Data is not coming if i use async in Vue JS 3
But If I Call data from the API the questions are not showing.
when I console the questions are showing in console and not showing in the front end.
For ref please find the attached code and image.
Home.vue (please see fetchQuestionsFromServer function)
<template>
<main class="flex h-screen items-center justify-center bg-gray-100">
<!-- quiz container -->
<QuizComplatePage v-if="endofQuiz" />
<div
class="overflow-hidden bg-white flex-none container relative shadow-lg rounded-lg px-12 py-6"
>
<img
src="#/assets/images/abstract.svg"
alt=""
class="absolute -top-10 left-0 object-none"
/>
<!-- contents -->
<div class="relative z-20">
<!-- score container -->
<div class="text-right text-gray-800">
<p class="text-sm leading-3">Score</p>
<p class="font-bold">{{score}}</p>
</div>
<!-- timer container -->
<div class="bg-white shadow-lg p-1 rounded-full w-full h-5 mt-4">
<div class="bg-blue-700 rounded-full w-11/12 h-full"
:style= "`width: ${timer}%`"
></div>
</div>
<!-- question container -->
<div
class="rounded-lg bg-gray-100 p-2 neumorph-1 text-center font-bold text-gray-800 mt-8"
>
<div class="bg-white p-5">
{{currentQuestion.question}}
</div>
</div>
<!-- options container -->
<div class="mt-8">
<!-- option container -->
<div v-for="(choice,item) in currentQuestion.choices" :key="item">
<div
class="neumorph-1 option-default bg-gray-100 p-2 rounded-lg mb-3 relative"
:ref="optionchosen"
#click="onOptionClick(choice,item)"
>
<div
class="bg-blue-700 p-1 transform rotate-45 rounded-md h-10 w-10 text-white font-bold absolute right-0 top-0 shadow-md"
>
<p class="transform -rotate-45">+10</p>
</div>
<div class="rounded-lg font-bold flex p-2">
<!-- option ID -->
<div class="p-3 rounded-lg">{{item}}</div>
<!-- option name -->
<div class="flex items-center pl-6">{{choice}}</div>
</div>
</div>
</div>
<!-- option container -->
</div>
<!-- progress indicator container -->
<div class="mt-8 text-center">
<div class="h-1 w-12 bg-gray-800 rounded-full mx-auto"></div>
<p class="font-bold text-gray-800">{{questionCounter}}/{{questions.length}}</p>
</div>
</div>
</div>
</main>
</template>
<script>
import { onMounted, ref } from 'vue'
import QuizComplatePage from './QuizCompleteOverlay.vue'
export default{
components: {
QuizComplatePage
},
setup(){
//data
let canClick = true
let score = ref(0)
let timer = ref(100)
let endofQuiz = ref(false)
let questionCounter = ref(0)
const currentQuestion = ref({
question: '',
answer: 1,
choices: [],
});
const questions = []
const loadQuestion = () =>{
canClick = true
timer.value=100
//Check question array had questions or not
if(questions.length > questionCounter.value){
currentQuestion.value = questions[questionCounter.value]
console.log('Current Question is : ', currentQuestion.value);
questionCounter.value++
}else{
endofQuiz.value = true
console.log('Out of Questions');
}
}
//methods
let itemsRef = []
const optionchosen = (element) =>{
if(element){
itemsRef.push(element)
}
}
const clearSelected = (divselected) =>{
setTimeout(()=>{
divselected.classList.remove('option-correct')
divselected.classList.remove('option-wrong')
divselected.classList.add('option-default')
loadQuestion()
},1000)
}
const onOptionClick = (choice,item) =>{
if(canClick)
{
const divContainer = itemsRef[item]
const optionId = item+1
if(currentQuestion.value.answer ===optionId){
console.log('You are Correct');
score.value += 10
divContainer.classList.add('option-correct')
divContainer.classList.remove('option-default')
}else{
console.log('You are Wrong');
divContainer.classList.add('option-wrong')
divContainer.classList.remove('option-default')
}
timer.value=100
canClick=false
//to go next question
clearSelected(divContainer)
console.log(choice,item);
}else{
console.log('Cant Select Option');
}
}
const countDownTimer = () =>{
let interval= setInterval(()=>{
if(timer.value>0){
timer.value--
}else{
console.log('Time is over');
clearInterval(interval)
}
},150)
}
const fetchQuestionsFromServer = async function(){
fetch('https://opentdb.com/api.php?amount=10&category=18&type=multiple')
.then((res) =>{
return res.json()
})
.then((data) =>{
const newQuestions = data.results.map((serverQuestion) =>{
const arrangedQuestion = {
question: serverQuestion.question,
choices: '',
answer: ''
}
const choices = serverQuestion.incorrect_answers
arrangedQuestion.answer = Math.floor(Math.random() * 4 + 1)
choices.splice(arrangedQuestion.answer-1 , 0 , serverQuestion.correct_answer)
arrangedQuestion.choices = choices
return arrangedQuestion
})
console.log('new formated questions' , newQuestions);
questions.value = newQuestions
loadQuestion()
countDownTimer()
console.log('questions: =>' , questions.value);
})
}
//lifecycle hooks
onMounted(() =>{
fetchQuestionsFromServer()
})
//return
return {
timer,
currentQuestion,
questions,
score,
questionCounter,
loadQuestion,
onOptionClick,
optionchosen,
endofQuiz,
}
}
}
</script>
<style scoped>
.neumorph-1 {
box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.09), -6px -6px 18px #ffffff;
}
.container {
max-width: 400px;
border-radius: 25px;
}
</style>
QuizComplatePage.vue
<template>
<div class="w-screen h-screen absolute z-30 bg-white bg-opacity-30 flex justify-center items-center">
<div class="bg-green-700 p-4 text-center text-white">
<p class="font-bold text-2xl">All DOne!</p>
<p class="my-4 font-bold text-3xl">100% Score</p>
<!-- Buttons -->
<div class="flex justify-center">
<div class="rounded-full py-1 w-28 border cursor-pointer hover:text-black hover:bg-white">Done</div>
<div class="rounded-full py-1 w-28 border cursor-pointer hover:text-black hover:bg-white">Retry</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'QuizComplatePage'
}
</script>
<style>
</style>
Image.
You are not using value when you need to:
For instance look in this function
questions.length should be questions.value.length
Also currentQuestion.value = questions.value[questionCounter.value]
Start by fixing that.
Everything that is a ref in your setup needs to be accessed by .value in anything inside your setup. Outside your setup it will have this and can be treated normally. Mixing these two up is the most common error.
const loadQuestion = () =>{
canClick = true
timer.value=100
//Check question array had questions or not
if(questions.value.length > questionCounter.value){
currentQuestion.value = questions.value[questionCounter.value]
console.log('Current Question is : ', currentQuestion.value);
questionCounter.value++
}else{
endofQuiz.value = true
console.log('Out of Questions');
}
}
Here is my solution
let questions = []
questions = newQuestions
Now I am able to load questions.
So i have been looking on internet for some kinda of dialog/modal in vuejs2 that pops up when exit is clicked, that asks us if we are sure that we want to leave. And when click yes, function is called , and when clicked no, nothing happens just dialog/modal is exited. I was not able to find anything on the vuejs.org.Im not using bootstrap and not using vutify. Any suggestions how this can be done, that popup should blackout the rest of the screen and poput in the middle of the screen.
Its very easy to create your own dialog.
Here is a small component that I created for you.
https://jsfiddle.net/ew1c3z6u/
Im really new to veujs but this should work for you
var component =new Vue({
el: '#dialog-container',
methods:{
show:(event)=> {
component.visibility = true;
// maybe you could ajest the position of the dialog here.
// eg top, center etc
},
onSave:(event)=> {
alert("save clicked")
component.visibility = false;
},
onCancel:(event)=> {
alert("cancel clicked")
component.visibility = false;
}
},
data: {
buttons:[], // you could have a list a dynamic buttons here
content:"this is the content of the dialog",
visibility:false,
title: 'this is the title of the dialog'
}
})
.dimBackground{
background:black;
opacity:0.5;
z-index:90;
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
}
#dialog-container > #dialog
{
background:white;
z-index:100;
min-width:400px;
min-height: 100px;
border:1px black solid;
display:inline-block;
padding:0;
position:fixed;
left:30%;
top:30%;
overflow-x:hidden;
overflow-y:auto;
}
#dialog-container > #dialog > h1{
width:99%;
background:blue;
color:white;
margin:0;
font-size:20px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
}
#dialog-container > #dialog > .content{
padding:5px;
}
#dialog-container > #dialog > h1 > div{
display:inline-block;
float:right;
position:relative;
top:-3px;
padding-right:5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<div id="dialog-container">
<input type="button" value="show dialog" v-on:click="show" />
<div class="dimBackground" v-if=visibility> </div>
<div id="dialog" v-if=visibility>
<h1>
{{title}}
<div>
<button v-on:click="onSave" >
Save
</button>
<button v-on:click="onCancel">
Cancel
</button>
</div>
</h1>
<div class="content">
{{content}}
</div>
</div>
</div>
I tried to make a chat app using Vue CLI 3 and I have finished making a real-time chat room. Then, I tried to give a citing function to it which users can cite the message before and reply to it. So, I manage to pass the cited message to the child component by props. The cited message was NULL by default. After the user clicked some buttons, I expected the value of the "cited message" would change and the new value would be passed to the child through props (automatically updated). But, in fact, it didn't.
When I was browsing the internet, I did find several questions about updating the child component when props values change. So, I tried watch:, created(), update(), but none of them worked.
I once tried to directly add an element <p> in the child component and put {{cited_message}} in it to see what was inside the variable. Then, the Vue app crashed with a white blank page left (but the console didn't show any error).
For convenience, I think the problem is around:
<CreateMessage:name="name":cited_message="this.cited_message"#interface="handleFcAfterDateBack"/>
OR
props: ["name","cited_message"],
watch: { cited_message: function (newValue){ this.c_message = newValue; } },
You can ctrl+F search for the above codes to save your time.
Parent component:
<template>
<div class="container chat">
<h2 class="text-primary text-center">Real-time chat</h2>
<h5 class="text-secondary text-center">{{ name }}</h5>
<div class="card" style="min-height: 0.8vh">
<div class="card-body">
<p class="text-secondary nomessages" v-if="messages.length == 0">
[no messages yet!]
</p>
<div class="messages" v-chat-scroll="{ always: false, smooth: false }">
<div v-for="message in messages" :key="message.id">
<div v-if="equal_name(message)">
<div class="d-flex flex-row">
<div class="text-info">
[ {{ message.name }} ] : {{ message.message }}
</div>
<div class="btn-group dropright">
<a
class="btn btn-secondary btn-sm dropdown-toggle"
href="#"
role="button"
id="dropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<button
#click="get_cited_message(message)"
:key="message.id"
class="dropdown-item"
href="#"
>
Cite
</button>
</div>
</div>
<div class="text-secondary time">
<sub>{{ message.timestamp }}</sub>
</div>
</div>
<!--below is for cited message-->
<div v-if="message.cited_message" class="d-flex flex-row">
Cited : {{ message.cited_message }}
</div>
</div>
<div v-else>
<div class="d-flex flex-row-reverse">
<div class="text-info">
[ {{ message.name }} ] : {{ message.message }}
</div>
<div class="text-secondary time">
<sub>{{ message.timestamp }}</sub>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-action">
<CreateMessage
:name="name"
:cited_message="this.cited_message"
#interface="handleFcAfterDateBack"
/>
</div>
</div>
</div>
</template>
<script>
import CreateMessage from "#/components/CreateMessage";
import fb from "#/firebase/init.js";
import moment from "moment";
export default {
name: "Chat",
props: {
name: String,
},
components: {
CreateMessage,
},
methods: {
equal_name(message) {
if (message.name == this.name) {
return true;
} else {
return false;
}
},
get_cited_message(message) {
this.cited_message = message.message;
console.log(this.cited_message);
},
handleFcAfterDateBack(event) {
console.log("data after child handle: ", event);
},
},
data() {
return {
messages: [],
cited_message: null,
};
},
created() {
let ref = fb.collection("messages").orderBy("timestamp");
ref.onSnapshot((snapshot) => {
snapshot.docChanges().forEach((change) => {
change.type = "added";
if (change.type == "added") {
let doc = change.doc;
this.messages.push({
id: doc.id,
name: doc.data().name,
message: doc.data().message,
timestamp: moment(doc.data().timestamp).format(
"MMMM Do YYYY, h:mm:ss a"
),
cited_message: doc.data().cited_message,
});
}
});
});
},
};
</script>
<style>
.chat h2 {
font-size: 2.6em;
margin-bottom: 0px;
}
.chat h5 {
margin-top: 0px;
margin-bottom: 40px;
}
.chat span {
font-size: 1.2em;
}
.chat .time {
display: block;
font-size: 0.7em;
}
.messages {
max-height: 300px;
overflow: auto;
text-align: unset;
}
.d-flex div {
margin-left: 10px;
}
</style>
Child component:
<template>
<div class="container" style="margin-bottom: 30px">
<form #submit.prevent="createMessage()">
<div class="form-group">
<input
type="text"
name="message"
class="form-control"
placeholder="Enter your message"
v-model="newMessage"
/>
<p v-if="c_message" class="bg-secondary text-light">Cited: {{c_message}}</p>
<p class="text-danger" v-if="errorText">{{ errorText }}</p>
</div>
<button class="btn btn-primary" type="submit" name="action">
Submit
</button>
</form>
</div>
</template>
<script>
import fb from "#/firebase/init.js";
import moment from "moment";
export default {
name: "CreateMessage",
props: ["name","cited_message"],
watch: {
cited_message: function (newValue){
this.c_message = newValue;
}
},
data() {
return {
newMessage: "",
errorText: null,
c_message: null
};
},
methods: {
createMessage() {
if (this.newMessage) {
fb.collection("messages")
.add({
message: this.newMessage,
name: this.name,
timestamp: moment().format(),
cited_message: this.c_message
})
.then(function(docRef) {
console.log("Document written with ID: ", docRef.id);
})
.catch((err) => {
console.log(err);
});
this.newMessage = null;
this.errorText = null;
} else {
this.errorText = "Please enter a message!";
}
},
},
beforeMount(){
this.c_message = this.cited_message;
}
};
</script>
Side-note: In the parent component, I only made the dropdown menu for the messages on the left-hand side. If this thread solved, I would finish the right-hand side.
It is solved. I think the problem is that the child component didn't re-render when the variable in parent component updated. Only the parent component was re-rendered. So, the props' values in the child remained the initial values. In order to solve this, binding the element with v-bind:key can let the Vue app track the changes of the variable (like some kind of a reminder that reminds the app to follow the changes made on the key). When the variable(key) changes, the app will be noticed and the new value will be passed to the child.
E.g.
Original
<CreateMessage
:name="name"
:cited_message="this.cited_message"
#interface="handleFcAfterDateBack"
/>
Solved
<CreateMessage
:name="name"
:cited_message="this.cited_message"
#interface="handleFcAfterDateBack"
:key="this.cited_message"
/>
Even though the problem is solved, I don't know whether I understand the problem clearly. If I made any mistakes, please comment and let me know.
[Vue warn]: Property or method "StartGame" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
enter image description here
This is the code from jsfiddle:
html
<!DOCTYPE html>
<html>
<head>
<title>Monster Slayer</title>
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="css_project1/">
<link rel="stylesheet" href="css_project1//app.css">
<script src="https://unpkg.com/vue#2.6.9/dist/vue.js"></script>
</head>
<body>
<div id="app">
<section class="row">
<div class="small-6 columns">
<h1 class="text-center">YOU</h1>
<div class="healthbar">
<div class="healthbar text-center"
style="background-color: green; margin: 0; color: white;"
:style="{width:playerHealth + '%'}">
{{ playerHealth }}
</div>
</div>
</div>
<div class="small-6 columns">
<h1 class="text-center">MONSTER</h1>
<div class="healthbar">
<div class="healthbar text-center"
style="background-color: green; margin: 0; color: white;"
:style="{width:monsterHealth + '%'}">
{{ monsterHealth }}
</div>
</div>
</div>
</section>
<section class="row controls" v-if="!gameIsRunning">
<div class="small-12 columns">
<!-- <input type="text"> -->
<button id="start-game" #click="StartGame" >START NEW GAME</button>
</div>
</section>
<section class="row controls" v-else>
<div class="small-12 columns">
<button id="attack" #click="attack">ATTACK</button>
<button id="special-attack" #click="specialAttack">SPECIAL ATTACK</button>
<button id="heal" #click="heal">HEAL</button>
<button id="give-up" #click="giveUp">GIVE UP</button>
</div>
</section>
<section class="row log" v-if="gameIsRunning">
<div class="small-12 columns">
<ul>
<li>
</li>
</ul>
</div>
</section>
</div>
<script src="app.js"></script>
</body>
</html>
new Vue({
el:"#app",
data: {
playerHealth: 10,
monsterHealth: 10,
gameIsRunning:false,
},
methods:{
StartGame: function(){
this.gameIsRunning = true;
this.playerHealth = 40;
this.monsterHealth = 40;
},
}
})
Create a javascript file. for example game.js . move the code to that file..
new Vue({
el:"#app",
data:{
playerHealth: 100,
monsterHealth: 100,
gameIsRunning:false,
},
methods:{
StartGame: function(){
this.gameIsRunning = true;
this.playerHealth = 100;
this.monsterHealth = 100;
},
attack: function(){
// var max = 10;
// var min = 3;
// var damage = this.calculateDamage(3,10);
this.monsterHealth -= this.calculateDamage(3,10);;
if(this.checkWin()){
return;
}
// if(this.monsterHealth <= 0){
// alert("we won");
// this.gameIsRunning = false;
// return;
// }
// max = 12;
// min = 5;
// damage = this.calculateDamage(5,12);
this.playerHealth -= this.calculateDamage(5,12);;
// if(this.playerHealth <= 0){
// alert("we lost");
// this.gameIsRunning = false;
// return;
// }
this.checkWin();
},
specialAttack:function(){
this.monsterHealth -= this.calculateDamage(10,10);;
if(this.checkWin()){
return;
}
this.playerHealth -= this.calculateDamage(5,12);;
this.checkWin();
},
heal: function(){
},
giveUp: function(){
},
calculateDamage: function(min, max){
return Math.max(Math.floor(Math.random() * max) + 1, min);
},
checkWin: function(){
if(this.monsterHealth <= 0){
if(confirm("You won! New Game?")){
this.StartGame();
}else{
this.gameIsRunning = false;
}
return true;
}
else if(this.playerHealth <= 0){
if(confirm("You lost! New Game?")){
this.StartGame();
}else{
this.gameIsRunning = false;
}
return true;
}
return;
}
}
})
Then include that javascript file before </body> tag. for example
<script src="app.js"></script>
<script src="https://YOURDOMAIN.COM/game.js"></script>
</body>
</html>
Your data must be a function that returns object:
data() {
return {
playerHealth: 10,
monsterHealth: 10,
gameIsRunning:false,
}
},
For the other methods to work - add them to methods object ;-)
ngx-bootstrap for angular with bootstrap 4 version you see the below code when we open one popup the backdrop is working fine when we open another popup(modal) from the first modal the backdrop opacity is not reflecting on the first popup. The opacity is not changing how to change the opacity(backdrop) of first modal when second modal is open.
import { Component, TemplateRef } from '#angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
#Component({
selector: 'demo-modal-service-nested',
templateUrl: './service-nested.html'
})
export class DemoModalServiceNestedComponent {
modalRef: BsModalRef;
modalRef2: BsModalRef;
constructor(private modalService: BsModalService) {}
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template, { class: 'modal-lg' });
}
openModal2(template: TemplateRef<any>) {
this.modalRef2 = this.modalService.show(template, { class: 'second' });
}
closeFirstModal() {
this.modalRef.hide();
this.modalRef = null;
}
}
<button type="button" class="btn btn-primary" (click)="openModal(template)">Open first modal</button>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">First modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a first modal
<button type="button" class="btn btn-primary" (click)="openModal2(templateNested)">Open second modal</button>
</div>
</ng-template>
<ng-template #templateNested>
<div class="modal-header">
<h4 class="modal-title pull-left">Second modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef2.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is nested modal.<br>
<button *ngIf="modalRef" type="button" class="btn btn-danger" (click)="closeFirstModal()">Close first modal</button>
</div>
</ng-template>
I need to show 2 overlapping modals, the second is smaller than the first and I just can't hide the first. My solution was to apply a background-color to the second one:
openModal2(template: TemplateRef<any>) {
this.modalRef2 = this.modalService.show(template, { class: 'second' });
document.getElementsByClassName('second')[0].parentElement.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
}
document.getElementsByClassName('second')[0].parentElement.style.backgroundColor
= 'rgba(0, 0, 0, 0.4)';
I have found a CSS workround for nested modal backdrop issue.
.modal {
background: rgba(0, 0, 0, .3);
}