add enter name on create game(not on join game yet)

stutxo · Feb 9, 2024 · f7dd195 · f7dd195
1 parent 6582d14
commit f7dd195
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 3 deletions.
diff --git a/Trunk.toml b/Trunk.toml
@@ -1,4 +1,4 @@
 [build]
-pattern_script = "<script type=\"module\">import init, { new_game } from '{base}{js}'; init('{base}{wasm}'); document.addEventListener('DOMContentLoaded', () => { document.getElementById('NewGameButton').addEventListener('click', () => { new_game(); }); }); </script>"
+pattern_script = "<script type=\"module\">import init, { new_game } from '{base}{js}'; init('{base}{wasm}'); document.addEventListener('DOMContentLoaded', () => { var gameInfoInput = document.getElementById('gameInfo'); var storedUsername = localStorage.getItem('username'); gameInfoInput.value = storedUsername; document.getElementById('NewGameButton').addEventListener('click', () => { if (gameInfoInput.value !== '') { localStorage.setItem('username', gameInfoInput.value.trim()); console.log('Creating game with player name:', gameInfoInput.value.trim()); } else { localStorage.removeItem('username'); } new_game(); }); });</script>"
 dist = "./docs"
 public_url = "./"
diff --git a/docs/404.html b/docs/404.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><meta charset=UTF-8><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name=viewport><title>connect4.xyz</title><script type=module>import a,{new_game as b}from"./connect4xyz-f4e17d100e7bb2cd.js";a(`./connect4xyz-f4e17d100e7bb2cd_bg.wasm`);document.addEventListener(`DOMContentLoaded`,()=>{document.getElementById(`NewGameButton`).addEventListener(`click`,()=>{b()})})</script><link href=./favicon-62f8607a7e9954c.ico integrity=sha384-vRtMBXgD1hNxxhineEpgcLDnlUNIk3AGT2GbjTSNeh0B2Eecd2g7Qb_timlQOfyx rel=icon><script async defer src=https://buttons.github.io/buttons.js></script><style>body,html{width:100%;height:100%;margin:0 auto;padding:0;overflow:hidden}div.menu-container .container{color:#333;background-color:#f2f2f280;border:1px solid #eaeaea;border-radius:5px;flex-direction:column;justify-content:center;gap:10px;padding:20px;font-family:Fira Mono,monospace;display:flex;position:absolute;top:40%;left:50%;transform:translate(-50%)}@media (width<=800px){div.menu-container .container{top:50%}}div.menu-container .container button{color:#333;cursor:pointer;background-color:#f2f2f2e6;border:none;border-radius:5px;padding:10px 15px;font-family:Fira Mono,monospace;transition:background-color .3s}div.menu-container .container button:hover{background-color:#e6e6e6}#homeButton{cursor:pointer;touch-action:manipulation;background-color:#fffc;border:none;font-size:30px}.gameId{justify-content:center;display:flex;position:absolute;top:10%;left:50%;transform:translate(-50%)}#gameIdDisplay{color:#333;font-family:Fira Mono,monospace;font-size:15px}.home-container{position:absolute;top:0;left:40%}@media (width<=800px){.home-container{position:absolute;top:0;left:0}}.github-container{position:absolute;top:0;right:41%}@media (width<=800px){.github-container{position:absolute;top:0;left:85%}}#ShareContainer,#NewGameContainer,#UrlContainer,#gameIdDisplay{display:none}</style><link as=fetch crossorigin href=./connect4xyz-f4e17d100e7bb2cd_bg.wasm integrity=sha384-ZbVHzlnQJ0Z5MixyhuBfiiJ16nfjVaTg6FnXx5AvfoaY21eEEkaKwT-MK5HRRenD rel=preload type=application/wasm><link crossorigin href=./connect4xyz-f4e17d100e7bb2cd.js integrity=sha384-oBeRvUw-JAKBvj3OC1wyisWxoh7x7umoKJLGrV4_din900WaB2r5yJJyTP4WEHKX rel=modulepreload></head><body><div class=github-container><a aria-label="Star stum0/connect4xyz on GitHub" class=github-button data-show-count=true href=https://github.com/stum0/connect4xyz></a></div><div class=home-container><button id=homeButton>🏠</button></div><div class=gameId><span id=gameIdDisplay></span></div><div class=menu-container><div class=container id=LoadingContainer><div id=loadingText>Loading...</div></div><div class=container id=NewGameContainer><button id=NewGameButton>Create Game 🎲</button></div><div class=container id=UrlContainer><span id=url></span><div><button id=copyButton onclick=copyToClipboard()>Share this URL to play 📋</button></div></div><div class=container id=ShareContainer><button id=copyBoardButton onclick=copyBoardStateToClipboard()>Share Result 📋</button><button id=postNostrButton onclick=postToNostr()>Post to Nostr</button></div></div><script src=https://unpkg.com/nostr-tools/lib/nostr.bundle.js></script><script>let currentBoardState = "";
+<!doctype html><html lang=en><meta charset=UTF-8><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name=viewport><title>connect4.xyz</title><script type=module>let c=`username`;import a,{new_game as b}from"./connect4xyz-f4e17d100e7bb2cd.js";a(`./connect4xyz-f4e17d100e7bb2cd_bg.wasm`);document.addEventListener(`DOMContentLoaded`,()=>{var a=document.getElementById(`gameInfo`);var d=localStorage.getItem(c);a.value=d;document.getElementById(`NewGameButton`).addEventListener(`click`,()=>{if(a.value!==``){localStorage.setItem(c,a.value.trim());console.log(`Creating game with player name:`,a.value.trim())}else{localStorage.removeItem(c)};b()})})</script><link href=./favicon-62f8607a7e9954c.ico integrity=sha384-vRtMBXgD1hNxxhineEpgcLDnlUNIk3AGT2GbjTSNeh0B2Eecd2g7Qb_timlQOfyx rel=icon><script async defer src=https://buttons.github.io/buttons.js></script><style>body,html{width:100%;height:100%;margin:0 auto;padding:0;overflow:hidden}div.menu-container .container{color:#333;background-color:#f2f2f280;border:1px solid #eaeaea;border-radius:5px;flex-direction:column;justify-content:center;gap:10px;padding:20px;font-family:Fira Mono,monospace;display:flex;position:absolute;top:40%;left:50%;transform:translate(-50%)}@media (width<=800px){div.menu-container .container{top:50%}}div.menu-container .container button{color:#333;cursor:pointer;background-color:#f2f2f2e6;border:none;border-radius:5px;padding:10px 15px;font-family:Fira Mono,monospace;transition:background-color .3s}div.menu-container .container button:hover{background-color:#e6e6e6}#homeButton{cursor:pointer;touch-action:manipulation;background-color:#fffc;border:none;font-size:30px}.gameId{justify-content:center;display:flex;position:absolute;top:10%;left:50%;transform:translate(-50%)}#gameIdDisplay{color:#333;font-family:Fira Mono,monospace;font-size:15px}.home-container{position:absolute;top:0;left:40%}@media (width<=800px){.home-container{position:absolute;top:0;left:0}}.github-container{position:absolute;top:0;right:41%}@media (width<=800px){.github-container{position:absolute;top:0;left:85%}}#ShareContainer,#NewGameContainer,#UrlContainer,#JoinGameButton,#gameIdDisplay{display:none}</style><link as=fetch crossorigin href=./connect4xyz-f4e17d100e7bb2cd_bg.wasm integrity=sha384-ZbVHzlnQJ0Z5MixyhuBfiiJ16nfjVaTg6FnXx5AvfoaY21eEEkaKwT-MK5HRRenD rel=preload type=application/wasm><link crossorigin href=./connect4xyz-f4e17d100e7bb2cd.js integrity=sha384-oBeRvUw-JAKBvj3OC1wyisWxoh7x7umoKJLGrV4_din900WaB2r5yJJyTP4WEHKX rel=modulepreload></head><body><div class=github-container><a aria-label="Star stum0/connect4xyz on GitHub" class=github-button data-show-count=true href=https://github.com/stum0/connect4xyz></a></div><div class=home-container><button id=homeButton>🏠</button></div><div class=gameId><span id=gameIdDisplay></span></div><div class=menu-container><div class=container id=LoadingContainer><div id=loadingText>Loading...</div></div><div class=container id=NewGameContainer><input placeholder="Enter name..." id=gameInfo><button id=NewGameButton>Create Game 🎲</button><button id=JoinGameButton>Join Game 🎲</button></div><div class=container id=UrlContainer><span id=url></span><div><button id=copyButton onclick=copyToClipboard()>Share this URL to play 📋</button></div></div><div class=container id=ShareContainer><button id=copyBoardButton onclick=copyBoardStateToClipboard()>Share Result 📋</button><button id=postNostrButton onclick=postToNostr()>Post to Nostr</button></div></div><script src=https://unpkg.com/nostr-tools/lib/nostr.bundle.js></script><script>let currentBoardState = "";
 
             document
                 .getElementById("homeButton")

diff --git a/docs/index.html b/docs/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en><meta charset=UTF-8><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name=viewport><title>connect4.xyz</title><script type=module>import a,{new_game as b}from"./connect4xyz-f4e17d100e7bb2cd.js";a(`./connect4xyz-f4e17d100e7bb2cd_bg.wasm`);document.addEventListener(`DOMContentLoaded`,()=>{document.getElementById(`NewGameButton`).addEventListener(`click`,()=>{b()})})</script><link href=./favicon-62f8607a7e9954c.ico integrity=sha384-vRtMBXgD1hNxxhineEpgcLDnlUNIk3AGT2GbjTSNeh0B2Eecd2g7Qb_timlQOfyx rel=icon><script async defer src=https://buttons.github.io/buttons.js></script><style>body,html{width:100%;height:100%;margin:0 auto;padding:0;overflow:hidden}div.menu-container .container{color:#333;background-color:#f2f2f280;border:1px solid #eaeaea;border-radius:5px;flex-direction:column;justify-content:center;gap:10px;padding:20px;font-family:Fira Mono,monospace;display:flex;position:absolute;top:40%;left:50%;transform:translate(-50%)}@media (width<=800px){div.menu-container .container{top:50%}}div.menu-container .container button{color:#333;cursor:pointer;background-color:#f2f2f2e6;border:none;border-radius:5px;padding:10px 15px;font-family:Fira Mono,monospace;transition:background-color .3s}div.menu-container .container button:hover{background-color:#e6e6e6}#homeButton{cursor:pointer;touch-action:manipulation;background-color:#fffc;border:none;font-size:30px}.gameId{justify-content:center;display:flex;position:absolute;top:10%;left:50%;transform:translate(-50%)}#gameIdDisplay{color:#333;font-family:Fira Mono,monospace;font-size:15px}.home-container{position:absolute;top:0;left:40%}@media (width<=800px){.home-container{position:absolute;top:0;left:0}}.github-container{position:absolute;top:0;right:41%}@media (width<=800px){.github-container{position:absolute;top:0;left:85%}}#ShareContainer,#NewGameContainer,#UrlContainer,#gameIdDisplay{display:none}</style><link as=fetch crossorigin href=./connect4xyz-f4e17d100e7bb2cd_bg.wasm integrity=sha384-ZbVHzlnQJ0Z5MixyhuBfiiJ16nfjVaTg6FnXx5AvfoaY21eEEkaKwT-MK5HRRenD rel=preload type=application/wasm><link crossorigin href=./connect4xyz-f4e17d100e7bb2cd.js integrity=sha384-oBeRvUw-JAKBvj3OC1wyisWxoh7x7umoKJLGrV4_din900WaB2r5yJJyTP4WEHKX rel=modulepreload></head><body><div class=github-container><a aria-label="Star stum0/connect4xyz on GitHub" class=github-button data-show-count=true href=https://github.com/stum0/connect4xyz></a></div><div class=home-container><button id=homeButton>🏠</button></div><div class=gameId><span id=gameIdDisplay></span></div><div class=menu-container><div class=container id=LoadingContainer><div id=loadingText>Loading...</div></div><div class=container id=NewGameContainer><button id=NewGameButton>Create Game 🎲</button></div><div class=container id=UrlContainer><span id=url></span><div><button id=copyButton onclick=copyToClipboard()>Share this URL to play 📋</button></div></div><div class=container id=ShareContainer><button id=copyBoardButton onclick=copyBoardStateToClipboard()>Share Result 📋</button><button id=postNostrButton onclick=postToNostr()>Post to Nostr</button></div></div><script src=https://unpkg.com/nostr-tools/lib/nostr.bundle.js></script><script>let currentBoardState = "";
+<!doctype html><html lang=en><meta charset=UTF-8><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name=viewport><title>connect4.xyz</title><script type=module>let c=`username`;import a,{new_game as b}from"./connect4xyz-f4e17d100e7bb2cd.js";a(`./connect4xyz-f4e17d100e7bb2cd_bg.wasm`);document.addEventListener(`DOMContentLoaded`,()=>{var a=document.getElementById(`gameInfo`);var d=localStorage.getItem(c);a.value=d;document.getElementById(`NewGameButton`).addEventListener(`click`,()=>{if(a.value!==``){localStorage.setItem(c,a.value.trim());console.log(`Creating game with player name:`,a.value.trim())}else{localStorage.removeItem(c)};b()})})</script><link href=./favicon-62f8607a7e9954c.ico integrity=sha384-vRtMBXgD1hNxxhineEpgcLDnlUNIk3AGT2GbjTSNeh0B2Eecd2g7Qb_timlQOfyx rel=icon><script async defer src=https://buttons.github.io/buttons.js></script><style>body,html{width:100%;height:100%;margin:0 auto;padding:0;overflow:hidden}div.menu-container .container{color:#333;background-color:#f2f2f280;border:1px solid #eaeaea;border-radius:5px;flex-direction:column;justify-content:center;gap:10px;padding:20px;font-family:Fira Mono,monospace;display:flex;position:absolute;top:40%;left:50%;transform:translate(-50%)}@media (width<=800px){div.menu-container .container{top:50%}}div.menu-container .container button{color:#333;cursor:pointer;background-color:#f2f2f2e6;border:none;border-radius:5px;padding:10px 15px;font-family:Fira Mono,monospace;transition:background-color .3s}div.menu-container .container button:hover{background-color:#e6e6e6}#homeButton{cursor:pointer;touch-action:manipulation;background-color:#fffc;border:none;font-size:30px}.gameId{justify-content:center;display:flex;position:absolute;top:10%;left:50%;transform:translate(-50%)}#gameIdDisplay{color:#333;font-family:Fira Mono,monospace;font-size:15px}.home-container{position:absolute;top:0;left:40%}@media (width<=800px){.home-container{position:absolute;top:0;left:0}}.github-container{position:absolute;top:0;right:41%}@media (width<=800px){.github-container{position:absolute;top:0;left:85%}}#ShareContainer,#NewGameContainer,#UrlContainer,#JoinGameButton,#gameIdDisplay{display:none}</style><link as=fetch crossorigin href=./connect4xyz-f4e17d100e7bb2cd_bg.wasm integrity=sha384-ZbVHzlnQJ0Z5MixyhuBfiiJ16nfjVaTg6FnXx5AvfoaY21eEEkaKwT-MK5HRRenD rel=preload type=application/wasm><link crossorigin href=./connect4xyz-f4e17d100e7bb2cd.js integrity=sha384-oBeRvUw-JAKBvj3OC1wyisWxoh7x7umoKJLGrV4_din900WaB2r5yJJyTP4WEHKX rel=modulepreload></head><body><div class=github-container><a aria-label="Star stum0/connect4xyz on GitHub" class=github-button data-show-count=true href=https://github.com/stum0/connect4xyz></a></div><div class=home-container><button id=homeButton>🏠</button></div><div class=gameId><span id=gameIdDisplay></span></div><div class=menu-container><div class=container id=LoadingContainer><div id=loadingText>Loading...</div></div><div class=container id=NewGameContainer><input placeholder="Enter name..." id=gameInfo><button id=NewGameButton>Create Game 🎲</button><button id=JoinGameButton>Join Game 🎲</button></div><div class=container id=UrlContainer><span id=url></span><div><button id=copyButton onclick=copyToClipboard()>Share this URL to play 📋</button></div></div><div class=container id=ShareContainer><button id=copyBoardButton onclick=copyBoardStateToClipboard()>Share Result 📋</button><button id=postNostrButton onclick=postToNostr()>Post to Nostr</button></div></div><script src=https://unpkg.com/nostr-tools/lib/nostr.bundle.js></script><script>let currentBoardState = "";
 
             document
                 .getElementById("homeButton")

diff --git a/index.html b/index.html
@@ -121,6 +121,7 @@
             #ShareContainer,
             #NewGameContainer,
             #UrlContainer,
+            #JoinGameButton,
             #gameIdDisplay {
                 display: none;
             }
@@ -153,7 +154,9 @@
 
             <!-- New Game Container -->
             <div id="NewGameContainer" class="container">
+                <input type="text" id="gameInfo" placeholder="Enter name..." />
                 <button id="NewGameButton">Create Game 🎲</button>
+                <button id="JoinGameButton">Join Game 🎲</button>
             </div>
 
             <!-- URL Container -->