started working on help
This commit is contained in:
		
							parent
							
								
									beeabac342
								
							
						
					
					
						commit
						6913832c97
					
				
							
								
								
									
										132
									
								
								frontend/src/components/Help.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										132
									
								
								frontend/src/components/Help.vue
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,132 @@ | |||||||
|  | <template> | ||||||
|  | 	<div> | ||||||
|  | 		<h1>Come giocare</h1> | ||||||
|  | 		<h2>Personaggi</h2> | ||||||
|  | 			<p>Ogni personaggio ha delle abilità speciali e un numero di vite che lo rendono unico. | ||||||
|  | 			Le vite sono il numero di punti vita che puoi perdere prima di morire e indicano anche il numero massimo di carte che puoi tenere in mano.</p> | ||||||
|  | 			<input type="button" value="Visualizza tutti i personaggi"/> | ||||||
|  | 		<h2>Ruoli</h2> | ||||||
|  | 		<ul> | ||||||
|  | 			<li>Sceriffo</li> | ||||||
|  | 			<li>Fuorilegge</li> | ||||||
|  | 			<li>Rinnegato</li> | ||||||
|  | 			<li>Vice</li> | ||||||
|  | 		</ul> | ||||||
|  | 		<h2>Turni</h2> | ||||||
|  | 		<p>Si inizia sempre dallo Sceriffo, e il gioco prosegue in senso orario, i turni sono divisi in 3 fasi.</p> | ||||||
|  | 		<ol> | ||||||
|  | 			<li><p>Pesca 2 carte</p></li> | ||||||
|  | 			<li><p>Gioca un numero qualsiasi di carte</p></li> | ||||||
|  | 			<li><p>Scarta le carte in eccesso</p></li> | ||||||
|  | 		</ol> | ||||||
|  | 		<h3>Pescare le carte</h3> | ||||||
|  | 		<p>Per pescare le carte dovrai cliccare sul mazzo quando vedi questa animazione.<p> | ||||||
|  | 		<div style="display:flex" class="center-stuff"> | ||||||
|  | 			<div style="position:relative"> | ||||||
|  | 				<div class="card back" style="position:absolute; bottom:-3pt;right:-3pt;"/> | ||||||
|  | 				<div class="card back" style="position:absolute; bottom:-1.5pt;right:-1.5pt;"/> | ||||||
|  | 				<card :card="cardBack" :class="{back:true, draw:true}" @click.native="action"/> | ||||||
|  | 			</div> | ||||||
|  | 		</div> | ||||||
|  | 		<h3>Giocare le carte</h3> | ||||||
|  | Now you may play cards to help yourself or hurt the other players, trying | ||||||
|  | to eliminate them. You can only play cards during your turn (exception: | ||||||
|  | Missed! and Beer, see below). You are not forced to play cards during this | ||||||
|  | phase. You can play any number of cards; there are only three limitations: | ||||||
|  | •	 you can play only 1 BANG! card per turn; | ||||||
|  | (this applies only to BANG! cards, not to cards with the symbol ) | ||||||
|  | •	 you can have only 1 copy of any one card in play; | ||||||
|  | (one card is a copy of another if they have the same name) | ||||||
|  | •	 you can have only 1 weapon in play. | ||||||
|  | (when you play a new weapon, discard the one you have in play) | ||||||
|  | Example. If you put a Barrel in play, you cannot play another one, since you | ||||||
|  | would end up having two copies of the same card in front of you. | ||||||
|  | There are two types of cards: brown-bordered cards (= play and discard) and | ||||||
|  | blue-bordered cards (= weapons and other objects). | ||||||
|  | Brown-bordered cards are played by putting | ||||||
|  | them directly into the discard pile and applying | ||||||
|  | the effect described with text or with symbols on | ||||||
|  | the cards (illustrated in the next paragraphs). | ||||||
|  | Blue-bordered cards are played face up in front | ||||||
|  | of you (exception: Jail). Blue cards in front of | ||||||
|  | you are hence defined to be “in play”. The effect | ||||||
|  | of these cards lasts until they are discarded or | ||||||
|  | removed somehow (e.g. through the play of a Cat | ||||||
|  | Balou), or a special event occurs (e.g. in the case of Dynamite). There | ||||||
|  | is no limit on the cards you can have in front of you provided that they do | ||||||
|  | not share the same name. | ||||||
|  | <h3>Scartare</h3> | ||||||
|  | <p>Quando hai terminato di giocare le tue carte, ovvero quando non vuoi o non puoi giocare altre carte, devi scartare le carte che eccedono il tuo numero di vite attuali. | ||||||
|  | Dopodichè passi il turno al giocatore successivo cliccando su termina turno.</p> | ||||||
|  | 		<card :card="endTurnCard" class="end-turn" @click.native="alert('')"/> | ||||||
|  | 	</div> | ||||||
|  | </template> | ||||||
|  | <script> | ||||||
|  | import Card from './Card' | ||||||
|  | export default { | ||||||
|  | 	name: 'Help', | ||||||
|  | 	components: { | ||||||
|  | 		Card, | ||||||
|  | 	}, | ||||||
|  | 	data:()=>({ | ||||||
|  | 		cardBack: { | ||||||
|  | 			name: 'PewPew!', | ||||||
|  | 			icon: '💥', | ||||||
|  | 		}, | ||||||
|  | 	}), | ||||||
|  | 	computed: { | ||||||
|  | 		endTurnCard() { | ||||||
|  | 			return { | ||||||
|  | 				name: this.$t('end_turn'), | ||||||
|  | 				icon: '⛔️' | ||||||
|  | 			} | ||||||
|  | 		}, | ||||||
|  | 	}, | ||||||
|  | } | ||||||
|  | </script> | ||||||
|  | <style scoped> | ||||||
|  | @keyframes pick { | ||||||
|  | 	0% { | ||||||
|  | 		transform: translate(0,0); | ||||||
|  | 		z-index: 1; | ||||||
|  | 	} | ||||||
|  | 	50% { | ||||||
|  | 		transform: translate(-10px,0); | ||||||
|  | 		z-index: 1; | ||||||
|  | 	} | ||||||
|  | 	100% { | ||||||
|  | 		transform: translate(0,0); | ||||||
|  | 		z-index: 1; | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | @keyframes draw { | ||||||
|  | 	0% { | ||||||
|  | 		transform: translate(0,0); | ||||||
|  | 		z-index: 1; | ||||||
|  | 	} | ||||||
|  | 	50% { | ||||||
|  | 		transform: translate(0,10px); | ||||||
|  | 		z-index: 1; | ||||||
|  | 	} | ||||||
|  | 	100% { | ||||||
|  | 		transform: translate(0,0); | ||||||
|  | 		z-index: 1; | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | .pick { | ||||||
|  | 	animation-duration: 2s; | ||||||
|  | 	animation-name: pick; | ||||||
|  | 	animation-iteration-count: infinite; | ||||||
|  | } | ||||||
|  | .draw { | ||||||
|  | 	animation-duration: 2s; | ||||||
|  | 	animation-name: draw; | ||||||
|  | 	animation-iteration-count: infinite; | ||||||
|  | } | ||||||
|  | .end-turn { | ||||||
|  | 	box-shadow:  | ||||||
|  | 		0 0 0 3pt  rgb(138, 12, 12), | ||||||
|  | 		0 0 0 6pt white, | ||||||
|  | 		0 0 5pt 6pt #aaa !important; | ||||||
|  | } | ||||||
|  | </style> | ||||||
| @ -9,6 +9,11 @@ const routes = [ | |||||||
| 		name: 'Game', | 		name: 'Game', | ||||||
| 		component: () => import(/* webpackChunkName: "game" */ '../components/Lobby.vue') | 		component: () => import(/* webpackChunkName: "game" */ '../components/Lobby.vue') | ||||||
| 	}, | 	}, | ||||||
|  | 	{ | ||||||
|  | 		path: '/help', | ||||||
|  | 		name: 'Help', | ||||||
|  | 		component: () => import(/* webpackChunkName: "helep" */ '../components/Help.vue') | ||||||
|  | 	}, | ||||||
| 	{ | 	{ | ||||||
| 		path: '/', | 		path: '/', | ||||||
| 		name: 'Home', | 		name: 'Home', | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user
	 Alberto Xamin
						Alberto Xamin