diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a6e0200 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +default.js \ No newline at end of file diff --git a/assets/css/game.css b/assets/css/game.css new file mode 100644 index 0000000..165f20c --- /dev/null +++ b/assets/css/game.css @@ -0,0 +1,816 @@ +/* Reset and base styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.bar-icon { + height: 20px; +} + +body { + font-family: 'Courier', monospace; + background-color: #1a1a1a; + color: #e6f4e6; + min-height: 100vh; + position: relative; +} + +/* Modal styles */ +.modal { + display: none; + position: fixed; + z-index: 9999; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.6); +} + +.modal-content { + background-color: #24453D; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); padding: 20px; + border-radius: 12px; + width: 90%; + max-width: 600px; + text-align: center; + color: #e6f4e6; + position: relative; + border: #05A38C 5px solid; + font-family: 'Jersey 15', cursive; + font-size: 20px; + line-height: 20px; +} + +.modal-donate { + background-color: #24453D; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); padding: 20px; + border-radius: 12px; + width: 90%; + max-width: 300px; + text-align: center; + color: #e6f4e6; + position: relative; + border: #05A38C 5px solid; + font-family: 'Jersey 15', cursive; + font-size: 20px; + line-height: 20px; +} + +.back-btn { + background: linear-gradient(135deg, #057f6d, #024d42); + border: none; + border-radius: 12px; + padding: 8px; + cursor: pointer; + transition: all 0.3s ease; + text-align: center; +} + + +.next-btn { + margin-top: 10px; + background: linear-gradient(135deg, #057f6d, #024d42); + border: #05A38C 5px solid; + border-radius: 12px; + padding: 12px 12px; + cursor: pointer; + transition: all 0.3s ease; + text-align: center; + min-width: 200px; + width: 100%; +} + +.next-text { + font-family: 'Jersey 15', cursive; + font-size: 16px; + line-height: 16px; + color: #e6f4e6; +} + +.close-button:hover { + color: #000; +} + +#result { + width: 100%; + height: 300px; + margin: 20px 0; + border-radius: 8px; + border: 2px solid #ddd; +} + + + +/* Main container and background */ +.main-container { + width: 100%; + min-height: 100vh; + background-color: #1a1a1a; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; +} + +.background-layer { + position: absolute; + bottom: 0; + width: 100%; + height: 410px; + background-image: url('../images/img_layer_1.png'); + background-size: cover; + background-position: center; + z-index: 1; +} + +.content-wrapper { + position: relative; + z-index: 2; + width: 100%; + display: flex; + flex-direction: column; +} + +.gradient-overlay { + background: linear-gradient(0deg, #1a1a1a00 0%, #1a1a1a 50%, #1a1a1a00 100%); + width: 100%; + display: flex; + flex-direction: column; + gap: 32px; + align-items: center; + padding: 16px; +} + +/* Header styles */ +.header { + width: 100%; + max-width: 1440px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 16px; + background: rgba(26, 26, 26, 0.8); + backdrop-filter: blur(10px); +} + +.header-left { + display: flex; + gap: 6px; + align-items: center; +} + +.header-icon { + width: 32px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; +} + +.header-center { + display: flex; + gap: 8px; + align-items: center; +} + +.logo-icon { + width: 48px; + height: 32px; + background-size: contain; + background-repeat: no-repeat; +} + +.logo-text { + width: 80px; + height: 36px; + background-size: contain; + background-repeat: no-repeat; +} + +.header-right { + display: flex; + gap: 16px; + align-items: center; +} + +.balance-text { + font-family: 'Jersey 15', cursive; + font-size: 16px; + line-height: 16px; + color: #e6f4e6; +} + +.connect-wallet { + display: flex; + align-items: center; + padding: 8px 12px; + background: rgba(93, 213, 162, 0.2); + border: 2px solid #5dd5a2; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; +} + +.connect-wallet:hover { + background: rgba(93, 213, 162, 0.3); + transform: scale(1.05); +} + +.wallet-text { + font-family: 'Jersey 15', cursive; + font-size: 16px; + line-height: 16px; + color: #e6f4e6; + margin-left: 8px; +} + +/* Game section */ +.game-section { + width: 100%; + max-width: 1564px; + margin: 0 auto; + background-color: #1d2c29; + border: 8px solid #24453a; + border-radius: 24px; + padding: 16px; + margin-bottom: 100px; +} + +.score-header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #1d2c29; + border: 8px solid #24453a; + border-radius: 24px 24px 0px 0px; + padding: 12px 16px; + margin: -24px -24px 0 -24px; +} + +.score-text { + font-family: 'Jersey 15', cursive; + font-size: 20px; + line-height: 20px; + color: #5dd5a2; +} + +.play-section { + text-align: center; + margin: 24px 0; +} + +.play-title-row { + display: flex; + gap: 16px; + justify-content: center; + align-items: center; + margin-bottom: 8px; +} + +.diamond-icon { + width: 48px; + height: 32px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.play-title, +.logo-title { + font-family: 'Jersey 15', cursive; + font-size: 48px; + line-height: 48px; + color: #e6f4e6; + text-align: center; +} + +.entry-fee { + font-family: 'Jersey 15', cursive; + font-size: 20px; + line-height: 20px; + color: #5dd5a2; + margin-top: 8px; +} + +.game-content { + display: flex; + gap: 24px; + margin-top: 24px; + flex-direction: column; +} + +.pano { + background-color: #1a1a1a; + border-radius: 8px; + flex: 1; +} + +.how-title { + font-family: 'Jersey 15', cursive; + font-size: 20px; + line-height: 20px; + color: #e6f4e6; + margin-bottom: 16px; +} + +.instruction-list { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 16px; +} + +.instruction { + font-size: 12px; + font-family: 'Courier', monospace; + line-height: 14px; + color: #5dd5a2; +} + +.controls-section { + display: flex; + gap: 16px; + align-items: center; + margin-bottom: 12px; +} + +.controls-grid { + display: flex; + flex-direction: column; + gap: 4px; + align-items: center; +} + +.control-row { + display: flex; + gap: 4px; +} + +.control-key { + width: 32px; + height: 24px; + background: rgba(93, 213, 162, 0.2); + border: 1px solid #5dd5a2; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Jersey 15', cursive; + font-size: 16px; + color: #e6f4e6; +} + +.game-preview { + width: 120px; + height: 80px; + background-size: contain; + background-repeat: no-repeat; + border-radius: 8px; +} + +.right-panel { + display: flex; + flex-direction: column; + gap: 16px; + align-items: flex-end; + min-width: 30%; +} + +.disclaimer { + background-color: #1a1a1a; + border-radius: 8px; + padding: 16px; + display: flex; + gap: 12px; + align-items: flex-start; + width: 100%; + aspect-ratio: 1 / 1; +} + +.checkbox { + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + flex-shrink: 0; + margin-top: 4px; +} + +.disclaimer-text { + font-size: 12px; + font-family: 'Courier', monospace; + line-height: 16px; + color: #5dd5a2; +} + +.action-buttons { + display: flex; + flex-direction: column; + gap: 12px; +} + +.start-game-btn { + background: linear-gradient(135deg, #5dd5a2, #057f6d); + border: none; + border-radius: 12px; + padding: 16px 24px; + cursor: pointer; + transition: all 0.3s ease; + text-align: center; + min-width: 200px; +} + +.start-game-btn:hover { + transform: scale(1.05); + box-shadow: 0 8px 20px rgba(93, 213, 162, 0.3); +} + +.btn-title { + font-family: 'Jersey 15', cursive; + font-size: 24px; + line-height: 24px; + color: #e6f4e6; + margin-bottom: 4px; +} + +.btn-subtitle { + font-family: 'Jersey 15', cursive; + font-size: 18px; + line-height: 18px; + color: #e6f4e6; +} + +.distance-text { + color: #A59EFA; + font-size: 64px; + line-height: 64px; + +} +.check-btn { + background: linear-gradient(135deg,#705BD6, #341caa); + border: none; + border-radius: 12px; + padding: 12px 24px; + cursor: pointer; + transition: all 0.3s ease; + text-align: center; + min-width: 200px; + width: 100%; +} + +.check-btn:hover { + transform: scale(1.05); + background: linear-gradient(135deg, #705BD6, #432fa8); +} + +.check-btn:disabled { + background: linear-gradient(135deg, #7a797c, #6d6a71); + cursor: not-allowed; +} + +.check-text { + font-family: 'Jersey 15', cursive; + font-size: 16px; + line-height: 16px; + color: #E6F4E6; +} + +/* Footer */ +.footer { + width: 100%; + background-color: #05a38c; + border-top: 14px solid #5dd5a2; + padding: 16px 20px 20px; + margin-top: auto; +} + +.footer-content { + width: 100%; + max-width: 1376px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 16px; + align-items: center; +} + +.footer-main { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 16px; +} + +.footer-logo { + display: flex; + align-items: center; + gap: 8px; +} + +.footer-nav { + display: flex; + gap: 8px; + align-items: center; + flex-wrap: wrap; +} + +.nav-btn { + background-color: #057f6d; + border: none; + border-radius: 18px; + padding: 8px 16px; + font-size: 12px; + font-family: 'Courier', monospace; + color: #e6f4e6; + cursor: pointer; + transition: all 0.3s ease; +} + +.nav-btn:hover { + background-color: #068a75; + transform: scale(1.05); +} + +.footer-social { + display: flex; + align-items: center; + gap: 8px; +} + +.social-icons { + display: flex; + gap: 8px; +} + +.social-btn { + width: 36px; + height: 36px; + background-color: #e6f4e6; + border: none; + border-radius: 18px; + cursor: pointer; + transition: all 0.3s ease; + background-size: 20px; + background-position: center; + background-repeat: no-repeat; +} + +.social-btn:hover { + transform: scale(1.1); + background-color: #f0f9f0; +} + +.join-text { + font-family: 'Jersey 15', cursive; + font-size: 16px; + line-height: 16px; + color: #e6f4e6; +} + +.footer-divider { + width: 100%; + height: 1px; + background-color: rgba(93, 213, 162, 0.5); +} + +.footer-bottom { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer-link { + font-size: 12px; + font-family: 'Courier', monospace; + color: rgba(230, 244, 230, 0.7); + text-decoration: none; + cursor: pointer; + transition: color 0.3s ease; +} + +.footer-link:hover { + color: #e6f4e6; +} + +/* Responsive design */ +@media (min-width: 640px) { + .header { + padding: 16px 24px; + } + .header-icon { + width: 48px; + height: 32px; + } + .logo-icon { + height: 40px; + } + .logo-text { + width: 96px; + height: 42px; + } + .balance-text, .wallet-text { + font-size: 20px; + line-height: 20px; + } + .score-text { + font-size: 24px; + line-height: 24px; + } + .play-title { + font-size: 64px; + line-height: 64px; + } + .entry-fee { + font-size: 24px; + line-height: 24px; + } + .game-content { + flex-direction: row; + } + .how-title { + font-size: 24px; + line-height: 24px; + } + .instruction { + font-size: 14px; + line-height: 16px; + } + .disclaimer-text { + font-size: 14px; + line-height: 18px; + } + .control-key { + width: 40px; + height: 32px; + font-size: 20px; + } + .game-preview { + width: 180px; + height: 108px; + } +} + +@media (min-width: 768px) { + .game-section { + padding: 24px; + } + .score-header { + padding: 16px 24px; + } + .score-text { + font-size: 28px; + line-height: 28px; + } + .play-title { + font-size: 80px; + line-height: 80px; + } + .entry-fee { + font-size: 28px; + line-height: 28px; + } + .how-title { + font-size: 28px; + line-height: 28px; + } + .instruction { + font-size: 15px; + line-height: 18px; + } + .btn-title { + font-size: 32px; + line-height: 32px; + } + .btn-subtitle { + font-size: 22px; + line-height: 22px; + } + .check-text { + font-size: 20px; + line-height: 20px; + } + + .next-text { + font-size: 20px; + line-height: 20px; + } + .nav-btn { + font-size: 14px; + } + .join-text { + font-size: 20px; + line-height: 20px; + } +} + +@media (min-width: 1024px) { + .header { + padding: 20px 22px; + } + .header-icon { + width: 62px; + height: 42px; + } + .logo-icon { + height: 48px; + } + .logo-text { + width: 112px; + height: 50px; + } + .balance-text, .wallet-text { + font-size: 24px; + line-height: 24px; + } + .game-section { + padding: 32px; + margin-left: 188px; + margin-right: 188px; + margin-bottom: 156px; + } + .score-header { + margin: -40px -40px 0 -40px; + } + .score-text { + font-size: 32px; + line-height: 32px; + } + .play-title { + font-size: 96px; + line-height: 96px; + } + .entry-fee { + font-size: 32px; + line-height: 32px; + } + .how-title { + font-size: 32px; + line-height: 32px; + } + .btn-title { + font-size: 40px; + line-height: 40px; + } + .btn-subtitle { + font-size: 28px; + line-height: 28px; + } + .check-text { + font-size: 24px; + line-height: 24px; + } + .next-text { + font-size: 24px; + line-height: 24px; + } + .nav-btn { + font-size: 15px; + } + .social-btn { + width: 52px; + height: 52px; + } + .join-text { + font-size: 24px; + line-height: 24px; + } + .game-preview { + width: 218px; + height: 128px; + } +} + +/* Hide elements on mobile */ +@media (max-width: 639px) { + .header-left { + display: none; + } + .balance-text { + display: none; + } + .controls-section { + flex-direction: column; + align-items: center; + gap: 8px; + } + .game-preview { + width: 100px; + height: 64px; + } + .psv-container { + aspect-ratio: 1 / 1; + } +} diff --git a/assets/css/index.css b/assets/css/index.css new file mode 100644 index 0000000..8737469 --- /dev/null +++ b/assets/css/index.css @@ -0,0 +1,753 @@ +/* Reset and base styles */ + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + .bar-icon { + height: 20px; + } + + body { + font-family: 'Courier', monospace; + background-color: #1a1a1a; + color: #e6f4e6; + min-height: 100vh; + position: relative; + } + + .main-container { + width: 100%; + min-height: 100vh; + background-color: #1a1a1a; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + } + + .background-layer { + position: absolute; + bottom: 0; + width: 100%; + height: 410px; + background-image: url('../images/img_layer_1.png'); + background-size: cover; + background-position: center; + z-index: 1; + } + + .content-wrapper { + position: relative; + z-index: 2; + width: 100%; + display: flex; + flex-direction: column; + } + + .gradient-overlay { + background: linear-gradient(0deg, #1a1a1a00 0%, #1a1a1a 50%, #1a1a1a00 100%); + width: 100%; + display: flex; + flex-direction: column; + gap: 32px; + align-items: center; + padding: 16px; + } + + /* Header styles */ + .header { + width: 100%; + max-width: 1440px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 16px; + background: rgba(26, 26, 26, 0.8); + backdrop-filter: blur(10px); + } + + .header-left { + display: flex; + gap: 6px; + align-items: center; + } + + .header-icon { + width: 32px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + } + + .header-center { + display: flex; + gap: 8px; + align-items: center; + } + + .logo-icon { + width: 48px; + height: 32px; + background-size: contain; + background-repeat: no-repeat; + } + + .logo-text { + width: 80px; + height: 36px; + background-size: contain; + background-repeat: no-repeat; + } + + .header-right { + display: flex; + gap: 16px; + align-items: center; + } + + .balance-text { + font-family: 'Jersey 15', cursive; + font-size: 16px; + line-height: 16px; + color: #e6f4e6; + } + + .connect-wallet { + display: flex; + align-items: center; + padding: 8px 12px; + background: rgba(93, 213, 162, 0.2); + border: 2px solid #5dd5a2; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + } + + .connect-wallet:hover { + background: rgba(93, 213, 162, 0.3); + transform: scale(1.05); + } + + .wallet-text { + font-family: 'Jersey 15', cursive; + font-size: 16px; + line-height: 16px; + color: #e6f4e6; + margin-left: 8px; + } + + /* Game section */ + .game-section { + width: 100%; + max-width: 1064px; + margin: 0 auto; + background-color: #1d2c29; + border: 8px solid #24453a; + border-radius: 24px; + padding: 16px; + margin-bottom: 100px; + } + + .score-header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #1d2c29; + border: 8px solid #24453a; + border-radius: 24px 24px 0px 0px; + padding: 12px 16px; + margin: -24px -24px 0 -24px; + } + + .score-text { + font-family: 'Jersey 15', cursive; + font-size: 20px; + line-height: 20px; + color: #5dd5a2; + } + + .play-section { + text-align: center; + margin: 24px 0; + } + + .play-title-row { + display: flex; + gap: 16px; + justify-content: center; + align-items: center; + margin-bottom: 8px; + } + + .diamond-icon { + width: 12px; + height: 20px; + background-size: contain; + background-repeat: no-repeat; + } + + .play-title { + font-family: 'Jersey 15', cursive; + font-size: 48px; + line-height: 48px; + color: #e6f4e6; + text-align: center; + } + + .logo-title { + font-family: 'Jersey 15', cursive; + font-size: 48px; + line-height: 48px; + color: #e6f4e6; + text-align: center; + } + + + .entry-fee { + font-family: 'Jersey 15', cursive; + font-size: 20px; + line-height: 20px; + color: #5dd5a2; + margin-top: 8px; + } + + .game-content { + display: flex; + gap: 24px; + margin-top: 24px; + flex-direction: column; + } + + .pano, .how-to-play { + background-color: #1a1a1a; + border-radius: 8px; + padding: 16px; + flex: 1; + } + + .how-title { + font-family: 'Jersey 15', cursive; + font-size: 20px; + line-height: 20px; + color: #e6f4e6; + margin-bottom: 16px; + } + + .instruction-list { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 16px; + } + + .instruction { + font-size: 12px; + font-family: 'Courier', monospace; + line-height: 14px; + color: #5dd5a2; + } + + .controls-section { + display: flex; + gap: 16px; + align-items: center; + margin-bottom: 12px; + } + + .controls-grid { + display: flex; + flex-direction: column; + gap: 4px; + align-items: center; + } + + .control-row { + display: flex; + gap: 4px; + } + + .control-key { + width: 32px; + height: 24px; + background: rgba(93, 213, 162, 0.2); + border: 1px solid #5dd5a2; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Jersey 15', cursive; + font-size: 16px; + color: #e6f4e6; + } + + .game-preview { + width: 120px; + height: 80px; + background-size: contain; + background-repeat: no-repeat; + border-radius: 8px; + } + + .right-panel { + display: flex; + flex-direction: column; + gap: 16px; + align-items: flex-end; + min-width: 50%; + } + + .disclaimer { + background-color: #1a1a1a; + border-radius: 8px; + padding: 16px; + display: flex; + gap: 12px; + align-items: flex-start; + max-width: 400px; + } + + .checkbox { + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + flex-shrink: 0; + margin-top: 4px; + } + + .disclaimer-text { + font-size: 12px; + font-family: 'Courier', monospace; + line-height: 16px; + color: #5dd5a2; + } + + .action-buttons { + display: flex; + flex-direction: column; + gap: 12px; + } + + .start-game-btn { + background: linear-gradient(135deg, #5dd5a2, #057f6d); + border: none; + border-radius: 12px; + padding: 16px 24px; + cursor: pointer; + transition: all 0.3s ease; + text-align: center; + min-width: 200px; + } + + .start-game-btn:hover { + transform: scale(1.05); + box-shadow: 0 8px 20px rgba(93, 213, 162, 0.3); + } + + .btn-title { + font-family: 'Jersey 15', cursive; + font-size: 24px; + line-height: 24px; + color: #e6f4e6; + margin-bottom: 4px; + } + + .btn-subtitle { + font-family: 'Jersey 15', cursive; + font-size: 18px; + line-height: 18px; + color: #e6f4e6; + } + + .bridge-btn { + background: linear-gradient(135deg, #057f6d, #024d42); + border: none; + border-radius: 12px; + padding: 12px 24px; + cursor: pointer; + transition: all 0.3s ease; + text-align: center; + min-width: 200px; + width: 100%; + } + + .bridge-btn:hover { + transform: scale(1.05); + background: linear-gradient(135deg, #068a75, #025a4a); + } + + .bridge-text { + font-family: 'Jersey 15', cursive; + font-size: 16px; + line-height: 16px; + color: #e6f4e6; + } + + /* Footer */ + .footer { + width: 100%; + background-color: #05a38c; + border-top: 14px solid #5dd5a2; + padding: 16px 20px 20px; + margin-top: auto; + } + + .footer-content { + width: 100%; + max-width: 1376px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 16px; + align-items: center; + } + + .footer-main { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 16px; + } + + .footer-logo { + display: flex; + align-items: center; + gap: 8px; + } + + .footer-nav { + display: flex; + gap: 8px; + align-items: center; + flex-wrap: wrap; + } + + .nav-btn { + background-color: #057f6d; + border: none; + border-radius: 18px; + padding: 8px 16px; + font-size: 12px; + font-family: 'Courier', monospace; + color: #e6f4e6; + cursor: pointer; + transition: all 0.3s ease; + } + + .nav-btn:hover { + background-color: #068a75; + transform: scale(1.05); + } + + .footer-social { + display: flex; + align-items: center; + gap: 8px; + } + + .social-icons { + display: flex; + gap: 8px; + } + + .social-btn { + width: 36px; + height: 36px; + background-color: #e6f4e6; + border: none; + border-radius: 18px; + cursor: pointer; + transition: all 0.3s ease; + background-size: 20px; + background-position: center; + background-repeat: no-repeat; + } + + .social-btn:hover { + transform: scale(1.1); + background-color: #f0f9f0; + } + + .join-text { + font-family: 'Jersey 15', cursive; + font-size: 16px; + line-height: 16px; + color: #e6f4e6; + } + + .footer-divider { + width: 100%; + height: 1px; + background-color: rgba(93, 213, 162, 0.5); + } + + .footer-bottom { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + } + + .footer-link { + font-size: 12px; + font-family: 'Courier', monospace; + color: rgba(230, 244, 230, 0.7); + text-decoration: none; + cursor: pointer; + transition: color 0.3s ease; + } + + .footer-link:hover { + color: #e6f4e6; + } + + /* Responsive design */ + @media (min-width: 640px) { + + .header { + padding: 16px 24px; + } + + .header-icon { + width: 48px; + height: 32px; + } + + .logo-icon { + height: 40px; + } + + .logo-text { + width: 96px; + height: 42px; + } + + .balance-text, .wallet-text { + font-size: 20px; + line-height: 20px; + } + + .score-text { + font-size: 24px; + line-height: 24px; + } + + .play-title { + font-size: 64px; + line-height: 64px; + } + + .entry-fee { + font-size: 24px; + line-height: 24px; + } + + .game-content { + flex-direction: row; + } + + .how-title { + font-size: 24px; + line-height: 24px; + } + + .instruction { + font-size: 14px; + line-height: 16px; + } + + .disclaimer-text { + font-size: 14px; + line-height: 18px; + } + + .control-key { + width: 40px; + height: 32px; + font-size: 20px; + } + + .game-preview { + width: 180px; + height: 108px; + } + } + + @media (min-width: 768px) { + + .game-section { + padding: 24px; + } + + .score-header { + padding: 16px 24px; + } + + .score-text { + font-size: 28px; + line-height: 28px; + } + + .play-title { + font-size: 80px; + line-height: 80px; + } + + .entry-fee { + font-size: 28px; + line-height: 28px; + } + + .how-title { + font-size: 28px; + line-height: 28px; + } + + .instruction { + font-size: 15px; + line-height: 18px; + } + + .btn-title { + font-size: 32px; + line-height: 32px; + } + + .btn-subtitle { + font-size: 22px; + line-height: 22px; + } + + .bridge-text { + font-size: 20px; + line-height: 20px; + } + + .nav-btn { + font-size: 14px; + } + + .join-text { + font-size: 20px; + line-height: 20px; + } + } + + @media (min-width: 1024px) { + + + .header { + padding: 20px 22px; + } + + .header-icon { + width: 62px; + height: 42px; + } + + .logo-icon { + height: 48px; + } + + .logo-text { + width: 112px; + height: 50px; + } + + .balance-text, .wallet-text { + font-size: 24px; + line-height: 24px; + } + + .game-section { + padding: 32px; + margin-left: 188px; + margin-right: 188px; + margin-bottom: 156px; + } + + .score-header { + margin: -40px -40px 0 -40px; + } + + .score-text { + font-size: 32px; + line-height: 32px; + } + + .play-title { + font-size: 96px; + line-height: 96px; + } + + .entry-fee { + font-size: 32px; + line-height: 32px; + } + + .how-title { + font-size: 32px; + line-height: 32px; + } + + .btn-title { + font-size: 40px; + line-height: 40px; + } + + .btn-subtitle { + font-size: 28px; + line-height: 28px; + } + + .bridge-text { + font-size: 24px; + line-height: 24px; + } + + .nav-btn { + font-size: 15px; + } + + .social-btn { + width: 52px; + height: 52px; + } + + .join-text { + font-size: 24px; + line-height: 24px; + } + + .game-preview { + width: 218px; + height: 128px; + } + } + + /* Hide elements on mobile */ + @media (max-width: 639px) { + .header-left { + display: none; + } + + .balance-text { + display: none; + } + + .controls-section { + flex-direction: column; + align-items: center; + gap: 8px; + } + + .game-preview { + width: 100px; + height: 64px; + } + } \ No newline at end of file diff --git a/assets/images/back.svg b/assets/images/back.svg new file mode 100644 index 0000000..a5c1eb6 --- /dev/null +++ b/assets/images/back.svg @@ -0,0 +1,117 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_component_2.svg b/assets/images/img_component_2.svg new file mode 100644 index 0000000..0b6c395 --- /dev/null +++ b/assets/images/img_component_2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/img_frame_10.svg b/assets/images/img_frame_10.svg new file mode 100644 index 0000000..0584a56 --- /dev/null +++ b/assets/images/img_frame_10.svg @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_frame_3.svg b/assets/images/img_frame_3.svg new file mode 100644 index 0000000..f64628a --- /dev/null +++ b/assets/images/img_frame_3.svg @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_frame_38370.svg b/assets/images/img_frame_38370.svg new file mode 100644 index 0000000..347d42d --- /dev/null +++ b/assets/images/img_frame_38370.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/img_frame_38371.svg b/assets/images/img_frame_38371.svg new file mode 100644 index 0000000..b1412cf --- /dev/null +++ b/assets/images/img_frame_38371.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/img_frame_4.svg b/assets/images/img_frame_4.svg new file mode 100644 index 0000000..9d6b22f --- /dev/null +++ b/assets/images/img_frame_4.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_frame_5.svg b/assets/images/img_frame_5.svg new file mode 100644 index 0000000..a969780 --- /dev/null +++ b/assets/images/img_frame_5.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_frame_54.svg b/assets/images/img_frame_54.svg new file mode 100644 index 0000000..d9f3db6 --- /dev/null +++ b/assets/images/img_frame_54.svg @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_frame_54_teal_500.svg b/assets/images/img_frame_54_teal_500.svg new file mode 100644 index 0000000..1a9f118 --- /dev/null +++ b/assets/images/img_frame_54_teal_500.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_frame_54_white_a700.svg b/assets/images/img_frame_54_white_a700.svg new file mode 100644 index 0000000..4de0927 --- /dev/null +++ b/assets/images/img_frame_54_white_a700.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_group.svg b/assets/images/img_group.svg new file mode 100644 index 0000000..e00dc06 --- /dev/null +++ b/assets/images/img_group.svg @@ -0,0 +1,144 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_group_10.svg b/assets/images/img_group_10.svg new file mode 100644 index 0000000..9ad9db5 --- /dev/null +++ b/assets/images/img_group_10.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_group_2.svg b/assets/images/img_group_2.svg new file mode 100644 index 0000000..d52b3ec --- /dev/null +++ b/assets/images/img_group_2.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_group_24.svg b/assets/images/img_group_24.svg new file mode 100644 index 0000000..3d5f534 --- /dev/null +++ b/assets/images/img_group_24.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/images/img_group_5.svg b/assets/images/img_group_5.svg new file mode 100644 index 0000000..6980a23 --- /dev/null +++ b/assets/images/img_group_5.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_layer_1.png b/assets/images/img_layer_1.png new file mode 100644 index 0000000..2b6e26a Binary files /dev/null and b/assets/images/img_layer_1.png differ diff --git a/assets/images/img_layer_1_blue_gray_900.png b/assets/images/img_layer_1_blue_gray_900.png new file mode 100644 index 0000000..d7aca89 Binary files /dev/null and b/assets/images/img_layer_1_blue_gray_900.png differ diff --git a/assets/images/img_objects.png b/assets/images/img_objects.png new file mode 100644 index 0000000..b95da38 Binary files /dev/null and b/assets/images/img_objects.png differ diff --git a/assets/images/img_vector.svg b/assets/images/img_vector.svg new file mode 100644 index 0000000..4e3e25c --- /dev/null +++ b/assets/images/img_vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/img_vector_teal_500.svg b/assets/images/img_vector_teal_500.svg new file mode 100644 index 0000000..a0bbf50 --- /dev/null +++ b/assets/images/img_vector_teal_500.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/wallet.svg b/assets/images/wallet.svg new file mode 100644 index 0000000..7acd9a6 --- /dev/null +++ b/assets/images/wallet.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/js/game.js b/assets/js/game.js new file mode 100644 index 0000000..1349c45 --- /dev/null +++ b/assets/js/game.js @@ -0,0 +1 @@ +'use strict';const _0xd25496=_0x8440;(function(_0x29936d,_0xc7b02){const _0x41b66d=_0x8440,_0x550129=_0x29936d();while(!![]){try{const _0x2afcc9=parseInt(_0x41b66d(0x121))/0x1*(parseInt(_0x41b66d(0xec))/0x2)+-parseInt(_0x41b66d(0xdf))/0x3+parseInt(_0x41b66d(0x124))/0x4+-parseInt(_0x41b66d(0xdc))/0x5*(-parseInt(_0x41b66d(0xee))/0x6)+-parseInt(_0x41b66d(0x112))/0x7*(-parseInt(_0x41b66d(0xfd))/0x8)+-parseInt(_0x41b66d(0xd0))/0x9+-parseInt(_0x41b66d(0x122))/0xa;if(_0x2afcc9===_0xc7b02)break;else _0x550129['push'](_0x550129['shift']());}catch(_0x24fb54){_0x550129['push'](_0x550129['shift']());}}}(_0x345c,0x780f7));var map,resultmap,markers=[],guess_coordinates=[],true_location=[],accumulated_distance=0x0,current_name='',distance_from_guess=[],check_count=0x0,choiceLocation='HN';function _0x345c(){const _0x115280=['1792988PzzFLP','onclick','head','block','click','Viewer','location','error','featureGroup','Error\x20in\x20initialize\x20function:','PhotoSphereViewer\x20not\x20available,\x20using\x20fallback\x20image','appendChild','disabled','addEventListener','\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20⚠️\x20Error\x20loading\x20image\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20Retrying...\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20','reload','resultText','addTo','length','pano','thumb_original_url','9445VAsDuo','resultModal','Excellent!','846330pZSpct','https://maps.google.com/mapfiles/ms/icons/red-dot.png','\x0a\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20⚠️\x20Failed\x20to\x20load\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20Retry\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20','log','zoom','fullscreen','includes','getElementById','map','getBounds','Hmm!\x20Nice\x20try.','No\x20images\x20found,\x20retrying...','catch','38VPvQoL','Panorama\x20image\x20loaded','1770OfutxO','Error\x20loading\x20panorama:','Error\x20initializing\x20Photo\x20Sphere\x20Viewer:','warn','href','is_pano','panorama-loaded','sin','Modal','MLY|24113623194974280|5bf83fa202912f1cc3210b2cf968fb65','panorama-error','result','data','then','lng','440xSKyyZ','invalidateSize','none','check','donateModal','blue','tileLayer','distance-guess','fitBounds','\x22\x20style=\x22width:100%;\x20height:100%;\x20object-fit:cover;\x20border-radius:10px;\x22\x20/>','https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png','\x0a\x20\x20\x20\x20\x0a\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20\x20\x20\x20\x20Loading\x20image...\x0a\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20\x0a\x20\x20','PhotoSphereViewer','VIET\x20NAM','coordinates','marker','join','icon','&is_pano=true','5,\x2010','\x20KM','78918fUFGfZ','geometry','url','cos','display','polyline','lat','Excellent!\x20Your\x20distance\x20is\x20','toFixed','Loading\x20image...','&fields=id,thumb_original_url,geometry,is_pano&limit=3&bbox=','Error\x20fetching\x20image:','onload','Image\x20fetched\x20successfully','Good\x20job!','41081kYvWOe','12384440xzDeBh','bindPopup'];_0x345c=function(){return _0x115280;};return _0x345c();}function _0x8440(_0x54775d,_0x1e59dd){const _0x345cc2=_0x345c();return _0x8440=function(_0x844079,_0x20a4d9){_0x844079=_0x844079-0xbb;let _0xa25c05=_0x345cc2[_0x844079];return _0xa25c05;},_0x8440(_0x54775d,_0x1e59dd);}const boundingBoxVN={'HN':[105.75,20.99,105.88,21.08,0.005],'TPHCM':[106.62,10.71,106.83,10.83,0.005],'HP':[106.65,20.8,106.75,20.9,0.5],'ND':[0x6a,20.35,106.25,20.5,0.005],'DN':[108.17,0x10,108.25,16.1,0.005]};var minLat=boundingBoxVN[choiceLocation][0x1],maxLat=boundingBoxVN[choiceLocation][0x3],minLong=boundingBoxVN[choiceLocation][0x0],maxLong=boundingBoxVN[choiceLocation][0x2],delta=boundingBoxVN[choiceLocation][0x4];const accessToken=_0xd25496(0xf7);async function getRandomMapillaryImage(){const _0x24d4ae=_0xd25496,_0x33b6ee=Math['random']()*(maxLat-minLat)+minLat,_0x1f6b42=Math[_0x24d4ae(0xcb)]()*(maxLong-minLong)+minLong,_0x585161=[(_0x1f6b42-delta)[_0x24d4ae(0x11a)](0x4),(_0x33b6ee-delta)[_0x24d4ae(0x11a)](0x4),(_0x1f6b42+delta)['toFixed'](0x4),(_0x33b6ee+delta)[_0x24d4ae(0x11a)](0x4)][_0x24d4ae(0x10d)](','),_0xbf69ac='https://graph.mapillary.com/images?access_token='+accessToken+_0x24d4ae(0x11c)+_0x585161+_0x24d4ae(0x10f);try{console[_0x24d4ae(0xe2)]('Fetching\x20panoramic\x20image...');const _0x2a7646=await fetch(_0xbf69ac),_0x466728=await _0x2a7646[_0x24d4ae(0xcf)]();if(_0x466728[_0x24d4ae(0xfa)]&&_0x466728[_0x24d4ae(0xfa)][_0x24d4ae(0xd9)]>0x0){const _0x40efc0=_0x466728[_0x24d4ae(0xfa)]['filter'](_0x5077b3=>_0x5077b3[_0x24d4ae(0xf3)]),_0x1066bc=_0x40efc0[_0x24d4ae(0xd9)]>0x0?_0x40efc0[Math['floor'](Math[_0x24d4ae(0xcb)]()*_0x40efc0[_0x24d4ae(0xd9)])]:_0x466728[_0x24d4ae(0xfa)][0x0];return console['log'](_0x24d4ae(0x11f)),{'lat':_0x1066bc[_0x24d4ae(0x113)]['coordinates'][0x1],'lng':_0x1066bc[_0x24d4ae(0x113)][_0x24d4ae(0x10b)][0x0],'url':_0x1066bc[_0x24d4ae(0xdb)],'id':_0x1066bc['id'],'isPano':_0x1066bc['is_pano']||![]};}else return console[_0x24d4ae(0xe2)](_0x24d4ae(0xea)),getRandomMapillaryImage();}catch(_0x47cac0){console[_0x24d4ae(0xbf)](_0x24d4ae(0x11d),_0x47cac0),document[_0x24d4ae(0xe6)](_0x24d4ae(0xda))['innerHTML']=_0x24d4ae(0xd5),setTimeout(()=>getRandomMapillaryImage(),0x7d0);}}function checkLibrariesLoaded(){return new Promise(_0x3dde7a=>{const _0x6df149=setInterval(()=>{const _0x3d929d=_0x8440;window['L']&&window[_0x3d929d(0x109)]&&(clearInterval(_0x6df149),_0x3dde7a());},0x64);});}function showLoading(){const _0xf7d316=_0xd25496;document[_0xf7d316(0xe6)]('pano')[_0xf7d316(0xc8)]=_0xf7d316(0x108);if(!document['getElementById'](_0xf7d316(0xcc))){const _0x3d11cf=document['createElement'](_0xf7d316(0xca));_0x3d11cf['id']=_0xf7d316(0xcc),_0x3d11cf[_0xf7d316(0xd2)]=_0xf7d316(0xd1),document[_0xf7d316(0x126)][_0xf7d316(0xc3)](_0x3d11cf);}}function hideLoading(){const _0x321fb9=_0xd25496,_0x105f2c=document[_0x321fb9(0xe6)](_0x321fb9(0xda));_0x105f2c&&_0x105f2c[_0x321fb9(0xc8)][_0x321fb9(0xe5)](_0x321fb9(0x11b))&&(_0x105f2c[_0x321fb9(0xc8)]='');}function initialize(){const _0x39d05f=_0xd25496;check_count=0x0,disableButton(_0x39d05f(0x100)),showLoading(),getRandomMapillaryImage()[_0x39d05f(0xfb)](_0xba1b48=>{const _0x4d7a4b=_0x39d05f;if(!_0xba1b48)return location[_0x4d7a4b(0xd6)]();true_location=[_0xba1b48[_0x4d7a4b(0x118)],_0xba1b48[_0x4d7a4b(0xfc)]],current_name=_0x4d7a4b(0x10a),document['getElementById'](_0x4d7a4b(0xda))[_0x4d7a4b(0xc8)]='';try{if(window[_0x4d7a4b(0x109)]&&window[_0x4d7a4b(0x109)][_0x4d7a4b(0xbd)]){hideLoading();const _0x430f79=new PhotoSphereViewer[(_0x4d7a4b(0xbd))]({'container':document[_0x4d7a4b(0xe6)](_0x4d7a4b(0xda)),'panorama':_0xba1b48['url'],'loadingImg':null,'defaultYaw':0x0,'defaultZoomLvl':-0x5a,'navbar':[_0x4d7a4b(0xe3),_0x4d7a4b(0xe4)],'mousewheel':![],'touchmoveTwoFingers':!![]});_0x430f79[_0x4d7a4b(0xc5)](_0x4d7a4b(0xd3),()=>{const _0xf4573c=_0x4d7a4b;console[_0xf4573c(0xe2)]('Photo\x20Sphere\x20Viewer\x20loaded\x20successfully');}),_0x430f79['addEventListener'](_0x4d7a4b(0xf4),()=>{const _0x36b2dd=_0x4d7a4b;console[_0x36b2dd(0xe2)](_0x36b2dd(0xed));}),_0x430f79[_0x4d7a4b(0xc5)](_0x4d7a4b(0xf8),_0x52fb6a=>{const _0x379a9d=_0x4d7a4b;console['error'](_0x379a9d(0xef),_0x52fb6a),hideLoading(),document[_0x379a9d(0xe6)](_0x379a9d(0xda))[_0x379a9d(0xc8)]=_0x379a9d(0xc6)+_0xba1b48[_0x379a9d(0x114)]+_0x379a9d(0x106);});}else console[_0x4d7a4b(0xf1)](_0x4d7a4b(0xc2)),hideLoading(),document[_0x4d7a4b(0xe6)](_0x4d7a4b(0xda))[_0x4d7a4b(0xc8)]=_0x4d7a4b(0xc6)+_0xba1b48['url']+'\x22\x20style=\x22width:100%;\x20height:100%;\x20object-fit:cover;\x20border-radius:10px;\x22\x20/>';}catch(_0x1911d6){console[_0x4d7a4b(0xbf)](_0x4d7a4b(0xf0),_0x1911d6),hideLoading(),document[_0x4d7a4b(0xe6)](_0x4d7a4b(0xda))[_0x4d7a4b(0xc8)]=_0x4d7a4b(0xc6)+_0xba1b48[_0x4d7a4b(0x114)]+'\x22\x20style=\x22width:100%;\x20height:100%;\x20object-fit:cover;\x20border-radius:10px;\x22\x20/>';}map=L[_0x4d7a4b(0xe7)](_0x4d7a4b(0xe7))['setView']([(minLat+maxLat)/0x2,(minLong+maxLong)/0x2],0xa),L[_0x4d7a4b(0x103)](_0x4d7a4b(0x107),{'maxZoom':0x13})[_0x4d7a4b(0xd8)](map),map['on'](_0x4d7a4b(0xbc),function(_0x1ee856){const _0x37d109=_0x4d7a4b;deleteMarkers(),guess_coordinates=[_0x1ee856['latlng'][_0x37d109(0x118)],_0x1ee856[_0x37d109(0xc9)][_0x37d109(0xfc)]];const _0x12b192=L[_0x37d109(0x10c)](_0x1ee856['latlng'])[_0x37d109(0xd8)](map);markers['push'](_0x12b192),check_count===0x0&&(enableButton(_0x37d109(0x100)),check_count+=0x1);});})[_0x39d05f(0xeb)](_0x841951=>{const _0x3bfa87=_0x39d05f;console['error'](_0x3bfa87(0xc1),_0x841951),document[_0x3bfa87(0xe6)](_0x3bfa87(0xda))[_0x3bfa87(0xc8)]=_0x3bfa87(0xe1);});}function clearMarkers(){const _0x528ac7=_0xd25496;for(let _0x485b16=0x0;_0x485b160x1)_0x2d380f=0x1;_0x2d380f=Math['acos'](_0x2d380f),_0x2d380f=_0x2d380f*0xb4/Math['PI'],_0x2d380f=_0x2d380f*0x3c*1.1515;if(_0x2d65e8=='K')_0x2d380f=_0x2d380f*1.609344;if(_0x2d65e8=='N')_0x2d380f=_0x2d380f*0.8684;return _0x2d380f=_0x2d380f*1609.34,_0x2d380f[_0x201750(0x11a)](0x1);}}function display_location(){const _0x24ed9e=_0xd25496,_0x5ec605=document[_0x24ed9e(0xe6)]('score');if(distance_from_guess>0x3e8)_0x5ec605[_0x24ed9e(0xc8)]='Hmm!\x20Your\x20distance\x20is\x20'+distance_from_guess+'m\x20away.';else{if(distance_from_guess>0xc8)_0x5ec605[_0x24ed9e(0xc8)]='Good\x20job!\x20Your\x20distance\x20is\x20'+distance_from_guess+_0x24ed9e(0xcd);else _0x5ec605['innerHTML']=_0x24ed9e(0x119)+distance_from_guess+_0x24ed9e(0xcd);}}function disableButton(_0x416f2f){const _0x4f1da4=_0xd25496;document[_0x4f1da4(0xe6)](_0x416f2f)[_0x4f1da4(0xc4)]=!![];}function enableButton(_0x5ed706){const _0x296fac=_0xd25496;document['getElementById'](_0x5ed706)[_0x296fac(0xc4)]=![];}function showResultModal(_0x5df734){const _0x41d76d=_0xd25496,_0x3da8bf=document[_0x41d76d(0xe6)](_0x41d76d(0xdd)),_0x494da6=document[_0x41d76d(0xe6)](_0x41d76d(0xd7)),_0x2f0755=document['getElementById'](_0x41d76d(0x104));if(distance_from_guess>0x3e8)_0x2f0755['innerHTML']=(distance_from_guess/0x3e8)['toFixed'](0x2)+_0x41d76d(0x111);else _0x2f0755[_0x41d76d(0xc8)]=distance_from_guess+'\x20M';if(distance_from_guess>0x3e8)_0x494da6[_0x41d76d(0xc8)]=_0x41d76d(0xe9);else{if(distance_from_guess>0xc8)_0x494da6[_0x41d76d(0xc8)]=_0x41d76d(0x120);else _0x494da6[_0x41d76d(0xc8)]=_0x41d76d(0xde);}_0x3da8bf['style'][_0x41d76d(0x116)]=_0x41d76d(0xbb),createResultMap();}function createResultMap(){const _0x35a46a=_0xd25496,_0xcb2a0=document['getElementById'](_0x35a46a(0xf9));_0xcb2a0[_0x35a46a(0xc8)]='';var _0x2a78e9=L[_0x35a46a(0xe7)](_0x35a46a(0xf9))['setView'](true_location,0xc);L[_0x35a46a(0x103)](_0x35a46a(0x107),{'maxZoom':0x13})[_0x35a46a(0xd8)](_0x2a78e9),setTimeout(()=>{const _0x3acf16=_0x35a46a;_0x2a78e9[_0x3acf16(0xfe)]();},0x64);const _0x10a007=L[_0x35a46a(0x10c)](true_location,{'icon':L[_0x35a46a(0x10e)]({'iconUrl':_0x35a46a(0xc7),'iconSize':[0x20,0x20]})})['addTo'](_0x2a78e9)[_0x35a46a(0x123)](current_name),_0x2dfff9=L[_0x35a46a(0x10c)](guess_coordinates,{'icon':L[_0x35a46a(0x10e)]({'iconUrl':_0x35a46a(0xe0),'iconSize':[0x20,0x20]})})[_0x35a46a(0xd8)](_0x2a78e9)[_0x35a46a(0x123)]('Your\x20Guess'),_0x10adb7=L[_0x35a46a(0x117)]([true_location,guess_coordinates],{'color':_0x35a46a(0x102),'dashArray':_0x35a46a(0x110)})['addTo'](_0x2a78e9),_0x2ce40f=new L[(_0x35a46a(0xc0))]([_0x10a007,_0x2dfff9]);_0x2a78e9[_0x35a46a(0x105)](_0x2ce40f[_0x35a46a(0xe8)]()[_0x35a46a(0xce)](0.1));}function closeResultModal(){const _0xadf42a=_0xd25496;document[_0xadf42a(0xe6)]('resultModal')['style'][_0xadf42a(0x116)]=_0xadf42a(0xff);}window[_0xd25496(0x125)]=function(_0x3cb3b3){const _0x35932d=_0xd25496,_0x239ea0=document['getElementById'](_0x35932d(0xdd));_0x3cb3b3['target']===_0x239ea0&&closeResultModal();};function nextRound(){const _0x37a7c2=_0xd25496;closeResultModal(),location[_0x37a7c2(0xd6)]();}function goBack(){const _0x1862ab=_0xd25496;window[_0x1862ab(0xbe)][_0x1862ab(0xf2)]='/';}function showDonateModal(){const _0x58a0e8=_0xd25496,_0x367e0b=document[_0x58a0e8(0xe6)](_0x58a0e8(0x101));_0x367e0b['style'][_0x58a0e8(0x116)]=_0x58a0e8(0xbb);}function closeDonate(){const _0x33dfb3=_0xd25496,_0x32f0a5=document[_0x33dfb3(0xe6)](_0x33dfb3(0x101));_0x32f0a5[_0x33dfb3(0xca)][_0x33dfb3(0x116)]=_0x33dfb3(0xff);}window[_0xd25496(0x11e)]=function(){const _0x17963f=_0xd25496,_0x21b61a=new URLSearchParams(window[_0x17963f(0xbe)]['search']),_0xd6d30f=_0x21b61a['get'](_0x17963f(0xbe));_0xd6d30f&&(choiceLocation=_0xd6d30f),minLat=boundingBoxVN[choiceLocation][0x1],maxLat=boundingBoxVN[choiceLocation][0x3],minLong=boundingBoxVN[choiceLocation][0x0],maxLong=boundingBoxVN[choiceLocation][0x2],delta=boundingBoxVN[choiceLocation][0x4],checkLibrariesLoaded()[_0x17963f(0xfb)](()=>{initialize();});}; \ No newline at end of file diff --git a/clone.js b/clone.js deleted file mode 100644 index 6a06554..0000000 --- a/clone.js +++ /dev/null @@ -1,255 +0,0 @@ - -'use strict'; - -var map; -var resultmap; -var markers = []; -var guess_coordinates = []; -var true_location = []; - -var accumulated_distance = 0; -var current_name = ''; -var distance_from_guess = []; -var check_count = 0; - -const minLat = 20.9975; -const maxLat = 21.0509; -const minLong = 105.7881; -const maxLong = 105.9043; - - -async function getData(url) { - return fetch(url) - .then(response => response.json()) - .catch(error => console.log(error)); -} - - -function initialize() { - check_count = 0; - disableButton('check'); - if (accumulated_distance == 0) { - // document.getElementById("totaldistance").innerHTML = 'Round Score: 0 Miles'; - } - document.getElementById("location").innerHTML = ' '; - document.getElementById("distance").innerHTML = ' '; - - var lat = (Math.random() * (maxLat - minLat) + minLat); - var long = (Math.random() * (maxLong - minLong) + minLong); - - var streetviewService = new google.maps.StreetViewService(); - streetviewService.getPanoramaByLocation(new google.maps.LatLng(lat, long), 50, - function (data, status) { - if (status == google.maps.StreetViewStatus.OK) { - - } - else { location.reload(); } - } - ); - - - true_location.push(lat, long); - current_name = ("VIET NAM"); - - - var luther = { lat: 21.0228148, lng: 105.7957638 }; - - var map = new google.maps.Map(document.getElementById('map'), { - center: luther, - zoom: 12, - streetViewControl: false, - gestureHandling: 'greedy' - }); - - var rmap = new google.maps.Map(document.getElementById('result'), { - center: { lat: lat, lng: long }, - zoom: 12, - streetViewControl: false, - zoomControl: true, - zoomControlOptions: { - position: google.maps.ControlPosition.LEFT_CENTER - }, - gestureHandling: 'greedy' - }); - - - google.maps.event.addListener(map, 'click', function (event) { - placeMarker(event.latLng); - if (check_count == 0) { - enableButton('check'); - check_count += 1; - } - }); - - function placeMarker(location) { - deleteMarkers(); - guess_coordinates = []; - var marker = new google.maps.Marker({ - position: location, - map: map, - }); - markers.push(marker); - guess_coordinates.push(marker.getPosition().lat(), marker.getPosition().lng()); - } - - - var panorama = new google.maps.StreetViewPanorama( - document.getElementById('pano'), { - position: { lat: lat, lng: long }, - pov: { - heading: 180, - pitch: 10 - }, - zoom: 1, - preference: google.maps.StreetViewPreference.NEAREST, - radius: 5000, - addressControl: false - }); - map.setStreetView(panorama); - -} - -function setMapOnAll(map) { - for (var i = 0; i < markers.length; i++) { - markers[i].setMap(map); - } -} - -function clearMarkers() { - setMapOnAll(null); -} - -function showMarkers() { - setMapOnAll(map); -} - -function deleteMarkers() { - clearMarkers(); - markers = []; -} - -function continueGame() { - var resModal = new bootstrap.Modal(document.getElementById('resultModal')); - resModal.hide(); - location.reload(); -} - -function check() { - var resModal = new bootstrap.Modal(document.getElementById('resultModal')); - resModal.show(); - distance_from_guess = []; - var guess_error = (distance(guess_coordinates[0], guess_coordinates[1], true_location[0], true_location[1], 'M')); - accumulated_distance += parseFloat(guess_error); - distance_from_guess = guess_error; - - var true_coords = { lat: true_location[0], lng: true_location[1] }; - var guess_coords = { lat: guess_coordinates[0], lng: guess_coordinates[1] }; - - - var result_map = new google.maps.Map(document.getElementById('result'), { - zoom: 12, - center: true_coords - }); - - var true_marker = new google.maps.Marker({ - position: true_coords, - map: result_map, - title: 'True Location', - icon: { - url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png" - } - }); - var infoWindow = new google.maps.InfoWindow({ - content: current_name - }) - - true_marker.addListener('click', function () { - infoWindow.open(result_map, true_marker); - }); - - var guess_marker = new google.maps.Marker({ - position: guess_coords, - map: result_map, - title: 'Guessing Location', - icon: { - url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png" - } - }); - - var flightPlanCoordinates = [ - true_coords, guess_coords, - - ]; - var lineSymbol = { - path: 'M 0,-1 0,1', - strokeOpacity: 1, - scale: 2 - }; - - var flightPath = new google.maps.Polyline({ - path: flightPlanCoordinates, - strokeOpacity: 0, - icons: [{ - icon: lineSymbol, - offset: '1', - repeat: '15px' - }], - }); - - flightPath.setMap(result_map); - display_location(); - disableButton('check'); -} - -function distance(lat1, lon1, lat2, lon2, unit) { - if ((lat1 == lat2) && (lon1 == lon2)) { - return 0; - } else { - var radlat1 = Math.PI * lat1 / 180; - var radlat2 = Math.PI * lat2 / 180; - var theta = lon1 - lon2; - var radtheta = Math.PI * theta / 180; - var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); - - if (dist > 1) { - dist = 1; - } - - dist = Math.acos(dist); - dist = dist * 180 / Math.PI; - dist = dist * 60 * 1.1515; - - if (unit == "K") { - dist = dist * 1.609344; - } - - if (unit == "N") { - dist = dist * 0.8684; - } - - // Convert miles to meters - dist = dist * 1609.34; - - return dist.toFixed(1); - } -} - - -function display_location() { - if (distance_from_guess>1000) - document.getElementById("score").innerHTML = "Hmm! Your distance is " + distance_from_guess + "m away."; - else if (distance_from_guess>200) - document.getElementById("score").innerHTML = "Good job! Your distance is " + distance_from_guess + "m away."; - else - document.getElementById("score").innerHTML = "Excellent! Your distance is " + distance_from_guess + "m away."; -} - -function disableButton(id) { - document.getElementById(id).disabled = true; -} - -function enableButton(id) { - document.getElementById(id).disabled = false; -} - - diff --git a/game.html b/game.html new file mode 100644 index 0000000..3137281 --- /dev/null +++ b/game.html @@ -0,0 +1,156 @@ + + + + + + Snake Ethereum - Play Now + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+
+
+

VIGUESSR

+
+
+
+
+ BUY ME A COFFEE +
+
+ +
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 189b202..82f2711 100644 --- a/index.html +++ b/index.html @@ -1,70 +1,128 @@ - - - - - + + + + + Snake Ethereum - Play Now + + + + + +
+
+ +
+
+
- viGuessr - +
+
+

VIGUESSR

+
+
+
+
+ BUY ME A COFFEE +
+
- - +
+ +
+
+ WELCOME TO VI GUESSR +
+ +
+
+
+
+

PLAY NOW

+
+
+
+
+ +
+
+

HOW 2 PLAY

+ +
+

1. Choose your city

+

2. Guess the location of the picture as accurately as possible

+
+
+ +
+ + + + + - - - - - - - - - - - -
-
-
-
-
- -
- -
-
-
-
- - - -
- -
-
+ + +
- - - - + + + \ No newline at end of file diff --git a/logo.png b/logo.png index 730ebe8..1cd3d47 100644 Binary files a/logo.png and b/logo.png differ diff --git a/style.css b/style.css deleted file mode 100644 index e443621..0000000 --- a/style.css +++ /dev/null @@ -1,96 +0,0 @@ -html, body { - height: 100%; - width: 100%; - margin:0 auto; - - } - -#pano { - height: 100%; - width: 100%; - border-top-right-radius: 15px; - border-bottom-right-radius: 15px; - border-top-left-radius: 15px; - border-bottom-left-radius: 15px; - border-left-width: 0px; - } - -#logo { - position: absolute; top: 5px; z-index: 99; - width: 15%; - display: block; - margin-left: auto; - margin-right: auto; - -webkit-filter: drop-shadow(5px 5px 5px #222); - filter: drop-shadow(5px 5px 5px #222); -} - -#qr { - position: absolute; bottom: 5px; z-index: 99; - left: 5px; - width: 5%; - display: block; - margin-left: auto; - margin-right: auto; - -webkit-filter: drop-shadow(5px 5px 5px #222); - filter: drop-shadow(5px 5px 5px #222); -} - -#map { - position: absolute; bottom: 10px; right: 10px; z-index: 99; - width: 25%; - height: 50%; - min-width: 500px; - -} - - - -#infor { - position: absolute; top: 10px; right: 10px; z-index: 10; - width: 25%; - height: 50%; -} - -#check{ - position: absolute; - right: 10px; z-index: 99; - height: 50px; - bottom: 50%; - margin-bottom: 30px; - min-width: 500px; - width: 25%; - height: 50px; - display: block; - font-size: 20; - font-weight: bold; - font-family: "Kode Mono", monospace; - font-optical-sizing: auto; - font-weight: 800; - font-style: normal; -} - -#resultModal { - font-size: 20; - font-weight: bold; - font-family: "Kode Mono", monospace; - font-optical-sizing: auto; - font-weight: 800; - font-style: normal; -} - - -#result{ - height: 200px; - width: 90%; - border-radius: 30px; - border-style: solid; - border-width: 1px; - } - - -#score{ - text-align: center; - font-size: 20; - padding-top: 10px; -} \ No newline at end of file