From 2316b5fb25a25656855e1c3063c75ba38d7be22c Mon Sep 17 00:00:00 2001 From: jauntyjocularjay <77408854+jauntyjocularjay@users.noreply.github.com> Date: Wed, 14 Aug 2024 09:36:50 -0800 Subject: [PATCH 01/11] removed submodule in $folder --- .gitmodules | 6 +++--- git | 1 + sh | 1 - 3 files changed, 4 insertions(+), 4 deletions(-) create mode 160000 git delete mode 160000 sh diff --git a/.gitmodules b/.gitmodules index aa18cc0..f649ada 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,9 +1,9 @@ [submodule "vjsc"] path = vjsc url = https://github.com/jauntyjocularjay/VanillaJSComponents.git -[submodule "sh"] - path = sh - url = https://github.com/jauntyjocularjay/KwikGit.git [submodule "grid"] path = grid url = https://github.com/jauntyjocularjay/OpenGameGrid +[submodule "git"] + path = git + url = https://github.com/jauntyjocularjay/kwikgit.git diff --git a/git b/git new file mode 160000 index 0000000..c3cc5fe --- /dev/null +++ b/git @@ -0,0 +1 @@ +Subproject commit c3cc5fe73d8556b08f4818375e430c08f81e2e64 diff --git a/sh b/sh deleted file mode 160000 index 846b58e..0000000 --- a/sh +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 846b58e14555170353b0d639eb0d841436326544 From 211603dc6e12b823bebe430d41a06bcd8b6607b0 Mon Sep 17 00:00:00 2001 From: jauntyjocularjay <77408854+jauntyjocularjay@users.noreply.github.com> Date: Wed, 14 Aug 2024 09:37:54 -0800 Subject: [PATCH 02/11] updated npm script dev --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d051ee9..e46525c 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "dev2beta": "bash sh/gitDev2Beta.sh", "beta2master": "bash sh/gitBeta2Master.sh", "dev2master": "bash sh/gitDev2Master.sh", - "submodule": "git submodule update --init --recursive", + "dev": "git submodule update --init --recursive", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { From 9f1d9f0b19742bceaba12b93d247283750002260 Mon Sep 17 00:00:00 2001 From: jauntyjocularjay <77408854+jauntyjocularjay@users.noreply.github.com> Date: Wed, 14 Aug 2024 09:38:33 -0800 Subject: [PATCH 03/11] updated test script --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e46525c..0fd3c1d 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "beta2master": "bash sh/gitBeta2Master.sh", "dev2master": "bash sh/gitDev2Master.sh", "dev": "git submodule update --init --recursive", - "test": "echo \"Error: no test specified\" && exit 1" + "test": "mocha test --exit" }, "repository": { "type": "git", From aec68f903ce65d0fb5172972b803f75361b29fa6 Mon Sep 17 00:00:00 2001 From: jauntyjocularjay <77408854+jauntyjocularjay@users.noreply.github.com> Date: Wed, 14 Aug 2024 09:44:11 -0800 Subject: [PATCH 04/11] removed white gems from Gem.random --- Gems.mjs | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/Gems.mjs b/Gems.mjs index 4990ccf..249200b 100644 --- a/Gems.mjs +++ b/Gems.mjs @@ -76,7 +76,8 @@ const colorHex = { white: '#fff' } -const gem = { +const gem = // Contains gem names, colors, and types +{ gray: { color: 'gray', name: 'hematite', @@ -119,7 +120,10 @@ const gem = { }, } -const IMG = +const IMG = // contains the string paths to the gem images +/** + * @constant {object} IMG contains the string paths to the gem images + */ { red: './img/red.svg', orange: './img/orange.svg', @@ -143,7 +147,7 @@ class Gem { static random(spot) { - const i = Math.floor(Math.random() * 19) + const i = Math.floor(Math.random() * 18) let gem if(i >= 0 && i <= 1){ @@ -167,9 +171,6 @@ class Gem { else if (i >= 16 && i <= 17){ gem = new Violet(spot) } - else if (i >= 18 && i <= 18){ - gem = new White(spot) - } else { throw new Error(`Gem.random() generated an out-of-bound integer: ${i}`) } From fda88f680b3c94cf672681db945d047bfe503bf7 Mon Sep 17 00:00:00 2001 From: jauntyjocularjay <77408854+jauntyjocularjay@users.noreply.github.com> Date: Wed, 14 Aug 2024 09:50:09 -0800 Subject: [PATCH 05/11] updated Gem.random to not spawn as many gray gems --- Gems.mjs | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/Gems.mjs b/Gems.mjs index 249200b..2065c6a 100644 --- a/Gems.mjs +++ b/Gems.mjs @@ -147,30 +147,30 @@ class Gem { static random(spot) { - const i = Math.floor(Math.random() * 18) + const i = Math.floor(Math.random() * 53) let gem - if(i >= 0 && i <= 1){ - gem = new Gray(spot) - } - else if (i >= 2 && i <= 4){ + if (i >= 0 && i <= 8){ gem = new Red(spot) } - else if (i >= 5 && i <= 6){ + else if (i >= 9 && i <= 16){ gem = new Orange(spot) } - else if (i >= 7 && i <= 10){ + else if (i >= 17 && i <= 24){ gem = new Yellow(spot) } - else if (i >= 11 && i <= 12){ + else if (i >= 25 && i <= 32){ gem = new Green(spot) } - else if (i >= 13 && i <= 15){ + else if (i >= 33 && i <= 40){ gem = new Blue(spot) } - else if (i >= 16 && i <= 17){ + else if (i >= 40 && i <= 48){ gem = new Violet(spot) } + else if(i >= 49 && i <= 53){ + gem = new Gray(spot) + } else { throw new Error(`Gem.random() generated an out-of-bound integer: ${i}`) } From ce524b955c5bd9afa9adab5efaee1c4fd18fb8c9 Mon Sep 17 00:00:00 2001 From: jauntyjocularjay <77408854+jauntyjocularjay@users.noreply.github.com> Date: Wed, 14 Aug 2024 10:01:44 -0800 Subject: [PATCH 06/11] added complements to gems for matching --- Gems.mjs | 47 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/Gems.mjs b/Gems.mjs index 2065c6a..7818414 100644 --- a/Gems.mjs +++ b/Gems.mjs @@ -86,7 +86,7 @@ const gem = // Contains gem names, colors, and types red: { color: 'red', name: 'ruby', - type: 'primary', + type: 'primary' }, orange: { color: 'orange', @@ -193,6 +193,8 @@ class Gem { } }) } + + complements = 'Stub: Gem.cannotTouch() is not implemented for this gem' } class Gray extends Gem { @@ -202,6 +204,8 @@ class Gray extends Gem { { super(new Img(IMG.gray, 'gray gem', ['gem', kframe.fall, gem.gray.color], spot)) } + + complements = [] } class Red extends Gem { @@ -211,6 +215,11 @@ class Red extends Gem { { super(new Img(IMG.red, 'red gem', ['gem', kframe.fall, gem.red.color], spot)) } + + complements = [ + gem.violet.color, + gem.orange.color + ] } class Orange extends Gem { @@ -220,6 +229,11 @@ class Orange extends Gem { { super(new Img(IMG.orange, 'orange gem', ['gem', kframe.fall, gem.orange.color], spot)) } + + complements = [ + gem.red.color, + gem.yellow.color + ] } class Yellow extends Gem { @@ -229,6 +243,11 @@ class Yellow extends Gem { { super(new Img(IMG.yellow, 'yellow gem', ['gem', kframe.fall, gem.yellow.color], spot)) } + + complements = [ + gem.orange.color, + gem.green.color + ] } class Green extends Gem { @@ -238,6 +257,11 @@ class Green extends Gem { { super(new Img(IMG.green, 'green gem', ['gem', kframe.fall, gem.green.color], spot)) } + + complements = [ + gem.yellow.color, + gem.blue.color + ] } class Blue extends Gem { @@ -247,6 +271,11 @@ class Blue extends Gem { { super(new Img(IMG.blue, 'blue gem', ['gem', kframe.fall, gem.yellow.color], spot)) } + + complements = [ + gem.green.color, + gem.violet.color + ] } class Violet extends Gem { @@ -255,8 +284,12 @@ class Violet extends Gem { constructor(spot) { super(new Img(IMG.violet, 'violet gem', ['gem', kframe.fall, gem.yellow.color], spot)) - } + + complements = [ + gem.blue.color, + gem.red.color + ] } class White extends Gem { @@ -266,6 +299,16 @@ class White extends Gem { { super(new Img(IMG.white, 'white gem', ['gem', kframe.fall, gem.yellow.color], spot)) } + + complements = [ + gem.red.color, + gem.orange.color, + gem.yellow.color, + gem.green.color, + gem.blue.color, + gem.violet.color, + gem.gray.color + ] } class Line From a650e7c47d1b62ddc68f5fc8246a5fd4f4b819fd Mon Sep 17 00:00:00 2001 From: jauntyjocularjay <77408854+jauntyjocularjay@users.noreply.github.com> Date: Wed, 14 Aug 2024 10:05:56 -0800 Subject: [PATCH 07/11] Releasing changes to beta --- Gems.mjs | 33 ++++++++++++++++++++++++--------- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/Gems.mjs b/Gems.mjs index 7818414..b12ba1b 100644 --- a/Gems.mjs +++ b/Gems.mjs @@ -205,7 +205,9 @@ class Gray extends Gem { super(new Img(IMG.gray, 'gray gem', ['gem', kframe.fall, gem.gray.color], spot)) } - complements = [] + complements = [ + gem.white.color + ] } class Red extends Gem { @@ -217,8 +219,10 @@ class Red extends Gem { } complements = [ + gem.red.color, gem.violet.color, - gem.orange.color + gem.orange.color, + gem.white.color ] } @@ -231,8 +235,10 @@ class Orange extends Gem { } complements = [ + gem.orange.color, gem.red.color, - gem.yellow.color + gem.yellow.color, + gem.white.color ] } @@ -245,13 +251,15 @@ class Yellow extends Gem { } complements = [ + gem.yellow.color, gem.orange.color, - gem.green.color + gem.green.color, + gem.white.color ] } class Green extends Gem { - type = gem.yellow.type + type = gem.green.type constructor(spot) { @@ -259,8 +267,10 @@ class Green extends Gem { } complements = [ + gem.green.color, gem.yellow.color, - gem.blue.color + gem.blue.color, + gem.white.color ] } @@ -273,8 +283,10 @@ class Blue extends Gem { } complements = [ + gem.blue.color, gem.green.color, - gem.violet.color + gem.violet.color, + gem.white.color ] } @@ -287,8 +299,10 @@ class Violet extends Gem { } complements = [ + gem.violet.color, gem.blue.color, - gem.red.color + gem.red.color, + gem.white.color ] } @@ -307,7 +321,8 @@ class White extends Gem { gem.green.color, gem.blue.color, gem.violet.color, - gem.gray.color + gem.gray.color, + gem.white.color ] } From 0250f472501573b785247959ce0d7c4124e82968 Mon Sep 17 00:00:00 2001 From: jauntyjocularjay <77408854+jauntyjocularjay@users.noreply.github.com> Date: Wed, 14 Aug 2024 18:26:38 -0800 Subject: [PATCH 08/11] removed submodule in $folder --- .gitmodules | 9 +- Gems.mjs | 386 +-------------------------------------- components/Gem.mjs | 274 +++++++++++++++++++++++++++ components/Playfield.mjs | 140 ++++++++++++++ grid | 2 +- module/grid | 1 + module/vjsc | 1 + vjsc | 1 - 8 files changed, 426 insertions(+), 388 deletions(-) create mode 100644 components/Gem.mjs create mode 100644 components/Playfield.mjs create mode 160000 module/grid create mode 160000 module/vjsc delete mode 160000 vjsc diff --git a/.gitmodules b/.gitmodules index f649ada..e68575f 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,9 +1,12 @@ -[submodule "vjsc"] - path = vjsc - url = https://github.com/jauntyjocularjay/VanillaJSComponents.git [submodule "grid"] path = grid url = https://github.com/jauntyjocularjay/OpenGameGrid [submodule "git"] path = git url = https://github.com/jauntyjocularjay/kwikgit.git +[submodule "module/vjsc"] + path = module/vjsc + url = https://github.com/jauntyjocularjay/vanillajscomponents.git +[submodule "module/grid"] + path = module/grid + url = https://github.com/jauntyjocularjay/opengamegrid.git diff --git a/Gems.mjs b/Gems.mjs index b12ba1b..9e230ba 100644 --- a/Gems.mjs +++ b/Gems.mjs @@ -1,390 +1,10 @@ -import { - // Constants - display, - flex, - event, - unit, - - // Base Classes - Selection, - StyleSheet, - Listener, - ListenerOnLoad, - - // Classables - // // Containers - Img, - Div, - DivBtn, - FlexBox, - Figure, - Form, - Label, - // // Input - Button, - Input, - TextArea, - Select, - Option, - // // Format elements - Br, - // // External Resource Links - Link, - Style, - - // Text Elements - // // Headers - H1, - H2, - H3, - H4, - H5, - H6, - // // Body Text - P, - Figcaption, - A, - Strong, - Abbr, - Blockquote, - Sub, - Sup, - Span, - Text, - Code, - Pre, - - // Functions - getStylesheetByFileName, - addAdoptedStyleSheet, - JSONCSS, -} from './vjsc/vanilla.mjs' -import { Grid } from './grid/Grid.mjs' - -const kframe = { - fall: 'fall' -} - -const colorHex = { - gray: '#444', - red: '#d44', - orange: '#f60', - yellow: '#da4', - green: '#4d4', - blue: '#33a', - violet: '#a4d', - white: '#fff' -} - -const gem = // Contains gem names, colors, and types -{ - gray: { - color: 'gray', - name: 'hematite', - type: 'dud', - }, - red: { - color: 'red', - name: 'ruby', - type: 'primary' - }, - orange: { - color: 'orange', - name: 'citrine', - type: 'secondary', - }, - yellow: { - color: 'yellow', - name: 'topaz', - type: 'primary', - }, - green: { - color: 'green', - name: 'emerald', - type: 'secondary', - }, - blue: { - color: 'blue', - name: 'sapphire', - type: 'primary', - }, - violet: { - color: 'violet', - name: 'amethyst', - type: 'secondary', - }, - white: { - color: 'white', - name: 'diamond', - type: 'wild', - }, -} - -const IMG = // contains the string paths to the gem images -/** - * @constant {object} IMG contains the string paths to the gem images - */ -{ - red: './img/red.svg', - orange: './img/orange.svg', - yellow: './img/yellow.svg', - green: './img/green.svg', - blue: './img/blue.svg', - violet: './img/violet.svg', - white: './img/white.svg', - gray: './img/gray.svg' -} - -class Gem { - type = '' - - constructor(img=null) - { - this.img = img - this.element = img.element - this.selectListener() - } - - static random(spot) - { - const i = Math.floor(Math.random() * 53) - let gem - - if (i >= 0 && i <= 8){ - gem = new Red(spot) - } - else if (i >= 9 && i <= 16){ - gem = new Orange(spot) - } - else if (i >= 17 && i <= 24){ - gem = new Yellow(spot) - } - else if (i >= 25 && i <= 32){ - gem = new Green(spot) - } - else if (i >= 33 && i <= 40){ - gem = new Blue(spot) - } - else if (i >= 40 && i <= 48){ - gem = new Violet(spot) - } - else if(i >= 49 && i <= 53){ - gem = new Gray(spot) - } - else { - throw new Error(`Gem.random() generated an out-of-bound integer: ${i}`) - } - - gem.img.element.id = `spot-${spot}` - return gem - } - - selectListener() - { - this.img.addEventListener(event.element.click, () => { - const summary = 'select a gem to move' - if(this.element.classList.contains('selected')){ - this.element.classList.remove('selected') - selected-- - } else if(!this.element.classList.contains('selected') && selected < 2) { - this.element.classList.add('selected') - this.element.classList.add('matched') - selected++ - } - }) - } - - complements = 'Stub: Gem.cannotTouch() is not implemented for this gem' -} - -class Gray extends Gem { - type = gem.gray.type - - constructor(spot) - { - super(new Img(IMG.gray, 'gray gem', ['gem', kframe.fall, gem.gray.color], spot)) - } - - complements = [ - gem.white.color - ] -} - -class Red extends Gem { - type = gem.red.type - - constructor(spot) - { - super(new Img(IMG.red, 'red gem', ['gem', kframe.fall, gem.red.color], spot)) - } - - complements = [ - gem.red.color, - gem.violet.color, - gem.orange.color, - gem.white.color - ] -} - -class Orange extends Gem { - type = gem.orange.type - constructor(spot) - { - super(new Img(IMG.orange, 'orange gem', ['gem', kframe.fall, gem.orange.color], spot)) - } - - complements = [ - gem.orange.color, - gem.red.color, - gem.yellow.color, - gem.white.color - ] -} - -class Yellow extends Gem { - type = gem.yellow.type - - constructor(spot) - { - super(new Img(IMG.yellow, 'yellow gem', ['gem', kframe.fall, gem.yellow.color], spot)) - } - - complements = [ - gem.yellow.color, - gem.orange.color, - gem.green.color, - gem.white.color - ] -} - -class Green extends Gem { - type = gem.green.type - - constructor(spot) - { - super(new Img(IMG.green, 'green gem', ['gem', kframe.fall, gem.green.color], spot)) - } - - complements = [ - gem.green.color, - gem.yellow.color, - gem.blue.color, - gem.white.color - ] -} - -class Blue extends Gem { - type = gem.blue.type - - constructor(spot) - { - super(new Img(IMG.blue, 'blue gem', ['gem', kframe.fall, gem.yellow.color], spot)) - } - - complements = [ - gem.blue.color, - gem.green.color, - gem.violet.color, - gem.white.color - ] -} - -class Violet extends Gem { - type = gem.violet.type - - constructor(spot) - { - super(new Img(IMG.violet, 'violet gem', ['gem', kframe.fall, gem.yellow.color], spot)) - } - - complements = [ - gem.violet.color, - gem.blue.color, - gem.red.color, - gem.white.color - ] -} - -class White extends Gem { - type = gem.white.type - - constructor(spot) - { - super(new Img(IMG.white, 'white gem', ['gem', kframe.fall, gem.yellow.color], spot)) - } - - complements = [ - gem.red.color, - gem.orange.color, - gem.yellow.color, - gem.green.color, - gem.blue.color, - gem.violet.color, - gem.gray.color, - gem.white.color - ] -} - -class Line -{ - constructor(int) - { - this.flexBox = new FlexBox(flex.c, ['line', flex.flow.default], `line${int}`) - const spot = ['a','b','c','d','e','f','g','h'] - for( let i = 0; i < 8; i++) - { - const gem = Gem.random(spot[i]) - this.flexBox.element.appendChild(gem.img.element) - } - } - - getSpot(char) - { - if('abcdefgh'.includes(char) === false){ - throw new Error('Line.getSpot() received an invalid character') - } - else { - return this.element.querySelector(`#spot-${char}`) - } - } - - insertGem(char, gem) - { - this.getSpot(char).appendChild(gem) - } - - removeGem(char) - { - this.getSpot(char).removeChild() - } - -} - -class PlayField { - constructor(height) - { - this.data = new Grid(height, 8), - this.container = new FlexBox(flex.r,['field'], 'field'), - this.lines = [] +import { + PlayField +} from './components/Playfield.mjs' - for(let i = 0; i < height; i++) - { - this.lines.push(new Line(i)) - this.container.element.appendChild(this.lines[i].flexBox.element) - } - } - getLine(int) - { - return this.lines[int] - } - getSpot(int, char) - { - return this.lines[int].getSpot(char) - } -} const play = new PlayField(8) let selected = 0 diff --git a/components/Gem.mjs b/components/Gem.mjs new file mode 100644 index 0000000..0b73e66 --- /dev/null +++ b/components/Gem.mjs @@ -0,0 +1,274 @@ +const kframe = { + fall: 'fall' +} + +const colorHex = { + gray: '#444', + red: '#d44', + orange: '#f60', + yellow: '#da4', + green: '#4d4', + blue: '#33a', + violet: '#a4d', + white: '#fff' +} + +const gem = // Contains gem names, colors, and types +{ + gray: { + color: 'gray', + name: 'hematite', + type: 'dud', + }, + red: { + color: 'red', + name: 'ruby', + type: 'primary' + }, + orange: { + color: 'orange', + name: 'citrine', + type: 'secondary', + }, + yellow: { + color: 'yellow', + name: 'topaz', + type: 'primary', + }, + green: { + color: 'green', + name: 'emerald', + type: 'secondary', + }, + blue: { + color: 'blue', + name: 'sapphire', + type: 'primary', + }, + violet: { + color: 'violet', + name: 'amethyst', + type: 'secondary', + }, + white: { + color: 'white', + name: 'diamond', + type: 'wild', + }, +} + +const IMG = // contains the string paths to the gem images +/** + * @constant {object} IMG contains the string paths to the gem images + */ +{ + red: './img/red.svg', + orange: './img/orange.svg', + yellow: './img/yellow.svg', + green: './img/green.svg', + blue: './img/blue.svg', + violet: './img/violet.svg', + white: './img/white.svg', + gray: './img/gray.svg' +} + +class Gem { + constructor(img=null) + { + this.img = img + this.element = img.element + this.selectListener() + } + + static random(spot) + { + const i = Math.floor(Math.random() * 53) + let gem + + if (i >= 0 && i <= 8){ + gem = new Red(spot) + } + else if (i >= 9 && i <= 16){ + gem = new Orange(spot) + } + else if (i >= 17 && i <= 24){ + gem = new Yellow(spot) + } + else if (i >= 25 && i <= 32){ + gem = new Green(spot) + } + else if (i >= 33 && i <= 40){ + gem = new Blue(spot) + } + else if (i >= 40 && i <= 48){ + gem = new Violet(spot) + } + else if(i >= 49 && i <= 53){ + gem = new Gray(spot) + } + else { + throw new Error(`Gem.random() generated an out-of-bound integer: ${i}`) + } + + gem.img.element.id = `spot-${spot}` + return gem + } + + selectListener() + { + this.img.addEventListener(event.element.click, () => { + const summary = 'select a gem to move' + if(this.element.classList.contains('selected')){ + this.element.classList.remove('selected') + selected-- + } else if(!this.element.classList.contains('selected') && selected < 2) { + this.element.classList.add('selected') + this.element.classList.add('matched') + selected++ + } + }) + } + + complements = 'Stub: Gem.cannotTouch() is not implemented for this gem' +} + +class Gray extends Gem { + type = gem.gray.type + + constructor(spot) + { + super(new Img(IMG.gray, 'gray gem', ['gem', kframe.fall, gem.gray.color], spot)) + } + + complements = [ + gem.white.color + ] +} + +class Red extends Gem { + type = gem.red.type + + constructor(spot) + { + super(new Img(IMG.red, 'red gem', ['gem', kframe.fall, gem.red.color], spot)) + } + + complements = [ + gem.red.color, + gem.violet.color, + gem.orange.color, + gem.white.color + ] +} + +class Orange extends Gem { + type = gem.orange.type + + constructor(spot) + { + super(new Img(IMG.orange, 'orange gem', ['gem', kframe.fall, gem.orange.color], spot)) + } + + complements = [ + gem.orange.color, + gem.red.color, + gem.yellow.color, + gem.white.color + ] +} + +class Yellow extends Gem { + type = gem.yellow.type + + constructor(spot) + { + super(new Img(IMG.yellow, 'yellow gem', ['gem', kframe.fall, gem.yellow.color], spot)) + } + + complements = [ + gem.yellow.color, + gem.orange.color, + gem.green.color, + gem.white.color + ] +} + +class Green extends Gem { + type = gem.green.type + + constructor(spot) + { + super(new Img(IMG.green, 'green gem', ['gem', kframe.fall, gem.green.color], spot)) + } + + complements = [ + gem.green.color, + gem.yellow.color, + gem.blue.color, + gem.white.color + ] +} + +class Blue extends Gem { + type = gem.blue.type + + constructor(spot) + { + super(new Img(IMG.blue, 'blue gem', ['gem', kframe.fall, gem.yellow.color], spot)) + } + + complements = [ + gem.blue.color, + gem.green.color, + gem.violet.color, + gem.white.color + ] +} + +class Violet extends Gem { + type = gem.violet.type + + constructor(spot) + { + super(new Img(IMG.violet, 'violet gem', ['gem', kframe.fall, gem.yellow.color], spot)) + } + + complements = [ + gem.violet.color, + gem.blue.color, + gem.red.color, + gem.white.color + ] +} + +class White extends Gem { + type = gem.white.type + + constructor(spot) + { + super(new Img(IMG.white, 'white gem', ['gem', kframe.fall, gem.yellow.color], spot)) + } + + complements = [ + gem.red.color, + gem.orange.color, + gem.yellow.color, + gem.green.color, + gem.blue.color, + gem.violet.color, + gem.gray.color, + gem.white.color + ] +} + +export { + Gem, + Gray, + Red, + Orange, + Yellow, + Green, + Blue, + Violet, + White +} \ No newline at end of file diff --git a/components/Playfield.mjs b/components/Playfield.mjs new file mode 100644 index 0000000..8c9c735 --- /dev/null +++ b/components/Playfield.mjs @@ -0,0 +1,140 @@ +import { Grid } from '../grid/Grid.mjs' +import { + Gem, + Gray, + Red, + Orange, + Yellow, + Green, + Blue, + Violet, + White +} from './Gem.mjs' +import { + // Constants + display, + flex, + event, + unit, + + // Base Classes + Selection, + StyleSheet, + Listener, + ListenerOnLoad, + + // Classables + // // Containers + Img, + Div, + DivBtn, + FlexBox, + Figure, + Form, + Label, + // // Input + Button, + Input, + TextArea, + Select, + Option, + // // Format elements + Br, + // // External Resource Links + Link, + Style, + + // Text Elements + // // Headers + H1, + H2, + H3, + H4, + H5, + H6, + // // Body Text + P, + Figcaption, + A, + Strong, + Abbr, + Blockquote, + Sub, + Sup, + Span, + Text, + Code, + Pre, + + // Functions + getStylesheetByFileName, + addAdoptedStyleSheet, + JSONCSS, +} from '../module/vjsc/vanilla.mjs' + + +class Line +// A column on the play field +{ + constructor(int) + { + this.flexBox = new FlexBox(flex.c, ['line', flex.flow.default], `line${int}`) + const spot = ['a','b','c','d','e','f','g','h'] + for( let i = 0; i < 8; i++) + { + const gem = Gem.random(spot[i]) + this.flexBox.element.appendChild(gem.img.element) + } + } + + getSpot(char) + { + if('abcdefgh'.includes(char) === false){ + throw new Error('Line.getSpot() received an invalid character') + } + else { + return this.element.querySelector(`#spot-${char}`) + } + } + + insertGem(char, gem) + { + this.getSpot(char).appendChild(gem) + } + + removeGem(char) + { + this.getSpot(char).removeChild() + } + +} + +class PlayField { + constructor(height) + { + this.data = new Grid(height, 8), + this.container = new FlexBox(flex.r,['field'], 'field'), + this.lines = [] + + for(let i = 0; i < height; i++) + { + this.lines.push(new Line(i)) + this.container.element.appendChild(this.lines[i].flexBox.element) + } + } + + getLine(int) + { + return this.lines[int] + } + + getSpot(int, char) + { + return this.lines[int].getSpot(char) + } +} + +export { + PlayField, + Line +} \ No newline at end of file diff --git a/grid b/grid index e5b98cc..68fc860 160000 --- a/grid +++ b/grid @@ -1 +1 @@ -Subproject commit e5b98cc50bac7bfa5261d658bec3856e6d94b32a +Subproject commit 68fc8602d2a89f4c46164d8d32cfc350bdde8cc3 diff --git a/module/grid b/module/grid new file mode 160000 index 0000000..68fc860 --- /dev/null +++ b/module/grid @@ -0,0 +1 @@ +Subproject commit 68fc8602d2a89f4c46164d8d32cfc350bdde8cc3 diff --git a/module/vjsc b/module/vjsc new file mode 160000 index 0000000..91f8f45 --- /dev/null +++ b/module/vjsc @@ -0,0 +1 @@ +Subproject commit 91f8f45429782d77f162c23deb157573cf443652 diff --git a/vjsc b/vjsc deleted file mode 160000 index 575851f..0000000 --- a/vjsc +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 575851fa42256f925e650a478527c0e132959cdd From 21b9a834dec33fea8019de280df8f2852cf5fb81 Mon Sep 17 00:00:00 2001 From: jauntyjocularjay <77408854+jauntyjocularjay@users.noreply.github.com> Date: Wed, 14 Aug 2024 18:27:29 -0800 Subject: [PATCH 09/11] removed submodule in $folder --- .gitmodules | 3 --- grid | 1 - index.html | 2 +- 3 files changed, 1 insertion(+), 5 deletions(-) delete mode 160000 grid diff --git a/.gitmodules b/.gitmodules index e68575f..d2f454d 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,6 +1,3 @@ -[submodule "grid"] - path = grid - url = https://github.com/jauntyjocularjay/OpenGameGrid [submodule "git"] path = git url = https://github.com/jauntyjocularjay/kwikgit.git diff --git a/grid b/grid deleted file mode 160000 index 68fc860..0000000 --- a/grid +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 68fc8602d2a89f4c46164d8d32cfc350bdde8cc3 diff --git a/index.html b/index.html index a7b771b..5aa2934 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - + Gems From f3a8e68ec3457670bf49480275dcba0370c07a89 Mon Sep 17 00:00:00 2001 From: jauntyjocularjay <77408854+jauntyjocularjay@users.noreply.github.com> Date: Wed, 14 Aug 2024 18:37:40 -0800 Subject: [PATCH 10/11] fixed event listener on Gem --- GemGame.code-workspace | 10 ++++++- components/Gem.mjs | 64 +++++++++++++++++++++++++++++++++++++++- components/Playfield.mjs | 4 +-- module/vjsc | 2 +- 4 files changed, 75 insertions(+), 5 deletions(-) diff --git a/GemGame.code-workspace b/GemGame.code-workspace index 876a149..4105e65 100644 --- a/GemGame.code-workspace +++ b/GemGame.code-workspace @@ -2,7 +2,15 @@ "folders": [ { "path": "." + }, + { + "path": "module/vjsc" + }, + { + "path": "module/grid" } ], - "settings": {} + "settings": { + "liveServer.settings.multiRootWorkspaceName": "GemGame" + } } \ No newline at end of file diff --git a/components/Gem.mjs b/components/Gem.mjs index 0b73e66..a299b44 100644 --- a/components/Gem.mjs +++ b/components/Gem.mjs @@ -1,3 +1,65 @@ +import { + // Constants + display, + flex, + event, + unit, + + // Base Classes + OptionSelection, + StyleSheet, + Listener, + ListenerOnLoad, + + // Classables + // // Containers + Img, + Div, + DivBtn, + FlexBox, + Figure, + Form, + Label, + // // Input + Button, + Input, + TextArea, + Select, + Option, + // // Format elements + Br, + // // External Resource Links + Link, + Style, + + // Text Elements + // // Headers + H1, + H2, + H3, + H4, + H5, + H6, + // // Body Text + P, + Figcaption, + A, + Strong, + Abbr, + Blockquote, + Sub, + Sup, + Span, + Text, + Code, + Pre, + + // Functions + getStylesheetByFileName, + addAdoptedStyleSheet, + JSONCSS, +} from '../module/vjsc/vanilla.mjs' + const kframe = { fall: 'fall' } @@ -116,7 +178,7 @@ class Gem { selectListener() { - this.img.addEventListener(event.element.click, () => { + this.img.element.addEventListener(event.element.click, () => { const summary = 'select a gem to move' if(this.element.classList.contains('selected')){ this.element.classList.remove('selected') diff --git a/components/Playfield.mjs b/components/Playfield.mjs index 8c9c735..117d9b4 100644 --- a/components/Playfield.mjs +++ b/components/Playfield.mjs @@ -1,4 +1,4 @@ -import { Grid } from '../grid/Grid.mjs' +import { Grid } from '../module/grid/Grid.mjs' import { Gem, Gray, @@ -18,7 +18,7 @@ import { unit, // Base Classes - Selection, + OptionSelection, StyleSheet, Listener, ListenerOnLoad, diff --git a/module/vjsc b/module/vjsc index 91f8f45..ff0ab54 160000 --- a/module/vjsc +++ b/module/vjsc @@ -1 +1 @@ -Subproject commit 91f8f45429782d77f162c23deb157573cf443652 +Subproject commit ff0ab54a5ce6e91a90b3d7d713a98f63f6385ea8 From fcf90471f90223c11e9f150885f370189bc301ef Mon Sep 17 00:00:00 2001 From: jauntyjocularjay <77408854+jauntyjocularjay@users.noreply.github.com> Date: Wed, 14 Aug 2024 18:44:09 -0800 Subject: [PATCH 11/11] added up, down, left, right keyframes --- Gems.mjs | 1 - components/Gem.mjs | 2 ++ gems.css | 24 ++++++++++++++++++++++++ 3 files changed, 26 insertions(+), 1 deletion(-) diff --git a/Gems.mjs b/Gems.mjs index 9e230ba..92b0058 100644 --- a/Gems.mjs +++ b/Gems.mjs @@ -7,7 +7,6 @@ import { const play = new PlayField(8) -let selected = 0 document.body.appendChild(play.container.element) diff --git a/components/Gem.mjs b/components/Gem.mjs index a299b44..68e4cea 100644 --- a/components/Gem.mjs +++ b/components/Gem.mjs @@ -64,6 +64,8 @@ const kframe = { fall: 'fall' } +let selected = 0 + const colorHex = { gray: '#444', red: '#d44', diff --git a/gems.css b/gems.css index 9dd3ddf..38da44e 100644 --- a/gems.css +++ b/gems.css @@ -117,6 +117,30 @@ img.selected { } } +@keyframes up { + from { + transform: translateY(100%); + } +} + +@keyframes down { + from { + transform: translateY(-100%); + } +} + +@keyframes left { + from { + transform: translateX(-100%); + } +} + +@keyframes right { + from { + transform: translateX(100%); + } +} + @keyframes matched { from { opacity: 1;} to { opacity: 0;}