Udfordring - MTG Life Counter

Her kan du få hjælp og stille spørgsmål til andre typer CMS!
Besvar
cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Udfordring - MTG Life Counter

Indlæg af cristian » 14. apr 2017, 20:33

Hej alle sammen :D
Nu hvor påsken er over os, så tænkte jeg at jeg ville lave en lille udfordring for dem som vil være med.

Udfordringen går ud på at lave en livs tæller for Magic The Gathering Commander, på billedet nedenunder
kan i se en skitse til hvordan dette skal se ud. Derudover skal plus og minus for hver boks enten tilføje eller fjerne et liv (JavaScript).

Noter
Farver, størrelse på knapper og andre grafiske ændringer er fri til at ændre så længe det overordnede tema forbliver.

Nem
Lav fire bokse som hver tager 25% af skærmen, tilføj tallet i midten og flip den øverste række 180 grader

Moderat
Lav fire bokse som hver tager 25% af skærmen, tilføj tallet i midten og flip den øverste række 180 grader
Tilføj derudover siderne til hver boks.


Svær
Lav fire bokse som hver tager 25% af skærmen, tilføj tallet i midten og flip den øverste række 180 grader
Tilføj derudover siderne til hver boks samt knapperne for at kunne tilføje og fjerne liv.

Til sidst tilføj funktionalitet så knapperne enten tilføjer eller fjerne liv for deres respektive boks ved tryk.


Jeg håber så mange som mulig vil være med så vi kan få en masse gode forslag til hvordan denne udfordring kan løses.
Når påsken er ovre så vil jeg lave et indlæg her i tråden til hvordan jeg selv har løst denne opgave.

God påske til alle!
Vedhæftede filer
MagicTheGathering_Commander_Life_Counter.PNG
MagicTheGathering_Commander_Life_Counter.PNG (29.9 KiB) Vist 2100 gange

jepperask
Geni
Geni
Indlæg: 378
Tilmeldt: 4. nov 2012, 17:57

Re: Udfordring - MTG Life Counter

Indlæg af jepperask » 16. apr 2017, 17:55

Jeg tror ikke helt jeg forstår konceptet. Er det et spil med 4 spillere, hvor man har 'udfordringen' liggende på f.eks en tablet, så man kan se/justere hinandens point?

cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: Udfordring - MTG Life Counter

Indlæg af cristian » 16. apr 2017, 22:26

jepperask skrev:Jeg tror ikke helt jeg forstår konceptet. Er det et spil med 4 spillere, hvor man har 'udfordringen' liggende på f.eks en tablet, så man kan se/justere hinandens point?
Jeg ved kun hvad jeg så ved et tilfælde på youtube og tænkte "det kan vi da også lave".
https://youtu.be/uZbkW7aafkU?t=14m50s

Men det jeg ved er at der er 4 spillere, 2 på hver side af bordet. Den sidste der har point tilbage når alle andre er i 0 har tabt.
Skærmen er flippet i de øverste elementer for at dem der sidder på den anden side af bordet kan følge med i deres egne point.

Der er ikke nogen "mester plan" i udfordringen, udover at udfordre sig selv i at lave nye ting og finde løsninger på X. I dette tilfælde MTG Life Counter.

Håber det hjælper :)

HVIS jeg nu har misforstået ALT eller ikke fået det kommunikeret ud, så er udfordringen her at kode overstående bedst muligt :)

cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: Udfordring - MTG Life Counter

Indlæg af cristian » 18. apr 2017, 19:36

Så dette er hvad jeg kom frem til med den tid jeg havde til det :)
Overall så nåede jeg de mål som jeg har sat mig.

Men nu hvor jeg har arbejdet med denne problem stilling så er der en masse ting jeg gerne vil tilføje og rette.
Så dette bliver mit hygge projekt når jeg har brug for at komme væk fra alt andet.
http://mnrb.dk/fun_area/MTG_commander_life_counter/

Jeg har valgt at bruge Foundation 6 og brugt style.css hvor nødvendigt.
JS er et rod som jeg kaster et blik på igen. Men jeg har ikke lige regnet ud hvordan JS kan tage et argument som
hvilket element kaldte det. Sådan så enkel metode kan justere alle livs tællerne, i stedet for separate metoder.

Koden d. 18-04-2017
HTML / JS

Kode: Vælg alt

<!doctype html>
<html>
	
	<head>
	
		<title>mnrb.dk</title>
		
		<!-- Meta data -->
		<meta charset="UTF8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="author" content="">
		<meta name="description" content="">
		<meta name="keywords" content="">
		
		<!-- Foundation 6 stylesheets -->
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/foundation.css">
	    
	    <!-- Custom CSS stylesheet -->
	    <link rel="stylesheet" href="css/style.css">
	    
	    <!-- Foundation 6 icons -->
	    <link rel="stylesheet" href="css/foundation-icons.css">
		
		<!-- Icons -->
		
		<!-- Google Analytics -->
		
	</head>
	
	<body>
		
		<!-- test start -->
		<header class="expanded row">
			<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
				<span>
					<button class="menu-icon" type="button" data-toggle="example-menu"></button>
				</span>
				<span>mnrb.dk</span>
			</div>
		
			<nav id="example-menu">
				<ul id="site-menu" class="medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
					<li class="active">
						<a href="#">MTG Commander - Life Counter</a>
					</li>
					<!-- <li>
						<a id="addPlayerButton" href="#">Add Player</a>
					</li>
					<li>
						<a id="removePlayerButton" href="#">Remove Player</a>
					</li> -->
					<li class="has-submenu">
						<a href="#">Player 1</a>
						<ul class="submenu menu">
							<li>
								<a href="#">Color</a>
								<ul class="submenu menu">
									<li>
										<a href="#">Black</a>
									</li>
									<li>
										<a href="#">Grey</a>
									</li>
								</ul>
							</li>
							<li>
								<form>
									<input type="text" id="inputUrl1" placeholder="Place URL" autocomplete="off" onmouseover="this.select()"/>
									<input class="button expanded" type="button" id="inputButton1" value="Load"/>
								</form>
							</li>
						</ul>
					</li>
					<li class="has-submenu">
						<a href="#">Player 2</a>
						<ul class="submenu menu">
							<li>
								<a href="#">Color</a>
								<ul class="submenu menu">
									<li>
										<a href="#">Black</a>
									</li>
									<li>
										<a href="#">Grey</a>
									</li>
								</ul>
							</li>
							<li>
								<form>
									<input type="text" id="inputUrl2" placeholder="Place URL" autocomplete="off" onmouseover="this.select()"/>
									<input class="button expanded" type="button" id="inputButton2" value="Load"/>
								</form>
							</li>
						</ul>
					</li>
					<li class="has-submenu">
						<a href="#">Player 3</a>
						<ul class="submenu menu">
							<li>
								<a href="#">Color</a>
								<ul class="submenu menu">
									<li>
										<a href="#">Black</a>
									</li>
									<li>
										<a href="#">Grey</a>
									</li>
								</ul>
							</li>
							<li>
								<form>
									<input type="text" id="inputUrl3" placeholder="Place URL" autocomplete="off" onmouseover="this.select()"/>
									<input class="button expanded" type="button" id="inputButton3" value="Load"/>
								</form>
							</li>
						</ul>
					</li>
					<li class="has-submenu">
						<a href="#">Player 4</a>
						<ul class="submenu menu">
							<li>
								<a href="#">Color</a>
								<ul class="submenu menu">
									<li>
										<a href="#">Black</a>
									</li>
									<li>
										<a href="#">Grey</a>
									</li>
								</ul>
							</li>
							<li>
								<form>
									<input type="text" id="inputUrl4" placeholder="Place URL" autocomplete="off" onmouseover="this.select()"/>
									<input class="button expanded" type="button" id="inputButton4" value="Load"/>
								</form>
							</li>
						</ul>
					</li>
				</ul>
			</nav>
		</header>
		<!-- test end -->
		
		<div class="row expanded small-up-1 medium-up-2">
			<!-- -------- -->
			<!-- top left -->
			<!-- -------- -->
			<div id="top-left" class="column">
				<h1 id="lifeRemaining1">40</h1>
				
				<div id="lifeAdd1" class="lifeCounter column small-2 end">
					<button id="life1Add" class="button large" type="button">
						<!-- Screen readers will see "close" -->
						<span class="show-for-sr">Add</span>
						
						<!-- Visual users will see the +, but not the "Add" text -->
						<span aria-hidden="true"><i class="fi-plus"></i></span>
					</button>
				</div>
				
				<div id="lifeSubtract1" class="lifeCounter column small-2">
					<button class="button large" type="button">
						<!-- Screen readers will see "close" -->
						<span class="show-for-sr">Subtract</span>
						
						<!-- Visual users will see the -, but not the "Subtract" text -->
						<span aria-hidden="true"><i class="fi-minus"></i></span>
					</button>
				</div>
			</div>
			
			<!-- --------- -->
			<!-- top right -->
			<!-- --------- -->
			<div id="top-right" class="column">
				<h1 id="lifeRemaining2">40</h1>
				
				<div id="lifeAdd2" class="lifeCounter column small-2 end">
					<button class="button large" type="button">
						<!-- Screen readers will see "close" -->
						<span class="show-for-sr">Add</span>
						
						<!-- Visual users will see the +, but not the "Add" text -->
						<span aria-hidden="true"><i class="fi-plus"></i></span>
					</button>
				</div>
				
				<div id="lifeSubtract2" class="lifeCounter column small-2">
					<button class="button large" type="button">
						<!-- Screen readers will see "close" -->
						<span class="show-for-sr">Subtract</span>
						
						<!-- Visual users will see the -, but not the "Subtract" text -->
						<span aria-hidden="true"><i class="fi-minus"></i></span>
					</button>
				</div>
			</div>
			
			<!-- ----------- -->
			<!-- bottom left -->
			<!-- ----------- -->
			<div id="bottom-left" class="column">
				<h1 id="lifeRemaining3">40</h1>
				
				<div id="lifeAdd3" class="lifeCounter column small-2 end">
					<button class="button large" type="button">
						<!-- Screen readers will see "close" -->
						<span class="show-for-sr">Add</span>
						
						<!-- Visual users will see the +, but not the "Add" text -->
						<span aria-hidden="true"><i class="fi-plus"></i></span>
					</button>
				</div>
				
				<div id="lifeSubtract3" class="lifeCounter column small-2">
					<button class="button large" type="button">
						<!-- Screen readers will see "close" -->
						<span class="show-for-sr">Subtract</span>
						
						<!-- Visual users will see the -, but not the "Subtract" text -->
						<span aria-hidden="true"><i class="fi-minus"></i></span>
					</button>
				</div>
			</div>
			
			<!-- ------------ -->
			<!-- bottom right -->
			<!-- ------------ -->
			<div id="bottom-right" class="column">
				<h1 id="lifeRemaining4">40</h1>
				
				<div id="lifeAdd4" class="lifeCounter column small-2 end">
					<button class="button large" type="button">
						<!-- Screen readers will see "close" -->
						<span class="show-for-sr">Add</span>
						
						<!-- Visual users will see the +, but not the "Add" text -->
						<span aria-hidden="true"><i class="fi-plus"></i></span>
					</button>
				</div>
				
				<div id="lifeSubtract4" class="lifeCounter column small-2">
					<button class="button large" type="button">
						<!-- Screen readers will see "close" -->
						<span class="show-for-sr">Subtract</span>
						
						<!-- Visual users will see the -, but not the "Subtract" text -->
						<span aria-hidden="true"><i class="fi-minus"></i></span>
					</button>
				</div>
			</div>
		</div>
		
		
		
		
		<!-- Load JS files after loading the page -->
		<script src="js/vendor/jquery.js"></script>
	    <script src="js/vendor/what-input.js"></script>
	    <script src="js/vendor/foundation.js"></script>
	    <script src="js/app.js"></script> <!-- 1 line? -->
	    
	    <script>
	    /* ############ */
    	/* Life counter */
    	/* ############ */
    	
	    /* -------- */
    	/* Top-left */
    	/* -------- */
    	$('#lifeAdd1').on('click', function(){
    		var life = document.getElementById("lifeRemaining1").innerHTML;
    		life++;
    		
    		document.getElementById("lifeRemaining1").innerHTML = life;
    	});
    	
    	$('#lifeSubtract1').on('click', function(){
    		var life = document.getElementById("lifeRemaining1").innerHTML;
    		life--;
    		
    		document.getElementById("lifeRemaining1").innerHTML = life;
    	});
		
		/* -------- */
    	/* Top-right */
    	/* -------- */
    	$('#lifeAdd2').on('click', function(){
    		var life = document.getElementById("lifeRemaining2").innerHTML;
    		life++;
    		
    		document.getElementById("lifeRemaining2").innerHTML = life;
    	});
    	
    	$('#lifeSubtract2').on('click', function(){
    		var life = document.getElementById("lifeRemaining2").innerHTML;
    		life--;
    		
    		document.getElementById("lifeRemaining2").innerHTML = life;
    	});
		
    	/* -------- */
    	/* Bottom-left */
    	/* -------- */
    	$('#lifeAdd3').on('click', function(){
    		var life = document.getElementById("lifeRemaining3").innerHTML;
    		life++;
    		
    		document.getElementById("lifeRemaining3").innerHTML = life;
    	});
    	
    	$('#lifeSubtract3').on('click', function(){
    		var life = document.getElementById("lifeRemaining3").innerHTML;
    		life--;
    		
    		document.getElementById("lifeRemaining3").innerHTML = life;
    	});
		
		/* -------- */
    	/* Bottom-right */
    	/* -------- */
    	$('#lifeAdd4').on('click', function(){
    		var life = document.getElementById("lifeRemaining4").innerHTML;
    		life++;
    		
    		document.getElementById("lifeRemaining4").innerHTML = life;
    	});
    	
    	$('#lifeSubtract4').on('click', function(){
    		var life = document.getElementById("lifeRemaining4").innerHTML;
    		life--;
    		
    		document.getElementById("lifeRemaining4").innerHTML = life;
    	});
    	
    	/* ------------------- */
    	/* Load image from url */
    	/* ------------------- */
    	$('#inputButton1').on('click', function() {
			document.getElementById("top-left").style.backgroundImage = "url('" + $('#inputUrl1').val() + "')";
			console.log("url('" + $('#inputUrl1').val() + "')");
    	});
    	
    	$('#inputButton2').on('click', function() {
			document.getElementById("top-right").style.backgroundImage = "url('" + $('#inputUrl2').val() + "')";
			console.log("url('" + $('#inputUrl2').val() + "')");
    	});
    	
    	$('#inputButton3').on('click', function() {
			document.getElementById("bottom-left").style.backgroundImage = "url('" + $('#inputUrl3').val() + "')";
			console.log("url('" + $('#inputUrl3').val() + "')");
    	});
    	
    	$('#inputButton4').on('click', function() {
			document.getElementById("bottom-right").style.backgroundImage = "url('" + $('#inputUrl4').val() + "')";
			console.log("url('" + $('#inputUrl4').val() + "')");
    	});
		</script>	
	</body>

</html>
CSS

Kode: Vælg alt

/* ------------------- */
/* Global configuration*/
/* ------------------- */
html {
	min-height: 100%;
	min-width: 100%;
	
	/*Newer browsers overwrite here*/
	min-height: 100vh;
	min-width: 100vw;
	
	position: relative
}

body, html {
	height: auto;
}

/* ------ */
/* Header */
/* ------ */
eader nav {
	padding: 0px;
}

header nav, .title-bar {
	box-shadow: 5px 6px 3px hsl(0, 5%, 20%);
}

.title-bar {
	background-color: rgb(0,110,147);
}

ul.menu {
	background-color: rgb(51,51,51);
	
	border-color: rgb(51, 51, 51);
}

ul.menu li a {
	color: white;
}

/* navigation hover effect */
nav ul li a:hover, nav ul li:hover {
	background-color: orange;
}

nav ul li ul li a:hover {
	background-color: grey;
}

/* ---- */
/* body */
/* ---- */
body div[id^="top"], body div[id^="bottom"] {
	height: 50vh;
	position: relative;
}

body div[id^="top"] h1, body div[id^="bottom"] h1 {
	color: white;
	
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    
    font-size: 9em;
}

.column {
	padding: 0;
}

.lifeCounter {
	position: relative;
	
	background-color: hsla(344, 0%, 44%, 0.2);
	color: white;
	
	height: 100%;
	
	cursor: pointer;
}

.lifeCounter button {
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    
    background-color: hsla(0, 0%, 0%, 0.0);
    border-radius: 50px;
    border: 5px solid orange;
}


#top-left, #top-right, #bottom-left, #bottom-right {
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

#top-left {
	background-color: hsla(0, 0%, 0%, 1.0);
	transform: rotate(180deg);
}

#top-right {
	background-color: hsla(0, 0%, 50%, 1.0);
	transform: rotate(180deg);
}

#bottom-left {
	background-color: hsla(0, 65%, 50%, 1.0);
}

#bottom-right {
	background-color: hsla(180, 50%, 60%, 1.0);
}

jepperask
Geni
Geni
Indlæg: 378
Tilmeldt: 4. nov 2012, 17:57

Re: Udfordring - MTG Life Counter

Indlæg af jepperask » 20. apr 2017, 09:21

cristian skrev: JS er et rod som jeg kaster et blik på igen. Men jeg har ikke lige regnet ud hvordan JS kan tage et argument som
hvilket element kaldte det. Sådan så enkel metode kan justere alle livs tællerne, i stedet for separate metoder.
Prøv det her:

Kode: Vælg alt

	   var addSub = function(element) {
			var s = this.id;
			if (s.indexOf("Add") >= 0) {
				var b = s.indexOf("Add");
				var id = s.substring((("Add".length)+b),s.length);
				
				var life = document.getElementById("lifeRemaining" + id).innerHTML;
				life++;
				
				document.getElementById("lifeRemaining" + id).innerHTML = life;
			} else if (s.indexOf("Subtract") >= 0) {
				var b = s.indexOf("Subtract");
				var id = s.substring((("Subtract".length)+b),s.length);
				
				var life = document.getElementById("lifeRemaining" + id).innerHTML;
				life--;
				
				document.getElementById("lifeRemaining" + id).innerHTML = life;
			}
	   }
	   
	   $(".lifeCounter").on('click', addSub);

cristian
Moderator
Moderator
Indlæg: 882
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: Udfordring - MTG Life Counter

Indlæg af cristian » 20. apr 2017, 15:47

Hey Jeppe

Tak for dit svar!

Hvad er

Kode: Vælg alt

var s = this.id;
lig med?
Når jeg laver en console.log(s); så er s ikke lig med noget objekt eller værdi.

jepperask
Geni
Geni
Indlæg: 378
Tilmeldt: 4. nov 2012, 17:57

Re: Udfordring - MTG Life Counter

Indlæg af jepperask » 20. apr 2017, 16:58

cristian skrev:Hey Jeppe

Tak for dit svar!

Hvad er

Kode: Vælg alt

var s = this.id;
lig med?
Når jeg laver en console.log(s); så er s ikke lig med noget objekt eller værdi.
Den er lig id'et på elementet der har triggered click-eventet, så f.eks lifeSubtract3.
Hvis du i Chrome Developer Tools sætter et breakpoint på linjen, vil du kunne se alt hvad 'this' indeholder. Jeg kan se at jeg har tilføjet 'element' også, selvom den ikke bliver brugt til noget.

Besvar