Hugging Face's logo

Spaces:
shon98
/
PyCatan-AI
Configuration error

App Files Community
PyCatan-AI
File size: 5,228 Bytes
c903325
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81eb3d4
c903325
 
 
 
81eb3d4
c903325
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Catan - Game Simulation</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="game-container">
        <!-- Header -->
        <div class="game-header">
            <h1>🎲 Catan - Game Simulation</h1>
            <p class="subtitle">Settlers of Catan - Web Visualization</p>
        </div>
        
        <div class="content-wrapper">
            <!-- Left Sidebar - Game Info -->
            <aside class="sidebar sidebar-left">
                <div id="game-info" class="game-info">
                    <h3>📋 Game Info</h3>
                    <div class="loading">Loading...</div>
                </div>
            </aside>
            
            <!-- Center - Board -->
            <main class="board-wrapper">
                <!-- Board Container -->
                <div class="board-container" id="boardContainer">
                    <!-- Board Controls -->
                    <div class="board-controls">
                        <button onclick="zoomIn()" class="control-btn" title="Zoom In">🔍+</button>
                        <button onclick="zoomOut()" class="control-btn" title="Zoom Out">🔍−</button>
                        <button onclick="resetZoom()" class="control-btn" title="Reset View">⌂</button>
                        <button id="toggleVertices" onclick="toggleVertices()" class="control-btn" title="Show Vertices">📍</button>
                        <button id="toggleInfo" onclick="toggleBuildingCosts()" class="control-btn" title="Building Costs">ℹ️</button>
                    </div>
                    
                    <!-- Game Board -->
                    <svg id="catan-board" width="100%" height="100%">
                        <!-- Hexes and game elements will be added here by JavaScript -->
                    </svg>
                    
                    <!-- Building Costs Modal -->
                    <div id="buildingCostsModal" class="modal hidden">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h3>Building Costs</h3>
                                <button class="modal-close" onclick="toggleBuildingCosts()">✕</button>
                            </div>
                            <div class="modal-body">
                                <table class="costs-table">
                                    <thead>
                                        <tr>
                                            <th>Building</th>
                                            <th>Resources Required</th>
                                            <th>VP</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Road</td>
                                            <td>1 Brick + 1 Wood</td>
                                            <td>—</td>
                                        </tr>
                                        <tr>
                                            <td>Settlement</td>
                                            <td>1 Brick + 1 Wood + 1 Wheat + 1 Sheep</td>
                                            <td>1</td>
                                        </tr>
                                        <tr>
                                            <td>City</td>
                                            <td>3 Ore + 2 Wheat</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <td>Dev Card</td>
                                            <td>1 Ore + 1 Sheep + 1 Wheat</td>
                                            <td>1*</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <p class="costs-note">* VP awarded only for Victory Point dev cards</p>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
            
            <!-- Right Sidebar - Action Log -->
            <aside class="sidebar sidebar-right">
                <div class="log-header">
                    <h3>📜 Action Log</h3>
                    <button class="clear-log-btn" onclick="clearActionLog()" title="Clear Log">🗑️</button>
                </div>
                <div id="action-log" class="action-log">
                    <div class="info">Waiting for updates...</div>
                </div>
            </aside>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/gameData.js') }}"></script>
    <script src="{{ url_for('static', filename='js/board.js') }}"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>