Basic game stub

This commit is contained in:
Anthony Mineo 2020-04-10 16:32:05 -04:00
parent 5394982541
commit a57800e3a4
5 changed files with 84 additions and 54 deletions

View file

@ -6,12 +6,13 @@ class GameController {
// /games
async index({ inertia }) {
const pageTitle = "Last 1000 Games"
const pageTitle = "Last 1000 Games";
const gamesQry = await Database.table('games')
.distinct('game_id',
'map',
'gametype',
// 'stats',
'stats',
'datestamp')
.where('game_id', '<>', 0)
.orderBy('game_id', 'desc')
@ -27,13 +28,14 @@ class GameController {
}
}, []);
// move the 0 score display logic here
return inertia.render('Games/Main', { pageTitle, games }, { edgeVar: 'server-variable' })
}
// game/:game_id
async game({ inertia, request }) {
const gameInfo = await Database.from('games')
.distinct('game_id',
'map',
@ -43,9 +45,11 @@ class GameController {
'stats',
'datestamp')
.where({ game_id: request.params.game_id })
const pageTitle = {
name: gameInfo[0]['map'],
gametype: gameInfo[0]['gametype']
}
const pageTitle = gameInfo[0]['map']
return inertia.render('Games/Game', { pageTitle, gameInfo }, { edgeVar: 'server-variable' })
}

View file

@ -7,6 +7,7 @@ const FrameHeading = (props) => {
<h1 className="text-lg leading-6 font-semibold text-gray-900">
{props.heading}
</h1>
{ props.gametype ? props.gametype : ''}
</div>
</header>
);

View file

@ -41,7 +41,7 @@ const renderActiveShape = (props) => {
/>
<path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none"/>
<circle cx={ex} cy={ey} r={2} fill={fill} stroke="none"/>
<text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`${value} points`}</text>
<text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`${value}`}</text>
<text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="#999">
{`(${(percent * 100).toFixed(2)}%)`}
</text>
@ -63,7 +63,6 @@ export class TwoLevelPieChart extends PureComponent {
};
render() {
console.log(this.state.data);
return (
<PieChart width={400} height={400}>
<Pie
@ -77,6 +76,7 @@ export class TwoLevelPieChart extends PureComponent {
fill="#ccc"
dataKey="value"
onMouseEnter={this.onPieEnter}
className="text-xs"
/>
</PieChart>
);
@ -85,26 +85,27 @@ export class TwoLevelPieChart extends PureComponent {
const PlayerRow = (player, index) => {
// dont show scoreless players
if (Number(player.stats.score) <= 0){return}
return <li key={index}>
<InertiaLink href={`/player/${player.player_guid}`} className="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out">
<div className="flex items-center px-4 py-4 sm:px-6">
<div className="min-w-0 flex-1 flex items-center">
<div className="min-w-0 flex-1 md:grid md:grid-cols-2 md:gap-4">
<div>
<div className="text-sm leading-5 font-medium text-indigo-600 truncate">{player.player_name}</div>
<div className="mt-2 flex items-center text-sm leading-5 text-gray-500">
<span className="truncate">Last Active:</span>
return <div className="flex flex-col rounded-lg shadow-lg overflow-hidden" key={index}>
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<div className="px-4 py-5 border-b border-gray-200 sm:px-6">
<h3 className="text-lg leading-6 font-medium">
<InertiaLink href={`/player/${player.player_guid}`} className="text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">{player.player_name}</InertiaLink>
</h3>
</div>
</div>
<div className="hidden md:block">
<div>
<div className="text-sm leading-5 text-gray-900">
<dl>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm leading-5 font-medium text-gray-500">
Total Score
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{player.stats.score}
</dd>
</div>
<div className="mt-2 flex items-center">
<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-gray-100 text-gray-800">{player.stats.score}</span>
<div className="bg-gray-50">
{
(player.gametype == "CTFGame" || player.gametype == "SCtFGame") ? <TwoLevelPieChart data={{
oScore: Number(player.stats.offenseScore[0]),
@ -113,36 +114,57 @@ const PlayerRow = (player, index) => {
: ''
}
</div>
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm leading-5 font-medium text-gray-500">
Kills / Assists
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{player.stats.kills} / {player.stats.assist}
</dd>
</div>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm leading-5 font-medium text-gray-500">
MAs
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{player.stats.totalMA}
</dd>
</div>
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm leading-5 font-medium text-gray-500">
Flag Grabs / Caps
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{player.stats.flagGrabs} / {player.stats.flagCaps}
</dd>
</div>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm leading-5 font-medium text-gray-500">
Flag Defends / Carrier Kills / Returns
</dt>
<dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{player.stats.flagDefends} / {player.stats.carrierKills} / {player.stats.flagReturns}
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
<div>
<svg className="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd"/>
</svg>
</div>
</div>
</InertiaLink>
</li>;
</div>;
}
export default function Game(props) {
return (
<Layout title={props.pageTitle}>
<Layout title={props.pageTitle.name} gametype={props.pageTitle.gametype}>
<div className="bg-white shadow overflow-hidden sm:rounded-md">
<ul>
<div className="mt-2 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
{ props.gameInfo.map((game, index) => PlayerRow(game, index)) }
</ul>
</div>
{/*
<div className="bg-white shadow overflow-hidden sm:rounded-md">
<div className="py-10 px-10"><code> {JSON.stringify(props.gameInfo)}</code></div>
</div>
</div> */}
</Layout>
)
}

View file

@ -6,6 +6,9 @@ import Layout from '@/Shared/Layout'
const GameRow = (game, index) => {
// TODO: move this into controller for faster render
if (Number(game.stats.score) === 0){return}
return <li key={index}>
<InertiaLink href={`/game/${game.game_id}`} className="block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out">
<div className="flex items-center px-4 py-4 sm:px-6">

View file

@ -3,7 +3,7 @@ import React, { useEffect } from 'react'
import TopNav from '../Components/TopNav';
import FrameHeading from '../Components/FrameHeading'
export default function Layout({ title, children }) {
export default function Layout({ title, gametype, children }) {
useEffect(() => {
document.title = title;
}, [title])
@ -11,7 +11,7 @@ export default function Layout({ title, children }) {
return (
<>
<TopNav />
<FrameHeading heading={title} />
<FrameHeading heading={title} gametype={gametype} />
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<div className="px-4 py-4 sm:px-0">
{ children }