✨Personalize profiles with 2bttns and Next.js

npm install @2bttns/2bttns-cli

2bttns-cli new 

docker-compose exec twobttns 2bttns-cli admin create

const fetch = require('node-fetch');

const url = 'http://localhost:3262';
const endpoint = '/api/authentication/token';
const params = {
    app_id: 'your-app-id',
    secret: 'your-secret-value' 
};

fetch(`${url+endpoint}?app_id=${params.app_id}&secret=${encodeURIComponent(params.secret)}`, {
    method: 'GET' 
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

import React, { useState } from 'react';

function Signup() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const getGameUrl = async () => {
    const queryParams = new URLSearchParams({
      app_id: 'example-app',
      secret: 'my-secret-value',
      game_id: 'hobbies-ranker',
      player_id: username, // assuming username is used as player_id
      callback_url: encodeURIComponent('http://localhost:3000/profile')
    });
    const requestUrl = `http://localhost:3262/api/authentication/generatePlayURL?${queryParams.toString()}`;

    try {
      const response = await fetch(requestUrl, {
          headers: {
            'Authorization': `Bearer ${process.env.BEARER_TOKEN}`
          }
        });
      const data = await response.json();
      if (data.gameUrl) {
        window.location.href = data.gameUrl; // Redirect
      } else {
        console.error('Game URL not found.');
      }
    } catch (error) {
      console.error('Failed to fetch game URL:', error);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      alert("Passwords don't match");
      return;
    }
    // Assuming signup logic is successful
    console.log('Submitting', { username, password });

    // Call getGameUrl to redirect user to their game instance
    getGameUrl();
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', flexDirection: 'column' }}>
      <h1>Create a new account</h1>
      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
        <div>
          <label>Username:</label>
          <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} required />
        </div>
        <div>
          <label>Password:</label>
          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
        </div>
        <div>
          <label>Confirm Password:</label>
          <input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} required />
        </div>
        <button type="submit">Sign Up</button>
      </form>
    </div>
  );
}

export default Signup;

import React, { useState, useEffect } from 'react';

function PlayerScores({ player_id }) {
  const [scores, setScores] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchScores = async () => {
      try {
        const response = await fetch(`http://localhost:3262/api/games/getPlayerScores?game_id=hobbies-ranker&player_id=${player_id}&include_game_objects=true`, {
          headers: {
            'Authorization': `Bearer ${process.env.BEARER_TOKEN}`
          }
        });
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const jsonResponse = await response.json();
        // Sort scores and then take the top 10
        const sortedScores = jsonResponse.scores
          .sort((a, b) => b.score - a.score)
          .slice(0, 10); // Take only the top 10 scores
        setScores(sortedScores);
      } catch (error) {
        setError(`Failed to fetch scores: ${error.message}`);
      } finally {
        setIsLoading(false);
      }
    };

    if (player_id) {
      fetchScores();
    } else {
      setIsLoading(false);
    }
  }, [player_id]); 

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h2>Player Scores</h2>
      <div style={{ padding: '10px' }}>
        {scores && scores.length > 0 ? (
          scores.map((score, index) => (
            <div key={index} style={{ marginBottom: '10px' }}>
              <div style={{ fontWeight: 'bold' }}>{score.gameObject ? score.gameObject.name : 'Unknown Game'}</div>
              <div style={{
                width: `${(score.score / 1) * 100}%`, // Adjust if necessary based on score range
                backgroundColor: 'royalblue',
                color: 'white',
                textAlign: 'right',
                padding: '5px',
                borderRadius: '5px',
                maxWidth: '100%'
              }}>
                {score.score.toFixed(2)}
              </div>
            </div>
          ))
        ) : (
          <div>No scores available</div>
        )}
      </div>
    </div>
  );
}

export default PlayerScores;

import React from 'react';
import PlayerScores from './components/results/results.js'

function Profile() {

  return (
    <div style={{
      paddingTop: "75px",
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '100vh',
      width: '100vw', // Ensure the div takes full width
      position: 'fixed', // Keep the div fixed during scrolling
      top: '0', // Align to the top
      left: '0', // Align to the left
      flexDirection: 'column',
      textAlign: 'center',
      overflowY: 'scroll', // Enable scrolling within the div if content overflows
    }}>
      <h1>Welcome to your profile!</h1>
      <br/>
      <PlayerScores player_id={"some-player-id"} />
    </div>
  );
}

export default Profile;