moritzruth/twenty-one
1
0
Fork 0
Code Issues Pull requests Packages 1 Activity Actions

Fix issues and make it mobile-friendly

Browse source
This commit is contained in:
Moritz Ruth 2023-04-28 19:16:09 +02:00
parent d1482a2894
commit 2e6f9fb845
Signed by: moritzruth
GPG key ID: C9BBAB79405EE56D
7 changed files with 18 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
README.md
View file

@ -1,3 +1,4 @@
# TwentyOne
- return-opponent sollte am anfang nicht gehen
- krone und indikator überlagern
## Known issues
- return-opponent should not be allowed in the first round

2
src/components/BigButton.vue
View file

@ -1,6 +1,6 @@
<template>
<button
class="py-5 px-15 font-fat text-5xl rounded-md shadow-lg text-center"
class="py-5 px-8 md:px-15 font-fat text-4xl md:text-5xl rounded-md shadow-lg text-center"
:class="$style.root"
:disabled="disabled"
>

4
src/components/Game.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="flex gap-15 justify-center">
<div class="flex -md:flex-col gap-15 justify-center">
<div>
<div class="font-bold text-lg pb-2 pl-2">Active special cards</div>
<div class="p-4 border border-dark-200 rounded-xl flex flex-col gap-5 flex-wrap w-full">
@ -17,7 +17,7 @@
/>
</div>
</div>
<div class="flex flex-col gap-14 max-w-1200px flex-grow">
<div class="flex flex-col gap-14 max-w-1200px flex-grow -md:pl-3 pb-5">
<PlayerCards v-for="playerId in reorderedPlayerIds" :key="playerId" :player-id="playerId"/>
<div class="flex gap-5 justify-end items-center transform transition ease duration-500">
<template v-if="game.state.phase === 'end'">

6
src/components/JoinScreen.vue
View file

@ -1,8 +1,8 @@
<template>
<div class="flex flex-col h-full justify-center items-center gap-8 text-8xl">
<div class="flex flex-col h-full justify-center items-center gap-8 text-7xl md:text-8xl">
<input
v-model="lobbyCodeInput"
class="uppercase bg-transparent text-white text-center font-fat tracking-wider focus:outline-none pb-2 rounded-lg transition"
class="uppercase tracking-wider bg-transparent text-white text-center font-fat focus:outline-none pb-2 rounded-lg transition"
:class="isUnknown ? 'bg-red-800' : ''"
:maxlength="LOBBY_CODE_LENGTH"
:placeholder="'X'.repeat(LOBBY_CODE_LENGTH)"
@ -10,7 +10,7 @@
@keypress="onKeypress"
/>
<button
class="uppercase font-bold text-4xl border border-white rounded-md bg-white bg-opacity-0 transition px-10 py-4"
class="font-bold text-4xl border border-white rounded-md bg-white bg-opacity-0 transition px-10 py-4"
:class="$style.button"
:disabled="lobbyCodeInput.length !== LOBBY_CODE_LENGTH"
@click="join()"

6
src/components/LoginScreen.vue
View file

@ -1,13 +1,13 @@
<template>
<div class="flex flex-col h-full justify-center items-center gap-8 text-8xl">
<div class="flex flex-col h-full justify-center items-center gap-8 text-4xl md:text-8xl">
<input
v-model="usernameInput"
class="bg-transparent text-white text-center font-fat focus:outline-none"
class="bg-transparent text-white text-center font-fat w-full focus:outline-none"
placeholder="Username"
maxlength="20"
/>
<button
class="uppercase font-bold text-4xl border border-white rounded-md bg-white bg-opacity-0 transition px-10 py-4"
class="font-bold text-2xl md:text-4xl border border-white rounded-md bg-white bg-opacity-0 transition px-10 py-4"
:class="$style.button"
:disabled="usernameInput.length <= 0 || usernameInput.length > 20"
@click="submit()"

6
src/components/PlayerCards.vue
View file

@ -1,17 +1,17 @@
<template>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-6">
<div class="font-fat text-2xl relative">
{{ playerState.name }}
<template v-if="isYou">(You)</template>
<span
class="text-3xl absolute -top-0.5 -left-13 transition"
class="text-3xl absolute -top-0.5 -left-11 transition"
:class="game.state.winnerIds?.includes(playerState.id) ? '' : 'opacity-0'"
>
<CrownIcon/>
</span>
<span
class="text-2xl absolute top-0.5 -left-10 transition"
:class="game.state.activePlayerId === playerState.id ? '' : 'opacity-0'"
:class="game.state.phase !== 'end' && game.state.activePlayerId === playerState.id ? '' : 'opacity-0'"
>
<DotsThreeOutlineIcon/>
</span>

6
src/components/PreStartScreen.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="flex flex-col h-full items-center pt-10 gap-8 text-8xl">
<div class="font-fat text-5xl">Code: <span class="select-all">{{ game.lobbyCode }}</span></div>
<div class="font-bold text-3xl">Players: {{ naturallyJoinEnumeration(game.state.players.map(p => p.name)) }}</div>
<div class="flex flex-col h-full items-center pt-10 gap-8">
<div class="font-fat text-4xl md:text-5xl">Code: <span class="select-all">{{ game.lobbyCode }}</span></div>
<div class="font-bold text-2xl md:text-3xl">Players: {{ naturallyJoinEnumeration(game.state.players.map(p => p.name)) }}</div>
<BigButton
v-if="game.isOwnGame"
class="bg-gradient-to-br from-gray-600 to-gray-800"