weird commit

cardgame.html

@@ -17,8 +17,6 @@
 		}
 	</style>
   <title>Solitaire - Klondike - Yurun Chen</title>
-  <!-- <link rel="stylesheet" href="style.css"> -->
-  <script type="module">import { Canvg } from 'https://cdn.skypack.dev/canvg@^4.0.0';</script>
   <script type="text/javascript" defer src="card-v2.js"></script>
   <script type="text/javascript" defer src="deck-v2.js"></script>
 	<!-- main game javascript file-->
@@ -28,8 +26,7 @@
 </head>
 <body>
 		<canvas id="canvas" width="400" height="300"> </canvas>
-<input id="clickMe" type="button" value="DrawStock" onclick="game_instance.draw_stock();" />
+<input id="clickMe" type="button" value="Reset" onclick="game_instance.reset();" />
-<input id="clickMe" type="button" value="DrawStock" onclick="game_instance.reset();" />]\
 <h1 id="coord"></h1>
 </body>
 </html>

game.js

@@ -12,17 +12,21 @@ class Stack {
 			}
 
 			pop() {
-				//Check that the stack is not empty
 				//Remove the last element from the stack and return it
-				var card = this.#items.pop();
 				console.log(this.#items)
+				var card = this.#items.shift();
+				console.log(card, this.#items)
 				return card
 			}
 
 			peek() {
 				//Check that the stack is not empty
 				//Return the last element from the stack without removing it
-				return this.#items[this.#items.length - 1];
+				return this.#items[this.#items.length-1];
+			}
+
+			peek_at(n){
+				return this.#items[n];
 			}
 
 			isEmpty() {
@@ -52,7 +56,7 @@ class Stack {
 			}
 
 			unshift(card){
-				console.log(card);
+				 (card);
 				this.#items.unshift(card);
 			}
 		}
@@ -144,7 +148,7 @@ class View {
 			try {
 				this.#element_list[i].render(ctx);
 			} catch (error) {
-				console.log(this.#element_list[i].render);
+				 (this.#element_list[i].render);
 				console.error(this.#element_list[i]);
 				// Expected output: ReferenceError: nonExistentFunction is not defined
 				// (Note: the exact output may be browser-dependent)
@@ -316,6 +320,7 @@ class StackView extends View{
 	pop_element(n){
 		super.pop_element(n);
 	}
+
 }
 
 //view for the stock stack
@@ -362,14 +367,12 @@ class FoundationView extends View {
 
 	}
 
-	on_empty(){
+
-		//obviously replace it with the rectangle
+	//always draw 1
+	substack(){
+		return 0
 	}
 
-	//when the card is placed on a particular foundation, show it!
-	on_put(){
-
-	}
 
 	draw() {
 		return this.stack.pop();
@@ -381,7 +384,7 @@ class FoundationView extends View {
 
 	draw() {
 		super.pop_element(1);
-		console.log(this);
+		 (this);
 		//if the the stack is empty, place the placeholder
 		var tmp_elist = super.get_element_list();
 		//if there is still cards
@@ -392,7 +395,7 @@ class FoundationView extends View {
 			super.update_element([new Placeholder(this.x,this.y,210,300)])
 			this.resize(this.scale);
 		}
-		console.log(super.get_element_list())
+		 (super.get_element_list())
 		return this.stack.pop();
 	}
 
@@ -404,12 +407,12 @@ class FoundationView extends View {
 	is_legal(card){
 		var legal = false;
 		//if foundation empty
-		console.log(this.peek())
+		 (this.peek())
 		if (this.stack.size()==0){
 			if (card.getValue() == 1){
 				legal = true
 			}
-		} else if (card.getValue() == this.peek()[0].getValue()+1 && card.getSuit() == this.peek()[0].getSuit()){
+		} else if (card.getValue() == this.peek().getValue()+1 && card.getSuit() == this.peek().getSuit()){
 				legal = true
 			}
 		return legal;
@@ -420,17 +423,24 @@ class FoundationView extends View {
 		this.add_element(card);
 	}
 
-	add_element(cards){
+	add_element(card){
 		var tmp_elist = super.get_element_list();
 		var last_element = tmp_elist[tmp_elist.length-1]
-		console.log(last_element)
+		tmp_elist.push(new CardView(true, last_element.ox, last_element.oy, card, 210, 300))
-		for (var i=0; i<cards.length; i++){
-			tmp_elist.push(new CardView(true, last_element.ox, last_element.oy, cards[i], 210, 300))
-		}
 
 		super.update_element(tmp_elist);
 		this.resize(this.scale);
-		console.log(super.get_element_list())
+		 (super.get_element_list())
+	}
+
+	is_won(){
+		var won = false;
+		//if the stack is full and the last card is a king, because it is imposssible to make illegal moves, it is therefore sorted
+		if (this.stack.size()==13 && this.stack.peek().getValue() == 13){
+			won = true
+		}
+		console.log(won)
+		return won
 	}
 }
 
@@ -447,7 +457,7 @@ class WasteView extends StackView{
 	}
 
 	add(card, scale){
-		console.log(card, this.list.length);
+		 (card, this.list.length);
 		//if the waste pile isn't full'
 		if (this.list.length < 3){
 			this.list.push(card);
@@ -479,14 +489,14 @@ class WasteView extends StackView{
 
 	draw() {
 		super.pop_element(1);
-		console.log(this);
+		 (this);
 		var tmp_elist = super.get_element_list();
 		//if there is still cards
 		if (tmp_elist.length != 0){
 			tmp_elist[tmp_elist.length-1].reveal();
 			super.update_element(tmp_elist);
 		}
-		console.log(super.get_element_list())
+		 (super.get_element_list())
 		return this.list.pop();
 	}
 
@@ -498,6 +508,19 @@ class WasteView extends StackView{
 	is_legal(){
 		return false
 	}
+
+	is_won(){
+		var won = false;
+		if (this.list.length==0){
+			won = true
+		}
+		return won
+	}
+
+	//always draw 1
+	substack(){
+		return 0
+	}
 }
 
 //view for the vertical columns
@@ -505,25 +528,30 @@ class ColumnView extends StackView {
 	constructor(stack, element_list, ox, oy, odx, ody, i){
 		super(1, false, element_list, ox, oy, odx, ody, i);
 		this.stack=stack;
+		console.log(this.stack)
 		this.empty = false;
-		console.log(super.array_parser(this.stack.to_array()));
+		console.log(element_list)
+		 // (super.array_parser(this.stack.to_array()));
 	}
 
 	draw() {
+
 		var tmp_elist = super.get_element_list();
-		var last_element = tmp_elist[tmp_elist.length-1];
+		console.log(tmp_elist)
 		super.pop_element(1);
 		//if there is still cards
-		console.log(last_element)
+		 (last_element)
 		if (tmp_elist.length != 0){
 			tmp_elist[tmp_elist.length-1].reveal();
 			super.update_element(tmp_elist);
 		} else {
+			var last_element = tmp_elist[tmp_elist.length-1]
 			super.update_element([new Placeholder(last_element.ox, last_element.oy, 180, 270)]);
 			this.resize(this.scale);
 			this.empty = true;
+			console.log(this.stack)
 		}
-		console.log(super.get_element_list())
+		 (super.get_element_list())
 		return this.stack.pop();
 	}
 
@@ -549,24 +577,43 @@ class ColumnView extends StackView {
 		this.add_element(card);
 	}
 
+	peek_at(n){
+		return this.stack.peek_at(n);
+	}
+	//https://stackoverflow.com/questions/15997879/get-the-index-of-the-object-inside-an-array-matching-a-condition  I used the example in this answer to match the card object via value, since there's only one value in each column possible
+	substack(card){
+		 (card)
+		var tmp_lst = this.stack.to_array().reverse();
+		var index = tmp_lst.findIndex(x => x.getValue() ===card.getValue());
+		 (index)
+		return index
+	}
+
 	add_element(cards){
 		var tmp_elist = super.get_element_list();
 		var last_element = tmp_elist[tmp_elist.length-1]
-		console.log(last_element, this.stack)
+
 		if (this.stack.size()==1){
-			tmp_elist = [];
+			var ptmp_elist = [];
-			for (var i=0; i<cards.length; i++){
+			super.update_element([]);
-				tmp_elist.push(new CardView(true, last_element.ox, last_element.oy, cards[i], 180, 270))
+			ptmp_elist.push(new CardView(true, last_element.ox, last_element.oy, cards, 180, 270))
-			}
+			super.update_element(ptmp_elist);
 		}
 		else {
-			for (var i=0; i<cards.length; i++){
+			tmp_elist.push(new CardView(true, last_element.ox, last_element.oy+30, cards, 180, 270))
-				tmp_elist.push(new CardView(true, last_element.ox, last_element.oy+30, cards[i], 180, 270))
+			super.update_element(tmp_elist)
-			}
 		}
-		super.update_element(tmp_elist);
+
 		this.resize(this.scale);
-		console.log(super.get_element_list())
+		 (super.get_element_list())
+	}
+
+	is_won(){
+		var won = false;
+		if (this.stack.size()==0){
+			won = true
+		}
+		return won
 	}
 }
 
@@ -578,7 +625,7 @@ class InputMgr {
 		this.cur_view_arr = cur_view_arr;
 		this.update_element_list();
 		this.last_sel = null;
-		console.log(this.cur_element_arr);
+		 (this.cur_element_arr);
 		//0==not moved 1==just moved 2==moved and have new selection
 		this.moved = 0;
 	}
@@ -586,20 +633,20 @@ class InputMgr {
 	update_element_list(){
 		var tmp_arr = [];
 		this.cur_id_arr = [];
-		console.log(this.cur_view_arr[0])
+		 (this.cur_view_arr[0])
 		for (var i=0; i<this.cur_view_arr.length;i++){
 			for (var j=0; j<this.cur_view_arr[i].get_element_list().length;j++){
 				tmp_arr.push(this.cur_view_arr[i].get_element_list()[j])
 				this.cur_id_arr.push(this.cur_view_arr[i].id);
 			}
 		}
-		console.log(tmp_arr, this.cur_id_arr);
+		 (tmp_arr, this.cur_id_arr);
 		this.cur_element_arr = tmp_arr
 	}
 
 	draw_stock(){
 		var card = this.cur_view_arr[7].draw();
-		console.log(this.cur_view_arr)
+		 (this.cur_view_arr)
 		var retlist = this.cur_view_arr[12].add(card, this.scale);
 		if(retlist){
 			this.cur_view_arr[7].on_receive(retlist);
@@ -609,7 +656,7 @@ class InputMgr {
 	on_click(x,y){
 		//update element list to insure up to date Positions
 		this.update_element_list();
-		// console.log(this)
+		//  (this)
 		var matched_obj = {};
 		//determine if moved
 		if (this.moved == 1){
@@ -651,14 +698,33 @@ class InputMgr {
 						last_view = this.cur_view_arr[i];
 					}
 				}
-				console.log(view, this.last_sel)
+				 (view, this.last_sel)
 				//peek first, if legal the draw
-				var card = last_view.peek();
+
-				console.log(card);
+				var substack = last_view.substack(this.last_sel.obj.card);
-				if (view.is_legal(card)){
+				var card;
-					card = last_view.draw();
+				 console.log(substack)
-					view.add([card]);
+				if (view.is_legal(this.last_sel.obj.card)){
+					if (substack != 0){
+						card = [];
+						for (var i=0; i<=substack; i++){
+							//insure last drawed card endup first
+							card.unshift(last_view.draw());
+						}
+						//if single card
+					} else {
+						card = [last_view.draw()]
+						console.log(card)
+					}
+
+					 console.log(card);
+
+					for (var single of card){
+						 (single);
+						view.add(single);
+					}
 				}
+
 				//after moving, set the flag  to true
 				this.moved +=1;
 				//upon change update the list
@@ -669,15 +735,12 @@ class InputMgr {
 
 			}
 		}
-
+		 (matched_obj.obj.card)
-		if(this.last_sel){
-		console.log(matched_obj.parent_id, this.last_sel.parent_id);
-		}
 
 		if ((matched_obj && this.last_sel != null || this.moved !=1)||this.last_sel.parent_id == "stock" && matched_obj.parent_id == "waste"){
 		this.last_sel = matched_obj;
 		}
-		return matched_obj;
+
 	}
 
 	resize(scale){
@@ -736,14 +799,34 @@ class KlondikeGame {
 	constructor (){
 		//intialise views
 		this.init_views();
-		console.log("initialised views");
+		 ("initialised views");
 		//grab context for render manager
 		this.start();
 	}
 	pass_click(x,y){
 		var cur_sel = this.#imgr.on_click(x,y);
-		console.log("Selected parent stack:"+cur_sel.parent_id)
+		this.is_won()
 	}
+
+	//don't have time to do a win screen
+	is_won(){
+		var tmp_view = this.#tableau
+		tmp_view.concat(this.#foundations)
+		var won
+
+		for (var view of tmp_view){
+			if (view.is_won() && won){
+				won = true;
+			} else {
+				won = false;
+			}
+		}
+
+		if (won){
+			alert("YOU WIN!")
+		}
+	}
+
 	start(){
 
 		this.#ctx = document.getElementById("canvas").getContext("2d");
@@ -755,7 +838,7 @@ class KlondikeGame {
 		this.#mgr.set_view(tmp_view.concat(this.#tableau, this.#stock_pile, this.#foundations, this.#waste_pile));
 		var tmp_no_bg = [];
 		this.#imgr = new InputMgr(tmp_no_bg.concat(this.#tableau, this.#stock_pile, this.#foundations, this.#waste_pile));
-		console.log(tmp_view);
+		 (tmp_view);
 	}
 	//update scale modifier, however only currently fixed to 16:9 aspect ratio.
 	//all values calculated from modifier * 1920, 1080
@@ -780,16 +863,17 @@ class KlondikeGame {
 			var tmp_tableau = new Array()
 			var tmp_tableau_list = new Array()
 			//deal and populate the columns, in the temporary array
-			for (var j = 1; j<8; j++){
+			for (var j = 0; j<7; j++){
 				tmp_tableau.push(new Stack())
-				for (var k = j; k>0; k--){
+				for (var k = j+1; k>0; k--){
-					tmp_tableau[j-1].push(this.#deck.drawCard());
+					tmp_tableau[j].push(this.#deck.drawCard());
 				}
+				console.log(tmp_tableau[j])
 			}
 
 			//serialise it to array
-			for (var j = 1; j<8; j++){
+			for (var j = 0; j<7; j++){
-				tmp_tableau_list.push(tmp_tableau[j-1].to_array())
+				tmp_tableau_list.push(tmp_tableau[j].to_array())
 			}
 
 			var tmp_tableau_element_list = new Array();
@@ -803,12 +887,14 @@ class KlondikeGame {
 			//this current list is a 2d array
 			for (var h=0; h<7;h++){
 				var tmp_list = new Array()
-				for (var i=0;i<tmp_tableau_list[h].length;i++){
+				console.log(h)
+				for (var i=0;i< tmp_tableau_list[h].length;i++){
 					//if last card, change the image to reveal
 					if (i+1 == tmp_tableau_list[h].length) {
 						tmp_list.push(new CardView(true, x,y,tmp_tableau_list[h][i], dx, dy));
+						console.log(tmp_tableau_list[h][i])
 					}
-					else if (i+1 != tmp_tableau_list[h].length) {
+					else if (i != tmp_tableau_list[h].length) {
 						tmp_list.push(new CardView(false, x,y,tmp_tableau_list[h][i], dx, dy));
 					}
 					y+=30
@@ -851,11 +937,14 @@ class KlondikeGame {
 	}
 	
 
-
+	/*unfortunately because weird things will happen to the canvas once reset this way,
+	I've bound the reset button to refresh page, uncommenting below and commenting
+	the refresh statement will reveal the outcome */
 	reset(){
-		var tmp_view = [new View([new Background()])];
+		// var tmp_view = [new View([new Background()])];
-		this.init_views();
+		// this.init_views();
-		this.start();
+		// this.start();
+		location.reload()
 	}
 }