diff --git a/assets/index-BlUwcXEi.css b/assets/index-BlUwcXEi.css new file mode 100644 index 0000000..b88fabe --- /dev/null +++ b/assets/index-BlUwcXEi.css @@ -0,0 +1 @@ +body{font-family:Arial,sans-serif;font-size:16px;text-align:center;background-color:#399c6a;min-height:95%}h1{margin:15px}h2{margin:10px}#game-info{display:flex;justify-content:center;align-items:center;background-color:#f5f5f5;padding:5px 0;margin:10px auto;max-width:60vh;border-radius:10px;box-shadow:0 4px 8px #0003}.info-text{padding:8px;white-space:pre-wrap}#game-container{display:flex;justify-content:center;align-items:center;margin:0}#game-board{display:grid;grid-template-rows:repeat(6,80px);grid-template-columns:repeat(6,80px);gap:5px;padding:10px;border-radius:10px}.game-tile,.info-tile,.empty-tile{width:80px;height:80px;background-color:#ccc;border:1px solid #333;display:flex;justify-content:center;align-items:center;cursor:pointer;box-sizing:border-box;white-space:pre-wrap;border-radius:5px}.empty-tile{display:none}.game-tile.selected{outline:3px solid red;transform:scale(1.05)}.game-tile.selected-memo{outline:3px solid yellow;transform:scale(1.05)}#game-instructions{display:flex;justify-content:center;align-items:center;flex-direction:column;background-color:#f5f5f5;padding:0 10px;margin:20px auto 10px;max-width:60vh;border-radius:10px;box-shadow:0 4px 8px #0003}ul{display:inline-block;margin:10px}li{text-align:left}button{border-radius:5px}#video-wrapper{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:0;margin:20px auto 10px;max-width:25vh;max-height:25vh}#video-wrapper img{width:10vh;height:10vh}@media (max-width: 600px){#game-board{grid-template-rows:repeat(6,55px);grid-template-columns:repeat(6,55px)}.game-tile,.info-tile,.empty-tile{width:55px;height:55px}#game-info,#game-instructions{max-width:95%}body{font-size:12px}} diff --git a/assets/index-BncAAax9.js b/assets/index-BncAAax9.js new file mode 100644 index 0000000..e59d4dd --- /dev/null +++ b/assets/index-BncAAax9.js @@ -0,0 +1,23 @@ +(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))o(s);new MutationObserver(s=>{for(const r of s)if(r.type==="childList")for(const i of r.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&o(i)}).observe(document,{childList:!0,subtree:!0});function t(s){const r={};return s.integrity&&(r.integrity=s.integrity),s.referrerPolicy&&(r.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?r.credentials="include":s.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function o(s){if(s.ep)return;s.ep=!0;const r=t(s);fetch(s.href,r)}})();class b{calculateRowSums(e){const t=Array(e[0].length).fill(0).map(()=>({sumValue:0,sumVoltorb:0})),o=Array(e[0].length).fill(0).map(()=>({sumValue:0,sumVoltorb:0}));for(let s=0;s1&&t++;return t}}class v{generateBoard(e,t){const[o,s,r]=e,i=t*t-o-s-r,l=[...this.createTileArray(r,0),...this.createTileArray(i,1),...this.createTileArray(o,2),...this.createTileArray(s,3)];for(let d=l.length-1;d>=0;d--){const m=Math.floor(Math.random()*(d+1));[l[d],l[m]]=[l[m],l[d]]}const h=[];for(let d=0;dthis.createTile(o))}createTile(e){return{voltorb:e===0,value:e,revealed:!1,marks:new Set}}}var c=(a=>(a[a.Up=0]="Up",a[a.Down=1]="Down",a[a.Left=2]="Left",a[a.Right=3]="Right",a))(c||{});class S{constructor(e){this.boardState=e}gameTileMarkListener(e){this.boardState.toggleMark(e)}gameTileRevealListener(e,t,o){this.boardState.gameOver||this.boardState.gameWon?this.boardState.resetBoard():this.boardState.memoMode?this.boardState.toggleSelectedTile(e,t,o):(this.boardState.toggleSelectedTile(e,t,o),this.boardState.revealTile(e))}keyPressListener(e){switch(e.key){case"w":case"W":case"ArrowUp":e.preventDefault(),this.boardState.moveSelectedTile(c.Up);break;case"s":case"S":case"ArrowDown":e.preventDefault(),this.boardState.moveSelectedTile(c.Down);break;case"a":case"A":case"ArrowLeft":e.preventDefault(),this.boardState.moveSelectedTile(c.Left);break;case"d":case"D":case"ArrowRight":e.preventDefault(),this.boardState.moveSelectedTile(c.Right);break;case"Enter":this.gameTileRevealListener(this.boardState.selectedTile,this.boardState.selectedRow,this.boardState.selectedCol);break;case"x":case"X":this.boardState.toggleMemoMode();break;case"0":case"1":case"2":case"3":{const t=parseInt(e.key);this.boardState.toggleMark(t);break}}}}const n=5;class L{constructor(e,t){this.boardListener=e,this.boardState=t}firstRenderGame(){this.renderInfo(),this.renderBoard(),this.renderMemoButton(),this.addEventListeners()}renderGame(){this.renderGameAlert(),this.renderInfo(),this.renderBoard(),this.renderMemoButton()}renderGameAlert(){this.boardState.gameWon?alert("You won!"):this.boardState.gameOver&&alert("Game over!")}renderInfo(){const e=document.getElementById("info-level");e.textContent=`Level: +${this.boardState.level}`;const t=document.getElementById("info-coins");t.textContent=`Total coins: +${this.boardState.totalCoins}`;const o=document.getElementById("info-coins-level");o.textContent=`Coins this level: +${this.boardState.coinsThisLevel}`}renderBoard(){const e=document.getElementById("game-board");e.innerHTML="";const t=this.boardState.grid,o=this.boardState.rowSums,s=this.boardState.colSums;for(let r=0;r<=n;r++)for(let i=0;i<=n;i++){const l=document.createElement("div");l.id=`tile-${r}-${i}`,r===n&&i===n?l.className="empty-tile":r===n||i===n?this.renderInfoTile(l,o,s,r,i):this.renderGameTile(l,t[r][i],r,i),e==null||e.appendChild(l)}}renderInfoTile(e,t,o,s,r){e.className="info-tile",s===n?e.textContent=`0${o[r].sumValue} +💣:${o[r].sumVoltorb}`:r===n&&(e.textContent=`0${t[s].sumValue} +💣:${t[s].sumVoltorb}`)}renderGameTile(e,t,o,s){e.className="game-tile",t==this.boardState.selectedTile&&this.boardState.memoMode?e.classList.add("selected-memo"):t==this.boardState.selectedTile&&e.classList.add("selected");const r=Array.from(t.marks).sort(),i=r.length>0?`[${r.join(",")}]`:"";e.textContent=t.revealed?t.voltorb?"💣":t.value.toString()+` +`+i:""+i,e.addEventListener("click",()=>{this.boardListener.gameTileRevealListener(t,o,s),this.renderGame()})}renderMemoButton(){const e=document.getElementById("memo-button-toggle");e.textContent=this.boardState.memoMode?"Memo Mode: ON":"Memo Mode: OFF"}addEventListeners(){document.addEventListener("keydown",l=>{this.boardListener.keyPressListener(l),this.renderGame()});const e=document.getElementById("memo-button-toggle");e==null||e.addEventListener("click",()=>{this.boardState.toggleMemoMode(),this.renderGame()});const t=document.getElementById("memo-button-0");t==null||t.addEventListener("click",()=>{this.boardListener.gameTileMarkListener(0),this.renderGame()});const o=document.getElementById("memo-button-1");o==null||o.addEventListener("click",()=>{this.boardListener.gameTileMarkListener(1),this.renderGame()});const s=document.getElementById("memo-button-2");s==null||s.addEventListener("click",()=>{this.boardListener.gameTileMarkListener(2),this.renderGame()});const r=document.getElementById("memo-button-3");r==null||r.addEventListener("click",()=>{this.boardListener.gameTileMarkListener(3),this.renderGame()});const i=document.getElementById("playbutton");i==null||i.addEventListener("click",()=>{this.showVideoPlayer()})}showVideoPlayer(){const e=document.getElementById("video-wrapper");e.innerHTML=` + + + `;const t=document.getElementById("close-button");t==null||t.addEventListener("click",()=>{this.hideVideoPlayer()})}hideVideoPlayer(){const e=document.getElementById("video-wrapper");e.innerHTML=` + Play Button + `;const t=document.getElementById("playbutton");t==null||t.addEventListener("click",()=>this.showVideoPlayer())}}const u=5,g={1:[[5,0,6],[4,1,6],[3,1,6],[2,2,6],[0,3,6]],2:[[6,0,7],[5,1,7],[3,2,7],[1,3,7],[0,4,7]],3:[[7,0,8],[6,1,8],[4,2,8],[2,3,8],[1,4,8]],4:[[8,0,10],[5,2,10],[3,3,8],[2,4,10],[0,5,8]],5:[[9,0,10],[7,1,10],[6,2,10],[4,3,10],[1,5,10]],6:[[8,1,10],[5,3,10],[3,4,10],[2,5,10],[0,6,10]],7:[[9,1,13],[7,2,10],[6,3,10],[4,4,10],[1,6,13]],8:[[0,7,10],[8,2,10],[5,4,10],[2,6,10],[7,3,10]]};class p{constructor(e,t){this.boardGenerator=e,this.boardCalculator=t,this.level=1,this.gameOver=!1,this.gameWon=!1,this.memoMode=!1,this.totalCoins=0,this.coinsThisLevel=0;const o=g[this.level.toString()][Math.floor(Math.random()*u)];this.grid=this.boardGenerator.generateBoard(o,n),this.selectedTile=this.grid[0][0],this.selectedRow=0,this.selectedCol=0,[this.rowSums,this.colSums]=this.boardCalculator.calculateRowSums(this.grid),this.num2s3s=this.boardCalculator.calculateNum2s3s(this.grid)}resetBoard(){this.gameOver=!1,this.gameWon=!1;const e=g[this.level.toString()][Math.floor(Math.random()*u)];this.grid=this.boardGenerator.generateBoard(e,n),this.selectedTile=this.grid[0][0],this.selectedRow=0,this.selectedCol=0,[this.rowSums,this.colSums]=this.boardCalculator.calculateRowSums(this.grid),this.num2s3s=this.boardCalculator.calculateNum2s3s(this.grid)}toggleMemoMode(){this.memoMode=!this.memoMode}toggleSelectedTile(e,t,o){this.selectedTile=e,this.selectedRow=t,this.selectedCol=o}moveSelectedTile(e){switch(e){case c.Up:this.selectedRow>0&&(this.selectedRow--,this.selectedTile=this.grid[this.selectedRow][this.selectedCol]);break;case c.Down:this.selectedRow0&&(this.selectedCol--,this.selectedTile=this.grid[this.selectedRow][this.selectedCol]);break;case c.Right:this.selectedCol1&&this.num2s3s--,this.coinsThisLevel=this.coinsThisLevel>0?this.coinsThisLevel*e.value:e.value),this.isGamecomplete()&&this.triggerGameWon()}flipBoard(){this.grid.forEach(t=>{t.forEach(o=>{o.revealed=!0})})}triggerGameOver(){this.gameOver=!0,this.flipBoard(),this.coinsThisLevel=0,this.level=this.level>1?this.level-1:1}triggerGameWon(){this.gameWon=!0,this.flipBoard(),this.totalCoins+=this.coinsThisLevel,this.coinsThisLevel=0,this.level++}}const y=new v,w=new b,f=new p(y,w),T=new S(f),M=new L(T,f);M.firstRenderGame(); diff --git a/images/breakfast-brian.jpg b/images/breakfast-brian.jpg deleted file mode 100644 index dc2f668..0000000 Binary files a/images/breakfast-brian.jpg and /dev/null differ diff --git a/images/favicon.ico b/images/favicon.ico index cc97e01..91a19bc 100644 Binary files a/images/favicon.ico and b/images/favicon.ico differ diff --git a/images/playbutton.png b/images/playbutton.png new file mode 100644 index 0000000..4c607d7 Binary files /dev/null and b/images/playbutton.png differ diff --git a/images/voltorb-flip.png b/images/voltorb-flip.png deleted file mode 100644 index 409dbd3..0000000 Binary files a/images/voltorb-flip.png and /dev/null differ diff --git a/index.html b/index.html index 153de46..6fe300f 100644 --- a/index.html +++ b/index.html @@ -1,2 +1,68 @@ - Andreas L

About text goes here.

\ No newline at end of file + + + + + + Voltorb Flip + + + + + +
+
Level
+
Total Coins
+
Coins this level
+
+
+
+
+
+ +
+ + + + +
+
+
+
+

Controls

+
    +
  • WASD/Arrow keys: Select tile
    • +
  • Enter: Reveal tile
    • +
  • X: Enter Memo mode
    • +
  • 0/1/2/3: Toggle marker
    • +
+
+
+

About

+

+ This is a project for me to learn HTML, CSS and + JavaScript/TypeScript. It is heavily based on Voltorb Flip + by + Brandon Stein + as well as the + original game. +

+

+ The source code can be found + here. +

+
+
+
+ Play Button +
+ + diff --git a/projects/index.html b/projects/index.html deleted file mode 100644 index b3cbb39..0000000 --- a/projects/index.html +++ /dev/null @@ -1,2 +0,0 @@ - Andreas L

Voltorb Flip

About

Paragraph text.

\ No newline at end of file