Sangscienta / Card-Turning-Game (public) (License: GPLv3) (since 2023-07-26) (hash sha256)
Just a test for git and a card turning game, for learning purposes
Clone URLs: https://rocketgit.com/user/Sangscienta/Card-Turning-Game ssh://rocketgit@ssh.rocketgit.com/user/Sangscienta/Card-Turning-Game git://git.rocketgit.com/user/Sangscienta/Card-Turning-Game
AddSettingsPage main
List of commits:
Subject Hash Author Date (UTC)
Corrected a few things to make the game look better. Removed useless logs. Added a flag to only cleanup allcards on new games. Corrected a bug where changing sizes between two values could create an exception. b2f4d5aab442c28653ae98b30afaca648c800aba97bf674756edfd3e38e3e71a Sangscienta 2023-07-31 18:43:18
Can now adjust gridsize, and creates a new game when that changes. 47221f9cfa716d838312bbddd1b1072af042b4b64c90463b557ce589232c1a3d Sangscienta 2023-07-31 13:36:26
New game is fully fuctional, and can generate new boards. Settings button is not functional. Still has a lot of debug data available on screen. a66d8cd9c8451631b5bee4b66cee9e63a4ef8bb4932a1512576437773abd3cc1 Sangscienta 2023-07-26 15:54:00
Initial commit for main branch 53278fe5484cf5b33500ab068535a9443763e73678d67eebcc407c262cb73081 Sangscienta 2023-07-26 14:52:18
Commit b2f4d5aab442c28653ae98b30afaca648c800aba97bf674756edfd3e38e3e71a - Corrected a few things to make the game look better. Removed useless logs. Added a flag to only cleanup allcards on new games. Corrected a bug where changing sizes between two values could create an exception.
Author: Sangscienta
Author date (UTC): 2023-07-31 18:43
Committer name: Sangscienta
Committer date (UTC): 2023-07-31 18:43
Parent(s): 47221f9cfa716d838312bbddd1b1072af042b4b64c90463b557ce589232c1a3d
Signer:
Signing key:
Signing status: N
Tree: 65e9dd0ba323939c60941dae939d6b18506ad3ff9ad497a072f821986337917d
File Lines added Lines deleted
src/lib/GameStateOperations.ts 3 3
src/lib/GlobalDefinitions.ts 2 2
src/routes/+layout.svelte 3 3
src/routes/+page.svelte 39 30
File src/lib/GameStateOperations.ts changed (mode: 100644) (index 8fdbbd8..a64a46a)
... ... export function StartGame()
9 9 export function GiveUp() export function GiveUp()
10 10 { {
11 11 state.set(State.GAMEOVER); state.set(State.GAMEOVER);
12 stateMessage.set("The game has ended. Would you like to start a new one?");
12 stateMessage.set("You gave up, game over. Would you like to start a new game?");
13 13 } }
14 14
15 15 export function Win() export function Win()
16 16 { {
17 17 state.set(State.GAMEOVER); state.set(State.GAMEOVER);
18 stateMessage.set("You won the game. Would you like to start a new one?");
18 stateMessage.set("You won the game. Would you like to start a new game?");
19 19 } }
20 20
21 21 export function StartScreen() export function StartScreen()
22 22 { {
23 state.set(State.START);
23 state.set(State.STARTSCREEN);
24 24 stateMessage.set("Start a new game"); stateMessage.set("Start a new game");
25 25 } }
File src/lib/GlobalDefinitions.ts changed (mode: 100644) (index ce3eceb..7e81dc1)
... ... import { writable } from 'svelte/store';
2 2
3 3 export enum State export enum State
4 4 { {
5 START = 'start',
5 STARTSCREEN = 'startscreen',
6 6 PLAYING = 'playing', PLAYING = 'playing',
7 7 PAUSED = 'paused', PAUSED = 'paused',
8 8 GAMEOVER = 'gameover', GAMEOVER = 'gameover',
 
... ... export enum State
11 11
12 12 const DEFAULT_GRID_SIZE = 12; const DEFAULT_GRID_SIZE = 12;
13 13
14 export const state = writable(State.START);
14 export const state = writable(State.STARTSCREEN);
15 15 export const stateMessage = writable("Start a new game"); export const stateMessage = writable("Start a new game");
16 16 export const selectedCards = writable<number[]>([]); export const selectedCards = writable<number[]>([]);
17 17 export const gridSize = writable(DEFAULT_GRID_SIZE); export const gridSize = writable(DEFAULT_GRID_SIZE);
File src/routes/+layout.svelte changed (mode: 100644) (index a5075a0..3254c3f)
11 11 import type { ModalSettings } from '@skeletonlabs/skeleton'; import type { ModalSettings } from '@skeletonlabs/skeleton';
12 12
13 13
14 import { gridSize, state } from "$lib/GlobalDefinitions";
14 import { State, gridSize, state } from "$lib/GlobalDefinitions";
15 15 import { GiveUp, StartGame, StartScreen } from '$lib/GameStateOperations'; import { GiveUp, StartGame, StartScreen } from '$lib/GameStateOperations';
16 16 import { IsInvalidGrid } from '$lib/GameGridOperations'; import { IsInvalidGrid } from '$lib/GameGridOperations';
17 17
 
65 65 <div class="bg-surface-900 text-center">{$state}</div> <div class="bg-surface-900 text-center">{$state}</div>
66 66 </svelte:fragment> </svelte:fragment>
67 67 <svelte:fragment slot="sidebarLeft" > <svelte:fragment slot="sidebarLeft" >
68 <div class="p-1"><button type="button" class="btn btn-l variant-filled" on:click={StartScreen}>Start Screen</button></div>
69 <div class="p-1"><button type="button" class="btn btn-l variant-filled" on:click={StartGame}>New Game</button></div>
68 {#if $state == State.PLAYING}
70 69 <div class="p-1"><button type="button" class="btn btn-l variant-filled" on:click={GiveUp}>Give Up</button></div> <div class="p-1"><button type="button" class="btn btn-l variant-filled" on:click={GiveUp}>Give Up</button></div>
70 {/if}
71 71 </svelte:fragment> </svelte:fragment>
72 72 <!-- (sidebarRight) --> <!-- (sidebarRight) -->
73 73 <!-- Router Slot --> <!-- Router Slot -->
File src/routes/+page.svelte changed (mode: 100644) (index 89b9ace..b73492d)
3 3 import { State, selectedCards, state, stateMessage, SleepThenDo, gridSize } from '$lib/GlobalDefinitions'; import { State, selectedCards, state, stateMessage, SleepThenDo, gridSize } from '$lib/GlobalDefinitions';
4 4 import { StartGame, Win } from '$lib/GameStateOperations'; import { StartGame, Win } from '$lib/GameStateOperations';
5 5 import Card from '$lib/Card.svelte'; import Card from '$lib/Card.svelte';
6 import { CardData } from '$lib/Card.svelte';
6 import type { CardData } from '$lib/Card.svelte';
7 7 import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
8 8 import { GridGenerationAlgorithm, GenerateGrid } from '$lib/GameGridOperations'; import { GridGenerationAlgorithm, GenerateGrid } from '$lib/GameGridOperations';
9 import Layout from './+layout.svelte';
10 9
11 10 export let cardsOnTable: CardData[] = []; export let cardsOnTable: CardData[] = [];
12 11 let allCards: Card[] = []; let allCards: Card[] = [];
13 let boardReRender = false;
14
15 cardsOnTable = GenerateGrid(GridGenerationAlgorithm.FisherYates, $gridSize);
12 let newGame = false;
16 13
17 14 const unsubscribeState = state.subscribe(HandleChangeGameState); const unsubscribeState = state.subscribe(HandleChangeGameState);
18 const unsubscribeGridSize = gridSize.subscribe(HandleGridSizeChange);
15 let unsubscribeGridSize = gridSize.subscribe(HandleGridSizeChange);
19 16 let unsubscribeCards = selectedCards.subscribe(HandleChangesInSelectedCards); let unsubscribeCards = selectedCards.subscribe(HandleChangesInSelectedCards);
20 17 onDestroy(unsubscribeState); onDestroy(unsubscribeState);
21 18 onDestroy(unsubscribeGridSize); onDestroy(unsubscribeGridSize);
 
27 24 function HandleChangeGameState() { function HandleChangeGameState() {
28 25 switch ($state) { switch ($state) {
29 26 case State.PLAYING: case State.PLAYING:
30
31 27 cardsOnTable = GenerateGrid(GridGenerationAlgorithm.FisherYates, $gridSize); cardsOnTable = GenerateGrid(GridGenerationAlgorithm.FisherYates, $gridSize);
32 //cardsOnTable.forEach(cardData => {allCards = [...allCards, {cardData: CardData}]})
33
34 boardReRender = !boardReRender;
35
36 console.log("Started playing: " + allCards);
28 newGame = true;
37 29 break; break;
38 30
39 31 case State.CLR: case State.CLR:
40 allCards = [];
41 32 cardsOnTable = []; cardsOnTable = [];
42
43 33 selectedCards.set([]); selectedCards.set([]);
44 34
45 35 default: default:
 
47 37 } }
48 38 } }
49 39
50 function HandleGridSizeChange(value: number) {
51 // allCards.forEach(element => {
52 // element?.$destroy();
53 // });
54 state.set(State.CLR);
55 state.set(State.PLAYING);
40 function HandleGridSizeChange()
41 {
42 if($state != State.PLAYING)
43 {
44 return;
45 }
46
47 allCards
48 .filter(card => card)
49 .forEach(element =>
50 {
51 element.ResetCard();
52 element.cantFlip = true;
53 });
54
55 SleepThenDo(1000, () =>
56 {
57 state.set(State.CLR);
58 state.set(State.PLAYING);
59 ToggleFlipping();
60 })
61
56 62 } }
57 63
58 64 /** /**
 
62 68 */ */
63 69 function HandleChangesInSelectedCards(cardSelection: number[]) function HandleChangesInSelectedCards(cardSelection: number[])
64 70 { {
65
66 allCards = allCards.filter(card => card);
71 // New games might imply a grid size change. When decreasing the grid size, the svelte engine tends to keep the same array size, but with null values at the end.
72 // This piece of code cleans the card array from nulls, avoiding errors and bugs
73 if (newGame) {
74 allCards = allCards.filter(card => card);
75 newGame = false;
76 }
67 77
68 78 switch (cardSelection.length) { switch (cardSelection.length) {
69 79 case 2: case 2:
 
100 110 return; return;
101 111 } }
102 112
103 console.log(allCards);
104 113 let winCondition = allCards.filter(card => !card.hasMatched).length <= 0; let winCondition = allCards.filter(card => !card.hasMatched).length <= 0;
105 114
106 115 if(winCondition) if(winCondition)
 
135 144 </script> </script>
136 145
137 146 <div class="bg-slate-500 h-full w-full mx-auto flex flex-wrap justify-center items-center"> <div class="bg-slate-500 h-full w-full mx-auto flex flex-wrap justify-center items-center">
138 {#if $state == State.GAMEOVER || $state == State.START}
147 {#if $state == State.GAMEOVER || $state == State.STARTSCREEN}
139 148 <div class="mx-auto flex flex-wrap h-36 justify-center items-center"> <div class="mx-auto flex flex-wrap h-36 justify-center items-center">
140 149 <div>{$stateMessage}</div> <div>{$stateMessage}</div>
141 150 <div class="break" /> <div class="break" />
 
143 152 </div> </div>
144 153
145 154 {:else if $state == State.PLAYING} {:else if $state == State.PLAYING}
146 {#key boardReRender}
147 <div class="memory-game container flex flex-wrap h-full w-full bg-primary-900 overflow-scroll">
148 {#each cardsOnTable as card, index}
149 <Card bind:this="{allCards[index]}" cardData="{card}"></Card>
150 {/each}
155 <div class="flex flex-wrap h-full w-full">
156 <div class="memory-game container flex flex-wrap h-full w-ful overflow-auto">
157 {#each cardsOnTable as card, index}
158 <Card bind:this="{allCards[index]}" cardData="{card}"></Card>
159 {/each}
160 </div>
151 161 </div> </div>
152 {/key}
153 162 {/if} {/if}
154 163 </div> </div>
155 164
Hints:
Before first commit, do not forget to setup your git environment:
git config --global user.name "your_name_here"
git config --global user.email "your@email_here"

Clone this repository using HTTP(S):
git clone https://rocketgit.com/user/Sangscienta/Card-Turning-Game

Clone this repository using ssh (do not forget to upload a key first):
git clone ssh://rocketgit@ssh.rocketgit.com/user/Sangscienta/Card-Turning-Game

Clone this repository using git:
git clone git://git.rocketgit.com/user/Sangscienta/Card-Turning-Game

You are allowed to anonymously push to this repository.
This means that your pushed commits will automatically be transformed into a merge request:
... clone the repository ...
... make some changes and some commits ...
git push origin main