I’m working on building a score app for playing straight pool as a Laravel app. So far I’m able to count a players score for a single rack. However, there are still a few things I’d like to do that I’ve not learned yet.
- I’d like the current rack count to stop at 1 (no negative numbers) which activates the re-rack button and resets the current rack score back to 0.
- Each time re-rack is pressed I would like the score to add be added to whatever total is at the bottom. So if the players play a race to 100 balls I would want it to keep up with it as they go.
Currently I’m counting in 3 locations (lines 31 & 32, 58 & 60, 65 & 66). Some how I need to figure out how to add lines 58 & 60 to 65 & 66 each time the player presses re-rack in order to keep a cumulative score. I’m stuck on how to figure that out and how it ties together with the re-rack button.
Could someone provide some guidance on how I might tackle the items above? I also may not being doing this in the most efficient way and open to a better approach with using AlpineJS.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>14-1</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="font-sans text-white bg-gray-900 max-w-3xl mx-auto">
<div
x-data="{
countPlayerOne: 0,
countPlayerTwo: 0,
startCount: 15,
}"
class="container text-center items-center">
<div class="grid grid-cols-2">
<div class="text-5xl border border-yellow-500 p-4">Sam</div>
<div class="text-5xl border border-yellow-500 p-4">Alan</div>
</div>
<div class="text-3xl mt-4">Pocketed This Rack</div>
<div class="grid grid-cols-2 text-8xl pt-4">
<div x-text="countPlayerOne" class="border border-yellow-500 gap-4"></div>
<div x-text="countPlayerTwo" class="border border-yellow-500 gap-4"></div>
</div>
<div class="grid grid-cols-4 text-5xl pt-4">
<button @click="countPlayerOne--" class="border border-yellow-500 p-4">-</button>
<button @click="countPlayerOne++" class="border border-yellow-500 p-4">+</button>
<button @click="countPlayerTwo--" class="border border-yellow-500 p-4">-</button>
<button @click="countPlayerTwo++" class="border border-yellow-500 p-4">+</button>
</div>
<div class="grid grid-cols-2 text-5xl pt-4">
<div class="border border-yellow-500 p-4">Foul</div>
<div class="border border-yellow-500 p-4">Foul</div>
</div>
<div class="text-3xl mt-4">Balls Remaining on Table:</div>
<div x-text="startCount - countPlayerOne - countPlayerTwo" class="text-8xl pt-4"></div>
<div class="grid grid-cols-1 text-5xl mt-4">
<button @click="countPlayerOne = 0" class="bg-green-500 p-4">ReRack</button>
</div>
<div class="grid grid-cols-3 text-4xl mt-4">
<div x-text="countPlayerOne"></div>
<div>Prior Rack Total</div>
<div x-text="countPlayerTwo"></div>
</div>
<div class="grid grid-cols-2 text-8xl pt-4">
<div x-text="countPlayerOne" class="border border-yellow-500 gap-4"></div>
<div x-text="countPlayerTwo" class="border border-yellow-500 gap-4"></div>
</div>
<div class="grid grid-cols-4 text-5xl pt-4">
<button @click="" class="border border-yellow-500 p-4">-</button>
<button @click="" class="border border-yellow-500 p-4">+</button>
<button @click="" class="border border-yellow-500 p-4">-</button>
<button @click="" class="border border-yellow-500 p-4">+</button>
</div>
<div class="grid grid-cols-1 text-5xl mt-4">
<button class="bg-green-500 p-4">New Game</button>
</div>
</div>
</body>
</html>