Skip to content

Commit

Permalink
Introduce button component
Browse files Browse the repository at this point in the history
  • Loading branch information
@cs1m0n
cs1m0n committed Nov 6, 2024
1 parent ed7c827 commit 800c8e5
Show file tree
Hide file tree
Showing 17 changed files with 196 additions and 295 deletions.
19 changes: 19 additions & 0 deletions src/Experience/Components/Button.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export default class Button {
constructor(text, id = '', enabled = true) {
this.button = `<button class="button-grid" id="${id}" role="button" ${enabled ? '' : 'disabled'}>
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">${text}</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>`
}

getHtml() {
return this.button
}
}
14 changes: 3 additions & 11 deletions src/Experience/Components/ConfirmationScreen.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Offline from '../Utils/Offline.js'
import Experience from '../Experience.js'
import Button from '../Components/Button.js'
import _s from '../Utils/Strings.js'
import _gl from '../Utils/Globals.js'
import _e from '../Utils/Events.js'
Expand Down Expand Up @@ -29,6 +30,7 @@ export default class ConfirmationScreen {
}

setHtml() {
const csBtn = new Button(instance.data.cs_button)
const container = _gl.elementFromHtml(
`<div class="absolute inset-0 bg-bke-darkpurple grid place-content-center" id="task-container">
<div class="relative mx-auto max-w-[1980px] px-4 pb-4 pt-24 tv:gap-8 tv:px-8 tv:pt-32">
Expand All @@ -38,17 +40,7 @@ export default class ConfirmationScreen {
${
instance.data.cs_button !== ''
? `<div class="flex justify-center mt-8">
<button class="button-grid">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">${instance.data.cs_button}</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
${csBtn.getHtml()}
</div>`
: ''
}
Expand Down
20 changes: 6 additions & 14 deletions src/Experience/Components/GameDescription.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import Offline from '../Utils/Offline.js'
import Experience from '../Experience.js'
import _s from '../Utils/Strings.js'
import _gl from '../Utils/Globals.js'
import _e from '../Utils/Events.js'
import SortingGame from '../Games/SortingGame.js'
import CableConnectorGame from '../Games/CableConnectorGame.js'
import SimonSaysGame from '../Games/SimonSaysGame.js'
Expand All @@ -14,6 +11,10 @@ import MazeGame from '../Games/MazeGame.js'
import DuckGame from '../Games/DuckGame.js'
import CodeUnlock from './CodeUnlock.js'
import PianoTiles from '../Games/PianoTiles.js'
import Button from '../Components/Button.js'
import _s from '../Utils/Strings.js'
import _gl from '../Utils/Globals.js'
import _e from '../Utils/Events.js'

let instance = null

Expand Down Expand Up @@ -56,6 +57,7 @@ export default class GameDescription {
}

setHtml() {
const startGameBtn = new Button(_s.miniGames.startGame)
const container = _gl.elementFromHtml(
`<div class="task-container" id="task-container">
<div class="corner top-left"></div>
Expand All @@ -78,17 +80,7 @@ export default class GameDescription {
${instance.data.prompts ? `<p class="task-prompts">${instance.data.prompts[0].prompt}</p>` : ''}
${instance.data.tutorial ? `<div class="task-tutorial">${instance.getDomElement(instance.data.tutorial)}</div>` : ''}
<div class="task-actions">
<button class="button-grid">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">${_s.miniGames.startGame}</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
${startGameBtn.getHtml()}
</div>
</div>
</div>
Expand Down
14 changes: 3 additions & 11 deletions src/Experience/Components/GlitchHelp.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Offline from '../Utils/Offline.js'
import Experience from '../Experience.js'
import Button from '../Components/Button.js'
import _s from '../Utils/Strings.js'
import _gl from '../Utils/Globals.js'
import _e from '../Utils/Events.js'
Expand Down Expand Up @@ -27,6 +28,7 @@ export default class GlitchHelp {
}

setHtml() {
const confirmationBtn = new Button(instance.data.confirmation_button)
const container = _gl.elementFromHtml(
`<div class="task-container glitch-help-task" id="task-container">
<div class="corner top-left"></div>
Expand All @@ -53,17 +55,7 @@ export default class GlitchHelp {
instance.data.confirmation_button !== ''
? `
<div class="task-actions">
<button class="button-grid">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">${instance.data.confirmation_button}</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
${confirmationBtn.getHtml()}
</div>
`
: ''
Expand Down
24 changes: 9 additions & 15 deletions src/Experience/Components/TaskDescriptionScreen.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Offline from '../Utils/Offline.js'
import Experience from '../Experience.js'
import Button from '../Components/Button.js'
import _s from '../Utils/Strings.js'
import _gl from '../Utils/Globals.js'
import _e from '../Utils/Events.js'
Expand Down Expand Up @@ -32,6 +33,7 @@ export default class TaskDescriptionScreen {
}

setHtml() {
const tdBtn = new Button(instance.data.td_button)
const container = _gl.elementFromHtml(
`<div class="task-container" id="task-container">
<div class="corner top-left"></div>
Expand All @@ -53,21 +55,13 @@ export default class TaskDescriptionScreen {
</h5>
${instance.data.td_description ? `<p class="task-prompts">${instance.data.td_description}</p>` : ''}
${instance.data.td_image ? `<div class="task-tutorial">${instance.getDomElement(instance.data.td_image)}</div>` : ''}
${instance.data.td_button !== '' ?
`<div class="task-actions">
<button class="button-grid">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">${instance.data.td_button}</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
</div>
` : ''}
${
instance.data.td_button !== ''
? `<div class="task-actions">
${tdBtn.getHtml()}
</div>`
: ''
}
</div>
</div>
<div class="edge right"></div>
Expand Down
25 changes: 11 additions & 14 deletions src/Experience/Components/TaskDescriptionWithCalculatorScreen.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import Offline from '../Utils/Offline.js'
import Experience from '../Experience.js'
import Calculator from '../Extras/Calculator.js'
import Button from '../Components/Button.js'
import _s from '../Utils/Strings.js'
import _gl from '../Utils/Globals.js'
import _e from '../Utils/Events.js'
import Calculator from '../Extras/Calculator.js'

let instance = null

Expand Down Expand Up @@ -36,6 +37,8 @@ export default class TaskDescriptionWithCalculatorScreen {
}

setHtml() {
const tdBtn = new Button(instance.data.td_button)
console.log('tdBtn', tdBtn.getHtml())
const container = _gl.elementFromHtml(
`<div class="task-container" id="task-container">
<div class="corner top-left"></div>
Expand All @@ -57,20 +60,14 @@ export default class TaskDescriptionWithCalculatorScreen {
</h5>
${instance.data.td_description ? `<p class="task-prompts">${instance.data.td_description}</p>` : ''}
${instance.data.td_image ? `<div class="task-tutorial" id="task-image"><img src="${instance.data.td_image}" /></div>` : ''}
${instance.data.td_button !== '' ? `
${
instance.data.td_button !== ''
? `
<div class="task-actions">
<button class="button-grid">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">${instance.data.td_button}</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
</div>` : ''}
${tdBtn.getHtml()}
</div>`
: ''
}
</div>
</div>
<div class="edge right"></div>
Expand Down
27 changes: 12 additions & 15 deletions src/Experience/Extras/VideoWithQuestion.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Experience from '../Experience.js'
import Button from '../Components/Button.js'
import _s from '../Utils/Strings.js'
import _lang from '../Utils/Lang.js'
import _api from '../Utils/Api.js'
Expand Down Expand Up @@ -26,6 +27,7 @@ export default class VideoWithQuestion {
instance.audio.setOtherAudioIsPlaying(true)
instance.audio.fadeOutBgMusic()

const submitBtn = new Button(_s.task.submit)
const container = _gl.elementFromHtml(
`<div class="task-container" id="video-with-question">
<div class="corner top-left"></div>
Expand All @@ -34,8 +36,9 @@ export default class VideoWithQuestion {
<div class="edge left"></div>
<div class="content">
<div class="task-content">
${instance.data.question ?
`<h5 class="task-heading">
${
instance.data.question
? `<h5 class="task-heading">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
Expand All @@ -45,7 +48,9 @@ export default class VideoWithQuestion {
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</h5>` : ''}
</h5>`
: ''
}
<div id="task-tutorial" class="w-[30rem]"></div>
<div class="textarea-box input-grid">
Expand All @@ -62,17 +67,7 @@ export default class VideoWithQuestion {
<div class="corner bottom-right"></div>
</div>
<div class="task-actions">
<button class="button-grid">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">${_s.task.submit}</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
${submitBtn.getHtml()}
</div>
</div>
</div>
Expand Down Expand Up @@ -119,7 +114,9 @@ export default class VideoWithQuestion {

toggleQuestion() {
instance.resources.videoPlayers[instance.data.video].pause()
document.querySelectorAll('#video-with-question .hidden').forEach((item) => item.classList.remove('hidden'))
document
.querySelectorAll('#video-with-question .hidden')
.forEach((item) => item.classList.remove('hidden'))

instance.experience.navigation.next.addEventListener('click', instance.saveAnswers)
instance.experience.navigation.next.removeEventListener('click', instance.toggleQuestion)
Expand Down
21 changes: 4 additions & 17 deletions src/Experience/Games/CableConnectorGame.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import Experience from '../Experience.js'
import Konva from 'konva'
import Timer from '../Extras/Timer.js'
import Button from '../Components/Button.js'
import _s from '../Utils/Strings.js'
import _e from '../Utils/Events.js'
import _gl from '../Utils/Globals.js'
import Konva from 'konva'

let instance = null

Expand Down Expand Up @@ -558,22 +559,8 @@ export default class CableConnector {
</div>
`)

const resetBTN = _gl.elementFromHtml(`
<button class="button-grid">
<div class="corner top-left"></div>
<div class="edge top"></div>
<div class="corner top-right"></div>
<div class="edge left"></div>
<div class="content">
${_s.miniGames.playAgain}
</div>
<div class="edge right"></div>
<div class="corner bottom-left"></div>
<div class="edge bottom"></div>
<div class="corner bottom-right"></div>
</button>
`)

const playAgainBtn = new Button(_s.miniGames.playAgain)
const resetBTN = _gl.elementFromHtml(playAgainBtn.getHtml())
gameOverHTML.querySelector('.buttons').append(resetBTN)

document.querySelector('.cable-connect .container').append(gameOverHTML)
Expand Down
Loading

0 comments on commit 800c8e5

Please sign in to comment.