root/cleargame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

progress

Browse Source
This commit is contained in:
root
2025-07-11 12:56:44 +03:00
parent 71dd328431
commit 0c2ba52a15
7 changed files with 591 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/reviews/_form.blade.php
+113 -85
View File
@@ -1,101 +1,129 @@
@extends('layouts.app')
@csrf
@if(isset($review))
@method('PUT')
@endif
@section('title', isset($review) ? 'Edit Review' : 'Write a Review')
@section('content')
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card bg-dark text-white">
<div class="card-header">
<h4 class="mb-0">{{ isset($review) ? 'Edit Review' : 'Write a Review' }}</h4>
</div>
<div class="card-body">
<form action="{{ isset($review) ? route('reviews.update', $review) : route('games.reviews.store', $game) }}" method="POST">
@csrf
@if(isset($review))
@method('PUT')
@endif
<div class="mb-4">
<label for="rating" class="form-label">Rating</label>
<select name="rating" id="rating" class="star-rating" required>
<option value="">Select a rating</option>
<option value="10" {{ isset($review) && $review->rating == 10 ? 'selected' : '' }}>10 - Masterpiece</option>
<option value="9" {{ isset($review) && $review->rating == 9 ? 'selected' : '' }}>9 - Amazing</option>
<option value="8" {{ isset($review) && $review->rating == 8 ? 'selected' : '' }}>8 - Great</option>
<option value="7" {{ isset($review) && $review->rating == 7 ? 'selected' : '' }}>7 - Good</option>
<option value="6" {{ isset($review) && $review->rating == 6 ? 'selected' : '' }}>6 - Fair</option>
<option value="5" {{ isset($review) && $review->rating == 5 ? 'selected' : '' }}>5 - Average</option>
<option value="4" {{ isset($review) && $review->rating == 4 ? 'selected' : '' }}>4 - Below Average</option>
<option value="3" {{ isset($review) && $review->rating == 3 ? 'selected' : '' }}>3 - Poor</option>
<option value="2" {{ isset($review) && $review->rating == 2 ? 'selected' : '' }}>2 - Bad</option>
<option value="1" {{ isset($review) && $review->rating == 1 ? 'selected' : '' }}>1 - Terrible</option>
</select>
@error('rating')
<div class="text-danger mt-1">{{ $message }}</div>
@enderror
</div>
<div class="mb-4">
<label for="content" class="form-label">Review</label>
<textarea name="content" id="content" class="form-control bg-dark text-white @error('content') is-invalid @enderror" rows="10" required>{{ old('content', $review->content ?? '') }}</textarea>
@error('content')
<div class="text-danger mt-1">{{ $message }}</div>
@enderror
</div>
<div class="mb-4">
<div class="form-check">
<input type="checkbox" name="recommended" id="recommended" class="form-check-input" value="1" {{ isset($review) && $review->recommended ? 'checked' : '' }}>
<label for="recommended" class="form-check-label">I recommend this game</label>
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-gradient">
{{ isset($review) ? 'Update Review' : 'Submit Review' }}
</button>
</div>
</form>
</div>
</div>
<div class="mb-4">
<label for="rating" class="form-label">Rating (1-20)</label>
<div class="interactive-stars mb-2">
<div class="stars-container" id="starsContainer">
@for ($i = 1; $i <= 10; $i++)
<i class="fas fa-star star-icon" data-value="{{ $i }}"></i>
@endfor
</div>
<div class="rating-value-display mt-2">
<span id="ratingValue">{{ isset($review) ? $review->rating : 0 }}</span>/10
</div>
</div>
<input type="hidden" name="rating" id="ratingInput" value="{{ isset($review) ? $review->rating : '' }}" required>
@error('rating')
<div class="text-danger mt-1">{{ $message }}</div>
@enderror
</div>
<div class="mb-4">
<label for="content" class="form-label">Review</label>
<textarea name="content" id="content" class="form-control bg-dark text-white @error('content') is-invalid @enderror" rows="10" required>{{ old('content', $review->content ?? '') }}</textarea>
@error('content')
<div class="text-danger mt-1">{{ $message }}</div>
@enderror
</div>
<div class="mb-4">
<div class="form-check">
<input type="checkbox" name="recommended" id="recommended" class="form-check-input" value="1" {{ isset($review) && $review->recommended ? 'checked' : '' }}>
<label for="recommended" class="form-check-label">I recommend this game</label>
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-gradient">
{{ isset($review) ? 'Update Review' : 'Submit Review' }}
</button>
</div>
@push('styles')
<link href="{{ asset('css/star-rating.css') }}" rel="stylesheet">
<style>
.star-rating {
--gl-star-color: #fdd835;
--gl-star-color-inactive: #dcdce6;
--gl-star-size: 32px;
--gl-tooltip-border-radius: 4px;
--gl-tooltip-font-size: 1rem;
--gl-tooltip-font-weight: 400;
--gl-tooltip-line-height: 1;
--gl-tooltip-margin: 12px;
--gl-tooltip-padding: .5em 1em;
--gl-tooltip-background: rgba(17,17,17, .9);
--gl-tooltip-color: #fff;
.interactive-stars {
text-align: center;
}
.stars-container {
display: inline-flex;
gap: 5px;
}
.star-icon {
font-size: 32px;
color: #dcdce6;
cursor: pointer;
transition: color 0.2s ease;
}
.star-icon.active {
color: #fdd835;
}
.star-icon:hover {
transform: scale(1.1);
}
.rating-value-display {
font-size: 18px;
font-weight: bold;
color: #fdd835;
}
</style>
@endpush
@push('scripts')
<script src="{{ asset('js/star-rating.js') }}"></script>
<script>
var stars = new StarRating('.star-rating', {
classNames: {
active: "gl-active",
base: "gl-star-rating",
selected: "gl-selected",
},
clearable: true,
maxStars: 10,
tooltip: 'Select a Rating'
document.addEventListener('DOMContentLoaded', function() {
const stars = document.querySelectorAll('.star-icon');
const ratingInput = document.getElementById('ratingInput');
const ratingValue = document.getElementById('ratingValue');
// Initialize stars based on existing rating
const initialRating = parseInt(ratingInput.value) || 0;
updateStars(initialRating);
stars.forEach(star => {
// Hover effect
star.addEventListener('mouseenter', function() {
const value = parseInt(this.dataset.value);
highlightStars(value);
});
// Click to set rating
star.addEventListener('click', function() {
const value = parseInt(this.dataset.value);
ratingInput.value = value;
ratingValue.textContent = value;
updateStars(value);
});
});
// Reset to selected rating when mouse leaves the container
document.getElementById('starsContainer').addEventListener('mouseleave', function() {
const selectedRating = parseInt(ratingInput.value) || 0;
updateStars(selectedRating);
});
function highlightStars(value) {
stars.forEach(s => {
const starValue = parseInt(s.dataset.value);
s.classList.toggle('active', starValue <= value);
});
ratingValue.textContent = value;
}
function updateStars(value) {
stars.forEach(s => {
const starValue = parseInt(s.dataset.value);
s.classList.toggle('active', starValue <= value);
});
ratingValue.textContent = value;
}
});
</script>
@endpush
@endsection