hex/game-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
hex
2025-05-19 20:13:39 -07:00
commit 11f14f5048
12 changed files with 1408 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
app/templates/base.html Normal file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Game Twacker{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container">
<h1><i class="fas fa-gamepad"></i> Game Twacker</h1>
<nav>
<ul>
<li><a href="{{ url_for('main.index') }}">My Games</a></li>
<li><a href="{{ url_for('main.search_games') }}">Add New Game</a></li>
</ul>
</nav>
</div>
</header>
<main class="container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="flashes">
{% for category, message in messages %}
<div class="flash flash-{{ category }}">{{ message }}</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</main>
<footer>
<div class="container">
<p>Game data provided by <a href="https://www.igdb.com/" target="_blank">IGDB</a></p>
<p>Made with <span class="heart">♥</span> UwU</p>
</div>
</footer>
<script>
// Close flash messages
document.addEventListener('DOMContentLoaded', function() {
const flashes = document.querySelectorAll('.flash');
flashes.forEach(flash => {
flash.addEventListener('click', function() {
this.style.display = 'none';
});
// Auto-hide after 5 seconds
setTimeout(() => {
flash.style.opacity = '0';
setTimeout(() => {
flash.style.display = 'none';
}, 500);
}, 5000);
});
});
</script>
</body>
</html>

153
app/templates/index.html Normal file
View File

@@ -0,0 +1,153 @@
{% extends 'base.html' %}
{% block title %}My Games ~ Game Twacker{% endblock %}
{% block content %}
<div class="page-header">
<h1>My Pwaying Games</h1>
<p class="subtitle">Twacking {{ games|length }}/5 games</p>
</div>
{% if games %}
<div class="game-cards">
{% for game in games %}
<div class="game-card">
<div class="game-cover">
{% if game.cover_url %}
<img src="{{ game.cover_url }}" alt="{{ game.name }} cover">
{% else %}
<div class="no-cover">
<i class="fas fa-gamepad"></i>
</div>
{% endif %}
</div>
<div class="game-info">
<h2>{{ game.name }}</h2>
<div class="game-meta">
{% if game.developer %}
<span><i class="fas fa-code"></i> {{ game.developer }}</span>
{% endif %}
{% if game.platform %}
<span><i class="fas fa-desktop"></i> {{ game.platform }}</span>
{% endif %}
</div>
<div class="progress-container">
<div class="progress-label">
<span class="status-badge status-{{ game.status|lower }}">{{ game.status }}</span>
<span class="progress-value">{{ game.progress }}%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: {{ game.progress }}%"></div>
</div>
</div>
<details class="game-details">
<summary>Update Pwogwess</summary>
<form action="{{ url_for('main.update_game', game_id=game.id) }}" method="POST" class="update-form">
<div class="form-group">
<label for="status-{{ game.id }}">Status:</label>
<select name="status" id="status-{{ game.id }}">
<option value="Playing" {% if game.status == 'Playing' %}selected{% endif %}>Playing</option>
<option value="Completed" {% if game.status == 'Completed' %}selected{% endif %}>Completed</option>
<option value="On Hold" {% if game.status == 'On Hold' %}selected{% endif %}>On Hold</option>
</select>
</div>
<div class="form-group">
<label for="progress-{{ game.id }}">Pwogwess:</label>
<input type="range" name="progress" id="progress-{{ game.id }}" min="0" max="100" value="{{ game.progress }}" class="progress-slider">
<span class="range-value">{{ game.progress }}%</span>
</div>
<div class="form-group">
<label for="notes-{{ game.id }}">Notes:</label>
<textarea name="notes" id="notes-{{ game.id }}" rows="2">{{ game.notes or '' }}</textarea>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Update</button>
<button type="button" class="btn btn-danger remove-btn" data-toggle="modal" data-target="#remove-modal-{{ game.id }}">
Wemove Game
</button>
</div>
</form>
</details>
</div>
<!-- Remove confirmation modal -->
<div class="modal" id="remove-modal-{{ game.id }}">
<div class="modal-content">
<h3>Wemove Game</h3>
<p>Awe you suwe you want to wemove <strong>{{ game.name }}</strong> from youw twacking wist?</p>
<div class="modal-actions">
<button class="btn btn-secondary close-modal">Cancew</button>
<form action="{{ url_for('main.remove_game', game_id=game.id) }}" method="POST">
<button type="submit" class="btn btn-danger">Wemove</button>
</form>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="empty-state">
<div class="empty-icon">
<i class="fas fa-gamepad"></i>
</div>
<h2>No games being twacked yet~ >w<</h2>
<p>Click the button bewow to seawch and add games to twack!</p>
<a href="{{ url_for('main.search_games') }}" class="btn btn-primary">
<i class="fas fa-plus"></i> Add Youw Fiwst Game
</a>
</div>
{% endif %}
{% if games|length < 5 %}
<div class="add-more">
<a href="{{ url_for('main.search_games') }}" class="btn btn-primary">
<i class="fas fa-plus"></i> Add Anothew Game
</a>
</div>
{% endif %}
<script>
// Handle range sliders
document.addEventListener('DOMContentLoaded', function() {
const sliders = document.querySelectorAll('.progress-slider');
sliders.forEach(slider => {
const valueDisplay = slider.nextElementSibling;
slider.addEventListener('input', function() {
valueDisplay.textContent = this.value + '%';
});
});
// Modal handling
const modals = document.querySelectorAll('.modal');
const removeBtns = document.querySelectorAll('.remove-btn');
const closeBtns = document.querySelectorAll('.close-modal');
removeBtns.forEach((btn, index) => {
btn.addEventListener('click', function() {
modals[index].classList.add('active');
});
});
closeBtns.forEach((btn, index) => {
btn.addEventListener('click', function() {
modals[index].classList.remove('active');
});
});
window.addEventListener('click', function(e) {
modals.forEach(modal => {
if (e.target === modal) {
modal.classList.remove('active');
}
});
});
});
</script>
{% endblock %}

92
app/templates/search.html Normal file
View File

@@ -0,0 +1,92 @@
{% extends 'base.html' %}
{% block title %}Add New Game ~ Game Twacker{% endblock %}
{% block content %}
<div class="page-header">
<h1>Seawch fow Games</h1>
<p class="subtitle">Find and add games to youw twacking wist</p>
</div>
<div class="search-container">
<form action="{{ url_for('main.search_games') }}" method="POST" class="search-form">
<div class="search-input">
<input type="text" name="query" placeholder="Entew game name..." value="{{ query }}" required>
<button type="submit" class="btn btn-primary">
<i class="fas fa-search"></i> Seawch
</button>
</div>
</form>
</div>
{% if results %}
<div class="results-info">
<h2>Seawch Wesuwts</h2>
<p>Found {{ results|length }} games matching "{{ query }}"</p>
</div>
<div class="search-results">
{% for game in results %}
<div class="search-result-card">
<div class="game-cover">
{% if game.cover_url %}
<img src="{{ game.cover_url }}" alt="{{ game.name }} cover">
{% else %}
<div class="no-cover">
<i class="fas fa-gamepad"></i>
</div>
{% endif %}
</div>
<div class="game-info">
<h3>{{ game.name }}</h3>
<div class="game-meta">
{% if game.release_date %}
<span><i class="fas fa-calendar-alt"></i> {{ game.release_date }}</span>
{% endif %}
{% if game.platforms %}
<span><i class="fas fa-desktop"></i>
{% if game.platforms|length > 2 %}
{{ game.platforms[0] }} + {{ game.platforms|length - 1 }} more
{% else %}
{{ game.platforms|join(', ') }}
{% endif %}
</span>
{% endif %}
{% if game.developer %}
<span><i class="fas fa-code"></i> {{ game.developer }}</span>
{% endif %}
</div>
{% if game.description %}
<div class="game-description">
<p>{{ game.description|truncate(150) }}</p>
</div>
{% endif %}
<div class="search-actions">
<form action="{{ url_for('main.add_game', igdb_id=game.id) }}" method="POST">
<button type="submit" class="btn btn-primary">
<i class="fas fa-plus"></i> Add to My Games
</button>
</form>
</div>
</div>
</div>
{% endfor %}
</div>
{% elif query %}
<div class="empty-search">
<div class="empty-icon">
<i class="fas fa-search"></i>
</div>
<h2>No games found~ (◕︵◕)</h2>
<p>We couldn't find any games matching "{{ query }}"</p>
<p>Twy a diffewent seawch tewm!</p>
</div>
{% endif %}
{% endblock %}