jshiffer/wordle-xdc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

responsive board size

Browse Source
This commit is contained in:
Evan You 2022-01-24 00:21:52 +08:00
parent b16eb033be
commit 271807f600
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/Game.vue
View File

@ -4,6 +4,7 @@ import { answers, allWords } from './words'
import Keyboard from './Keyboard.vue' import Keyboard from './Keyboard.vue'
import { LetterState } from './types' import { LetterState } from './types'
// get word of the day
const now = new Date() const now = new Date()
const start = new Date(2022, 0, 0) const start = new Date(2022, 0, 0)
const diff = Number(now) - Number(start) const diff = Number(now) - Number(start)
@ -13,6 +14,7 @@ while (day > answers.length) {
} }
const answer = answers[day] const answer = answers[day]
// board state
class Tile { class Tile {
letter = '' letter = ''
state = LetterState.INITIAL state = LetterState.INITIAL
@ -33,15 +35,14 @@ const currentRow = $computed(() => board[currentRowIndex])
// keep track of revealed letter state for the keyboard // keep track of revealed letter state for the keyboard
const letterStates: Record<string, LetterState> = $ref({}) const letterStates: Record<string, LetterState> = $ref({})
const onKeyup = (e: KeyboardEvent) => onKey(e.key)
window.addEventListener('keyup', onKeyup) window.addEventListener('keyup', onKeyup)
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('keyup', onKeyup) window.removeEventListener('keyup', onKeyup)
}) })
function onKeyup(e: KeyboardEvent) {
onKey(e.key)
}
function onKey(key: string) { function onKey(key: string) {
if (!allowInput) return if (!allowInput) return
if (/^[a-z]$/.test(key)) { if (/^[a-z]$/.test(key)) {
@ -197,8 +198,9 @@ function shake() {
grid-gap: 5px; grid-gap: 5px;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
width: 350px; --height: min(420px, calc(var(--vh, 100vh) - 320px));
height: 420px; height: var(--height);
width: min(350px, calc(var(--height) / 6 * 5));
margin: 0px auto; margin: 0px auto;
} }
.message { .message {
@ -231,6 +233,11 @@ function shake() {
user-select: none; user-select: none;
position: relative; position: relative;
} }
@media (max-height: 680px) {
.tile {
font-size: 3vh;
}
}
.tile .front, .tile .front,
.tile .back { .tile .back {
box-sizing: border-box; box-sizing: border-box;

10
src/main.ts
View File

@ -2,4 +2,14 @@ import { createApp } from 'vue'
import Game from './Game.vue' import Game from './Game.vue'
import './game.css' import './game.css'
// resize for scaling the board size
window.addEventListener('resize', onResize)
// set size on startup
onResize()
function onResize() {
// get actual vh on mobile
document.body.style.setProperty('--vh', window.innerHeight + 'px')
}
createApp(Game).mount('#app') createApp(Game).mount('#app')