स्टैटिक चेस (Static Chess) गेम

 (val.town)
1 पॉइंट द्वारा GN⁺ 2024-05-14 | 1 टिप्पणियां | WhatsApp पर शेयर करें

Static Chess इम्प्लीमेंटेशन

  • साधारण, और सिर्फ़ ज़रूरी फीचर्स वाला chess इम्प्लीमेंटेशन
  • सभी पेज केवल HTML और CSS से बने हैं
  • chess की हर चाल लिंक पर क्लिक करके की जाती है
  • दोस्त को लिंक भेजें, फिर सामने वाला चाल चले और वापस लिंक भेजे — खेल इसी तरह आगे बढ़ता है
  • गैर-ज़रूरी animation या चमकदार interactive elements gameplay में बाधा नहीं डालते
  • यह जानने की जिज्ञासा है कि Google इस साइट को index करते समय क्या chess की सभी संभावित चालों की गणना कर पाएगा

फीचर सीमाएँ और बग

  • फीचर्स बहुत सीमित हैं और हो सकता है कि यह ठीक से काम न करे
  • अगर कोई bug मिले तो कृपया रिपोर्ट करें

प्रेरणा देने वाला आइडिया

  • tic-tac-toe गेम की सभी संभावित अवस्थाएँ दिखाने वाली साइट पर हुई Hacker News चर्चा से प्रेरणा मिली

आगे की योजना

  • इसे बढ़ाकर वास्तविक gameplay को सपोर्ट करने की योजना है
  • लगता है कि यह दोस्तों के साथ लंबा chess game खेलने के लिए एक simple interface बन सकता है
  • static AI के खिलाफ खेलने की सुविधा जोड़ना भी मज़ेदार हो सकता है
  • अगर कोई फीचर है जो आप जोड़ना चाहते हैं, तो PR स्वागत योग्य है

मुख्य कोड

class StaticChess { 
  // 생략...
  async fetch(req: Request): Promise<Response> {
    const gameInfo = parseURL(req.url); 
    if (gameInfo === undefined) {
      return new Response("Not Found", { status: 404, headers: { "cache-control": "max-age=86400, public" } }); 
    }
    const game = new Game(gameInfo.game, gameInfo.selected);
    return new Response(
      renderToString(
        <html>
          {/* 생략... */}
          <div className="board">
            {this.rows.map(row => (
              <div key={row} className="row">{this.squares.map(square => game.squareContent(row, square))}</div>
            ))}
          </div>
          {/* 생략... */}
        </html>
      ),
      { headers: { "content-type": "text/html", "cache-control": "max-age=86400, public" } },
    );
  }
}

class Game {
  // 생략... 
  squareContent(row: number, square: number) {
    // 생략...
    const squareContent = (() => {
      if (this.selectable.includes(pos)) { 
        return <a href={`/${this.fen}/${pos}`}>{pieces[this.board[row][square]?.type]}</a>;
      }
      const nextMove = this.nextMoves[pos];
      if (nextMove !== undefined) {
        return (
          <a href={`/${nextMove.after.replaceAll(" ", "_")}/`}>
            {pieces[this.board[row][square]?.type]} 
          </a>
        );
      }
      return <span>{pieces[this.board[row][square]?.type]}</span>;
    })();
    // 생략...
  }
}

GN⁺ की राय

  • HTML/CSS मात्र से web chess game बनाना एक दिलचस्प प्रयास है। लेकिन हर state को static page बनाना व्यावहारिकता के लिहाज़ से सवाल खड़े करता है।
  • वास्तविक उपयोगिता को देखें तो अंततः state को backend में manage करना और frontend से API call करना ज़्यादा उपयुक्त लगेगा।
  • static pages के रूप में सभी states को पहले से calculate करके रखना आइडिया के तौर पर मज़ेदार है, लेकिन वास्तविक users के लिए इसका बड़ा अर्थ नहीं दिखता।
  • React के साथ SSR करना ठीक तरीका है, लेकिन caching या prefetching जैसी चीज़ों से performance सुधारने की काफ़ी गुंजाइश दिखती है।
  • मिलते-जुलते open source projects में lichess शामिल है। यह भरपूर फीचर्स और शानदार UI देता है, इसलिए इसे संदर्भ के तौर पर देखा जा सकता है।
  • chess engine के साथ जोड़कर AI mode सपोर्ट करना हो तो WASM के उपयोग पर भी विचार किया जा सकता है।

संबंधित पढ़ाई

  • Click (2016)
    1 पॉइंट · 1 टिप्पणियां · 3 시간 전
  • CSS Minecraft
    26 पॉइंट · 7 टिप्पणियां · 2025-05-27

1 टिप्पणियां

 
GN⁺ 2024-05-14
Hacker News की राय
  • URL में FEN जोड़कर Chess960 (Fischer Random Chess) या अन्य "custom starting position" variants खेले जा सकते हैं। स्पेस को underscore से बदलना होगा।
  • यह valid moves को detect करता है, लेकिन checkmate को पहचान नहीं पाता।
    • example URL में इसे checkmate के रूप में दिखाया जाना चाहिए।
  • एक दूसरे URL example में checkmate तक सफलतापूर्वक पहुँचा गया।
  • CDN (जैसे Cloudflare) का उपयोग करके cache hit rate जाँचने का सुझाव दिया गया।
  • मज़ाक में कहा गया कि उम्मीद थी यह ऐसा chess variant होगा जिसमें मोहरों को बिल्कुल हिलाया ही न जा सके।
  • यह एक static web page है और chess का बहुत minimal implementation है, फिर भी हैरानी की बात है कि इसमें latency है।
  • 2006 में Python सीखने के लिए Reversi board game के साथ लगभग यही चीज़ implement की थी। प्रतिद्वंद्वी एक साधारण minimax search-आधारित AI था। उस समय JavaScript के बिना सारी state को URL में डालना ज़्यादा स्पष्ट तरीका था।
  • FEN के अलावा, piece-wise move history शामिल करना भी अच्छा होगा। example URL दिया गया है।
  • sitemap न होने की वजह से सभी संभावित chess states की सूची नहीं मिल सकी।
  • इस project के जरिए https://fav.farm और https://val.town जैसे उपयोगी resources के बारे में पता चला।